I created this design using Microsoft Paint and now I want to bring it to life using HTML and CSS.
https://i.stack.imgur.com/dwNZi.png
The numbers represent the box numbers in the design.
Here is my attempt at coding this:
HTML file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
</div>
</body>
</html>
CSS file
html, body {
margin: 0px;
height: 100%;
width: 100%;
}
#box1 {
border: solid black 3px;
height: 10%;
}
#box2 {
border: solid black 3px;
height: 3%;
}
#box3 {
border: solid black 3px;
height: 84%;
}
#box4 {
border: solid black 1px;
width: 50%;
height: 95%;
float: left;
margin: 5px;
}
#box5 {
border: solid black 1px;
width: 23%;
height: 25%;
float:left;
margin-left: 10px;
margin-top: 6px;
}
#box6 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
#box7 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
#box8 {
(missing code for box8 styling goes here)
}
View how it looks:
https://i.stack.imgur.com/rzexS.png
I'm struggling to get box8 positioned on the right side and setting it as a float right messes up the layout. Also, the boxes inside box3 are inconsistent. When I fullscreen the page, the boxes move to the right side instead of staying put. I tried using percentages for responsiveness but it didn't work as expected. Can anyone provide guidance on how to achieve this design?