Scribd
Upload
1 views

css

The document is a CSS stylesheet that defines the layout and styling for a web page, including a grid layout for the body, header, navigation, product list, sidebar, and footer. It specifies styles for various elements such as buttons, product cards, and social icons, with responsive design adjustments for different screen sizes. The design uses a color scheme with distinct background colors for different sections to enhance visual appeal.

Uploaded by

sinhngay21042004
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
1 views

css

The document is a CSS stylesheet that defines the layout and styling for a web page, including a grid layout for the body, header, navigation, product list, sidebar, and footer. It specifies styles for various elements such as buttons, product cards, and social icons, with responsive design adjustments for different screen sizes. The design uses a color scheme with distinct background colors for different sections to enhance visual appeal.

Uploaded by

sinhngay21042004
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/ 3

*{

margin: 0;
padding:0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: grid;
grid-template-columns: 70% 30%;
max-width: 1200px;
margin: 0 auto;
}

header {
background-color: #c7cc19;
color: #fff;
padding: 20px;
text-align: center;
grid-column: 1 / span 2;

nav {
background-color: #ffa486;
color: #fff;
text-align: center;
padding: 10px;
grid-column: 1 / span 2;
}

nav ul {
list-style: none;
}

nav ul li{
display: inline;
margin-right: 20px;
}

.product-list{
display: grid;
grid-template-columns: repeat(3, 1fr);

gap: 20px;
padding: 20px;

grid-column: 1;

.product-card{
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
width: 100%;
text-align: center;
}

.product-card img{

max-width: 100%;
height: auto;
}

.sidebar{
background-color: #199cff;
color: #fff;
padding: 10px;
grid-column: 2;

.social-icons {
margin-top: 20px;
}

.social-icons a {
color: #fff;
text-decoration: none;
display: block;
margin-bottom: 10px;
}

@media(max-width: 576px){

.product-list{
grid-template-columns: 1fr;
}

.product-card{
width: 100%;
margin-bottom: 20px;
}

.sidebar{
grid-column: 1 / span 2;
}

.footer{
grid-template-columns: 1fr;
}

.footer{
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
grid-column: 1 / span 2;
display: grid;
}

.footer-item {
padding: 10px;
}

@media(min-width: 768px){

.footer{
grid-template-columns: repeat(3 , 1fr);
}
}

.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}

.button1{
border-radius: 2px;
}
.button3{
border-radius: 8px;
}
.button4{
border-radius: 12px;
}
.button5{
border-radius: 50%;
}

You might also like