Single page site

Developer
Tauseef
Size
2,873 Kb
Views
38,456
  1. Single page site Previews
  2. Single page site HTML Codes
  3. Single page site CSS Codes
  4. Single page site JS Codes

How do I make an single page site?

Trying out single page site with scrolling. What is a single page site? How do you make a single page site? This script and codes were developed by Tauseef on 07 September 2022, Wednesday.

Single page site Previews
IQ Test

Single page site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single page site</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="https://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<nav id="navigation" role='navigation'> <ul> <li><a href="#box1">HOME</a></li> <li><a href="#box2">SERVICE</a></li> <li><a href="#box3">PROJECTS</a></li> <li><a href="#box4">CONTACT</a></li> </ul>
</nav>
<div class="container"> <div id="box1" class="block"> <div class="header"> - Explore a universe of possibilities - </div><br /><br /> <div id="intro-content" class="innerblock"> <div class="innerblock small"> <div class="circle"> <div class="smallcircle"></div> </div> </div> <div class="innerblock large"> <h4>A Smarter way to work</h4> Easily share content globally or with select groups across multiple LMS platforms. Simply "publish" it into channels for others to find and use with conditions you define. </div> <div class="innerblock pipe"> Connector to other end or some other content to go here </div>
</div> </div> <div id="box2" class="block"> Add something here .. </div> <div id="box3" class="block"> Add something here .. </div> <div id="box4" class="block"> Add something here .. </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Single page site - Script Codes CSS Codes

body{ background : #333; margin: 0px;
}
.block{ display: block; min-height: 800px; border : 1px solid;
}
.container > div{ text-align: left; padding-left: 25px; padding-top: 50px;
}
#box1{ background: #f1f1f1;
}
#box2{ background: #aaa; border-top: 10px solid #333;
}
#box3{ background: #f1f1f1;
}
#box4{ background: #bbb;
}
nav{ position: fixed; display: block; background: #666; width: 100%;
}
nav ul{ background: #333; margin: 0px;
}
nav ul li{ list-style: none; display: inline-block; min-width: 100px; min-height: 25px; line-height: 30px; padding: 5px 10px; background: #333; margin: 0px 10px; text-align: center; border: 2px solid;
}
nav ul li:hover{ -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;
}
nav ul li a{ text-decoration: none; color: #aaa;
}
.header{ text-align: center; background: #7fd0d9; color: #fff; padding: 30px 0; margin-left: -25px; font-size: 48px;
font-family: "Agenda", Helvetica,Arial, sans-serif;
text-transform: uppercase;
}
.header:after{ content: ""; width: 0;	height: 0;	border-left: 20px solid transparent;	border-right: 20px solid transparent;	border-top: 20px solid #7fd0d9; position: absolute; top: 160px; left: 50%;
}
#box2:before{ content: ""; width: 0;	height: 0;	border-left: 10px solid transparent;	border-right: 10px solid transparent;	border-top: 10px solid #333; display: block; margin-left: 49%; margin-top: -50px;
}
/*****************Box 1 content******************/
.innerblock
{ border: 0px solid; min-height: 100px; padding-bottom: 20px;
}
.small{ min-width: 120px; max-width: 120px; float: left;
}
.large{ margin-left: 140px; line-height: 15px; padding-top: 6px;
}
#intro-content{ max-width: 800px; margin: 0 auto; display: block;
}
.clearfix{ clear: both;
}
.circle{ min-height: 100px; max-width: 100px; border-radius: 50px; background: #7fd0d9; -moz-box-shadow: 0 0 10px #7fd0d9; -webkit-box-shadow: 0 0 10px #7fd0d9; box-shadow: 0 0 10px #7fd0d9;
}
.smallcircle{ min-height: 50px; max-width: 50px; border-radius: 25px; margin-left: 24px; background: white; -moz-box-shadow: inset 0 0 10px #7fd0d9; -webkit-box-shadow: inset 0 0 10px #7fd0d9; box-shadow: inset 0 0 10px #7fd0d9;
}
h4{ font-size: 24px; color: #7fd0d9; margin-top: 15px; margin-bottom: 15px;
}
.pipe{ padding-top: 20px; border-top: 1px solid;
}

Single page site - Script Codes JS Codes

$(document).ready(function(){ $('#navigation').localScroll({duration:800});
});
Single page site - Script Codes
Single page site - Script Codes
Home Page Home
Developer Tauseef
Username tmjam
Uploaded September 07, 2022
Rating 3
Size 2,873 Kb
Views 38,456
Do you need developer help for Single page site?

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!

Tauseef (tmjam) Script Codes
Name
A Pen by Tauseef
Responsive email template without media queries
Shopping Cart with HTML5 Drag Drop
Test
Responsive Layout using bootstrap
Pulse loader
Flip using CSS
Create amazing Facebook ads 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!