Scribd
Upload
16 views7 pages

<!DOCTYPE html>

The document is an HTML template for a website called 'Jumia', featuring a header with a logo, search bar, and navigation menu for various product categories. The main content includes sections for top categories and featured products, each with images and descriptions. A footer provides links to help and support, company information, and social media connections.

Uploaded by

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

<!DOCTYPE html>

The document is an HTML template for a website called 'Jumia', featuring a header with a logo, search bar, and navigation menu for various product categories. The main content includes sections for top categories and featured products, each with images and descriptions. A footer provides links to help and support, company information, and social media connections.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jumia Lookalike</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

header {
background-color: #ff9900;
color: white;
padding: 10px 0;
}

.top-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

.logo h1 {
margin: 0;
}

.search-bar input {
padding: 10px;
width: 400px;
border-radius: 5px;
border: none;
}

.search-bar button {
padding: 10px 20px;
background-color: white;
color: #ff9900;
border: none;
border-radius: 5px;
cursor: pointer;
}

.user-menu a {
color: white;
text-decoration: none;
margin: 0 10px;
}

nav {
background-color: #333;
padding: 10px 0;
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}

nav ul li {
margin: 0 20px;
}

nav ul li a {
color: white;
text-decoration: none;
}

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

/* Main Content */
main {
padding: 20px;
max-width: 1200px;
margin: auto;
}

.categories, .featured-products {
margin-bottom: 40px;
}

h2 {
color: #333;
margin-bottom: 20px;
}

.category-list, .product-grid {
display: flex;
gap: 20px;
}

.category-item, .product-item {
background-color: white;
border-radius: 5px;
padding: 10px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.category-item img, .product-item img {


max-width: 100%;
border-radius: 5px;
}

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

.footer-content {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: auto;
}

.footer-column h3 {
margin-bottom: 20px;
}

.footer-column ul {
list-style: none;
padding: 0;
}

.footer-column ul li {
margin-bottom: 10px;
}

.footer-column ul li a {
color: white;
text-decoration: none;
}

.footer-column ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="top-header">
<div class="logo">
<h1>Jumia</h1>
</div>
<div class="search-bar">
<input type="text" placeholder="Search products, brands and categories">
<button>Search</button>
</div>
<div class="user-menu">
<a href="#">Sign In</a> |
<a href="#">Help</a> |
<a href="#">My Cart</a>
</div>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Supermarket</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Health & Beauty</a></li>
<li><a href="#">Home & Office</a></li>
<li><a href="#">Phones & Tablets</a></li>
<li><a href="#">More Categories</a></li>
</ul>
</nav>
</header>

<!-- Main Content Section -->


<main>
<section class="categories">
<h2>Top Categories</h2>
<div class="category-list">
<div class="category-item">
<img src="https://via.placeholder.com/150" alt="Fashion">
<p>Fashion</p>
</div>
<div class="category-item">
<img src="https://via.placeholder.com/150" alt="Phones">
<p>Phones & Tablets</p>
</div>
<div class="category-item">
<img src="https://via.placeholder.com/150" alt="Electronics">
<p>Electronics</p>
</div>
<!-- Add more categories as needed -->
</div>
</section>

<section class="featured-products">
<h2>Featured Products</h2>
<div class="product-grid">
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product 1">
<p>Product 1</p>
<p>$25.00</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product 2">
<p>Product 2</p>
<p>$40.00</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product 3">
<p>Product 3</p>
<p>$15.00</p>
</div>
<!-- Add more products as needed -->
</div>
</section>
</main>

<!-- Footer Section -->


<footer>
<div class="footer-content">
<div class="footer-column">
<h3>Help & Support</h3>
<ul>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Return Policy</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="footer-column">
<h3>About Us</h3>
<ul>
<li><a href="#">About Jumia</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Follow Us</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>

You might also like