Css Styles

You might also like

Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1of 14

*{

margin: 0%;
padding: 0%;
}

.menu-bar{
width: 100%;
height: 280px;
background-color: black;

}
.menu-bar img{
width: 120px;
height: 120px;
margin-left: 40px;
margin-top: 30px;
}
abbr{
font-size: 20px;
color: #ffff;
font-family: cursive;
position: absolute;
top: 50px;
left: 180px;
font-size: 50px;

}
.fa-solid {
margin-right: 10px;
font-size: 18px;
}
.nav{
float: right;
display: flex;
list-style: none;
margin-right: 120px;
margin-top: 30px;

}
.nav li a{
padding: 50px;
text-decoration: none;
font-size: 20px;
color: #ffff;
font-family: Verdana, Geneva, Tahoma, sans-serif;

}
.dropdown {
list-style: none;
margin-top: 50px;
margin-left: 10px;
line-height: 40px;
display: none;
}
.nav a:hover{
color: yellow;
}
.nav :nth-child(2):hover .dropdown{
display: block;
}

.buy-now button{
width: 230px;
height: 50px;
border-radius: 50px;
background: none;
border: none;
color: #ffff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.buy-now button:hover{
color: yellow;
}
.content-1{
width: 100%;
height: 600px;
background-color: black;
}
.content-1 h2{
color:gold;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 25px;
margin-left: 20px;
}
.content-1 h1{
color:rgb(255, 255, 255);
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 50px;
margin-left: 150px;
margin-top: 10px;

}
.content-1 h3{

height: 3px;
width: 100px;
background-color: gold;
position: absolute;
left: 350px;
bottom: 427px;
}
.content-1 a{
position: absolute;
text-decoration: none;
color:rgb(0, 0, 0);
font-family:Verdana, Geneva, Tahoma, sans-serif;
background-color: gold;
left: 270px;
bottom: 270px;
border-radius: 50px;
padding: 20px;
}
.content-1 img{
width: 550px;
height: 550px;
position: absolute;
left: 600px;
top: 200px;

}
.content-1 h4{
height: 100px;
width: 100px;
position: absolute;
left: 1180px;
bottom: 400px;
font-size: 25px;
border-radius: 100px;

}
.content-1 h4 span{
margin-left: 40px;
}
.content-2{
width: 100%;
height: 700px;
display: grid;
justify-content: center;
position: relative;
}
.content-2 h2{
color: rgb(25, 29, 148);
margin-top: 30px;
font-family: segoe script;
}
.content-2 h1{
font-family:Verdana, Geneva, Tahoma, sans-serif;
position: absolute;
left:630px;
top: 70px;
}
.box-1:hover{
margin-top:20px;
}
.box-2:hover{
margin-top:20px;
}
.box-3:hover{
margin-top:20px;
}

