Page layout
How do I make an page layout?
Fun with a responsive design. What is a page layout? How do you make a page layout? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.
Page layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>page layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="full-container"> <div class="main-container"> <div class="header"> header </div> <div class="nav-bar"> nav bar </div> <div class="main-content"> main content </div> <div class="nav-left"> nav left </div> <div class="footer"> footer </div> </div> </div>
</body>
</body>
</html>
Page layout - Script Codes CSS Codes
{ border:1px dotted blue;
}
body { margin: 0;
}
div { text-align: center; font-family: Futura; font-size: 28px; padding: 0px; margin:0px; border-radius:3px;
}
p { margin:0;
}
.full-container { padding:2%; background: url("http://turbo.designwoop.com/uploads/2012/03/19_free_subtle_textures_3px_tile.jpg"); background-repeat: repeat; border-radius: 0;
}
.header { background: rgb(255, 207, 0); width: auto; height: 100px; clear:both;
}
.main-container { max-width: 700px; margin: 0 auto; background: #1F1F1F;
}
.nav-bar { width: auto; height:38px; background:rgb(255, 92, 0); clear:both; margin-top: .4%;
}
.main-content { background: rgb(104, 153, 211); float: right; width: 63.5%; height: 600px; padding:0; margin-top: .4%; margin-bottom: .4%;
}
.nav-left { background: rgb(69, 119, 212); float: left; width: 36%; height: 600px; padding:0; margin-top: .4%; clear:left;
}
.footer { background-color: rgb(255, 207, 0); height: 100px; width: auto; padding:0; clear:both;
}
Developer | Harry Sadler |
Username | harrysadlermusic |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 1,862 Kb |
Views | 8,096 |
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!
Name | Size |
A hover effect SFS draft | 2,300 Kb |
SFS hover cross-browser testing | 4,153 Kb |
A hover effect | 2,142 Kb |
Secret Store - item filter v3 | 5,675 Kb |
Secret Store - item filter v2 | 5,651 Kb |
Simple Javascript Quiz | 3,427 Kb |
Symphony Style Quiz | 9,131 Kb |
Item design 2 | 3,205 Kb |
SFS Secret Store | 11,361 Kb |
Forked to learn rotateY | 2,189 Kb |
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!
Name | Username | Size |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Shopping cart | Andiio | 6,581 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!