<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {
border: 1px solid black;
width: 50%;
height: 500px;
margin: 5%;
#ldiv1{
width: 14%;
height: 140px;
margin: 22px;
float: left
#ldiv1_1{
border: 2px solid black;
width: 100%;
height: 130px;
margin: 10px;
background-color: green;
}
#rdiv1 {
border: 2px solid black;
width: 70%;
height: 140px;
margin: 22px;
float: left;
border: none;
#rdiv2_1 {
border: 2px solid black;
width: 80%;
height: 30px;
background-color: green;
#rdiv2_2 {
border: 2px solid black;
width: 50%;
height: 30px;
margin-top: 20px;
background-color: green;
}
#rdiv2_3 {
border: 2px solid black;
width: 100%;
height: 25px;
margin-top: 25px;
border: none;
#rdiv2_3_3 {
border: 2px solid black;
display: flex;
border: none;
#rdiv3_1 {
border: 2px solid black;
height: 25px;
width: 90px;
background-color: green;
#rdiv3_2 {
border: 2px solid black;
height: 25px;
width: 90px;
margin-left: 6%;
background-color: green;
#rdiv3_3 {
border: 2px solid black;
height: 25px;
width: 90px;
margin-left: 6%;
background-color: green;
#rdiv3_4 {
border: 2px solid black;
height: 25px;
width: 90px;
margin-left: 6%;
background-color: green;
#rdiv3_5 {
border: 2px solid black;
height: 25px;
width: 90px;
margin-left: 6%;
background-color: green;
#rdiv3_6 {
border: 2px solid black;
height: 25px;
width: 90px;
margin-left: 6%;
background-color: green;
#div2 {
border: 2px solid black;
height: 220px;
width: 690px;
margin-top: 25%;
margin-left: 22px;
display: flex;
border: none;
#ldiv2{
border: 2px solid black;
height: 180px;
width: 21%;
#rdiv2{
border: 2px solid black;
height: 220px;
width: 690px;
margin-left: 40px;
#div3{
border: 2px solid black;
height: 50px;
width: 690px;
margin: 22px;
display: flex;
border: none;
#rdiv3{
border: 2px solid black;
height: 50px;
width: 690px;
margin-left: 150px;
background-color: green;
</style>
</head>
<body>
<div id="div1">
<div id="ldiv1">
<div id="ldiv1_1"><center><h3>Logo</h3></center></div>
</div>
<div id="rdiv1">
<div id="rdiv2_1"></div>
<div id="rdiv2_2"></div>
<div id="rdiv2_3">
<div id="rdiv2_3_1">
<div id="rdiv2_3_2"></div>
<div id="rdiv2_3_3">
<div id="rdiv3_1"></div>
<div id="rdiv3_2"></div>
<div id="rdiv3_3"></div>
<div id="rdiv3_4"></div>
<div id="rdiv3_5"></div>
<div id="rdiv3_6"></div>
</div>
</div>
</div>
</div>
<div id="div2">
<div id="ldiv2"><h4><center></center>navigation</center></h4></div>
<div id="rdiv2"><center><h3>content</h3></center></div>
</div>
<div id="div3">
<div id="ldiv3"></div>
<div id="rdiv3"><center><h3>Footer</h3></center></div>
</div>
</div>
</body>
</html>
