Layout4
How do I make an layout4?
What is a layout4? How do you make a layout4? This script and codes were developed by Altynai on 14 October 2022, Friday.
Layout4 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Layout4</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header"> <h4> Header</h4>
</div>
<div class="nav"> Nav </div>
<div class="section"> <div class="section-section">section</div> <div class="section-header"> header</div> <div class="section-article"> article</div> <div class="section-footer"> footer</div> </div> <div class="aside">Aside</div> <div class="footer"> <h4> Footer </h4> </div>
</body>
</html>
Layout4 - Script Codes CSS Codes
body{ background-color: grey;
}
.header { background-color: lightgrey; height: 80px; width: 1163px; text-align: center; border: 1px solid black;
}
.nav { background-color: lightgrey; height: 200px; width: 320px; text-align: center; float: left; border: 1px solid black; margin-top: 10px; line-height:200px;
}
.section { background-color: lightgrey; height: 200px; width: 500px; text-align: center; float: left; border: 1px solid black; margin-left: 10px; margin-top: 10px;
}
.section-section { margin-top: 5px;
}
.section-header { border: 1px solid black; border-radius: 8px; background-color: silver; margin: 12px 2px 6px 2px;
}
.section-article{ border: 1px solid black; border-radius: 8px; background-color: silver; height: 100px; line-height:100px; margin: 6px 2px 6px 2px;
}
.section-footer { border: 1px solid black; border-radius: 8px; background-color: silver; margin: 6px 2px 6px 2px;
}
.aside { background-color: lightgrey; height: 200px; width: 320px; text-align: center; float: left; border: 1px solid black; margin: 10px; line-height:200px;
}
.footer { background-color: lightgrey; height: 80px; width: 1163px; text-align: center; border: 1px solid black; clear: both;
}
Developer | Altynai |
Username | Altynai |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 1,712 Kb |
Views | 16,192 |
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 |
Layout 16 Position Absolute | 1,743 Kb |
Make css html | 1,465 Kb |
A Pen by Altynai | 2,280 Kb |
Layout 12 | 1,702 Kb |
Function JS | 1,342 Kb |
Layout 19 | 2,135 Kb |
Layout 16 Inline-block | 1,990 Kb |
Layout 15 | 1,921 Kb |
Layout 11 | 1,690 Kb |
Bootstrap test | 1,949 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 |
Awesome | Samarthpd | 2,901 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
Promodoro | Bencarp | 1,712 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Simple Weather App | Cmwebby | 0 Kb |
The Walking Raymarcher | Xorxor_hu | 7,934 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Twitch TV | Natester13 | 4,488 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!