Scribd
Upload
2 views5 pages

Amazoncss

The document contains CSS styles for a website layout, including styles for a navbar, search bar, hero section, categories, and footer. It defines various classes for elements such as logos, buttons, and text, specifying properties like font size, colors, margins, and background images. The styles aim to create a visually appealing and user-friendly interface for the website.

Uploaded by

lithis2649
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views5 pages

Amazoncss

The document contains CSS styles for a website layout, including styles for a navbar, search bar, hero section, categories, and footer. It defines various classes for elements such as logos, buttons, and text, specifying properties like font size, colors, margins, and background images. The styles aim to create a visually appealing and user-friendly interface for the website.

Uploaded by

lithis2649
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

*{

font-family: Arial, Helvetica, sans-serif ;


margin:0;
border:border-box;
}
.navbar{

height: 60px;
background-color:black;
color:white;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.nav-logo
{
margin: 5px;
}

.logo
{
background-image: url("imagelogo.png");
background-size: cover;
height: 50px;
width:113px;
margin:5px;

}
.border:hover
{
border:1px solid white
}
.nav-add
{
display:flex;
color:white;

}
/* box2 */
.add-first
{
font-size: 12px;
color: #cccccc;
margin-left:15px;
}
.add-sec
{
font-size: 14px;
color:#ffffff;
margin-left: 3px;

}
.add-icon{
display: flex;
margin:5px;

}
/* box3 */
.search
{

display: flex;
width: 620px;
height:40px;
background-color: none;
margin-left:5px;
justify-content: space-evenly;
border-radius: 6px;

}
.search-icon
{
background-color: orange;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
width:45px;
height: 40px;
border:none;
display: flex;
justify-content:center ;
align-items: center;
font-size: 18px;
color:black;
}
.search:hover{
border: 2px solid orange;
}
.search-select
{
width: 50px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
text-align: center;
border:none;
background-color: #cfcfcf;

}
.search-input
{
width:100%;
border:none;

}
.first
{
font-size: 12px;

}
.second
{
font-size:14px;
}
.cart
{
font-size: 30px;
}
/* panel */
.panel
{
width: 100%;
height: 39px;
background-color: #232F3E;
display: flex;
align-items: center;
}
.menu-all
{
color: #ffffff;
font-size: 14px;
padding: 8px;

}
.item:hover
{
border-color: #ffffff;
border-style: solid;
border-radius: 1px;

}
.option
{
font-size: 14px;
color:white;
margin: 5px;
display: flex;
}
.option p{
margin:5px;
}
/* hero */
.hero
{
background-image: url("imagestart.png");
width: 100%;
height: 350px;
background-size: cover;
display: flex;
justify-content: center;
align-items: flex-end;

}
.message
{
display: flex;
background-color: #ffffff;
height: 40px;
justify-content: center;
align-items: center;
width:95%;
margin-bottom:70px;
}
.message a{
color: rgb(76, 76, 231);
}
/* category */
.category
{
display:flex;
justify-content: space-evenly;
background-color:rgb(255, 222, 20) ;

}
.shop
{ margin-top: 15px;
background-color: #ffffff;

height: 400px;
width:23%;
}
.image
{height: 325px;
background-image:url("imagegame.png");
background-size: cover;
margin-left: 15px;
margin-right: 15px;
margin-top: 8px;
margin-bottom: 8px;

}
.headingmain
{margin-top: 5px;
margin-left: 15px;
font-size: 21px;
}
.para
{
margin-left: 15px;
color:rgb(81, 81, 240);

}
.footerone
{ margin-top: 80px;
background-color: #2f5e85;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
color: #ffffff;
}
.footertwo
{
height: 400px;
background-color: #232F3E;
display: flex;
justify-content: space-evenly;
}
.bottom
{
display: flex;
justify-content: space-evenly;
width :20%;
margin-top: 20px;

}
.list
{
color: #ffffff;
margin-top:8px;
display: block;
}
.us{
font-size: 18px;
}
.about
{
margin-top: 10px;
display: flex;
color: #dddddd ;
}
.footpanelthree
{ height: 68px;
background-color: #232F3E;
border-top: 0.5px solid #dddddd ;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.logoone{

background-image: url("image.png");
background-size:cover;
height: 50px;
width: 100px;
}
.copy
{
height: 76px;
background-color: #131a22;
color :#ffffff;

}
.copyone
{ text-align: center;
padding-top: 10px;
}
.copytwo
{text-align: center;
padding: 2px;

You might also like