Simple responsive web layout

Developer
Harry Sadler
Size
1,840 Kb
Views
6,072
  1. Simple responsive web layout Previews
  2. Simple responsive web layout HTML Codes
  3. Simple responsive web layout CSS Codes

How do I make an simple responsive web layout?

A simple responsive web layout with a max-width of the main-container at 700px.. What is a simple responsive web layout? How do you make a simple responsive web layout? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.

Simple responsive web layout Previews
IQ Test

Simple responsive web layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simple responsive web layout</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <body> <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> </body>
</html>
</body>
</html>

Simple responsive web layout - Script Codes CSS Codes

body { background-color: LightGray; margin: 0; padding: 2%;
}
div { text-align: center; font-family: Futura, "Trebuchet MS", Arial; font-size: 27px; letter-spacing: 7px; word-spacing: 5px; color: white; margin: 0 .4% .4% 0; border-radius: 3px;
}
.main-container { background-color: LightGray; max-width: 700px; margin: 0 auto;
}
.header { background-color: DarkGreen; width: auto; height: 100px; clear: both;
}
.nav-bar { background-color: DarkOrange; width: auto; height: 40px; clear: both;
}
.nav-left { background-color: DarkRed; width: 35.5%; height: 490px; clear: left;
}
.main-content { background-color: DarkBlue; width: 63.5%; height: 490px; float: right;
}
.footer { background-color: Purple; height: 100px; width: auto; clear: both;
}
Simple responsive web layout - Script Codes
Simple responsive web layout - Script Codes
Home Page Home
Developer Harry Sadler
Username harrysadlermusic
Uploaded November 29, 2022
Rating 3
Size 1,840 Kb
Views 6,072
Do you need developer help for Simple responsive web 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!

Harry Sadler (harrysadlermusic) Script Codes
Name
Audio Button example
Forked to learn rotateY
Symphony Style Quiz
Page layout
Simple Javascript Quiz
SFS hover cross-browser testing
Secret Store - item filter v2
A hover effect
Secret Store - item filter v3
Item design 2
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!