Site Layout

Developer
Rob
Size
3,219 Kb
Views
50,600
  1. Site Layout Previews
  2. Site Layout HTML Codes
  3. Site Layout CSS Codes

How do I make an site layout?

A simple 2 column fluid site layout with side navigation, site header, content area, and footer.Uses a media query to change item with when the screen shrinks to 320px wide.. What is a site layout? How do you make a site layout? This script and codes were developed by Rob on 30 August 2022, Tuesday.

Site Layout Previews
IQ Test

Site Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Site Layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="top-header"> <h1>Site Header</h1>
</header>
<div class="main-container"> <div class="content-row"> <nav class="sidenav"> <ul> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a href="">Contact us</a></li> </ul> </nav> <div class="content-area"> <section> <header><h2>Lorem Ipsum</h2></header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus sed ligula aliquet, eget porttitor enim placerat. Proin vel nisi ac leo facilisis bibendum sit amet ac ante. Praesent consequat hendrerit mi eu iaculis. Quisque egestas, ipsum id lobortis malesuada, nunc tellus vehicula nisi, euismod venenatis dui nulla nec velit. Phasellus vel est tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sit amet turpis nec metus condimentum lobortis. Pellentesque consequat pretium enim at porta.</p> <p>Vestibulum porta tincidunt nisl vel ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean mollis nunc et metus aliquet rutrum eu et nisl. Proin vitae eros elit. Mauris non massa vitae mauris blandit elementum. Praesent vel porttitor est. Etiam nisl nisl, condimentum ac elit eget, pharetra tristique diam. Praesent pretium erat quis quam aliquet ornare. Pellentesque fringilla, nisi eu adipiscing ultricies, leo nisi tempus justo, sit amet lobortis lorem nunc quis enim. Maecenas consequat adipiscing euismod. Ut vehicula mattis dui non facilisis.</p> </section> <section> <header><h2>Pellentesque Venenatis</h2></header> <p>Nam gravida turpis in dolor ultricies ullamcorper. Integer tempus blandit libero a eleifend. Sed in nisi dignissim, suscipit tellus nec, condimentum sem. Nunc aliquet luctus tincidunt. Integer in aliquam nisl. Cras iaculis lorem ut ligula eleifend luctus. Suspendisse quis lacus venenatis, tristique diam nec, euismod eros. Aenean lacinia lorem ac risus cursus, nec rutrum massa cursus. Vivamus magna neque, interdum et pellentesque porta, sagittis quis justo. Nam convallis fringilla nisi ut ultricies.</p><p>Nulla tincidunt luctus commodo. Suspendisse nunc leo, porttitor ac lorem ultricies, varius dictum ipsum. Nam fringilla suscipit sapien a bibendum. Proin egestas non nunc nec ultricies. Nunc ut interdum ipsum. In ut vulputate quam. Pellentesque venenatis commodo adipiscing.</p> </section> </div> </div> <footer> <p>Copyright 2013</p> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Site Layout - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300|Merriweather+Sans:300,400);
body { margin: 0; background-color: #f8FFe4; color: #2a2a2a;
}
h2 { font-family: 'Merriweather Sans', sans-serif; font-size: 1.3em; line-height: 1.6em; margin: 6px 0 0 0;
}
p { font-family: 'Merriweather Sans', sans-serif; font-size: .8em; font-weight: 400; line-height: 1.7em; margin: 4px 0 0 0; padding: 0 0 4px 0;
}
.main-container { margin: 0 auto; padding: 0 20px; max-width: 970px; min-width: 650px;
}
.top-header { background-color: #66ffa4; padding: 30px 10px; box-shadow: inset 0 0 2px #ffffff; margin-bottom: 12px;
}
h1 { margin: 0; color: #ffffff; text-align: center; text-shadow: -1px 1px 3px white; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 2em;
}
.sidenav { display: inline-block; width: 26%; margin: 0; border-radius: 6px; background-color: white; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
.sidenav ul { list-style: none; overflow: hidden; padding: 0; margin: 0;
}
.sidenav ul li {
}
.sidenav ul li a { display: block; text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: .9em; padding: 10px 20px; height: 20px; width: 100%;
}
.sidenav ul li a:hover { background: #b4b4b4;
}
.content-row { width: 100%;
}
.content-row:before,
.content-row:after { display: table; line-height: 0; content: "";
}
.content-row:after { clear: both;
}
.content-row > * { display: block; float: left;
}
.content-area { width: 68%; margin-left: 20px;
}
section { border-bottom: 1px dotted gray;
}
@media screen and (max-width: 320px) { .main-container { max-width: 320px; min-width: 0; padding: 0; } .top-header { padding: 5px 10px; margin-bottom: 0; } h1 { font-size: 1.5em; } h2 { line-height: 1.2em; padding: 0; } .sidenav { width: 100%; margin: 0; border-radius: 0; } .content-area { width: 98%; margin: 0 4px; }
}
Site Layout - Script Codes
Site Layout - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 30, 2022
Rating 3
Size 3,219 Kb
Views 50,600
Do you need developer help for Site Layout?

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!

Rob (rowinf) Script Codes
Name
D3 test
A Pen by Rob
Nav Menu with Chevron
Html5 form validation
Get combo box item value
Responsive Calendar
Table filters
Foundation Off-Canvas menu test
Jquery form
Filter inputs
Create amazing art & images 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!