Template Layout 2
template de homepage layout
Código
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enepta - Landing Page</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body, html {
font-family: 'Poppins', sans-serif;
background-color: #f4f6f9;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Sidebar styling */
.sidebar {
height: 100%;
position: fixed;
width: 220px;
background-color: #fff;
padding-top: 20px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: all 0.3s;
}
.sidebar .nav-link {
font-size: 1.1rem;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
transition: background 0.2s;
}
.sidebar .nav-link:hover {
background-color: red;
border-radius: 8px;
padding: 10px;
}
.sidebar .nav-link svg {
margin-right: 10px;
}
.sidebar .nav-link.active {
background-color: green;
color: #fff;
border-radius: 8px;
}
/* Main content styling */
.main-content {
margin-left: 240px;
padding: 20px;
}
.main-content .product-image {
max-width: 200px;
transition: transform 0.3s;
}
.main-content .product-image:hover {
transform: scale(1.1);
}
.main-content .card {
margin-bottom: 20px;
border-radius: 10px;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.main-content .card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
.card-body {
padding: 20px;
}
.btn-add-cart, .btn-buy-now {
border-radius: 25px;
padding: 8px 20px;
margin-right: 10px;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
.btn-add-cart {
background-color: #fff;
border: 1px solid #333;
}
.btn-add-cart:hover {
background-color: #e2e6ea;
}
.btn-buy-now {
background-color: #4CAF50;
color: #fff;
border: none;
}
.btn-buy-now:hover {
background-color: #45a049;
}
.daily-deals {
margin-top: 20px;
}
.daily-deals .deal-item {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
align-items: center;
}
.daily-deals .deal-item img {
max-width: 50px;
border-radius: 50%;
margin-right: 10px;
}
.help-box {
background-color: #edf2f7;
padding: 20px;
border-radius: 12px;
margin-top: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.help-box:hover {
transform: scale(1.05);
}
.help-box p {
margin-bottom: 0;
}
.help-box svg {
width: 20px;
height: 20px;
margin-right: 10px;
}
/* Responsive adjustments */
@media (max-width: 992px) {
.sidebar {
display: none;
}
.main-content {
margin-left: 0;
padding: 10px;
}
/* Center align content in smaller screens */
.main-content .product-image {
max-width: 100%;
margin-bottom: 20px;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
}
.daily-deals .deal-item {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 576px) {
.main-content .product-image {
max-width: 100px;
}
.btn-add-cart, .btn-buy-now {
margin-right: 0;
margin-bottom: 10px;
padding: 10px 20px;
}
.help-box {
padding: 15px;
}
.help-box svg {
width: 18px;
height: 18px;
}
}
</style>
</head>
<body>
<!-- Sidebar -->
<nav class="sidebar">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3.293l6 6V13a1 1 0 0 1-1 1h-2v-3H5v3H3a1 1 0 0 1-1-1V9.293l6-6zM7.293 2.5a1 1 0 0 1 1.414 0l6.646 6.647A.5.5 0 0 1 14.5 10H13v3.5a.5.5 0 0 1-1 0V10H4v3.5a.5.5 0 0 1-1 0V10H1.5a.5.5 0 0 1-.354-.854l6.647-6.646z"/>
</svg>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85zm-5.242 0a5.5 5.5 0 1 1 0-7.778 5.5 5.5 0 0 1 0 7.778z"/>
</svg>
Explore
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
</ul>
</nav>
<!-- Main Content -->
<div class="main-content">
<div class="row">
<!-- Product Feature -->
<div class="col-lg-8">
<div class="card">
<div class="card-body d-flex flex-column flex-lg-row">
<img src="https://via.placeholder.com/200" alt="Product" class="product-image me-4 mb-4 mb-lg-0">
<div>
<h5>Enepta Studio3 Wireless Headphone</h5>
<p><strong>Price:</strong> $450.55</p>
<div>
<strong>Color:</strong>
<button class="btn btn-outline-primary btn-sm">Cyan</button>
<button class="btn btn-outline-primary btn-sm">Red</button>
<button class="btn btn-outline-primary btn-sm">Purple</button>
</div>
<div class="d-flex align-items-center mt-3 flex-column flex-sm-row">
<button class="btn btn-add-cart mb-2 mb-sm-0">Add to Cart</button>
<button class="btn btn-buy-now">Buy Now</button>
</div>
</div>
</div>
</div>
<!-- Product List -->
<div class="row mt-4">
<div class="col-md-4">
<div class="card text-center">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Enepta Beats Pro</h5>
<p class="card-text">$33.38</p>
<button class="btn btn-outline-success btn-sm">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Enepta Studio Pro</h5>
<p class="card-text">$43.38</p>
<button class="btn btn-outline-success btn-sm">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Enepta Beats 3</h5>
<p class="card-text">$35.38</p>
<button class="btn btn-outline-success btn-sm">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- Daily Deals -->
<div class="col-lg-4">
<h4>Daily Deals</h4>
<div class="daily-deals">
<div class="deal-item">
<img src="https://via.placeholder.com/50" alt="...">
<p>Best Enepta Headphone - $55.55</p>
</div>
<div class="deal-item">
<img src="https://via.placeholder.com/50" alt="...">
<p>Enepta Beats Wireless - $45.55</p>
</div>
<div class="deal-item">
<img src="https://via.placeholder.com/50" alt="...">
<p>Enepta Headphones 700 - $65.55</p>
</div>
</div>
<!-- Help Section -->
<div class="help-box">
<h5>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM5.255 5.786a.237.237 0 0 0-.247-.247c-.168.001-.32.149-.336.338a.228.228 0 0 0 .249.247c.201.006.4.013.596.054.415.089.84.319 1.123.808.197.33.304.658.382.948.074.272.107.594.143.886.037.301.07.595.138.873.079.31.227.516.477.635.207.1.45.087.632-.046.187-.138.31-.371.332-.6.024-.243-.013-.486-.084-.728-.09-.292-.213-.577-.409-.824-.329-.421-.833-.7-1.523-.708-.37-.002-.738.122-.993.374z"/>
<path d="M8 14A6 6 0 1 1 8 2a6 6 0 0 1 0 12zM8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z"/>
</svg>
Need Help?
</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Contact us for more info.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>