HOW TO MAKE A FRONTEND WEBSITE USING HTML/CSS
Hey guys once again welcome to the Decoders blog, I hope you all are doing well and today I'm present with another astonishing website(using HTML/CSS). The given code will help you to built it, so just follow the codes and make your page easily , and enjoy it with your friends
HERE IS SOME GLIMPSE OF HOW YOUR PAGE IS GONNA LOOK LIKE!!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap"
rel="stylesheet">
</head>
<style>
* {
font-family: 'Baloo Tammudu 2', cursive;
}
#image {
height: 9%;
width: 6%;
position: relative;
left: 8px;
top: 3px;
}
/* .navbar{
border: 2px solid black;
height: 45%; */
#navbar1 {
/* border: 1px solid red; */
padding: 0px;
margin: 0px;
width: 72px;
position: relative;
left: 11%;
bottom: 78px;
}
#navbar1:hover{
border: 2px solid red;
border-radius: 5px;
background-color: rgba(243, 53, 53, 0.822);
cursor: pointer;
}
#navbar2 {
/* border: 1px solid red; */
width: 92px;
padding: 0px;
margin: 0px;
position: relative;
left: 17%;
bottom: 115px;
}
#navbar2:hover{
border: 2px solid green;
border-radius: 5px;
background-color: rgba(85, 238, 54, 0.822);
cursor: pointer;
}
#navbar3 {
/* border: 1px solid red; */
width: 82px;
padding: 0px;
margin: 0px;
position: relative;
left: 26%;
bottom: 151px;
}
#navbar3:hover{
border: 2px solid yellow;
border-radius: 5px;
background-color: rgba(251, 255, 1, 0.822);
cursor: pointer;
}
.searchbar {
position: relative;
width: 49%;
left: 34%;
bottom: 107px;
}
#search {
width: 80%;
position: relative;
right: 13%;
top: 23px;
border-top-color: blue;
height: 38px;
border-radius: 10px;
font-size: 22px;
text-align: center;
border-bottom-color: red;
border-left-color: yellow;
border-right-color: green;
}
#logo {
width: 5%;
position: absolute;
left: 60%;
top: 93%;
}
.container1 {
/* border: 2px solid grey; */
height: 29%;
width: 33%;
display: inline-block;
}
.container2 {
/* border: 2px solid grey; */
height: 29%;
width: 33%;
display: inline-block;
}
.container3 {
/* border: 2px solid grey; */
height: 29%;
width: 33%;
display: inline;
}
a {
text-decoration: none;
}
p {
line-height: 12px;
position: relative;
bottom: 19px;
left: 11px;
}
p:hover {
color: black;
}
.container.p {
text-align: center;
}
.container3.img {
position: relative;
bottom: 80%;
}
#special {
position: relative;
bottom: 11%;
left: 67%;
}
#special2 {
position: relative;
bottom: 15%;
}
.logos1 {
position: relative;
left: 26%;
bottom: 37px;
}
.logos2 {
position: relative;
left: 36%;
bottom: 122px;
}
.logos3 {
position: relative;
left: 51%;
bottom: 203.45px;
}
.logos4 {
position: relative;
left: 61%;
bottom: 286.45px;
}
</style>
<body>
<div class="navbar">
<img id="image" src="google.jpg" alt="google">
<div id="navbar1">HOME</div>
<div id="navbar2">CONTACT US</div>
<div id="navbar3">MORE INFO</div>
</div>
<div class="searchbar">
<img src="Google_2015_logo.svg.png" alt="" srcset="">
<input type="search" name="search" id="search" placeholder="wanna search
anything">
<img id="logo" src="index.png" alt="" srcset="">
</div>
<div class="logos1">
<a href="#">
<img src="Facebook-logo.png" alt="" srcset="" width="88px">
</a>
</div>
<div class="logos2">
<a href="#">
<img src="md_5b321c98efaa6.jpg" alt="" srcset="" width="78px">
</a>
</div>
<div class="logos3">
<a href="#">
<img src="inde]]]x.png" alt="" srcset="" width="58px">
</a>
</div>
<div class="logos4">
<a href="#">
<img src="md_5b321ca3631b8.jpg" alt="" srcset="" width="68px">
</a>
</div>
<div class="container1">
<a target="_blank" href="#">
<img src="NEET_2020_JEE_Main_2020.webp" srcset="" width="330px">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
autem excepturi. Non aut cupiditate eligendi facilis, unde magni cumque
adipisci.
</p>
</a>
</div>
<div class="container2">
<a target="_blank" href="#">
<img src="1325976138.0.jpg" alt="" srcset="" width="372px">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita
veritatis facilis sapiente delectus odio dolore qui cupiditate reiciendis
fugit quasi?</p>
</a>
</div>
<div class="container3">
<a href="#">
<img id="special2" src="images.png" alt="" srcset="" width="400px"
style="bottom: 135px;">
<p id="special" style="bottom: 91.93px;">Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Iste <br> quis dolores ad incidunt molestiae
quidem,<br> sit enim doloribus aliquid! Ipsam?</p>
</a>
</div>
</body>
</html>
Comments
Post a Comment