Single page concept

Developer
Anthony Adamski
Size
5,640 Kb
Views
46,552
  1. Single page concept Previews
  2. Single page concept HTML Codes
  3. Single page concept CSS Codes
  4. Single page concept JS Codes

How do I make an single page concept?

What is a single page concept? How do you make a single page concept? This script and codes were developed by Anthony Adamski on 25 August 2022, Thursday.

Single page concept Previews
IQ Test

Single page concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single page concept</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.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! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html
{	font-size:100%; height:100%;
}
body
{	-webkit-font-smoothing:antialiased;	color:#333332;	font-family:Lora, serif;	font-size:18px;	font-weight:400;	line-height:1.4; height:100%;	text-rendering:optimizeLegibility;
}
.skill-set li:hover
{	background:#3498db;
}
h1
{	color:rgba(0,0,0,.75);
}
.wrapper
{	height:100%;
}
.cool { width:20%; background: url('http://i.imgur.com/ANxNJI6.jpg');no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; float: left; height: 100%;
}
.left
{	background-color:#F8F8F8;	border-right:0px solid rgba(0,0,0,.05); box-shadow: 1px 0px 0px 0px rgba(0,0,0,.05);	float:right;	height:100%;	margin-left:-1px;	position:fixed; z-index:1; cursor: pointer;	width:33.33%; transition: .75s width ease-in-out;;
}
.small-logo {width:23.33%;}
.large-view {	width:76.67% !important;}
ul {width: 100%; max-width:100% !important;}
.right
{	float:right;	height:100%;	position:relative;	width:66.66%; transition: .751s width ease-in-out;;
}
.content {display:none;margin: 11em auto; width:90%;}
.name-hero
{	background:rgba(0,0,0,.001);	bottom:0;	height:290px;	left:0;	margin:auto;	position:absolute;	right:0;	top:0;	width:85%;
}
.name-hero h1
{	font-family:Open Sans, sans-serif;	font-size:1.5em;	text-align:center;
}
.name-hero h1 em
{	color:rgba(0,0,0,.3);	font-style:normal;	font-weight:700;
}
.name-hero p
{	color:rgba(0,0,0,.5);	font-size:.75em;	line-height:1.5;	margin:0 8px 0 0;	text-align:center;
}
.name-hero .name-text
{	margin:0 auto;	width:85%;
}
.inner
{	margin:0 auto;	max-width:975px;	padding:3em;
}
.inner h1
{	font-size:1.75em;
}
.inner p
{	color:rgba(0,0,0,.3);
}
.inner p em
{	color:rgba(0,0,0,.75);	font-style:normal;
}
.inner section
{	margin:100px auto;
}
ul
{	list-style-type:none;	margin-top:-10px;	max-width:570px;	padding:0;
}
.skill-set li
{	background:rgba(0,0,0,.75);	border-radius:5px;	color:#FFF;	display:inline-block;	list-style:none;	margin:15px 15px 0 0;	padding:10px;	text-align:justify;
}
@media screen and (max-width: 65em) { .left
{ font-size:14px;}
}
@media screen and (max-width: 48em) {	.right, .left	{	float:none; position:relative !important;	width:100%; min-height:500px;	} .large-view {	width:100% !important;} .handmade { text-align:center !important; margin-top:0px !important;
}
@media screen and (max-width: 75em) { body
{ font-size:16px;}
}
@media screen and (max-width: 60em) { body
{ font-size:14px;}
}
.clearfix:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both;
}
.handmade { text-align:right; margin-top:100px;
}
.handmade em { font-family: 'Shadows Into Light', cursive; font-size: 1.25em; margin-left:5px;
}
}
nav{ text-align: justify; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:33.33%; height:0px;
}
.small-nav{ margin: 5.5em auto 0px auto !important; transition: .25s margin ease-in-out; margin-left: -3em;
}
nav ul li{ // background: rgba(0,0,0,.75); // color:white; width:33.33%; display: inline-block; zoom: 1; cursor:pointer; position:relative; text-align:center; // border-left: 1px solid rgba(0,0,0,.05); font-size:.85em; *display: inline;
}
nav:after{ content: ""; width: 100%; display: inline-block;
}
// nav ul li:hover:after { content: ""; background:#444444; height:2px; top:-25px; left: 25%; width: 50%; position:absolute;
} .menu-con{ margin:.5em auto; height:3px; width:25px; background:#444444; box-shadow: 0px 6px 0px 0px #444444,0px 12px 0px 0px #444444; }
.slide{ float:left;
}
.logo { position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100px; height:140px;
}
.logo h1 {font-size:4em;margin-bottom:0px;line-height:20px;}
.logo p{margin-left:-4px;}
.center{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:500px; height:0px;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic|Open+Sans:300,400,500,700|Waiting+for+the+Sunrise|Shadows+Into+Light' rel='stylesheet' type='text/css'>
<div class="wrapper clearfix">
<div class="left"> <div class="logo"><h1>Aa</h1><p>design labs</p> </div> </div> <div class="right"> <div class="inner"> <nav> <ul> <li><a class="work">work</a></li><li><a>about</a></li><li><a>contact</a></li></ul> </nav> <div class="content"><h1> Who we are</h1><h2 style="margin: 40px 0;">Aa Design Labs is a full service design company. We specialize in taming kangaroos.</h2> <p> Cum postea diceret ex, eam at ludus labores. Eos te vidit deleniti dissentiunt, pri an tation animal reprimique. Etiam iriure persius ea vim, his no veniam everti forensibus. Sit ut odio minimum, no oratio praesent conclusionemque sit. Ad usu probo everti. </p> <p> No nonumes voluptaria expetendis usu, alterum legimus ut eos. Sumo atomorum pri cu, ea eos graece fierent. Id consulatu iracundia dignissim mei, id prompta voluptaria eam, persecuti argumentum dissentias ut mea. In dicit quidam regione cum, in doctus nominavi ullamcorper vel.</p></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Single page concept - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html
{	font-size:100%; height:100%;
}
body
{	-webkit-font-smoothing:antialiased;	color:#333332;	font-family:Lora, serif;	font-size:18px;	font-weight:400;	line-height:1.4; height:100%;	text-rendering:optimizeLegibility;
}
.skill-set li:hover
{	background:#3498db;
}
h1
{	color:rgba(0,0,0,.75);
}
.wrapper
{	height:100%;
}
.cool { width:20%; background: url('http://i.imgur.com/ANxNJI6.jpg');no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; float: left; height: 100%;
}
.left
{	background-color:#F8F8F8;	border-right:0px solid rgba(0,0,0,.05); box-shadow: 1px 0px 0px 0px rgba(0,0,0,.05);	float:right;	height:100%;	margin-left:-1px;	position:fixed; z-index:1; cursor: pointer;	width:33.33%; transition: .75s width ease-in-out;;
}
.small-logo {width:23.33%;}
.large-view {	width:76.67% !important;}
ul {width: 100%; max-width:100% !important;}
.right
{	float:right;	height:100%;	position:relative;	width:66.66%; transition: .751s width ease-in-out;;
}
.content {display:none;margin: 11em auto; width:90%;}
.name-hero
{	background:rgba(0,0,0,.001);	bottom:0;	height:290px;	left:0;	margin:auto;	position:absolute;	right:0;	top:0;	width:85%;
}
.name-hero h1
{	font-family:Open Sans, sans-serif;	font-size:1.5em;	text-align:center;
}
.name-hero h1 em
{	color:rgba(0,0,0,.3);	font-style:normal;	font-weight:700;
}
.name-hero p
{	color:rgba(0,0,0,.5);	font-size:.75em;	line-height:1.5;	margin:0 8px 0 0;	text-align:center;
}
.name-hero .name-text
{	margin:0 auto;	width:85%;
}
.inner
{	margin:0 auto;	max-width:975px;	padding:3em;
}
.inner h1
{	font-size:1.75em;
}
.inner p
{	color:rgba(0,0,0,.3);
}
.inner p em
{	color:rgba(0,0,0,.75);	font-style:normal;
}
.inner section
{	margin:100px auto;
}
ul
{	list-style-type:none;	margin-top:-10px;	max-width:570px;	padding:0;
}
.skill-set li
{	background:rgba(0,0,0,.75);	border-radius:5px;	color:#FFF;	display:inline-block;	list-style:none;	margin:15px 15px 0 0;	padding:10px;	text-align:justify;
}
@media screen and (max-width: 65em) { .left
{ font-size:14px;}
}
@media screen and (max-width: 48em) {	.right, .left	{	float:none; position:relative !important;	width:100%; min-height:500px;	} .large-view {	width:100% !important;} .handmade { text-align:center !important; margin-top:0px !important;
}
@media screen and (max-width: 75em) { body
{ font-size:16px;}
}
@media screen and (max-width: 60em) { body
{ font-size:14px;}
}
.clearfix:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both;
}
.handmade { text-align:right; margin-top:100px;
}
.handmade em { font-family: 'Shadows Into Light', cursive; font-size: 1.25em; margin-left:5px;
}
}
nav{ text-align: justify; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:33.33%; height:0px;
}
.small-nav{ margin: 5.5em auto 0px auto !important; transition: .25s margin ease-in-out; margin-left: -3em;
}
nav ul li{ // background: rgba(0,0,0,.75); // color:white; width:33.33%; display: inline-block; zoom: 1; cursor:pointer; position:relative; text-align:center; // border-left: 1px solid rgba(0,0,0,.05); font-size:.85em; *display: inline;
}
nav:after{ content: ""; width: 100%; display: inline-block;
}
// nav ul li:hover:after { content: ""; background:#444444; height:2px; top:-25px; left: 25%; width: 50%; position:absolute;
} .menu-con{ margin:.5em auto; height:3px; width:25px; background:#444444; box-shadow: 0px 6px 0px 0px #444444,0px 12px 0px 0px #444444; }
.slide{ float:left;
}
.logo { position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100px; height:140px;
}
.logo h1 {font-size:4em;margin-bottom:0px;line-height:20px;}
.logo p{margin-left:-4px;}
.center{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:500px; height:0px;}

Single page concept - Script Codes JS Codes

$(document).ready(function(){$("body").hide().fadeIn(1500);});
$('nav').click( function() { $( '.left' ).toggleClass( "small-logo" ); $( '.right' ).toggleClass( "large-view" ); $( 'nav' ).fadeOut(200); setTimeout("$('nav').fadeIn().addClass('small-nav')", 750); setTimeout("$('.content').fadeIn()", 1250); });
$('.left').click( function() { setTimeout("$('.content').fadeOut()", 250); setTimeout("$('nav').fadeOut(200)", 650); setTimeout("$('.left').removeClass('small-logo')", 1150); setTimeout("$('.right').removeClass('large-view')", 1150); setTimeout("$('nav').removeClass('small-nav').fadeIn()", 1350); });
Single page concept - Script Codes
Single page concept - Script Codes
Home Page Home
Developer Anthony Adamski
Username anthonyadamski
Uploaded August 25, 2022
Rating 3
Size 5,640 Kb
Views 46,552
Do you need developer help for Single page concept?

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!

Anthony Adamski (anthonyadamski) Script Codes
Name
Menu Overflow
Jquery Snippets
Simple CSS3 Slider
Work In Progress
Full Viewport Background Scroll
Live resume concept
Image Hover Effect
Live CSS Blur
A Pen by Anthony Adamski
Cool Page Split Effect
Create amazing blog posts 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!