Scribd
Upload
14 views

Style Css

The document contains CSS code that defines styles for a website layout. It styles elements like the header, navigation bar, main content section, sidebar, footer, and embedded images. The header has a background image and the navbar has list items for navigation links. The main content and aside sections are displayed flexibly side by side. Social media links have hover effects and images are used for products being displayed.

Uploaded by

iruljack176
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

Style Css

The document contains CSS code that defines styles for a website layout. It styles elements like the header, navigation bar, main content section, sidebar, footer, and embedded images. The header has a background image and the navbar has list items for navigation links. The main content and aside sections are displayed flexibly side by side. Social media links have hover effects and images are used for products being displayed.

Uploaded by

iruljack176
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

header{

background-color: royalblue;
height: 90px;
background-image: url('img/xiaomi.png');
background-position: center;
background-repeat: no-repeat;
text-align: left;
color: white;
font-size: 70px;
line-height: 90px;
}
nav{
height: 40px;
background-color: white;
}
nav ul{
list-style: none;
color: white;
}
nav ul li{
background-color: royalblue;
border-radius: 50%;
height: 40px;
width: 70px;
margin-left: 30px;
float: right;
font-size: 17px;
line-height: 40px;
text-align: center;
}
nav ul li a{
color: white;
text-decoration: none;
}
nav ul li a:hover{
color: yellow;
}
.flex{
display: flex;
clear: both;
}
section{
min-height: 450px;
flex: 77%;
border: 2px solid royalblue;
border-radius: 50px;
color: royalblue;
margin: 10px;
padding: 10px;
text-align: center;
}
aside{
min-height: 450px;
flex: 23%;
background-color: white;
border: 2px solid royalblue;
border-radius: 50px;
color: royalblue;
margin: 10px;
padding: 10px;
text-align: center;
}
.ig{
background-image: url('img/ig.png');
background-repeat: no-repeat;
height: 118px;
width: 118px;
margin-left: 29%;
margin-bottom: 5%;
margin-top: 10%;
}
.iga{
color: royalblue;
text-decoration: none;
}
.iga:hover{
color:purple;
}
.yt{
background-image: url('img/yt.png');
background-repeat: no-repeat;
height: 100px;
width: 178px;
margin-left: 18%;
margin-bottom: 5%;
margin-top: 40%;
}
.yta{
color: royalblue;
text-decoration: none;
}
.yta:hover{
color: red;
}
footer{
background-color: royalblue;
height: 50px;
text-align: center;
color: white;
font-size: 20px;
line-height: 50px;
}
.smartphone{
background-image: url('img/smartphone.png');
height: 277px;
width: 400px;
background-repeat: no-repeat;
margin-left: 29%;
}
.monitor{
background-image: url('img/monitor.png');
height: 280px;
width: 400px;
background-repeat: no-repeat;
margin-left: 29%;
}
.smarttv{
background-image: url('img/smartv.png');
height: 250px;
width: 400px;
background-repeat: no-repeat;
margin-left: 29%;
}
.cctv{
background-image: url('img/cctv.png');
height: 400px;
width: 400px;
background-repeat: no-repeat;
margin-left: 29%;
}

You might also like