Scribd
Upload
5 views

Css Styles

The document contains CSS code for styling various elements of a website layout, including a menu bar, navigation links, content sections, boxes, and a footer. Styles are defined for positioning, sizing, coloring and other properties of elements like images, text, buttons and containers. The CSS is divided into sections for the menu bar, navigation, multiple content sections with headings and images, feature boxes, and footer.

Uploaded by

S I V A G U R U . E
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Css Styles

The document contains CSS code for styling various elements of a website layout, including a menu bar, navigation links, content sections, boxes, and a footer. Styles are defined for positioning, sizing, coloring and other properties of elements like images, text, buttons and containers. The CSS is divided into sections for the menu bar, navigation, multiple content sections with headings and images, feature boxes, and footer.

Uploaded by

S I V A G U R U . E
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 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