Responsive demo page

Developer
Brian
Size
5,664 Kb
Views
14,168
  1. Responsive demo page Previews
  2. Responsive demo page HTML Codes
  3. Responsive demo page CSS Codes
  4. Responsive demo page JS Codes

How do I make an responsive demo page?

This is a quick demo page, Using mostly HTML & CSS, media queries will respond to screen width and alter the layout. The header / footer are sticky and will stay at the top / bottom of the page. . What is a responsive demo page? How do you make a responsive demo page? This script and codes were developed by Brian on 22 November 2022, Tuesday.

Responsive demo page Previews
IQ Test

Responsive demo page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive demo page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- **NOTE** Codepen erros with html not meant for the <body>, left below bit in as an example but commented it out.
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A Sample Page</title> <link rel="stylesheet" href="css/main.css"> </head>-->
<body> <div class="global-wrapper"> <header> <h1><span>Lorem</span> Ipsum:</h1> <nav> <div class="menu">menu</div> <ul class="nav-links"> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> </ul> </nav> </header> <main> <section> <div class="copy"> <img src="http://placebear.com/50/50" alt="" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat laboriosam blanditiis sunt pariatur nam magni ut voluptates nulla natus voluptatibus unde aut omnis rerum cumque quibusdam. Dignissimos quidem incidunt nostrum dolore assumenda omnis qui voluptas vero at placeat voluptatem eaque!</p> </div> <div class="feature-img"></div> <div class="copy block2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et expedita ullam voluptates inventore repudiandae fuga est quis reprehenderit debitis beatae aliquid aspernatur porro ex pariatur quod molestias natus. Explicabo maxime</p> <p> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> </p> <p>nam placeat asperiores porro modi praesentium qui laborum numquam fugit consequatur voluptatibus. Assumenda ut eligendi quis earum culpa vitae laborum neque saepe sed quam quas expedita minima sequi ea hic debitis nobis omnis quos beatae esse illo autem velit sapiente et veniam natus qui. Nulla!</p> </div> </section> </main> <footer> <ul class="footer-links"> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> </ul> </footer> </div>
<!-- JS goes here on a real page: <script src="js/main.js"></script> -->
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive demo page - Script Codes CSS Codes

html,
body,
.global-wrapper { height: 100%;
}
body { background: #E3E3E3; font-family: arial, helvetica, sans-serif; overflow-x: hidden;
}
.global-wrapper { position: relative;
}
.global-wrapper a { color: #5A5A5A;
}
.global-wrapper a:hover { color: black;
}
.global-wrapper header { width: 100%; height: 45px; position: absolute; top: 0; background: #fff;
}
.global-wrapper header:before { content: ""; display: block; float: left; height: 45px; background: #fff; margin: 0 -500%; padding: 0 500%; box-shadow: 0 5px 5px 0 rgba(50, 50, 50, 0.4);
}
.global-wrapper header h1 { margin: 8px 0 0 10px; font-weight: 800; font-size: 1.5em;
}
.global-wrapper header h1 span { color: #CF7C00; text-decoration: underline;
}
.global-wrapper header .menu { position: absolute; right: 10px; top: 8px; text-transform: uppercase; font-size: 20px; font-weight: 800; cursor: pointer; border: 1px solid black; padding: 4px; -webkit-transition: .2s; transition: .2s;
}
.global-wrapper header .menu:after { content: "+"; margin-left: 5px;
}
.global-wrapper header .menu:hover { color: #CF7C00; border-color: #CF7C00;
}
.global-wrapper header .menu-active { color: #CF7C00; border-color: #CF7C00;
}
.global-wrapper header .menu-active:after { content: "\02C5";
}
.global-wrapper header .nav-links { display: none; position: absolute; top: 45px; width: 100%; background: #D4D4D4; text-align: center; box-shadow: 0 5px 5px 0 rgba(50, 50, 50, 0.4); border-bottom: 2px solid white;
}
.global-wrapper header .nav-links li a { display: inline-block; width: 100%; font-weight: 800; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid black; padding: 10px 0; -webkit-transition: .2s; transition: .2s;
}
.global-wrapper header .nav-links li a:hover { background: white;
}
.global-wrapper header .nav-links li:last-child a { border-bottom: 0;
}
.global-wrapper main { background: #A3C8DA; /* height: 100%; */ /* overflow-y: scroll; */
}
.global-wrapper main:before { content: ""; height: 45px; display: block;
}
.global-wrapper main:after { content: ""; height: 30px; display: block;
}
.global-wrapper main section { width: 90%; margin: 25px auto;
}
.global-wrapper main section .copy { padding: 5px; background: white; margin: 10px auto;
}
.global-wrapper main section .copy img { float: left; margin: 10px;
}
.global-wrapper main section .copy p { padding: 5px;
}
.global-wrapper main section .copy ul { margin-left: 30px;
}
.global-wrapper main section .copy li { list-style-type: circle; margin: 3px 0;
}
.global-wrapper main section .feature-img { height: 200px; background: url('http://placebear.com/800/400') no-repeat; background-size: cover; background-position: center center; margin: 0 auto; border: 6px solid white; box-shadow: 0 5px 5px 0 rgba(50, 50, 50, 0.4);
}
.global-wrapper footer { height: 30px; width: 100%; position: relative; background: #bbb; text-align: center; margin-top: -30px; box-shadow: 0 -3px 5px 0 rgba(50, 50, 50, 0.4); margin: -30px -500% 0 -500%; padding: 0 500%;
}
.global-wrapper footer li { display: inline-block; line-height: 30px; margin: 0 10px;
}
.global-wrapper footer li a { text-decoration: none;
}
@media all and (min-width: 25em) { .global-wrapper { width: 90%; margin: 0 auto; } .global-wrapper header nav .nav-links { border-right: 2px solid white; border-left: 2px solid white; }
}
@media all and (min-width: 37.5em) { .global-wrapper { width: 85%; max-width: 960px; } .global-wrapper header .menu { display: none; } .global-wrapper header .nav-links { display: block; width: inherit; top: 6px; right: 0; background: transparent; border: 0; box-shadow: 0 0 0 0; } .global-wrapper header .nav-links li { display: inline-block; margin: 0 15px; } .global-wrapper header .nav-links li a { border-bottom: 0; } .global-wrapper header .nav-links li a:hover { padding-bottom: 3px; border-bottom: 2px solid black; } .global-wrapper main { height: 100%; overflow-y: scroll; } .global-wrapper main section .feature-img { width: 50%; max-width: 450px; height: 400px; display: inline-block; vertical-align: top; } .global-wrapper main section .block2 { width: 43%; max-width: 400px; display: inline-block; margin: 0 0 0 5px; }
}
@media all and (min-width: 62.5em) { .global-wrapper main section .block2 { width: 45%; max-width: 400px; }
}
@media all and (min-width: 87.5em) { .global-wrapper main section .block2 { width: 45%; }
}

Responsive demo page - Script Codes JS Codes

// jQuery library included
$(document).ready(function(){ samplePage();
});
function samplePage() { //event binders $('.menu').on('click', function(){ $(this).toggleClass('menu-active'); $('.nav-links').slideToggle(); });
}
Responsive demo page - Script Codes
Responsive demo page - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 5,664 Kb
Views 14,168
Do you need developer help for Responsive demo page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian (brian-baum) Script Codes
Name
JQuery countdown plugin
JQuery exercise
CSS dropdowns
ReactJS Accessible Accordion Panel
AngularJS contact list
JQuery hash nav plugin
Smooth Scrolling in ReactJS
ReactJS Image Carousel
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!