diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..2cfa7d2 Binary files /dev/null and b/.DS_Store differ diff --git a/ReadMe.md b/ReadMe.md new file mode 100644 index 0000000..0cb318a --- /dev/null +++ b/ReadMe.md @@ -0,0 +1 @@ +# Print-It WebSite v.1 diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..7e604f5 Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/images/arrow_left.png b/assets/images/arrow_left.png new file mode 100644 index 0000000..ea7d870 Binary files /dev/null and b/assets/images/arrow_left.png differ diff --git a/assets/images/arrow_right.png b/assets/images/arrow_right.png new file mode 100644 index 0000000..b229f39 Binary files /dev/null and b/assets/images/arrow_right.png differ diff --git a/assets/images/colors.jpg b/assets/images/colors.jpg new file mode 100644 index 0000000..17d219f Binary files /dev/null and b/assets/images/colors.jpg differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..b3d6aee Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/magnifying-glass.jpg b/assets/images/magnifying-glass.jpg new file mode 100644 index 0000000..4ac217c Binary files /dev/null and b/assets/images/magnifying-glass.jpg differ diff --git a/assets/images/metro.png b/assets/images/metro.png new file mode 100644 index 0000000..12c336a Binary files /dev/null and b/assets/images/metro.png differ diff --git a/assets/images/proximity-icon.png b/assets/images/proximity-icon.png new file mode 100644 index 0000000..f9a7d9f Binary files /dev/null and b/assets/images/proximity-icon.png differ diff --git a/assets/images/quality-icon.png b/assets/images/quality-icon.png new file mode 100644 index 0000000..336320d Binary files /dev/null and b/assets/images/quality-icon.png differ diff --git a/assets/images/search-icon.png b/assets/images/search-icon.png new file mode 100644 index 0000000..5d2ef95 Binary files /dev/null and b/assets/images/search-icon.png differ diff --git a/assets/images/slideshow/slide1.jpg b/assets/images/slideshow/slide1.jpg new file mode 100644 index 0000000..6899739 Binary files /dev/null and b/assets/images/slideshow/slide1.jpg differ diff --git a/assets/images/slideshow/slide2.jpg b/assets/images/slideshow/slide2.jpg new file mode 100644 index 0000000..df7af56 Binary files /dev/null and b/assets/images/slideshow/slide2.jpg differ diff --git a/assets/images/slideshow/slide3.jpg b/assets/images/slideshow/slide3.jpg new file mode 100644 index 0000000..b1369be Binary files /dev/null and b/assets/images/slideshow/slide3.jpg differ diff --git a/assets/images/slideshow/slide4.png b/assets/images/slideshow/slide4.png new file mode 100644 index 0000000..60a4d21 Binary files /dev/null and b/assets/images/slideshow/slide4.png differ diff --git a/assets/images/speedy-icon.png b/assets/images/speedy-icon.png new file mode 100644 index 0000000..0c02502 Binary files /dev/null and b/assets/images/speedy-icon.png differ diff --git a/assets/images/tricolor-icon.png b/assets/images/tricolor-icon.png new file mode 100644 index 0000000..af44d43 Binary files /dev/null and b/assets/images/tricolor-icon.png differ diff --git a/assets/images/yellow-book.jpg b/assets/images/yellow-book.jpg new file mode 100644 index 0000000..ef4bd0d Binary files /dev/null and b/assets/images/yellow-book.jpg differ diff --git a/assets/script.js b/assets/script.js new file mode 100644 index 0000000..4fe5750 --- /dev/null +++ b/assets/script.js @@ -0,0 +1,18 @@ +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" + } +] diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..ebec468 --- /dev/null +++ b/assets/style.css @@ -0,0 +1,297 @@ +/* variables declaration */ +:root { + --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; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +body { + +} +section { + margin-block: 6em; +} +h2 { + 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; +} + +p, li { + font-family: Roboto, sans-serif; + 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; +} +.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; +} +.devis { + background-color: var(--secondary-color); +} + +#banner { + 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; +} +/* Code CSS en prévision de l'ajout d'un carousel pour la bannière */ +/* Gestion des fleches du carrousel */ +#banner .arrow { + position: absolute; +} +#banner .arrow_left { + left: 10px; +} +#banner .arrow_right { + right: 10px; +} +/* Gestion des points du carrousel */ +.dots { + position: absolute; + bottom: 40px; + display: flex; +} +.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);; +} +.dot_selected { + 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; +} +#banner span { + display: block; + font-weight: 400; + font-size: 30px; +} +#about-us { + display: flex; +} +#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; + +} + +#products { + display: flex; + align-items: flex-start; + flex-direction: row-reverse; +} +#products div, #products aside { + flex:1; +} +#products div { + padding: 0 6em; +} +#products h2 { + margin-top: 0; +} +.bg-yellow { + background-color: var(--third-color); +} +#question { + display: flex; + flex-direction: column; + align-items: center; + padding-block: 3em; +} +#question h2 { + margin-bottom: 10px; +} +#question p { + margin-bottom: 20px; +} + +#why-us { + display: flex; + flex-direction: column; + text-align: center; +} +#why-us > div{ + display: flex; + justify-content: space-evenly; +} +#why-us article { + 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; +} + +.bg-lightblue{ + background-color: #E6F4FB; +} +#contact { + margin-bottom: 0; +} +#contact article, #contact div { + flex:1; +} + + +#contact .container { + flex-direction: row; + display: flex; + padding: 6em ; +} + +#contact .container > div > div { + 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; +} +.inline-icon { + vertical-align: middle; +} +footer { + background-color: #28363D; + color: white; + display: flex; + padding-block: 3em; + justify-content: space-evenly; + font-size: 12px; + align-items: center; +} +footer div { + + position: relative; +} +.footer-logo { + background-color: white; + max-width: 308px; + padding: 10px; +} +.footer-contact { + margin-bottom: 1em; + font-weight: 700; + font-size: 16px; + +} + +@media all and (max-width: 1250px) { + #contact > article { + flex: 2; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..166faed --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + 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...

+
+ + +
+
+

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 +
+ +
+
+
+ + + +