Main page display

Developer
Shikun Ke
Size
4,562 Kb
Views
8,096
  1. Main page display Previews
  2. Main page display HTML Codes
  3. Main page display CSS Codes
  4. Main page display JS Codes

How do I make an main page display?

What is a main page display? How do you make a main page display? This script and codes were developed by Shikun Ke on 28 November 2022, Monday.

Main page display Previews
IQ Test

Main page display - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Main page display</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en"> <head> <meta charset="utf-8"> <title>Display page</title> <!-- Basic page styling --> <link rel="stylesheet" type="text/css" href="base.css"> <!-- User styling --> <link rel="stylesheet" type="text/css" href="style.css"> </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>	<!-- jQuery -->	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>	<!-- User scripts -->	<script type="text/javascript" src="script.js"></script> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Main page display - Script Codes CSS Codes

.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; }

Main page display - Script Codes JS Codes

$(function() {	$(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);	});
});
Main page display - Script Codes
Main page display - Script Codes
Home Page Home
Developer Shikun Ke
Username BarryKe
Uploaded November 28, 2022
Rating 3
Size 4,562 Kb
Views 8,096
Do you need developer help for Main page display?

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!

Shikun Ke (BarryKe) Script Codes
Name
Cash Register Drawer
Simple Calculator_Freecodecamp
A Pen by Shikun Ke
Portfolio Website
25min countdown
Random Quote Machine_FreeCodeCamp
Create amazing marketing copy 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!