Single Page Layout

Developer
Danny C
Size
3,748 Kb
Views
58,696
  1. Single Page Layout Previews
  2. Single Page Layout HTML Codes
  3. Single Page Layout CSS Codes

How do I make an single page layout?

What is a single page layout? How do you make a single page layout? This script and codes were developed by Danny C on 17 October 2022, Monday.

Single Page Layout Previews
IQ Test

Single Page Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single Page Layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//use.edgefonts.net/pt-serif.js"></script>
<div id="headband" style="background-image: url(http://distilleryimage0.ak.instagram.com/5df782ea129111e3bad822000a9f3047_7.jpg)">
<div class="tableCenter">
<div class="tableCell"> <h1 class="username"><small>@</small>d_castillo</h1>
<h2 class="bio">Hi I do front end dev and design earning my stripes building out emailers and exploring CMS</h2>
</div>
</div>
</div>
<div class="navWrap">
<nav> <ul class="menu"> <li>item one</li> <li>item two</li> <li><img src="http://www.readcereal.com/wp-content/themes/cereal-mag-v2/img/logo_grey.png" width="80px" alt="logo"/></li> <li>item three</li> <li>item four</li> </ul>
</nav>
</div>
<div class="content" style="font-family: Verdana, sans-serif; font-weight: normal;">
<h2>Headlines</h2>
<p>Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look.</p>
<p>When using a baseline grid, the first thing you must decide on is your baseline grid unit. You’ll commonly see baseline grid values of something like 20px, but where does a value like that come from?</p>
<p>As you might have guessed, most designers choose this unit arbitrarily. The problem with this approach is that the resulting baseline grid unit is not directly related to the primary font size, which is the most fundamental design element on the page.</p>
<p>Instead of relying on arbitrary selection, wouldn’t it be nice if there were a way to determine the <strong>perfect</strong> typography settings based on a given context?</p>
<h2>Topics of Conversation</h2>
<p>As it turns out, the golden ratio provides us with a guide—a formula—for proper typesetting. Because of this, we can now set our type with absolute certainty in <em>any</em> situation! Better still, we can use this information about typography to make more informed decisions about <em>all</em> the spatial aspects of our designs, such as:</p>
<ul>
<li>The amount of whitespace that appears after each paragraph</li>
<li>Padding, margins, and other units of whitespace throughout the design</li>
<li>Headline line-heights in a given width</li>
<li>Any and all spatial properties that you wish to relate mathematically</li>
</ul>
<p>The power of golden ratio typography cannot be understated. By choosing the line-height of your primary text as your new “baseline unit”, you are effectively tying <em>all</em> the dimensions of your layout together with the golden ratio.</p>
<p>Just look at you, with all this newfound knowledge…the ancient Greeks would be proud :D</p>
</div> <script src='http://use.edgefonts.net/pt-serif.js'></script>
</body>
</html>

Single Page Layout - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url()
/* --- RESET --- */
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{	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{	display: block;
}
table{	border-spacing: 0;	border-collapse: collapse;
}
h1,h2,h3,h4,h5,h6{	font-weight: normal;
}
a{	text-decoration: none;
}
nav li{	list-style-type: none;	display: inline-block;
}
/* Custom Styles */
body {
height: 540px;
max-height: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 2.0rem;
line-height: 1.6em;
margin:0;
padding:0;
background-color:#292e30;
}
h1, h2, h3, h4, h5{ color:#a1a1a1;
}
h2 { font-family: pt-serif, sans-serif; line-height: 1.8em; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: #f2f1ed;
}
#headband {
position: relative;
display: table;
width: 100%;
/*height: 60%;*/
height: 70%;
margin-bottom: 1rem;
text-align: center;
background: #2f1d3f no-repeat center center;
background-size: cover;
}
#headband h1{ color: #114356;
}
.tableCenter {
display: table-cell;
vertical-align: middle;
}
.tableCell {
position: relative;
width: 80%;
max-width: 700px;
margin: 0 auto;
}
.username {
margin: 10px 0 10px 0;
font-size: 5rem;
letter-spacing: -5px;
}
.bio {
margin: 0;
font-size: 1.8rem;
line-height: 1.5em;
font-weight: 300;
letter-spacing: 0;
display: none;
}
.navWrap
{ text-align:center; position:relative; width:100%;
}
.navWrap nav
{ width:100%; max-width:565px; margin:auto;
}
ul.menu
{ list-style-type:none; margin:20px auto;
}
nav li { display:inline; margin-right:7%; font-family: sans-serif; font-size: 0.8rem; color:#fff;
}
.content{ color:#f2f1ed; width:100%; max-width:720px; margin:auto; Font-Size: 16px; Line-Height: 28px;
}
@media only screen and (max-width: 500px)
.username {
font-size: 3rem;
}
Single Page Layout - Script Codes
Single Page Layout - Script Codes
Home Page Home
Developer Danny C
Username tychoBlender
Uploaded October 17, 2022
Rating 3.5
Size 3,748 Kb
Views 58,696
Do you need developer help for Single Page 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!

Danny C (tychoBlender) Script Codes
Name
Crossfade video Carousel
Navigation Transition
CSS OVERLAY TECHNIQUES
Responsive Anything Slider
Canvas Click Animation Demo
Toggle Object Width with jQuery
Animation Test
Select Menu test
Table toggle
AJAX Form
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!