Scribd
Upload
12 views

Css

Uploaded by

Đỗ Tuấn Anh
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
12 views

Css

Uploaded by

Đỗ Tuấn Anh
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

/* Reset một số định dạng mặc định */

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

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}

/* Header */
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}

.logo h1 {
margin-left: 10px;
}

nav ul {
list-style: none;
display: flex;
}

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

nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}

nav ul li a:hover {
text-decoration: underline;
}

/* Thanh tìm kiếm */


.search-bar input {
padding: 8px;
border: none;
border-radius: 4px;
}

.search-bar button {
padding: 8px 12px;
background-color: #ff6b6b;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

.search-bar button:hover {
background-color: #e74c3c;
}

/* Banner */
.banner {
position: relative;
text-align: center;
}

.banner img {
width: 100%;
height: 300px;
object-fit: cover;
}

.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}

/* Sản phẩm nổi bật */


.featured-products {
padding: 40px 20px;
background-color: #fff;
}

.featured-products h2 {
text-align: center;
margin-bottom: 30px;
}

.product-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.product {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
margin: 10px;
text-align: center;
width: 250px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product img {
max-width: 100%;
height: auto;
}

.product h3 {
margin: 15px 0;
}

.product p {
font-size: 16px;
color: #e74c3c;
}

.product button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.product button:hover {
background-color: #2980b9;
}

/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}

You might also like