.box-1{
width: 300px;
height: 480px;
border: 1px solid gray;
border-radius: 20px;
position: absolute;
top: 170px;
left: 150px;
}
.box-1 img {
width: 200px;
height: 200px;
margin-left: 45px;
margin-top: 10px;

}
.box-1 h2{
margin-left: 70px;
}
.box-1 p{
color: black;
font-family: cursive;
font-weight: bolder;
font-size: 20px;
margin-left: 38px;
}
.box-1 h5{
width: 50px;
height: 50px;
background-color: gold;
position: relative;
left: 115px;
top: 30px;
border-radius: 100px;

}
.box-1 i{
position: absolute;
top: 18px;
left: 13px;

}
.box-1:hover{
background-color: red;
}
.box-2{
width: 300px;
height: 480px;
border: 1px solid gray;
border-radius: 20px;
position: absolute;
top: 170px;
left: 620px;
}
.box-2 img {
width: 200px;
height: 200px;
margin-left: 45px;
margin-top: 10px;
border-radius: 100px;

}
.box-2 h2{
margin-left: 70px;
}
.box-2 p{
color: black;
font-family: cursive;
font-weight: bolder;
font-size: 20px;
margin-left: 38px;
}
.box-2 h5{
width: 50px;
height: 50px;
background-color: gold;
position: relative;
left: 115px;
top: 30px;
border-radius: 100px;

}
.box-2 i{
position: absolute;
top: 18px;
left: 13px;

}
.box-2:hover{
background-color: red;
}
.box-3{
width: 300px;
height: 480px;
border: 1px solid gray;
border-radius: 20px;
position: absolute;
top: 170px;
left: 1100px;
}
.box-3 img {
width: 200px;
height: 200px;
margin-left: 45px;
margin-top: 10px;

}
.box-3 h2{
margin-left: 70px;
}
.box-3 p{
color: black;
font-family: cursive;
font-weight: bolder;
font-size: 20px;
margin-left: 38px;
}
.box-3 h5{
width: 50px;
height: 50px;
background-color: gold;
position: relative;
left: 115px;
top: 30px;
border-radius: 100px;
}
.box-3 i{
position: absolute;
top: 18px;
left: 13px;

}
.box-3:hover{
background-color: red;
}
.content-3{
width: 100%;
height: 800px;
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),
url(img/02.jpg);
background-size:cover;
background-repeat:no-repeat;
position:relative;

}
.content-3 h2{
font-size:80px;
color:white;
position:absolute;
top:200px;
left:260px;
}
.content-3 span{
font-size:130px;
margin-top:10px;
}
.content-3 h1{
color:#89B758;
font-size:100px;
position:absolute;
margin-left:540px;
margin-top:280px;
}
.content-3 h3{
position:absolute;
top:550px;
left:280px;
color:white;
background-color:#89B758;
padding:20px;
border-radius:30px;
}
.content-4{
width:100%;
height:850px;
background-color:black;
color:white;
position:relative;
font-family:sans-serif;

}
.content-4 img{
width:400px;
height:400px;
position:absolute;
left:580px;
top:270px;
}
.content-cen h2{
color:red;
font-family:papyrus;
font-size:35px;
display:flex;
justify-content:center;
padding-top:30px
}
.content-cen p{
font-size:55px;
font-family:sans-serif;
display:flex;
justify-content:center;
margin-top:20px;
font-weight:bolder;
}
.left{
float:right;
margin-right:50px;
text-align:right;

}
.coln-1{
margin-left:100px;
margin-top:50px;
}
.coln-1 h2{
font-size:35px;
}
.coln-1 span{
color:red;
}
.coln-2{
margin-left:100px;
margin-top:50px;
}
.coln-2 h2{
font-size:35px;
}
.coln-2 span{
color:red;
}
.coln-3{
margin-left:100px;
margin-top:50px;
}
.coln-3 h2{
font-size:35px;
}
.coln-3 span{
color:red;
}
.right{
}
.coln-r1{
margin-left:100px;
margin-top:50px;
}
.coln-r1 h2{
font-size:35px;
}
.coln-r1 span{
color:red;
}
.coln-r2{
margin-left:100px;
margin-top:50px;
}
.coln-r2 h2{
font-size:35px;
}
.coln-r2 span{
color:red;
}
.coln-r3{
margin-left:100px;
margin-top:50px;
}
.coln-r3 h2{
font-size:35px;
}
.coln-r3 span{
color:red;
}
.content-5{
width:100%;
height:550px;
justify-content:center;
}
.content-5 p{
text-align:center;
margin-top:30px;
font-family:garamond;
font-weight:bold;
font-size:40px;
color:red;
}
.mid p{
color:black;
font-family:papyrus;
font-weight:bolder;
}
.box1{
width:25%;
height:300px;
border:2px solid black;
border-radius:30px;
margin-top:70px;
margin-left:70px;
position:absolute;
background-color:gold;
}
.box1 h3{
margin:20px;
margin-top:40px;
font-family:lucida handwriting;
position:absolute;

}
.box1 p{
margin-left:20px;
font-size:25px;
font-style:italic;
position:absolute;
margin-top:100px;

}
.box1 a{
margin-left:20px;
margin-top:160px;
font-size:25px;
position:absolute;
font-style:italic;
}
.box1 img{
width:50%;
height:200px;
position:absolute;
margin-left:150px;
margin-top:20px;
}
.box2{
width:100%;
height:300px;
border:2px solid black;
border-radius:30px;
margin-left:500px;
position:absolute;
background-color:gold;
}
.box2 h3{
margin:20px;
margin-top:40px;
font-family:lucida handwriting;
position:absolute;

}
.box2 p{
margin-left:20px;
font-size:25px;
font-style:italic;
position:absolute;
margin-top:100px;

}
.box2 a{
margin-left:20px;
margin-top:160px;
font-size:25px;
position:absolute;
font-style:italic;
}
.box2 img{
width:50%;
height:200px;
position:absolute;
margin-left:150px;
margin-top:20px;
}
.box3{
width:100%;
height:300px;
border:2px solid black;
border-radius:30px;
margin-left:500px;
position:relative;
background-color:gold;
}
.box3 h3{
margin:20px;
margin-top:40px;
font-family:lucida handwriting;
position:absolute;

}
.box3 p{
margin-left:20px;
font-size:25px;
font-style:italic;
position:absolute;
margin-top:100px;

}
.box3 a{
margin-left:20px;
margin-top:160px;
font-size:25px;
position:absolute;
font-style:italic;
}
.box3 img{
width:50%;
height:200px;
position:absolute;
margin-left:150px;
margin-top:20px;
}
footer{
width:100%;
height:550px;
position:relative;
background-color:#232323;
}
footer .p1{
font-size:40px;
position:absolute;
top:60px;
left:100px;
color:white;
}
footer .p2{
font-size:40px;
position:absolute;
top:60px;
left:900px;
color:white;
}
footer .logo{
width:8%;
margin-top:50px;
margin-left:680px;
position:relative;
}
footer .c1{
color:white;
margin-top:15px;
margin-left:120px;
font-family:bold;
font-size:40px;
position:absolute;
}
footer .para1{
color:white;
margin-top:80px;
margin-left:120px;
font-family:Verdana;
font-size:15px;
position:absolute;
}
footer .c2{
color:white;
margin-top:15px;
left:400px;
font-family:bold;
font-size:40px;
position:absolute;
}
footer .para2{
color:white;
margin-top:80px;
left:400px;
font-family:Verdana;
font-size:15px;
position:absolute;
}
footer .c3{
color:white;
margin-top:15px;
left:750px;
font-family:bold;
font-size:40px;
position:absolute;
}
footer .para3{
color:white;
margin-top:80px;
left:750px;
font-family:Verdana;
font-size:15px;
position:absolute;
}
footer .c4{
color:white;
margin-top:15px;
left:1100px;
font-family:bold;
font-size:40px;
position:absolute;
}
footer .img1{
width:60px;
padding:10px;
background-color:white;
border-radius:10px;
height:60px;
position:absolute;
top:260px;
right:350px;
}
footer .img2{
width:60px;
padding:10px;
background-color:white;
border-radius:10px;
height:60px;
position:absolute;
top:260px;
right:250px;
}
footer .img3{
width:60px;
padding:10px;
background-color:white;
border-radius:10px;
height:60px;
position:absolute;
top:260px;
right:150px;
}
footer .p3{
font-size:40px;
position:absolute;
color:white;
top:350px;
right:130px;
}
footer .f1{
position:absolute;
color:white;
font-size:18px;
top:420px;
left:100px;
}
footer .f2{
position:absolute;
color:white;
font-size:18px;
top:420px;
left:220px;
}
footer .f3{
position:absolute;
color:white;
font-size:18px;
top:420px;
left:310px;
}
footer .f4{
position:absolute;
color:white;
font-size:18px;
top:420px;
left:400px;
}
footer .f5{
position:absolute;
color:white;
font-size:18px;
top:420px;
left:490px;
}
footer .f6{
position:absolute;
color:white;
font-size:18px;
top:420px;
left:580px;
}
footer .f7{
position:absolute;
color:white;
font-size:18px;
top:460px;
left:100px;
font-size:20px;
}
.fa-facebook{
position:absolute;
color:white;
top:420px;
left:1100px;
font-size:30px;
}
.fa-instagram{
position:absolute;
color:white;
top:420px;
left:1150px;
font-size:30px;
}
.fa-whatsapp{
position:absolute;
color:white;
top:420px;
left:1200px;
font-size:30px;
}
.fa-twitter{
position:absolute;
color:white;
top:420px;
left:1250px;
font-size:30px;
}

You might also like