I Create Simple bed Room With html & Css not responsive
Code....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bed Room</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.main_div{
height:80vh;
width:50vw;
background-color:red;
position:relative;
margin:20% auto ;
}
.frist{
height:9vh;
width:20vw;
background:green;
position:absolute ;
top:20px;
left:150px;
text-align:center ;
padding-top:15px;
}
.second{
height:15vh;
width:35vw;
background:yellow;
position:absolute ;
top:90px;
left:75px;
text-align:center ;
padding-top:15px;
}
.third{
height:70px;
width:40px;
background:black;
color:#fff;
position:absolute ;
top:250px;
right:5px;
text-align:center ;
}
hr{
margin-top:8px;
}
.bed{
background:#555;
height:45%;
width:150px;
position:absolute ;
top:250px;
left:170px;
text-align:center ;
padding-top:20%;
color:#fff;
}
.b-1{
background:#ff523b;
height:20px;
width:30px;
position:absolute ;
top:10px;
left:15px;
border:1px;
border-radius:8px;
}
.b-1{
background:green;
height:20px;
width:30px;
position:absolute ;
top:10px;
left:15px;
border:1px;
border-radius:8px;
}
.b-2{
background:#ff523b;
height:20px;
width:30px;
position:absolute ;
top:10px;
right:15px;
border:1px;
border-radius:8px;
}
</style>
</head>
<body>
<div class="main_div">
<div class="frist">
<h3>TV</h3>
</div>
<div class="second">
<h3>Sofha</h3>
</div>
<div class="third">
<h5>frezz</h5>
<hr>
</div>
<div class="bed">
<h3>Bed</h3>
<div class="b-1"></div>
<div class="b-2"></div>
</div>
</div>
</body>
</html>
No comments