Aide: Problème pour réaliser un projet durant une formation.
Bonjour je suis en formation et je dois réaliser ce projet (Avec des media queries:Ordinateur, tablette, smartphone), mais je bloque.
voici mon HTML:
<!doctype html>
<html lang="fr" xmlns="http://www.w3.org/1999/html">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nike, just do it !</title>
<link href="css/nike.css" rel="stylesheet">
</head>
<body>
<header>
<div class="nav">
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a class="triangle" href="#">Hommes</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Vestes</a></li>
<li><a href="#">Pantalons</a></li>
<li><a href="#">Chaussures</a></li>
</ul>
</li>
<li><a class="triangle" href="#">Femmes</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Vestes</a></li>
<li><a href="#">Pantalons</a></li>
<li><a href="#">Chaussures</a>
<!-- Second Tier Drop Down -->
</ul>
</li>
<li><a class="triangle" href="#">Enfants</a>
<ul>
<li><a href="#">Vestes</a></li>
<li><a href="#">Pantalons</a></li>
<li><a href="#">Chaussures</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
xmlnslink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 162" width="300px"
height="168px" class="size-logo">
<path class="svg-logo"
d="M90,85.9l29.2-78.6H99.9L86.5,41.4l3-34.1H69.2L40.1,85.9h18.8l14.3-38.1l-2.5,37.1L90,85.9z M112.7,85.9
l29.2-78.6h-18.3L93.9,85.9H112.7z M165.6,81l-1-39.5l27.7-32.1L165.6,81z M300,53.3l-93.9,24.2l2.5-7.4h-19.8l6.4-18.8H212L217,37
l-16.8,1l5.9-15.8h16.3l5.4-14.3H175l-19.3,22.7l9.4-23.2h-18.8l-29.2,78.6h19.3l12.4-33.6v33.6h24.7L85,109.1
c-9.2,2.6-17.5,3.8-24.7,3.5c-7.2-0.3-12.8-2.3-16.8-5.9c-8.9-6.6-12-16.6-9.4-30.1c1.6-8.9,5.3-17.5,10.9-25.7
C31.8,64.7,22.1,76.4,15.8,85.9C8.9,96.1,4.5,106.2,2.5,116.1S1.7,134,6,140.3c11.5,19.1,36.7,20.4,75.6,4L300,53.3z" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="size-icon" viewBox="0 0 512 499.36"
role="img">
<title>
GitHub</title>
<path class="svg-github" fill-rule="evenodd"
d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="size-icon" viewBox="0 0 512 416.32"
role="img">
<title>
Twitter</title>
<path class="svg-twitter"
d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="size-icon" viewBox="0 0 512 512"
role="img">
<title>
Slack</title>
<path class="svg-slack" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z">
</path>
<path class="svg-slack"
d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" fill-rule="evenodd"
class="size-icon" viewBox="0 0 40 41" role="img">
<title>Open Collective</title>
<path class="svg-open-collective" fill-opacity=".4"
d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z">
</path>
<path class="svg-open-collective"
d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z">
</path>
</svg>
</div>
</header>
<main>
<div class="imageWall">
<img src="images/wall.jpg" alt="wallNike">
</div>
<section class="barreSolde">
<h1 class="titreSolde">C'est trop les soldes -50% sur tout !</h1>
</section>
<section class="boxChaussure">
<article class="article">
<img class="imageArticle chaussure1" src="images/jordan-1.webp" alt="">
<div class="prix">
<span>26780 €</span>
</div>
<div class="marque">
<span>Air Jordan 12</span>
</div>
</article>
<article class="article">
<img class="imageArticle" src="images/jordan-2.webp" alt="">
<div class="prix">
<span>7680 €</span>
</div>
<div class="marque">
<span>Air Jordan 15</span>
</div>
</article>
<article class="article">
<img class="imageArticle" src="images/jordan-3.webp" alt="">
<div class="prix">
<span>26543 €</span>
</div>
<div class="marque">
<span>Air Jordan 02</span>
</div>
</article>
<article class="article">
<img class="imageArticle" src="images/jordan-4.webp" alt="">
<div class="prix">
<span>14900 €</span>
</div>
<div class="marque">
<span>Air Jordan 6</span>
</div>
</article>
<article class="article">
<img class="imageArticle" src="images/jordan-5.webp" alt="">
<div class="prix">
<span>4780 €</span>
</div>
<div class="marque">
<span>Air Jordan 49</span>
</div>
</article>
<article class="article">
<img class="imageArticle" src="images/jordan-6.webp" alt="">
<div class="prix">
<span>18980 €</span>
</div>
<div class="marque">
<span>Air Jordan 32</span>
</div>
</article>
</section>
</main>
<footer class="boxFooter">
<div class="footerLogo">
<img class="imageLogo" src="images/logo-nike.svg" alt="logoNike">
</div>
<div class="boxTexte">
<h3 class="texteFooter">Just do it !</h3>
</div>
</footer>
</body>
Et voici mon Css:
:root {
--main-color-1: black;
--main-color-2: yellow;
--main-color-3: white;
--main-color-4: gray;
}
.svg-logo, .svg-github, .svg-slack, .svg-twitter, .svg-open-collective {
fill: var(--main-color-3);
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: var(--main-color-3);
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
color: var(--main-color-1);
background-color: var(--main-color-2);
}
p {
text-align: center;
}
nav {
margin: 50px;
background-color: var(--main-color-1);
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: var(--main-color-1);
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: var(--main-color-3);
color: var(--main-color-1);
border-radius: 5px;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
.triangle:after {
content: ' ';
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--main-color-3); /* Couleur de la flèche */
margin-left: 5px; /* Un peu d'espace entre le texte et le triangle */
}
li > a:only-child:after {
content: '';
}
* {
margin: 0;
padding: 0;
}
/* header*/
header{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
align-content: center;
background-color: var(--main-color-1);
position: absolute;
width: 100%;
}
.size-icon, .size-logo{
padding: 15px;
}
/*image sidebar*/
.imageWall{
width: 100%;
height: auto;
overflow: hidden;
}
.imageWall img {
width: 100%;
height: 100%;
object-fit: cover;
}
.titreSolde{
height: 100px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
/* barre Solde*/
.barreSolde{
position: relative;
bottom: 130px;
}
/*Chaussures*/
.boxChaussure{
display: flex;
flex-flow: row wrap;
align-items: center;
}
.article{
width: calc(100%/3);
aspect-ratio: 1/1;
position: relative;
}
.imageArticle{
width: 100%;
filter: grayscale(100%);
transition: transform 0.6s ease, filter 0.6s ease;
overflow: hidden;
}
.imageArticle:hover{
filter: grayscale(0%);
transform: scale(1.2);
overflow: hidden;
}
.prix{
position: absolute;
background-color: var(--main-color-2);
color: var(--main-color-1);
font-weight: bold;
left: 70px;
top: 20px;
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-20deg);
box-shadow: 15px 15px 15px var(--main-color-1);
}
.marque{
position: absolute;
background-color: var(--main-color-2);
color: var(--main-color-1);
font-weight: bold;
left: 220px;
top: 20px;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 15px 15px 15px var(--main-color-1);
transform: rotate(10deg);
}
/*footer*/
.boxFooter {
display: flex;
align-content: center;
padding: 0;
}
.footerLogo {
flex-grow: 1;
}
.imageLogo {
background-color: var(--main-color-2);
width: 100%;
height: 100%;
}
.texteFooter{
text-align: center;
font-size: 100px;
font-weight: bold;
color: var(--main-color-2);
background-color: var(--main-color-1);
width: 100%;
height: 100%;
align-content: center;
}
.boxTexte{
flex-grow: 2;
}
/*Media QUeries*/
@media(max-width:992px){
.imageWall{
display: none;
}
}
Merci si vous pouvez m'aider à comprendre.
Répondre avec citation
Partager