From 906eb87e381f3f4ff248f9f07f61988a5fda84ab Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Mon, 7 Oct 2024 09:17:22 +0200 Subject: [PATCH 01/11] ajout d elements html et css --- assets/script.js | 60 ++++-- assets/style.css | 473 +++++++++++++++++++++++++++++------------------ index.html | 361 ++++++++++++++++++++++++------------ 3 files changed, 574 insertions(+), 320 deletions(-) diff --git a/assets/script.js b/assets/script.js index 4fe57504..fe28c8fb 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,18 +1,46 @@ const slides = [ - { - "image":"slide1.jpg", - "tagLine":"Impressions tous formats en boutique et en ligne" - }, - { - "image":"slide2.jpg", - "tagLine":"Tirages haute définition grand format pour vos bureaux et events" - }, - { - "image":"slide3.jpg", - "tagLine":"Grand choix de couleurs de CMJN aux pantones" - }, - { - "image":"slide4.png", - "tagLine":"Autocollants avec découpe laser sur mesure" + { + image: "slide1.jpg", + tagLine: "Impressions tous formats en boutique et en ligne", + }, + { + image: "slide2.jpg", + tagLine: + "Tirages haute définition grand format pour vos bureaux et events", + }, + { + image: "slide3.jpg", + tagLine: "Grand choix de couleurs de CMJN aux pantones", + }, + { + image: "slide4.png", + tagLine: "Autocollants avec découpe laser sur mesure", + }, +]; +/* + const dots = document.querySelector("dots"); + function showDots() { + for (let i = 0; i < slides.length; i++) { + const dot = document.createElement("div"); + dot.classList.add("dot"); + dots.appendChild(dot); + console.log(dot); + console.log(dots); } -] + } + showDots(); + */ +let index = 0; +img = slides[1].image; +document.querySelector(".arrow_right").addEventListener("click", () => { + if (index < 0) { + index = slides.length; + } else if (index > slides.length) { + index = 0; + } else { + img = slides[index].image; + index++; + } +}); +console.log(index); +console.log(img); diff --git a/assets/style.css b/assets/style.css index ebec468b..5f6e53fe 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,297 +1,408 @@ /* variables declaration */ :root { - --primary-color: #3396C0; - --secondary-color: #CD006B; - --third-color: #EEE325; + --primary-color: #3396c0; + --secondary-color: #cd006b; + --third-color: #eee325; } /* Reset CSS */ * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - font-size: 100%; - vertical-align: baseline; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; + vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } body { - + max-width: 1440px; } section { - margin-block: 6em; + margin-block: 6em; } h2 { - font-family: 'Roboto Slab', sans-serif; - font-size: 40px; - font-weight: 900; - margin-block: 1em; + font-family: "Roboto Slab", sans-serif; + font-size: 40px; + font-weight: 900; + margin-block: 1em; } -h3{ - font-family: 'Roboto Slab', sans-serif; - font-size: 22px; - font-weight: 900; - margin-block: 1em; +h3 { + font-family: "Roboto Slab", sans-serif; + font-size: 22px; + font-weight: 900; + margin-block: 1em; } -p, li { - font-family: Roboto, sans-serif; - font-size: 16px; - line-height: 26px; +p, +li { + font-family: Roboto, sans-serif; + font-size: 16px; + line-height: 26px; } .container { - max-width: 1440px; - margin-inline:auto; - padding-inline: 5%; + max-width: 1440px; + margin-inline: auto; + padding-inline: 5%; } header { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } -.logo{ - width: 260px; - margin-block: 10px; +.logo { + width: 260px; + margin-block: 10px; } .btn { - background-color: var(--primary-color) ; - padding: 16px 32px; - margin-inline:5px; - border-radius: 5px; - color: white; - text-decoration: none; + background-color: var(--primary-color); + padding: 16px 32px; + margin-inline: 5px; + border-radius: 5px; + color: white; + text-decoration: none; } .devis { - background-color: var(--secondary-color); + background-color: var(--secondary-color); } #banner { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - min-height: 470px; - position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + min-height: 470px; + position: relative; } .banner-img { - position: absolute; - width: 100%; - height: 100%; - z-index: -1; - object-fit: cover; - object-position: center; + position: absolute; + width: 100%; + height: 100%; + z-index: -1; + object-fit: cover; + object-position: center; + overflow: hidden; } /* Code CSS en prévision de l'ajout d'un carousel pour la bannière */ /* Gestion des fleches du carrousel */ #banner .arrow { - position: absolute; + position: absolute; + display: flex; + width: 100%; + + padding: 10px; + cursor: pointer; } #banner .arrow_left { - left: 10px; + left: 14px; + position: absolute; + background-color: #28363d; + padding: 5px; + border-radius: 20px 0 0 20px; } #banner .arrow_right { - right: 10px; + right: 14px; + position: absolute; } /* Gestion des points du carrousel */ .dots { - position: absolute; - bottom: 40px; - display: flex; + position: absolute; + bottom: 60px; + display: flex; + cursor: pointer; + justify-content: center; + width: 100%; } .dot { - margin-inline: 5px; - width: 13px; - height: 13px; - background-color: #ffffff00; - border: 3px solid #fff; - border-radius: 100%; - box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);; + margin-inline: 5px; + width: 13px; + height: 13px; + background-color: #ffffff00; + border: 3px solid #fff; + border-radius: 100%; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } .dot_selected { - background-color: #fff; + background-color: #fff; } /* Fin du code CSS pour le carousel */ #banner p { - font-family: 'Roboto Slab', sans-serif; - font-weight: 900; - font-size: 50px; - line-height: 66px; - color: white; - text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); - text-align: center; + font-family: "Roboto Slab", sans-serif; + font-weight: 900; + font-size: 50px; + line-height: 66px; + color: white; + text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); + text-align: center; } #banner span { - display: block; - font-weight: 400; - font-size: 30px; + display: block; + font-weight: 400; + font-size: 30px; } #about-us { - display: flex; + display: flex; } -#about-us article, #about-us aside { - flex:1; +#about-us article, +#about-us aside { + flex: 1; } #about-us li { - background: url("./images/tricolor-icon.png") no-repeat left top; - font-size: 16px; - line-height: 26px; - padding-left:2em; - width: 65%; - margin-bottom: 1em; - + background: url("./images/tricolor-icon.png") no-repeat left top; + font-size: 16px; + line-height: 26px; + padding-left: 2em; + width: 65%; + margin-bottom: 1em; } #products { - display: flex; - align-items: flex-start; - flex-direction: row-reverse; + display: flex; + align-items: flex-start; + flex-direction: row-reverse; } -#products div, #products aside { - flex:1; +#products div, +#products aside { + flex: 1; } #products div { - padding: 0 6em; + padding: 0 6em; } #products h2 { - margin-top: 0; + margin-top: 0; } .bg-yellow { - background-color: var(--third-color); + background-color: var(--third-color); } #question { - display: flex; - flex-direction: column; - align-items: center; - padding-block: 3em; + display: flex; + flex-direction: column; + align-items: center; + padding-block: 3em; } #question h2 { - margin-bottom: 10px; + margin-bottom: 10px; } #question p { - margin-bottom: 20px; + margin-bottom: 20px; } #why-us { - display: flex; - flex-direction: column; - text-align: center; + display: flex; + flex-direction: column; + text-align: center; } -#why-us > div{ - display: flex; - justify-content: space-evenly; +#why-us > div { + display: flex; + justify-content: space-evenly; } #why-us article { - max-width: 320px; - display: flex; - flex-direction: column; + max-width: 320px; + display: flex; + flex-direction: column; } #why-us img { - width: 33%; - height: 150px; - text-align: center; - margin-inline: auto; - margin-block: 0; - object-fit: contain; + width: 33%; + height: 150px; + text-align: center; + margin-inline: auto; + margin-block: 0; + object-fit: contain; } -.bg-lightblue{ - background-color: #E6F4FB; +.bg-lightblue { + background-color: #e6f4fb; } #contact { - margin-bottom: 0; + margin-bottom: 0; } -#contact article, #contact div { - flex:1; +#contact article, +#contact div { + flex: 1; } - #contact .container { - flex-direction: row; - display: flex; - padding: 6em ; + flex-direction: row; + display: flex; + padding: 6em; } #contact .container > div > div { - display: flex; - padding-bottom: 20px; + display: flex; + padding-bottom: 20px; } #contact h3 { - margin-top: 0; - background: url("./images/tricolor-icon.png") no-repeat left top; - padding-left:1.5em; - width: 200px; + margin-top: 0; + background: url("./images/tricolor-icon.png") no-repeat left top; + padding-left: 1.5em; + width: 200px; } .inline-icon { - vertical-align: middle; + vertical-align: middle; } footer { - background-color: #28363D; - color: white; - display: flex; - padding-block: 3em; - justify-content: space-evenly; - font-size: 12px; - align-items: center; + background-color: #28363d; + color: white; + display: flex; + padding-block: 3em; + justify-content: space-evenly; + font-size: 12px; + align-items: center; } footer div { - - position: relative; + position: relative; } .footer-logo { - background-color: white; - max-width: 308px; - padding: 10px; + background-color: white; + max-width: 308px; + padding: 10px; } .footer-contact { - margin-bottom: 1em; - font-weight: 700; - font-size: 16px; - + margin-bottom: 1em; + font-weight: 700; + font-size: 16px; } @media all and (max-width: 1250px) { - #contact > article { - flex: 2; - } + #contact > article { + flex: 2; + } + #about-us { + flex-direction: column-reverse; + width: 100%; + justify-content: center; + align-items: center; + } + #about-us div { + width: 100%; + text-align: center; + } + #products { + flex-direction: column-reverse; + width: 100%; + justify-content: center; + align-items: center; + } } diff --git a/index.html b/index.html index 8c07106a..1c0da331 100644 --- a/index.html +++ b/index.html @@ -1,128 +1,243 @@ - - - - Print it ! - Impressions d'entreprise - - - - - - -
-

- -

- Devis -
-
- -
-
-

Qui sommes-nous ?

-
    -
  • Depuis près de 60 ans nous sommes un imprimeur familial spécialisé dans les besoins d’entreprises de petite et grande taille. Implantés à Rennes dans le quartier Bréquigny, nous accompagnons nos clients dans leurs projets d’impression.
    • -
  • De la création de vos fichiers à la livraison de vos imprimés, nous mettons tout notre savoir-faire à votre disposition afin de répondre au mieux à vos attentes.
    • -
-
- -
-
-
-

Nos produits

-

Grâce à nos nombreuses années d'expérience dans l'impression de produits évènementiels et supports de communication, nous ne cessons d'innover et de perfectionner nos services afin de satisfaire au mieux nos clients. Vous pourrez parcourir les différentes rubriques du site afin de découvrir notre large gamme de papiers et finitions, pour des produits aussi divers que les dépliants ou plaquettes promotionnelles, les brochures, les flyers, les goodies d’entreprises, les autocollants de toutes tailles...

-
- + + + + Print it ! - Impressions d'entreprise + + + + + + -
-
-

Une question? Un devis?

-

Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :

- Devis -
-
-

Pourquoi faire appel à nous?

-
-
- Icone Proximité -

Proximité

-

Facile d’accès, une équipe compétente et à l'écoute des clients vous attend pour tous vos besoins d'impression et en communication visuelle.

-
-
- Icone Qualité -

Qualité

-

Qu'il s'agisse de copies simples, de brochures, de cartes de visite ou de conception, nous vous garantissons toujours des résultats optimaux.

-
-
- Rapidité Qualité -

Rapidité

-

Vous pouvez compter sur nous pour répondre à vos sollicitations en temps et en heure.

-
-
-
-
-
-
-

Contact

-
-

Par téléphone

-
    -
  • Appelez-nous au 02 12 34 56 78
    • -
  • Lun-Ven : 9h30-18h30
    • -
  • Sam : 10h-13h et 14h-18h30
    • -
-
-
-

Par e-mail

-

- Nous écrire -

-
-
-

Se rendre en boutique

-

5, rue Yves Noël,
- 35200 Rennes
- metro Clémenceau

-
-
-
- Loupe avec palette bleue -
+ +
+

+ +

+ Devis +
+
+ -
-
- - - +
+ arrow_left + arrow_right +
+ +
+
+
+
+
+
+ +
+
+

Qui sommes-nous ?

+
    +
  • + Depuis près de 60 ans nous sommes un imprimeur familial spécialisé + dans les besoins d’entreprises de petite et grande taille. + Implantés à Rennes dans le quartier Bréquigny, nous accompagnons + nos clients dans leurs projets d’impression. +
    • +
  • + De la création de vos fichiers à la livraison de vos imprimés, + nous mettons tout notre savoir-faire à votre disposition afin de + répondre au mieux à vos attentes. +
    • +
+
+ +
+
+
+

Nos produits

+

+ Grâce à nos nombreuses années d'expérience dans l'impression de + produits évènementiels et supports de communication, nous ne cessons + d'innover et de perfectionner nos services afin de satisfaire au + mieux nos clients. Vous pourrez parcourir les différentes rubriques + du site afin de découvrir notre large gamme de papiers et finitions, + pour des produits aussi divers que les dépliants ou plaquettes + promotionnelles, les brochures, les flyers, les goodies + d’entreprises, les autocollants de toutes tailles... +

+
+ +
+
+

Une question? Un devis?

+

+ Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici : +

+ Devis +
+
+

Pourquoi faire appel à nous?

+
+
+ Icone Proximité +

Proximité

+

+ Facile d’accès, une équipe compétente et à l'écoute des clients + vous attend pour tous vos besoins d'impression et en communication + visuelle. +

+
+
+ Icone Qualité +

Qualité

+

+ Qu'il s'agisse de copies simples, de brochures, de cartes de + visite ou de conception, nous vous garantissons toujours des + résultats optimaux. +

+
+
+ Rapidité Qualité +

Rapidité

+

+ Vous pouvez compter sur nous pour répondre à vos sollicitations en + temps et en heure. +

+
+
+
+
+
+
+

Contact

+
+

Par téléphone

+
    +
  • Appelez-nous au 02 12 34 56 78
    • +
  • Lun-Ven : 9h30-18h30
    • +
  • Sam : 10h-13h et 14h-18h30
    • +
+
+
+

Par e-mail

+

+ Nous écrire +

+
+
+

Se rendre en boutique

+

+ 5, rue Yves Noël,
+ 35200 Rennes
+ metro + Clémenceau +

+
+
+
+ Loupe avec palette bleue +
+
+
+ + + + From 13638c96f4be44c7905a1fe3b36e6c8ebd568b3c Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Mon, 7 Oct 2024 11:08:39 +0200 Subject: [PATCH 02/11] selection des elements et ecouteurs d evenements --- assets/script.js | 28 +++++++++++++++++++++++----- index.html | 37 +++++++++---------------------------- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/assets/script.js b/assets/script.js index fe28c8fb..5b6fb5f3 100644 --- a/assets/script.js +++ b/assets/script.js @@ -30,17 +30,35 @@ const slides = [ } showDots(); */ +let bannerImg = document.querySelector(".banner-img"); +let bannerTag = document.getElementById("tag"); +const arrowLeft = document.querySelector(".arrow_left"); +const arrowRight = document.querySelector(".arrow_right"); +const dots = document.querySelectorAll(".dot"); +console.log(dots); + let index = 0; -img = slides[1].image; -document.querySelector(".arrow_right").addEventListener("click", () => { +bannerImg.src = "./assets/images/slideshow/" + slides[0].image; +arrowRight.addEventListener("click", () => { + index++; if (index < 0) { index = slides.length; } else if (index > slides.length) { index = 0; } else { - img = slides[index].image; - index++; + bannerImg.src = "./assets/images/slideshow/" + slides[index].image; + bannerTag.innerHTML = slides[index].tagLine; + let indexDot = 0; + + dots.forEach((dot) => { + if (indexDot === index) { + dot.classList.add("dot_selected"); + } else { + dot.classList.remove("dot_selected"); + } + indexDot++; + }); } }); console.log(index); -console.log(img); +console.log(bannerImg); diff --git a/index.html b/index.html index 1c0da331..9a63db60 100644 --- a/index.html +++ b/index.html @@ -38,28 +38,9 @@

src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it" /> -

Impressions tous formats en boutique et en ligne

- -

- Tirages haute définition grand format - pour vos bureaux et events +

+ Impressions tous formats en boutique et en ligne

- -

"Grand choix de couleurs de CMJN aux pantones

- -

Autocollants avec découpe laser sur mesure

alt="arrow_right" />
- -
-
-
-
-
-
+
+
+
+
+
+
+

Qui sommes-nous ?

From 28edacdf6c523199acd5983fb7039115ec0871e9 Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Tue, 8 Oct 2024 15:19:32 +0200 Subject: [PATCH 03/11] ecouteur d evenement sur fleche gauche et media query --- assets/script.js | 24 +++++++++++++++++++++--- assets/style.css | 26 ++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/assets/script.js b/assets/script.js index 5b6fb5f3..0590eb5c 100644 --- a/assets/script.js +++ b/assets/script.js @@ -35,16 +35,34 @@ let bannerTag = document.getElementById("tag"); const arrowLeft = document.querySelector(".arrow_left"); const arrowRight = document.querySelector(".arrow_right"); const dots = document.querySelectorAll(".dot"); -console.log(dots); let index = 0; bannerImg.src = "./assets/images/slideshow/" + slides[0].image; arrowRight.addEventListener("click", () => { index++; + if (index > slides.length) { + index = 0; + index++; + } else { + bannerImg.src = "./assets/images/slideshow/" + slides[index].image; + bannerTag.innerHTML = slides[index].tagLine; + let indexDot = 0; + + dots.forEach((dot) => { + if (indexDot === index) { + dot.classList.add("dot_selected"); + } else { + dot.classList.remove("dot_selected"); + } + indexDot++; + }); + } +}); +arrowLeft.addEventListener("click", () => { + index--; if (index < 0) { index = slides.length; - } else if (index > slides.length) { - index = 0; + index--; } else { bannerImg.src = "./assets/images/slideshow/" + slides[index].image; bannerTag.innerHTML = slides[index].tagLine; diff --git a/assets/style.css b/assets/style.css index 5f6e53fe..2b4f34e9 100644 --- a/assets/style.css +++ b/assets/style.css @@ -136,6 +136,8 @@ table { } body { max-width: 1440px; + justify-content: center; + align-items: center; } section { margin-block: 6em; @@ -168,6 +170,7 @@ header { display: flex; justify-content: space-between; align-items: center; + max-width: 1440px; } .logo { width: 260px; @@ -336,6 +339,7 @@ header { } #contact { margin-bottom: 0; + width: auto; } #contact article, #contact div { @@ -370,6 +374,7 @@ footer { justify-content: space-evenly; font-size: 12px; align-items: center; + max-width: 1440px; } footer div { position: relative; @@ -399,10 +404,31 @@ footer div { width: 100%; text-align: center; } + #about-us aside { + object-fit: cover; + } #products { flex-direction: column-reverse; width: 100%; justify-content: center; align-items: center; } + #contact .container { + flex-direction: column-reverse; + display: flex; + + justify-content: center; + width: 100%; + } + + #contact .container > div > div { + display: flex; + padding-bottom: 20px; + justify-content: center; + align-items: center; + } + footer { + flex-direction: column-reverse; + gap: 20px; + } } From 4343579885a90b0419f99386df9e27467b7d698e Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Wed, 9 Oct 2024 23:43:24 +0200 Subject: [PATCH 04/11] ajustement pour responsivite --- assets/script.js | 2 ++ assets/style.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/assets/script.js b/assets/script.js index 0590eb5c..847e0e0e 100644 --- a/assets/script.js +++ b/assets/script.js @@ -77,6 +77,8 @@ arrowLeft.addEventListener("click", () => { indexDot++; }); } + console.log(indexDot); }); console.log(index); + console.log(bannerImg); diff --git a/assets/style.css b/assets/style.css index 2b4f34e9..90d06f63 100644 --- a/assets/style.css +++ b/assets/style.css @@ -136,7 +136,7 @@ table { } body { max-width: 1440px; - justify-content: center; + align-items: center; } section { @@ -199,6 +199,7 @@ header { position: relative; } .banner-img { + max-width: 1440px; position: absolute; width: 100%; height: 100%; @@ -391,6 +392,12 @@ footer div { } @media all and (max-width: 1250px) { + main { + max-width: 1250px; + } + .container { + max-width: 1250px; + } #contact > article { flex: 2; } @@ -413,6 +420,14 @@ footer div { justify-content: center; align-items: center; } + #why-us > div { + min-width: 1250px; + width: 100%; + } + #question { + min-width: 1250px; + width: 100%; + } #contact .container { flex-direction: column-reverse; display: flex; @@ -430,5 +445,49 @@ footer div { footer { flex-direction: column-reverse; gap: 20px; + align-content: baseline; + min-width: 1250px; + margin: 0; + } + .footer-contact { + margin-bottom: 1em; + font-weight: 700; + font-size: 16px; + } +} +@media all and (max-width: 768px) { + footer { + min-width: 768px; + width: 100%; + } + footer div { + width: 100%; + } + #why-us > div { + min-width: 768px; + width: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + } + #question { + min-width: 768px; + width: 100%; + } + #products { + min-width: 768px; + width: 100%; + } + #about-us { + min-width: 768px; + width: 100%; + } + #banner { + min-width: 768px; + width: 100%; + } + header { + min-width: 768px; + width: 100%; } } From d1b405f22b3a627828a3c74df1cfac003c42854e Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Fri, 11 Oct 2024 12:04:54 +0200 Subject: [PATCH 05/11] creation fonction updateSlide et boucle infini --- assets/script.js | 67 ++++++++++++++++++++++++------------------------ assets/style.css | 44 +++++++++++++++++++++++++++---- index.html | 1 + 3 files changed, 73 insertions(+), 39 deletions(-) diff --git a/assets/script.js b/assets/script.js index 847e0e0e..7c81b526 100644 --- a/assets/script.js +++ b/assets/script.js @@ -37,48 +37,47 @@ const arrowRight = document.querySelector(".arrow_right"); const dots = document.querySelectorAll(".dot"); let index = 0; + +// Initialisation de l'image et du texte bannerImg.src = "./assets/images/slideshow/" + slides[0].image; +bannerTag.innerHTML = slides[0].tagLine; + +// Fonction pour mettre à jour l'image, le texte et les dots +function updateSlide() { + bannerImg.src = "./assets/images/slideshow/" + slides[index].image; + bannerTag.innerHTML = slides[index].tagLine; + + dots.forEach((dot, idx) => { + if (idx === index) { + dot.classList.add("dot_selected"); + } else { + dot.classList.remove("dot_selected"); + } + }); +} + +// Flèche droite arrowRight.addEventListener("click", () => { index++; - if (index > slides.length) { - index = 0; - index++; - } else { - bannerImg.src = "./assets/images/slideshow/" + slides[index].image; - bannerTag.innerHTML = slides[index].tagLine; - let indexDot = 0; - - dots.forEach((dot) => { - if (indexDot === index) { - dot.classList.add("dot_selected"); - } else { - dot.classList.remove("dot_selected"); - } - indexDot++; - }); + if (index >= slides.length) { + index = 0; // Boucle vers le premier slide } + updateSlide(); }); + +// Flèche gauche arrowLeft.addEventListener("click", () => { index--; if (index < 0) { - index = slides.length; - index--; - } else { - bannerImg.src = "./assets/images/slideshow/" + slides[index].image; - bannerTag.innerHTML = slides[index].tagLine; - let indexDot = 0; - - dots.forEach((dot) => { - if (indexDot === index) { - dot.classList.add("dot_selected"); - } else { - dot.classList.remove("dot_selected"); - } - indexDot++; - }); + index = slides.length - 1; // Boucle vers le dernier slide } - console.log(indexDot); + updateSlide(); }); -console.log(index); +window.onload = setInterval(function () { + index++; -console.log(bannerImg); + if (index >= slides.length) { + index = 0; // Boucle vers le premier slide + } + updateSlide(); +}, 3000); diff --git a/assets/style.css b/assets/style.css index 90d06f63..45de2701 100644 --- a/assets/style.css +++ b/assets/style.css @@ -136,9 +136,15 @@ table { } body { max-width: 1440px; + justify-content: center; - align-items: center; + box-sizing: border-box; } +main { + width: 100%; + box-sizing: border-box; +} + section { margin-block: 6em; } @@ -376,6 +382,7 @@ footer { font-size: 12px; align-items: center; max-width: 1440px; + width: 100%; } footer div { position: relative; @@ -394,6 +401,7 @@ footer div { @media all and (max-width: 1250px) { main { max-width: 1250px; + width: 100%; } .container { max-width: 1250px; @@ -443,11 +451,22 @@ footer div { align-items: center; } footer { - flex-direction: column-reverse; - gap: 20px; + flex-wrap: wrap; + align-items: flex-end; + gap: 40px; align-content: baseline; - min-width: 1250px; + max-width: 1250px; + width: 100%; margin: 0; + padding: 20px; + display: grid; + grid-template-columns: 1fr 1fr; + margin-bottom: 20px; + justify-items: start; + align-items: center; + } + footer div { + width: 100%; } .footer-contact { margin-bottom: 1em; @@ -457,12 +476,27 @@ footer div { } @media all and (max-width: 768px) { footer { - min-width: 768px; + max-width: 768px; width: 100%; + display: flex; + flex-direction: column-reverse; + min-width: 300px; } footer div { width: 100%; } + #contact { + max-width: 768px; + } + #contact .container { + max-width: 100%; + } + #contact .container div { + width: 100%; + } + #contact .container .magnifying-glass { + width: 100%; + } #why-us > div { min-width: 768px; width: 100%; diff --git a/index.html b/index.html index 9a63db60..f7f412d2 100644 --- a/index.html +++ b/index.html @@ -181,6 +181,7 @@

Se rendre en boutique

Loupe avec palette bleue From aa691838fedc378067b936085f5e4f432c9b4e43 Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Fri, 11 Oct 2024 16:52:19 +0200 Subject: [PATCH 06/11] ajustement pour responsivite --- assets/style.css | 91 ++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 54 deletions(-) diff --git a/assets/style.css b/assets/style.css index 45de2701..5e2c761d 100644 --- a/assets/style.css +++ b/assets/style.css @@ -136,13 +136,14 @@ table { } body { max-width: 1440px; - justify-content: center; - + margin: 0 auto; box-sizing: border-box; } -main { +main, +.container { width: 100%; box-sizing: border-box; + padding-inline: 5%; } section { @@ -167,16 +168,13 @@ li { font-size: 16px; line-height: 26px; } -.container { - max-width: 1440px; - margin-inline: auto; - padding-inline: 5%; -} + header { display: flex; justify-content: space-between; align-items: center; max-width: 1440px; + margin-inline: auto; } .logo { width: 260px; @@ -227,7 +225,7 @@ header { #banner .arrow_left { left: 14px; position: absolute; - background-color: #28363d; + padding: 5px; border-radius: 20px 0 0 20px; } @@ -399,19 +397,21 @@ footer div { } @media all and (max-width: 1250px) { - main { + header, + .container { max-width: 1250px; - width: 100%; } - .container { + main { max-width: 1250px; + width: 100%; } + #contact > article { flex: 2; } #about-us { flex-direction: column-reverse; - width: 100%; + max-width: 100%; justify-content: center; align-items: center; } @@ -429,19 +429,17 @@ footer div { align-items: center; } #why-us > div { - min-width: 1250px; - width: 100%; + max-width: 100%; } #question { - min-width: 1250px; - width: 100%; + max-width: 100%; } #contact .container { flex-direction: column-reverse; display: flex; justify-content: center; - width: 100%; + max-width: 100%; } #contact .container > div > div { @@ -455,8 +453,8 @@ footer div { align-items: flex-end; gap: 40px; align-content: baseline; - max-width: 1250px; - width: 100%; + max-width: 100%; + margin: 0; padding: 20px; display: grid; @@ -466,7 +464,7 @@ footer div { align-items: center; } footer div { - width: 100%; + max-width: 100%; } .footer-contact { margin-bottom: 1em; @@ -475,53 +473,38 @@ footer div { } } @media all and (max-width: 768px) { + section { + max-width: 100%; + } + header, + footer, + main, + body, + .container { + max-width: 100%; + min-width: 485px; + margin-right: 0; + padding: 0; + overflow-x: hidden; + } footer { - max-width: 768px; - width: 100%; display: flex; flex-direction: column-reverse; - min-width: 300px; } footer div { - width: 100%; + max-width: 100%; } #contact { - max-width: 768px; - } - #contact .container { max-width: 100%; } - #contact .container div { - width: 100%; - } + #contact .container .magnifying-glass { - width: 100%; + max-width: 100%; } #why-us > div { - min-width: 768px; - width: 100%; + max-width: 100%; flex-direction: column; justify-content: center; align-items: center; } - #question { - min-width: 768px; - width: 100%; - } - #products { - min-width: 768px; - width: 100%; - } - #about-us { - min-width: 768px; - width: 100%; - } - #banner { - min-width: 768px; - width: 100%; - } - header { - min-width: 768px; - width: 100%; - } } From e332c6fd23fe6bf9582be72c4d922272a6a88cb8 Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Fri, 11 Oct 2024 21:36:11 +0200 Subject: [PATCH 07/11] ajustement layout section about et section contact --- assets/style.css | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/assets/style.css b/assets/style.css index 5e2c761d..ad1413df 100644 --- a/assets/style.css +++ b/assets/style.css @@ -138,6 +138,7 @@ body { max-width: 1440px; margin: 0 auto; box-sizing: border-box; + overflow-x: hidden; } main, .container { @@ -205,7 +206,7 @@ header { .banner-img { max-width: 1440px; position: absolute; - width: 100%; + max-width: 100%; height: 100%; z-index: -1; object-fit: cover; @@ -415,8 +416,16 @@ footer div { justify-content: center; align-items: center; } - #about-us div { + + #about-us div ul { width: 100%; + display: flex; + + flex-direction: column; + justify-content: center; + align-items: center; + } + #about-us h2 { text-align: center; } #about-us aside { @@ -485,18 +494,25 @@ footer div { min-width: 485px; margin-right: 0; padding: 0; - overflow-x: hidden; } footer { display: flex; flex-direction: column-reverse; + padding: 20px; } footer div { max-width: 100%; + margin-top: 20px; + margin-left: 10px; } + #contact { max-width: 100%; } + #contact .container > div > div { + display: flex; + flex-direction: column; + } #contact .container .magnifying-glass { max-width: 100%; From 6d8e0f02ad890407fab72b76bce832481d20c5b4 Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Fri, 11 Oct 2024 21:41:51 +0200 Subject: [PATCH 08/11] centrage sur les h2 --- assets/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/style.css b/assets/style.css index ad1413df..d32c81fb 100644 --- a/assets/style.css +++ b/assets/style.css @@ -406,7 +406,9 @@ footer div { max-width: 1250px; width: 100%; } - + section h2 { + text-align: center; + } #contact > article { flex: 2; } @@ -425,9 +427,7 @@ footer div { justify-content: center; align-items: center; } - #about-us h2 { - text-align: center; - } + #about-us aside { object-fit: cover; } From e51c051010e27920302e2c1723f5c9db08232c61 Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Sun, 13 Oct 2024 13:29:20 +0200 Subject: [PATCH 09/11] changement de padding in-line sur container et main --- assets/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/style.css b/assets/style.css index d32c81fb..c5052266 100644 --- a/assets/style.css +++ b/assets/style.css @@ -144,7 +144,7 @@ main, .container { width: 100%; box-sizing: border-box; - padding-inline: 5%; + padding-inline: 0.5%; } section { From 58364ec4ff4aeb60f81f2c16390598b624ee2624 Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Sun, 13 Oct 2024 13:41:19 +0200 Subject: [PATCH 10/11] nettoyage --- assets/script.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/assets/script.js b/assets/script.js index 7c81b526..4a5c50f9 100644 --- a/assets/script.js +++ b/assets/script.js @@ -17,19 +17,7 @@ const slides = [ tagLine: "Autocollants avec découpe laser sur mesure", }, ]; -/* - const dots = document.querySelector("dots"); - function showDots() { - for (let i = 0; i < slides.length; i++) { - const dot = document.createElement("div"); - dot.classList.add("dot"); - dots.appendChild(dot); - console.log(dot); - console.log(dots); - } - } - showDots(); - */ + let bannerImg = document.querySelector(".banner-img"); let bannerTag = document.getElementById("tag"); const arrowLeft = document.querySelector(".arrow_left"); From e5420c631b2c6e053f96b1aa0dba6a6add3f999c Mon Sep 17 00:00:00 2001 From: Mansoursamb Date: Tue, 15 Oct 2024 13:13:03 +0200 Subject: [PATCH 11/11] ajout icones dans header et ajout liens et css --- assets/style.css | 63 ++++++++++++++++++++++++++++++++++++++++++++---- index.html | 19 +++++++++++++++ 2 files changed, 77 insertions(+), 5 deletions(-) diff --git a/assets/style.css b/assets/style.css index c5052266..ad18e235 100644 --- a/assets/style.css +++ b/assets/style.css @@ -142,7 +142,7 @@ body { } main, .container { - width: 100%; + max-width: 100%; box-sizing: border-box; padding-inline: 0.5%; } @@ -172,11 +172,51 @@ li { header { display: flex; - justify-content: space-between; + justify-content: space-around; align-items: center; max-width: 1440px; margin-inline: auto; } +.recherche { + position: relative; + opacity: 1; + max-width: 100%; +} +.user { + opacity: 1; + max-width: 100%; +} +.user i { + padding-right: 20px; + padding-top: 20px; +} + +.container input { + border: none; + border-bottom: 1px solid black; + padding-top: 40px; + width: 300px; +} +.fa-magnifying-glass { + margin-left: -15px; + font-size: 17px; + position: absolute; + right: 10px; + bottom: 5px; +} +.liens { + max-width: 100%; + width: 100%; + background-color: #e6f4fb; + height: 50px; + display: flex; + justify-content: space-evenly; + align-items: center; +} +.liens a { + text-decoration: none; + color: black; +} .logo { width: 260px; margin-block: 10px; @@ -402,6 +442,7 @@ footer div { .container { max-width: 1250px; } + main { max-width: 1250px; width: 100%; @@ -491,9 +532,21 @@ footer div { body, .container { max-width: 100%; - min-width: 485px; - margin-right: 0; - padding: 0; + min-width: 470px; + overflow-x: hidden; + } + .recherche input, + .recherche i, + .user i { + opacity: 0; + width: 0; + } + .liens { + display: none; + } + #banner { + max-width: 100%; + min-width: 470px; } footer { display: flex; diff --git a/index.html b/index.html index f7f412d2..5e342485 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,27 @@

alt="Print it ! Impressions d'entreprises" />

+
+ + +
Devis +
+ + +
+
+ Accueil + Catalogue produits + Tarifs + Nos papiers + Impressions online + Textiles et goodies + Adhésifs + Infos pratiques + Contact +