Homepage layout

Developer
Aurer
Size
3,855 Kb
Views
52,624
  1. Homepage layout Previews
  2. Homepage layout HTML Codes
  3. Homepage layout CSS Codes
  4. Homepage layout JS Codes

How do I make an homepage layout?

Testground for a homepage layout concept.. What is a homepage layout? How do you make a homepage layout? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

Homepage layout Previews
IQ Test

Homepage layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Homepage layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{ background:#0B424C;
}
h1, h2, h3{ font-family: "Merriweather", sans-serif;
}
h1{ font-size: 2em; text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
a{ transition: color .3s;
}
#page{ width:100%; text-align:center;
}
#first, #second, #third{ padding: 1em 0; overflow: hidden;
}
#first{ color: #fff; background-image: linear-gradient(top, #0d6f80, #0B424C);
}
#second{ box-shadow: inset 0 0 20px rgba(0,0,0,0.4); color: #fff;	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAKElEQVQIW2NkYGD4r6yszHD37l0GEM0IJP7DOEBJBkasKkAyIABSCQBZdRE8PufQzgAAAABJRU5ErkJggg==);
}
nav ul{	padding: 0;	margin: 0;	background-color:#000;	background-color: rgba(0,0,0,0.9);	display: inline;	padding: 10px 0px 8px;	font-weight:bold;	-webkit-border-radius: 4px;	-moz-border-radius: 4px;	-o-border-radius: 4px;	-ms-border-radius: 4px;	border-radius: 4px;
}
nav li{	display: inline;	padding: 0;	color: #fff;
}
nav li a{	text-decoration: none;	font-family: "Merriweather", sans-serif;	font-size: 1.2em;	line-height: 2.3;	color: #fff;	padding: 0 20px;
}
nav ul:hover a{ color: #888; }
nav li a:hover,
nav li.current_page_item a{	color: #EE2A66;
}
.section{ width: 17%; padding: 0 4%; float: left;	text-align: left;
}
.section h2{ margin: 0 0 .5em; font-size: 1.3em;
}
.section ul{ margin: 0; padding: 0; list-style: none;
}
.section li{ padding: .5em 0;
}
.section a{ color: #06A5AE; text-decoration: none; display: block; font-size: .9em;
}
.section a:hover{ color: #fff;
}
.section small{ color: #666; font-style: italic; font-size: .8em;
}
#third{ width: 92%; padding: 0 4%; margin: 0 auto; text-align: left; font-size: .9em;
}
#third .copy{ float: left; margin-right: 1em;
}
#third .links{ float: left; text-align: left;
}
#third ul{ padding: 0; list-style: none;
}
#third li{ display: inline; padding: 0 10px; border-left: 1px solid rgba(255,255,255,0.3);
}
#third li:first-child{ border: none;
}
#third a{ color: rgba(255, 255, 255, 0.4); text-decoration: none;
}
#third a:hover{ color: rgba(255, 255, 255, 1);
}
body:active a{ text-decoration: underline !important;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="page">	<div id="first">	<h1>Welcome</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> <div id="second"> <div class="section"> <h2>One</h2> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a><small>consectetuer adipiscing elit.</small></li> <li><a href="#">Aliquam tincidunt</a><small>mauris eu risus.</small></li> <li><a href="#">Vestibulum</a><small>auctor dapibus neque.</small></li> </ul> </div> <div class="section"> <h2>Two</h2> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a><small>consectetuer adipiscing elit.</small></li> <li><a href="#">Aliquam tincidunt</a><small>mauris eu risus.</small></li> <li><a href="#">Vestibulum</a><small>auctor dapibus neque.</small></li> </ul> </div> <div class="section"> <h2>Three</h2> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a><small>consectetuer adipiscing elit.</small></li> <li><a href="#">Aliquam tincidunt</a><small>mauris eu risus.</small></li> <li><a href="#">Vestibulum</a><small>auctor dapibus neque.</small></li> </ul>	</div> <div class="section"> <h2>Four</h2> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a><small>consectetuer adipiscing elit.</small></li> <li><a href="#">Aliquam tincidunt</a><small>mauris eu risus.</small></li> <li><a href="#">Vestibulum</a><small>auctor dapibus neque.</small></li> </ul>	</div> </div> <div id="third">	<p class="copy">&copy; Phil Maurer 2012</p> <div class="links"> <ul> <li><a href="#">Lorem ipsum amet</a></li> <li><a href="#">Aliquam tincidunt</a></li> <li><a href="#">Vestibulum auctor</a></li> </ul> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Homepage layout - Script Codes CSS Codes

body{ background:#0B424C;
}
h1, h2, h3{ font-family: "Merriweather", sans-serif;
}
h1{ font-size: 2em; text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
a{ transition: color .3s;
}
#page{ width:100%; text-align:center;
}
#first, #second, #third{ padding: 1em 0; overflow: hidden;
}
#first{ color: #fff; background-image: linear-gradient(top, #0d6f80, #0B424C);
}
#second{ box-shadow: inset 0 0 20px rgba(0,0,0,0.4); color: #fff;	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAKElEQVQIW2NkYGD4r6yszHD37l0GEM0IJP7DOEBJBkasKkAyIABSCQBZdRE8PufQzgAAAABJRU5ErkJggg==);
}
nav ul{	padding: 0;	margin: 0;	background-color:#000;	background-color: rgba(0,0,0,0.9);	display: inline;	padding: 10px 0px 8px;	font-weight:bold;	-webkit-border-radius: 4px;	-moz-border-radius: 4px;	-o-border-radius: 4px;	-ms-border-radius: 4px;	border-radius: 4px;
}
nav li{	display: inline;	padding: 0;	color: #fff;
}
nav li a{	text-decoration: none;	font-family: "Merriweather", sans-serif;	font-size: 1.2em;	line-height: 2.3;	color: #fff;	padding: 0 20px;
}
nav ul:hover a{ color: #888; }
nav li a:hover,
nav li.current_page_item a{	color: #EE2A66;
}
.section{ width: 17%; padding: 0 4%; float: left;	text-align: left;
}
.section h2{ margin: 0 0 .5em; font-size: 1.3em;
}
.section ul{ margin: 0; padding: 0; list-style: none;
}
.section li{ padding: .5em 0;
}
.section a{ color: #06A5AE; text-decoration: none; display: block; font-size: .9em;
}
.section a:hover{ color: #fff;
}
.section small{ color: #666; font-style: italic; font-size: .8em;
}
#third{ width: 92%; padding: 0 4%; margin: 0 auto; text-align: left; font-size: .9em;
}
#third .copy{ float: left; margin-right: 1em;
}
#third .links{ float: left; text-align: left;
}
#third ul{ padding: 0; list-style: none;
}
#third li{ display: inline; padding: 0 10px; border-left: 1px solid rgba(255,255,255,0.3);
}
#third li:first-child{ border: none;
}
#third a{ color: rgba(255, 255, 255, 0.4); text-decoration: none;
}
#third a:hover{ color: rgba(255, 255, 255, 1);
}
body:active a{ text-decoration: underline !important;
}

Homepage layout - Script Codes JS Codes

var H = $('#second').height();
$('#second').css({ height: 0, paddingTop: 0, paddingBottom: 0
}).delay(500).animate({ height: H, paddingTop: 20, paddingBottom: 20
}, 200);
Homepage layout - Script Codes
Homepage layout - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 3
Size 3,855 Kb
Views 52,624
Do you need developer help for Homepage 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!

Aurer (aurer) Script Codes
Name
One of those text scrollers
Update manager experimental UI
Simple normalised button style
Webkit CSS Scrollbars
Menu handle
CSS cube experiment
Tomcat chrome extension UI
Pagination
Vue form theme
IOS style checkbox concept
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!