Skip to content

Print-IT #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sher0wlk wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Print-IT #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 132 additions & 0 deletions .goutputstream-QJFPF3
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print it ! - Impressions d'entreprise</title>
<link rel="stylesheet" href="./assets/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Slab:wght@400;900&display=swap" rel="stylesheet">
</head>
<body>
<header class="container">
<h1>
<img class="logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises" >
</h1>
<a class="btn devis" href="mailto:contact@print-it.tld">Devis</a>
</header>
<main>
<div id="banner">
<div class="arrow arrow_left">
<img src="./assets/images/arrow_left.png" alt="Précédent">
</div>
<div class="arrow arrow_right">
<img src="./assets/images/arrow_right.png" alt="Suivant">
</div>
<div class="dots">
</div>
</div>
<section id="about-us" class="container">
<div>
<h2>Qui sommes-nous ?</h2>
<ul>
<li>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.</li>
<li>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.</li>
</ul>
</div>
<aside>
<img src="./assets/images/colors.jpg" alt="palette multicolore">
</aside>
</section>
<section id="products" class="container">
<div>
<h2>Nos produits</h2>
<p>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... </p>
</div>
<aside>
<img src="./assets/images/yellow-book.jpg" alt="Imprimeur avec un livre jaune dans les mains">
</aside>

</section>
<section id="question" class="bg-yellow">
<h2>Une question? Un devis?</h2>
<p>Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :</p>
<a href="mailto:contact@print-it.tld" class="btn devis">Devis</a>
</section>
<section id="why-us" class="container">
<h2>Pourquoi faire appel à nous?</h2>
<div>
<article>
<img src="./assets/images/proximity-icon.png" alt="Icone Proximité">
<h3>Proximité</h3>
<p>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.</p>
</article>
<article>
<img src="./assets/images/quality-icon.png" alt="Icone Qualité">
<h3>Qualité</h3>
<p>Qu'il s'agisse de copies simples, de brochures, de cartes de visite ou de conception, nous vous garantissons toujours des résultats optimaux.</p>
</article>
<article>
<img src="./assets/images/speedy-icon.png" alt="Rapidité Qualité">
<h3>Rapidité</h3>
<p>Vous pouvez compter sur nous pour répondre à vos sollicitations en temps et en heure.</p>
</article>
</div>
</section>
<section id="contact" class="bg-lightblue">
<div class="container">
<div>
<h2>Contact</h2>
<div>
<h3>Par téléphone</h3>
<ul>
<li>Appelez-nous au 02 12 34 56 78</li>
<li>Lun-Ven : 9h30-18h30</li>
<li>Sam : 10h-13h et 14h-18h30</li>
</ul>
</div>
<div>
<h3>Par e-mail</h3>
<p>
<a href="mailto:contact@print-it.tld" class="btn">Nous écrire</a>
</p>
</div>
<div>
<h3>Se rendre en boutique</h3>
<p>5, rue Yves Noël,<br>
35200 Rennes<br>
<img class="inline-icon" src="./assets/images/metro.png" alt="metro"/> Clémenceau</p>
</div>
</div>
<div>
<img src="./assets/images/magnifying-glass.jpg" alt="Loupe avec palette bleue">
</div>

</div>
</section>
</main>
<footer>
<div>
<p class="footer-contact">Contact</p>
<ul>
<li>Appelez-nous au 02 12 34 56 78</li>
<li>Lun-Ven : 9h30-18h30</li>
<li>Sam : 10h-13h et 14h-18h30</li>
</ul>
</div>
<div>
<p>5, rue Yves Noël,35200 Rennes<br>
<img src="./assets/images/metro.png" alt="metro"/> Clémenceau</p>
</div>
<div>
<a href="mailto:contact@print-it.tld" class="btn">Nous écrire</a>
<a href="mailto:contact@print-it.tld?subject=Demande&nbsp;de&nbsp;devis" class="btn devis">Devis</a>
</div>
<div>
<img class="footer-logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises" >
</div>
</footer>
<script src="./assets/script.js"></script>
</body>
</html>
Binary file added assets/.script.js.swp
View file
Open in desktop
Binary file not shown.
74 changes: 56 additions & 18 deletions assets/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,56 @@
const slides = [
{
"image":"slide1.jpg",
"tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
},
{
"image":"slide2.jpg",
"tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
},
{
"image":"slide3.jpg",
"tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
},
{
"image":"slide4.png",
"tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
}
]
document.addEventListener("DOMContentLoaded", () => {
const slides = [
{ image: "./assets/images/slideshow/slide1.jpg",
tagLine: "Impressions tous formats <span>en boutique et en ligne</span>" },
{ image: "./assets/images/slideshow/slide2.jpg",
tagLine: "Tirages haute définition grand format <span>pour vos bureaux et events</span>" },
{ image: "./assets/images/slideshow/slide3.jpg",
tagLine: "Grand choix de couleurs <span>de CMJN aux pantones</span>" },
{ image: "./assets/images/slideshow/slide4.png",
tagLine: "Autocollants <span>avec découpe laser sur mesure</span>" }
];


const banner = document.querySelector('#banner');
const bannerImages = banner.querySelector('.banner-img');
const bannerText = banner.querySelector('.banner-text');
const dotsContainer = banner.querySelector('.dots');
const leftArrow = banner.querySelector('.arrow_left');
const rightArrow = banner.querySelector('.arrow_right');

slides.forEach((slide, index) => {
const dot = document.createElement('span');
dot.className = 'dot' + (index === 0 ? ' dot_selected' : '');
dot.dataset.index = index;
dotsContainer.appendChild(dot);
});

const images = banner.querySelector('.banner-img');
const dots = banner.querySelectorAll('.dot');
let currentIndex = 0;


function goToSlide(index) {
dots.forEach((dot, i) => dot.classList.toggle('dot_selected', i === index));
images.src= slides[index].image;
bannerText.innerHTML = slides[index].tagLine;
currentIndex = index;
console.log (slides[index].image,images)
}

leftArrow.addEventListener('click', () => {
const newIndex = currentIndex > 0 ? currentIndex - 1 : slides.length - 1;
goToSlide(newIndex);
});

rightArrow.addEventListener('click', () => {
const newIndex = (currentIndex + 1) % slides.length;
goToSlide(newIndex);
});

dots.forEach(dot =>
dot.addEventListener('click', () => goToSlide(parseInt(dot.dataset.index)))
);

bannerText.innerHTML = slides[0].tagLine;
});
2 changes: 1 addition & 1 deletion assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ header {
height: 100%;
z-index: -1;
object-fit: cover;
object-position: center;
object-position: left;
}
/* Code CSS en prévision de l'ajout d'un carousel pour la bannière */
/* Gestion des fleches du carrousel */
Expand Down
Loading