<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML-Kit Tools HTML Tidy plugin">
<link href="layout.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="square" font=10px>
<p></p>
</div>
<div id="wrapper">
<img class="A" src="download.jpg" alt="Solar Panels"/>
<img class="B" src= "wind.jpg" alt="Windmills" />
<img class="C" src= "biomass.jpg" alt="Biomass" />
<img class="D" src= "renewable.jpg" alt="Renewable Energy" />
</div>
<hr>
<div id = "bottom">
<p>Contact:*********@gmail.com</p>
</div>
</body>
</html>
Sharing the code and css for a webpage layout.
<style type="text/css">
p {
color:#f5f5dc;
font-size:50px;
text-align: center;
margin-top: 20px;
}
body{
background-color:#fffacd;
font-size:100%;
min-width:800px;
}
.square{
height: 100px;
width: 100%;
position:relative;
left:-20px;
border: 2px solid black;
border-radius: 5px;
background-color:#0066cc;
font-size:1.0em;
}
#wrapper{
width:100%;
margin-top: 40px;
margin-bottom: 40px;
}
.A, .B, .C, .D{
width:300px;
height:200px;
float:left;
border:1px solid black;
margin-right:10px;
margin-bottom:40px;
}
.D{
width:270px;
}
#bottom p{
color:black;
font-size:15px;
}
</style>
An inquiry about minimizing the code without squishing elements together is raised. Modifications attempted include using containers.
The issue arises when the page size is reduced, causing elements to overlap and create a messy appearance despite looking fine in full-screen mode.