→Here, we will create the two simple web page layout (outline) using HTML & CSS.
Web Page Layout 1
Step 1: Open any text editor app like notepad or code editor like VS Code.
Step 2: Create a file named index.htm or index.htm and you use the below code to create simple layout using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<style>
header, nav, div, footer {
text-align: center;
border: 1px solid black; /* Adding a 1px solid black border to each section */
margin: 5px; /* Adding some margin for better spacing */
padding: 10px; /* Adding padding for better readability */
}
</style>
</head>
<body>
<header>
<h1>This is header</h1>
</header>
<nav>
<h2>This is navbar</h2>
</nav>
<div style="display: flex;">
<div style="flex: 1; padding: 20px;">
<h2>Left content</h2>
</div>
<div style="flex: 1; padding: 20px;">
<h2>Right content</h2>
</div>
</div>
<footer>
<h3>This is footer</h3>
</footer>
</body>
</html>
Step 3: After writing the code you can save the file and open launch the page in web browser.
Finally, your layout ready ..
Likewise, by following the above steps you can create this web page layout 2 with HTML & CSS
Below are the code for creating the above layout .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Layout</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.div1 {
width: 45%;
background-color: lightblue;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
.div2 {
width: 45%;
background-color: lightgreen;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
.div3 {
width: 100%;
background-color: lightcoral;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">--div | div--</div>
<div class="div2">---div | div--</div>
</div>
<div class="container">
<div class="div1">--div | div--</div>
<div class="div2">---div | div--</div>
</div>
<div class="div3">---full width div--</div>
</body>
</html>
