Saturn Grid System - Prototype1

Developer
Juan Gallardo
Size
1,806 Kb
Views
8,096
  1. Saturn Grid System - Prototype1 Previews
  2. Saturn Grid System - Prototype1 HTML Codes
  3. Saturn Grid System - Prototype1 CSS Codes

How do I make an saturn grid system - prototype1?

Asking for code review . What is a saturn grid system - prototype1? How do you make a saturn grid system - prototype1? This script and codes were developed by Juan Gallardo on 26 December 2022, Monday.

Saturn Grid System - Prototype1 Previews
IQ Test

Saturn Grid System - Prototype1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Saturn Grid System - Prototype1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="belt wrapper"> <div class="m1">.m1</div> <div class="m1">.m1</div> <div class="m1">.m1</div> <div class="m1">.m1</div> <div class="m1">.m1</div> <div class="m1">.m1</div> <div class="m1">.m1</div> <div class="m1">.m1</div>
</div>
<div class="belt wrapper"> <div class="m2">.m2</div> <div class="m2">.m2</div> <div class="m2">.m2</div> <div class="m2">.m2</div>
</div>
<div class="belt wrapper"> <div class="m1">.m2</div> <div class="m3">.m3</div> <div class="m3">.m3</div> <div class="m1">.m1</div>
</div>
<div class="belt wrapper"> <div class="m4">.m4</div> <div class="m4">.m4</div>
</div>
<div class="belt wrapper"> <div class="m5">.m5</div> <div class="m3">.m3</div>
</div>
<div class="belt wrapper"> <div class="m6">.m6</div> <div class="m2">.m2</div>
</div>
<div class="belt wrapper"> <div class="m7">.m7</div> <div class="m1">.m1</div>
</div>
<div class="belt wrapper"> <div class="m8">.m8</div>
</div>
</body>
</html>

Saturn Grid System - Prototype1 - Script Codes CSS Codes

.belt { width: 1800px; max-width: 100%; min-width: 1201px; margin: 0 auto;
}
.belt .m1 { width: 11.388888%; }
.belt .m2 { width: 23.88888%; }
.belt .m3 { width: 36.38888%; }
.belt .m4 { width: 48.888888%; }
.belt .m5 { width: 61.388888%; }
.belt .m6 { width: 73.88888%; }
.belt .m7 { width: 86.38888%; }
.belt .m8 { width: 98.88888%; }
.belt .m1,.belt .m2, .belt .m3, .belt .m4, .belt .m5, .belt .m6, .belt .m7, .belt .m8
{ float: left; margin-left: 0.55555%; margin-right: 0.55555%;
}
/* for demo purposes only */
.belt .m1 { background-color: red; }
.belt .m2 { background-color: yellow; }
.belt .m3 { background-color: blue; }
.belt .m4 { background-color: green; }
.belt .m5 { background-color: salmon; }
.belt .m6 { background-color: #666666; }
.belt .m7 { background-color: #330033; }
.belt .m8 { background-color: #00FF99; }
.belt .m1, .belt .m2, .belt .m3, .belt .m4, .belt .m5, .belt .m6, .belt .m7, .belt .m8
{ height: 72px; }
.wrapper { background-color: #333; height: 96px; margin-bottom: 10px; padding-top: 20px; }
body { margin: 0; padding: 0; }
Saturn Grid System - Prototype1 - Script Codes
Saturn Grid System - Prototype1 - Script Codes
Home Page Home
Developer Juan Gallardo
Username JGallardo
Uploaded December 26, 2022
Rating 3
Size 1,806 Kb
Views 8,096
Do you need developer help for Saturn Grid System - Prototype1?

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!

Juan Gallardo (JGallardo) Script Codes
Name
Fixed sticky header when scrolling
BruxZir - Homepage - Video concept
BruxZir - Tablet - Home Page
BruxZir - Testimonial Section
Travel Location Select
Fixed Header when scrolling
BruxZir - Home Page -3
Template - iPad Air - Horizontal
Button - Test
Blog Concept 4
Create amazing SEO content 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!