Main page display

Learn how to create Main page display using html, css and/or js.

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Display page</title>
      
<style>
.hero-image {
	top: -20rem;
	bottom: -20rem;
	width: 100%;
	background-image: url(http://www.howlatthemoon.com/wp-content/uploads/2015/09/nyc-skyline.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: absolute;
	z-index: 1;
}

.hero h1 {
	position: relative;
	text-align: center;
	color: white;
	padding-top: 20rem;
	z-index: 2;
}

.navbar-wrapper {
	height: 3rem;
}
nav.pinned {
	position: fixed;
	top: 0;
	background-color: #f5f5f5;
	transition: 0.2s ease background-color;
	-webkit-transition: 0.2s ease background-color;

}

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Default header styles */
h1, h2, h3, h4, h5, h6 {
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-weight: 300;
	color: #222222;
	line-height: 1.4; }
h1 {
	font-size: 2.75rem; }
h2 {
	font-size: 1.6875rem; }
h3 {
	font-size: 1.375rem; }
h4 {
	font-size: 1.125rem; }
h5 {
	font-size: 1.125rem; }
h6 {
	font-size: 1rem; }

/* Base element styles */
body, html {
	width: 100%;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-size: 16px;
	color: #222222; }

a, a:hover {
	color: inherit;
	text-decoration: none; }

ul {
	margin: 2rem 0;
	list-style: disc;
	padding-left: 2rem; }
ul li {
	padding: 0.5rem 0; }

p {
	margin: 1rem 0;
	line-height: 1.8; }

.content {
	max-width: 60rem;
	margin: 0 auto;
	width: 100%; }

.hero {
	position: relative;
	overflow: hidden;
	height: 30rem; }

section { padding: 6rem 0 3rem; }

footer {
	margin-top: 4rem;
	padding: 5rem;
	background-color: #222;
	color: white;
	text-align: center; }
footer p {
	margin: 0; }

/* Navbar Styles */

nav {
	height: 3rem;
	position: relative;
	width: 100%; }
nav ul {
	height: 3rem;
	margin: 0;
	padding: 0;
	display: inline-block;
	font-size: 0;
	list-style: none; }
nav ul li {
	font-size: 1rem;
	padding: 0;
	display: inline-block;}
nav ul li p {
	height: 1.5rem;
	line-height: 1.5rem;
	margin: 0;
	padding: 0.75rem 1.5rem; }
nav ul li:hover {
	cursor: pointer;
	background-color: #eee; }
nav ul li.action-item {
	color: white;
	background-color: #4155E8; }
nav ul li.action-item:hover {
	color: white;
	background-color: #3B4CD1; }
nav ul.right { float:right; }
</style>

$(window).scroll(function() {
		/************************
		 * Paralax image effect *
		 ************************/
		var FACTOR = 0.5;
		var $heroImage = $('.hero-image');

/* Calculate percentComplete, which goes from 0 to 1 */
		var distanceScrolled = Math.max(0, $(window).scrollTop());
		var totalDistanceToScroll = $heroImage.height();
		var percentComplete = Math.min(distanceScrolled / totalDistanceToScroll, 1);

/* Use percentComplete to determine how much we translate */
		var translateY = (percentComplete * 100 * FACTOR);

/* Apply the transform */
		$heroImage.css({'transform': 'translateY(' + translateY + '%)'});

/**********************
		 * Pinning the navbar *
		 **********************/

var $navbar = $('nav');
		var $navbarWrapper = $('.navbar-wrapper')

/* navbarWrapper never moves, so it's a good pinPoint */
		var pinPoint = $navbarWrapper.offset().top;

/* add or remove the 'pinned' class depending on what side of the pin
		 * point we are.
		 */
		if (distanceScrolled >= pinPoint) {
			$navbar.addClass('pinned');
		} else {
			$navbar.removeClass('pinned')
		}
	});

/*************
	 * Scroll to *
	 *************/

$('a[href*="#"]').click(function(e) {
		e.preventDefault();
		var $target = $($(this).attr('href'));
		var scrollTop = $target.offset().top;
		$('html, body').animate({'scrollTop': scrollTop}, 500);
	});

});
</script>
      
    </head>
    <body>
    	<div class="hero" id="top">
    		<div class="hero-image"></div>
			<h1>Do more, with less.</h1>
    	</div>
    	<div class="navbar-wrapper">
	        <nav>
	        	<div class="content">
		        	<ul>
		        		<li class="action-item"><a href="#top"><p>P</p></a></li>
		        		<li><a href="#vision"><p>Vision</p></a></li>
		        		<li><a href="#product"><p>Product</p></a></li>
		        		<li><a href="#team"><p>Team</p></a></li>
		        	</ul>
		        	<ul class="right">
		        		<li><a href="#"><p>Log in</p></a></li>
		        		<li class="action-item"><a href="#"><p>Sign up</p></a></li>
		        	</ul>
		        </div>
	        </nav>
    	</div>
		<section id="vision">
			<div class="content">
				<h1>We Have a Vision</h1>
				<h2>For a world where users come first</h2>
				<p>Latte ideate unicorn food-truck hacker latte disrupt integrate user story latte. Innovate viral food-truck paradigm user story food-truck quantitative vs. qualitative responsive intuitive parallax. Disrupt engaging bootstrapping iterate pivot fund venture capital. Entrepreneur long shadow waterfall is so 2000 and late big data innovate physical computing human-centered design minimum viable product piverate fund. Workflow engaging pitch deck ideate pair programming innovate hacker waterfall is so 2000 and late pitch deck actionable insight SpaceTeam latte.</p>
				<p>Bootstrapping ship it pair programming waterfall is so 2000 and late food-truck long shadow venture capital ship it moleskine sticky note. Pivot sticky note 360 campaign experiential integrate pivot innovate grok SpaceTeam. Piverate iterate user centered design parallax Steve Jobs 360 campaign minimum viable product pitch deck driven user story cortado thought leader innovate human-centered design.</p>
			</div>
		</section>
		<section id="product">
			<div class="content">
				<h1>P is One-of-a-Kind</h1>
				<h2>Just like you</h2>
				<p>Experiential agile 360 campaign user story iterate quantitative vs. qualitative earned media viral actionable insight innovate. Intuitive fund actionable insight disrupt entrepreneur SpaceTeam affordances entrepreneur affordances. Engaging innovate co-working long shadow quantitative vs. qualitative quantitative vs. qualitative quantitative vs. qualitative intuitive minimum viable product disrupt grok. Moleskine latte responsive workflow pair programming hacker human-centered design. Hacker convergence intuitive hacker personas paradigm pair programming minimum viable product quantitative vs. qualitative intuitive.</p>
			</div>
		</section>
		<section id="team">
			<div class="content">
				<h1>Our Team Cares</h1>
				<h2>About you, your users, and their experience</h2>
				<p>Prototype agile waterfall is so 2000 and late co-working affordances pair programming sticky note latte. Human-centered design big data human-centered design physical computing disrupt convergence minimum viable product affordances human-centered design. Latte pitch deck bootstrapping prototype 360 campaign latte disrupt paradigm piverate waterfall is so 2000 and late disrupt.</p>
				<p>Unicorn grok parallax pitch deck 360 campaign pivot paradigm physical computing earned media actionable insight. Personas ship it sticky note engaging actionable insight iterate fund long shadow parallax. Minimum viable product user story quantitative vs. qualitative disrupt ideate co-working paradigm Steve Jobs personas grok personas. Integrate thought leader venture capital iterate sticky note pair programming responsive sticky note convergence engaging cortado cortado user story.</p>
			</div>
		</section>
		<footer>
			<p><a href="#">built with ❤ in NYC </a></p>
		</footer>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
		<script type="text/javascript" src="script.js"></script>
    </body>
</html>

Main page display

Random HTML Example Codes: