<!DOCTYPE html>
Etech Competition
<link rel="stylesheet" href="/css/styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
![Logo du site](https://res.cloudinary.com/practicaldev/image/fetch/s--JPa7duB3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/v1/image/Black%20White%20Retro%20Y2K%20Streetwear%20Clothing%20Logo.png)
<nav>
<div class="wrapper">
<section>
<ul class="nav-links">
<li>
<!--<a href="#home">HOME</a>-->
<input type="checkbox" id="showMega">
<label for="showMega" class="mobile-item">HOME</label>
<div class="mega-box">
<div class="content">
<div class="row">
<img src="image/images (1).jpeg">
</div>
<div class="row">
<header>Vêtements</header>
<hr>
<h3>MANTEAUX AND CO</h3>
<hr>
<ul class="mega-links">
<li>
<a href="#">Doudounes</a>
</li>
<li>
<a href="#">Manteaux</a>
</li>
<li>
<a href="#">Parkas</a>
</li>
<li>
<a href="#">Vestes</a>
</li>
</ul>
<hr>
</div>
<div class="row">
<header>HAUTS</header>
<ul class="mega-links">
<hr>
<li><a href="#">Chemises</a></li>
<li><a href="#">Debardeurs</a></li>
<li><a href="#">Gilets</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Pulls</a></li>
<li><a href="#">Sweats</a></li>
<li><a href="#">T-shirts</a></li>
</ul>
<hr>
</div>
<div class="row">
<header>BAS</header>
<ul class="mega-links">
<li><a href="#">Jeans</a></li>
<li><a href="#">Pantalons</a></li>
<li><a href="#">Shors</a></li>
<li><a href="#">Sportswear</a></li>
<button>Beach</button>
<button>Underwear</button>
<button>Nonveutes</button>
</ul>
</div>
<div class="row spec">
<header>Marques</header>
<ul>
<li><a href="#">Canada Goose</a></li>
<li><a href="#">Carthartt</a></li>
<li><a href="#">Eleven Paris</a></li>
<li><a href="#">Obey</a></li>
<li><a href="#">Fenfield</a></li>
<li><a href="#">Superdry</a></li>
<li><a href="#">The North Face</a></li>
<li><a href="#">Tous les marques</a></li>
</ul>
</div>
</div>
</div>
</li>
<li><a href="#FEMME">FEMME</a></li>
<li><a href="#SNEAKERS">SNEAKERS</a></li>
<li><a href="#WHAT'S HOT">WHAT'S HOT</a></li>
<li><a href="#MARQUES">MARQUES</a></li>
</ul>
</section>
<section>
<ul class="nav-links">
<li><a href="MAGASIS">MAGASINS |</a></li>
<li><a href="TENDANCE">TENDANCE |</a></li>
<li><a href="LOOKBOOK">LOOKBOOK</a></li>
</ul>
</section>
</div>
</nav>
<main>
<h1>Votre horizon vertements</h1>
<div class="container">
<section class="choice">
<figure>
<img src="image/Infographie-QuestiondeStyle1-FamillesdeStyles-1024x768-compressed.png" >
</figure>
</section>
<section class="focus">
<div class="show">
<div class="Focus-on">
<figure>
<h2>FOCUS ON</h2>
<img src="image/bb00f93979e99783d4e4adbd34508afa.jpg" alt="-1789- CALA" class="image">
</figure>
</div>
<div class="What's-hot">
<figure>
<h2>WHAT'S HOT</h2>
<img src="image/Streetwear-homme-0.webp" alt="CHATON" class="image">
</figure>
</div>
<div class="Look-book">
<figure>
<h2>LOOKBOOK</h2>
<img src="image/images.jpeg" alt="boy" class="image">
</figure>
</div>
</div>
</section>
</div>
</main>
<footer>
<article>
<p>Suivez nous sur Tiktok <a href="#tiktok">Tiktok</a> </p>
<p>Pour tout vos commande de sites internet, contacte <a href="#">MEtech</a></p>
</article>
<article>
<p>Réalisations : </p>
</article>
</footer>
Ajust it with the css :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
- { box-sizing: border-box; font-family: 'Poppins', sans-serif; }
main .show {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 10px;
}
h1, h2 {
font-family: sans-serif;
letter-spacing: 5px;
font-size: 25px;
text-align: center;
}
.page-couverture img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
img {
display: block;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}
.image {
width: 100%;
max-width: 350px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}
/--------------------------------------------------------------/
.mega-box {
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top: 85px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
showMega:checked ~ .mega-box {
opacity: 1;
visibility: visible;
}
/************************************/
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000;
color: #fff;
z-index: 999;
}
.nav-links {
display: flex;
list-style-type: none;
padding: 0;
}
.nav-links li {
margin-right: 20px;
position: relative;
}
.nav-links li:last-child {
margin-right: 0;
}
.nav-links li a {
text-decoration: none;
color: inherit;
}
.wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 0 30px;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
}
/*******************************/
/* Dropdown menu styles */
/************************************/
/.mega-box {
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top: 100%; /* Position the dropdown box below the list item
opacity: 0;
visibility: hidden;
background-color: #000; /* Add a background color
transition: opacity 0.3s ease, visibility 0.3s ease;
}*/
.nav-links li:hover .mega-box {
opacity: 1;
visibility: visible;
}
.content .row {
width: 30%; /* Adjust width as needed /
margin-bottom: 15px;
color: #fff; / Set text color to white */
}
.content .row header {
font-size: 19px;
margin-bottom: 5px; /* Add some spacing below the header /
color: #fff; / Set text color to white */
}
.content .row .mega-links li a {
color: #fff; /* Set text color to white /
text-decoration: none;
display: block;
padding: 5px 0; / Add some padding to the links */
}
.content .row .mega-links li a:hover {
color: #ff0; /* Change color on hover */
}
/***************************/
.content {
display: flex;
justify-content: space-between;
}
.content .row ul {
list-style-type: none;
padding: 0;
}
.content .row ul li {
margin-bottom: 5px; /* Add some spacing between list items */
}
.content .row ul li a {
color: #fff; /* Set text color to white */
text-decoration: none;
display: block;
}
.mega-box {
position: absolute;
left: 10%; /* Adjust left to center the menu horizontally /
width: 80%; / Set the width to 80% of the screen width /
max-height: 300px; / Set a reasonable max-height for the menu /
overflow-y: auto; / Enable vertical scrolling if the content exceeds max-height /
padding: 10px 30px; / Add padding for better aesthetics /
top: 100%; / Position the dropdown box below the list item /
opacity: 0;
visibility: hidden;
background-color: #000; / Add a background color /
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 99; / Ensure the dropdown menu appears above other elements */
}
Top comments (0)