#DESIGNING WEBSITE LAYOUT:-(VIDEO37)
SOURCE CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<style>
*{
margin: 0;
padding: 0;
}
header {
position: sticky;
top: 0;
}
nav{
background-color: rgb(56, 56, 255);
color: white;
height: 53px;
}
main{
background-color: black;
color: white;
padding: 34px;
}
.container{
background-color: white;
text-align: center;
padding: 55px 23px;
margin: 12px 34px;
}
.box1{
background-color:rgb(56, 56, 255) ;
height: 70vh;
width: 45%;
display: inline-block;
margin: 0 12px;
}
.box2{
background-color:rgb(56, 56, 255) ;
height: 70vh;
width: 45%;
display: inline-block;
margin: 0 12px;
}
footer{
height: 100px;
background-color:white' ;
}
.text-box{
padding: 34px;
border: 2px solid white;
margin: 50px 25vw;
font-size: 2em;
border-radius: 13px;
}
.blue-box {
height: 32px;
width: 32px;
background: rgb(56, 56, 255);
position: fixed;
bottom: 12px;
right: 23px;
border-radius: 60px;
}
hover:text-box{
border: 2px solid rgb(116, 116, 255);
}
</style>
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="text-box">
WELCOME TO SRG WEB STUDIO'S WEBSITE
</div>
<div class="blue-box">
</div>
</main>
<footer>
</footer>
</body>
</html>
Comments
Post a Comment