Name: orila
Address: 164 Đường số 4, Phường 16, Quận Gò Vấp, Thành phố Hồ Chí Minh, 164 Đường số 4, Phường 16, Quận Gò Vấp, Thành phố Hồ Chí Minh, 164 Đường số 4, Phường 16, Quận Gò Vấp, Thành phố Hồ Chí Minh, 777777, VN
Telephone: 028.7100.29.29
Price range: 300.000 VNĐ - 10.000.000 VNĐ

Header

Header 1

MyBrand

<div class="custom-header-1">
<div class="logo">MyBrand</div>
<ul class="nav-menu">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Sản Phẩm</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
<div class="cta"><button>Mua Ngay</button></div>
</div>

.custom-header-1 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.custom-header-1 .logo {
font-size: 24px;
font-weight: bold;
color: #333;
}
.custom-header-1 .nav-menu {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.custom-header-1 .nav-menu li a {
text-decoration: none;
color: #555;
font-weight: 500;
}
.custom-header-1 .nav-menu li a:hover {
color: #e74c3c;
}
.custom-header-1 .cta button {
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.custom-header-1 .cta button:hover {
background-color: #c0392b;
}

// js event for header 1
document.querySelector('.custom-header-1 .cta button').addEventListener('click', function () {
alert('Đã nhấn Mua Ngay!');
});

Header 2

MyBrand

<div class="custom-header-1">
<div class="logo">MyBrand</div>
<ul class="nav-menu">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Sản Phẩm</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
<div class="cta"><button>Mua Ngay</button></div>
</div>

.custom-header-1 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.custom-header-1 .logo {
font-size: 24px;
font-weight: bold;
color: #333;
}
.custom-header-1 .nav-menu {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.custom-header-1 .nav-menu li a {
text-decoration: none;
color: #555;
font-weight: 500;
}
.custom-header-1 .nav-menu li a:hover {
color: #e74c3c;
}
.custom-header-1 .cta button {
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.custom-header-1 .cta button:hover {
background-color: #c0392b;
}
.custom-header-2 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.custom-header-2 .logo {
font-size: 24px;
font-weight: bold;
color: #333;
}
.custom-header-2 .nav-menu {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.custom-header-2 .nav-menu li a {
text-decoration: none;
color: #555;
font-weight: 500;
}
.custom-header-2 .nav-menu li a:hover {
color: #e74c3c;
}
.custom-header-2 .cta button {
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.custom-header-2 .cta button:hover {
background-color: #c0392b;
}

// js event for header 1
document.querySelector('.custom-header-1 .cta button').addEventListener('click', function () {
alert('Đã nhấn Mua Ngay!');
});
// js event for header 1
document.querySelector('.custom-header-2 .cta button').addEventListener('click', function () {
alert('Đã nhấn Mua Ngay!');
});

Header 3

MyBrand

<div class="custom-header-2">
<div class="logo">MyBrand</div>
<ul class="nav-menu">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Sản Phẩm</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
<div class="cta"><button>Mua Ngay</button></div>
</div>

.custom-header-2 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.custom-header-2 .logo {
font-size: 24px;
font-weight: bold;
color: #333;
}
.custom-header-2 .nav-menu {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.custom-header-2 .nav-menu li a {
text-decoration: none;
color: #555;
font-weight: 500;
}
.custom-header-2 .nav-menu li a:hover {
color: #e74c3c;
}
.custom-header-2 .cta button {
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.custom-header-2 .cta button:hover {
background-color: #c0392b;
}

// js event for header 1
document.querySelector('.custom-header-2 .cta button').addEventListener('click', function () {
alert('Đã nhấn Mua Ngay!');
});

Trà 1

Cà phê Espresso cao cấp Arabica robusta cà phê hạt pha máy

Cà phê sữa hòa tan K Coffee Delight 3 in 1 170g

Thư viện Giao diện (UI Components)

Thành phần

Header

Header 1

Header 2

Header 3

orila

Sản Phẩm