Simple Layout

Developer
Joanne Whelan
Size
1,950 Kb
Views
12,144
  1. Simple Layout Previews
  2. Simple Layout HTML Codes
  3. Simple Layout CSS Codes

How do I make an simple layout?

What is a simple layout? How do you make a simple layout? This script and codes were developed by Joanne Whelan on 16 January 2023, Monday.

Simple Layout Previews
IQ Test

Simple Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="logo"> <img src="https://chic-chester.co.uk/wp-content/uploads/2014/08/20140806_LogoSupporterPlaceholder.png" width="150px" height="150px" /> </div> <nav> <ul> <li><a href="#">Nav 1</a></li> <li><a href="#">Nav 2</a></li> <li><a href="#">Nav 3</a></li> </ul> </nav> <div class="banner"> <h1>BANNER</h1> </div> <div class="content-container"> <div id="article1"> <h2>Article 1</h2> </div> <div id="article2" > <h2>Article 2</h2> </div> <div id="product1"> <h2>Product 1</h2> </div> <div id="product2"> <h2>Product 2</h2> </div> </div> <footer> <p>Footer</p> </footer>
</div>
</body>
</html>

Simple Layout - Script Codes CSS Codes

*{ font-family: century gothic; text-align: center;
}
.wrapper { background-color: lavender; color: white; padding: 5px;
}
.logo {}
.nav { background-color: white;
}
nav ul { list-style-type: none; margin: 0; padding: 0;
}
nav ul li { float: left;
}
nav li a { display: block; width: 360px; text-decoration: none; color: orchid;
}
nav ul li a:hover{ background-color: palegreen; color: black;
}
.banner { background-color: lightblue;
}
#article1 { background-color: mediumslateblue; float: left; padding: 50px;
}
#article2{ background-color: mistyrose; float: left; padding: 50px;
}
#product1{ background-color: mediumvioletred; float: right; padding: 50px;
}
#product2{ background-color: plum; float: right; padding: 50px;
}
footer { background-color: paleturquoise; clear: both;
}
.content-container{ display: flex; justify-content: space-around;
}
Simple Layout - Script Codes
Simple Layout - Script Codes
Home Page Home
Developer Joanne Whelan
Username jooonebug
Uploaded January 16, 2023
Rating 3
Size 1,950 Kb
Views 12,144
Do you need developer help for Simple 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!

Joanne Whelan (jooonebug) Script Codes
Name
ID Selector
Pseudo Selectors
Wishlist
Border Effects
A Pen by Joanne Whelan
Background Images
Image link
Decendant Selector
JQuery Practice
Universal Selector
Create amazing captions 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!