Skip to content

ChocoLove #1

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
IrouKaizen wants to merge 4 commits into
base: main
Choose a base branch
from
Open

ChocoLove #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c370c52
Add files via upload
IrouKaizen Jan 5, 2024
2448520
Add files via upload
IrouKaizen Jan 6, 2024
317acc0
Create README.md
IrouKaizen Jan 7, 2024
8e2edae
Add files via upload
IrouKaizen Jan 7, 2024
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
Binary file added ChocoLove/cho.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
244 changes: 244 additions & 0 deletions ChocoLove/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChocoLove</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="header__border"></div>
<nav class="nav container">
<a href="#" class="nav__logo">
<i class="ri-heart-2-fill"></i> ChocoLove
</a>

<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link">
<i class="ri-home-heart-line"></i>
<span>Accueil</span>
</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">
<i class="ri-file-info-line"></i>
<span>A propos</span>
</a>
</li>
<li class="nav__item">
<a href="#steps" class="nav__link">
<i class="ri-bubble-chart-fill"></i>
<span>Arômes</span>
</a>
</li>
<li class="nav__item">
<a href="#testimonial" class="nav__link">
<i class="ri-team-line"></i>
<span>L' équipe</span>
</a>
</li>
</ul>
</div>
</nav>
</header>

<main class="main">

<section class="home section" id="home">
<div class="home__container container grid">
<div class="home__data">
<h3 class="home__subtitle">
LA QUALITE SUPERIEURE
</h3>
<h1 class="home__title">
Offrez-vous un <br>
Bon chocolat
<img src="photos/gato-removebg-preview.png" alt="">
</h1>
<p class="home__description">
Du chocolat, il y en a de toutes variétés & de toutes formes et conçus par de diverses compagnies. Mais, avez-vous déjà entendu parlé de <div class="cho"> <i class="ri-heart-2-fill"></i> ChocoLove ?</div>
</p>
<a href="#img" class="button">
En savoir plus <i class="ri-arrow-right-s-line"></i>
</a>
</div>
<img src="photos/acc-removebg-preview.png" alt="" class="home__img" id="img">
</div>
</section>

<section class="products">
<div class="products__bg section">
<div class="products__container container grid">
<div class="products__data">
<a href="#about" class="products__button">
A propos de nous <i class="ri-arrow-down-s-line"></i>
</a>
<p class="products__description">
Nous vous offrons du chocolat sous diverses formes : en boule, en tablette, fondu et en poudre. En tenant compte bien-sûr de vos goûts et envies.
</p>
<p class="products__description">
Ci-dessous, certaines images des formes de chocolats que nous avons déjà eu à commercialiser.
</p>
</div>
<div class="products__content">
<article class="products__card">
<img src="photos/bOULE.jpg" alt="" class="products__img">
<h3 class="products__name">En boule</h3>
<span class="products__price">12$</span>
</article>
<article class="products__card">
<img src="photos/tablette.jpg" alt="" class="products__img">
<h3 class="products__name">En tablette</h3>
<span class="products__price">11$</span>
</article>
<article class="products__card">
<img src="photos/fondu.jpg" alt="" class="products__img">
<h3 class="products__name">Fondu</h3>
<span class="products__price">15$</span>
</article>
</div>
</div>
</div>
</section>

<section class="about" id="about">
<div class="about__bg section">
<div class="about__container container grid">
<div class="about__data">
<h2 class="section__title">
Nous !
</h2>
<p class="about__description">
Nous sommes une compagnie de fabrique de chocolats avec des ingrédients naturels importés depuis le Ghana puis traités avec nos machines depuis 2002.
</p>
<p class="about__description">
Nos clients nous font confiance !
</p>
</div>
<img src="photos/top1.jpg" alt="" class="about__img">
</div>
</div>
</section>

<section class="steps section" id="steps">
<div class="steps__bg section">
<h2 class="section__title">
Les différents arômes de chocolats que nous produisont
</h2>
<div class="steps__container container grid">
<img src="photos/steps-coffee-beans.png" alt="" class="steps__bg-img">
<div class="steps__content">
<div class="steps__card">
<div class="steps__circle">
<div class="steps__subcircle">
01
</div>
<img src="photos/arome_cacao-removebg-preview.png" alt="" class="steps__img">
</div>
<p class="steps__description">
Avec du Cacao pur.
</p>
</div>

<div class="steps__card steps__card-move">
<div class="steps__circle">
<div class="steps__subcircle">
02
</div>
<img src="photos/arome_coffe-removebg-preview.png" alt="" class="steps__img">
</div>
<p class="steps__description">
Le café noir pur ou un mélange de cacao et de café.
</p>
</div>

<div class="steps__card">
<div class="steps__circle">
<div class="steps__subcircle">
03
</div>
<img src="photos/arome_noix-removebg-preview.png" alt="" class="steps__img">
</div>
<p class="steps__description">
Noix de coco depuis le sud Ghana !
</p>
</div>
</div>
</div>
</div>
</section>

<section class="testimonial" id="testimonial">
<div class="testimonial__bg section">
<div class="testimonial__container container grid">
<div class="testimonial__data">
<h2 class="section__title">
Notre équipe
</h2>
<span class="testimonial__name">
Nous comptons à ce jour plus de 300 employés (commerciaux, cultivateurs, comptables, secrétaires, trésorières, chauffeurs, gardiens, contrôleurs, etc...).
</span>
</div>
<img src="photos/top2.jpg" class="testimonial__img"></img>
</div>
</div>
</section>

</main>

<footer class="footer">
<div class="footer__bg">
<img src="photos/steps-coffee-beans.png" alt="" class="footer__bg-img">
<div class="footer__container container grid">
<div class="footer__data grid">
<div class="">
<a href="" class="footer__logo">
<img src="" alt="">
<i class="ri-heart-2-fill"></i> ChocoLove
</a>
<h3 class="footer__title">
Abonnez-vous pour recevoir nos articles & propositions
<br>
et nous vous promettons que la qualité !
</h3>
</div>
<form action="" class="footer__form grid">
<input type="email" placeholder="Entrez votre adresse E-mail" class="footer__input">
<button class="button footer__button" type="submit">
S'abonner <i class="ri-arrow-right-s-line"></i>
</button>
</form>
</div>
<div class="footer__content grid">
<div class="footer__social">
<a href="" target="_blank" class="footer__social-link">
<i class="ri-instagram-fill"></i>
</a>
<a href="" target="_blank" class="footer__social-link">
<i class="ri-twitter-fill"></i>
</a>
<a href="" target="_blank" class="footer__social-link">
<i class="ri-linkedin-fill"></i>
</a>
</div>
<span class="footer__copy">
&#169; Copyright Iroukode. Tous droits reservés
</span>
</div>
</div>
</div>
</footer>

<!--Scroll up-->
<a href="" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-line"></i>
</a>

<script src="scrollreveal.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Binary file added ChocoLove/photos/acc-removebg-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/arome_cacao-removebg-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/arome_coffe-removebg-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/arome_noix-removebg-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/bOULE.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/fond.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/fondu.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/gato-removebg-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/gift.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/log.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/smoothie.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/steps-coffee-beans.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ChocoLove/photos/steps-curve-line.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/tablette.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/top1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ChocoLove/photos/top2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions ChocoLove/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const scrollHeader =() =>{
const header = document.getElementById('header')
this.scrollY >= 50 ? header.classList.add('scroll-header')
: header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)

/* Show scroll up */
const scrollUp = () =>{
const scrollUp = document.getElementById('scroll-up')
this.scrollY >= 350 ? scrollUp.classList.add('show-scroll') : scrollUp.classList.remove(show-scroll)
}
window.addEventListener('scroll', scrollUp)

/* Active link */

const sections = document.querySelectorAll('section[id]')

const scrollActive = () => {
const scrollY = window.pageYOffset
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 58,
sectionId = current.getAttribute('id'),
sectionsClass = document.querySelectorAll('.nav__menu a[href*=' + ']')

if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
sectionsClass.classList.add('active-link')
}else{
sectionsClass.classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)

/*Scroll animation */

const sr = ScrollReveal({
origin: 'top',
distance: '50px',
duration: 2000,
delay: 200
})

sr.reveal('.home__data, .products__data, .steps__content, .footer__container')
sr.reveal('.home__img', {origin: 'bottom'})
sr.reveal('.products__card', {interval : 100})
sr.reveal('.about__img, .testimonial__img', {origin: 'right'})
sr.reveal('.about__data, .testimonial__data', {origin: 'left'})
12 changes: 12 additions & 0 deletions ChocoLove/scrollreveal.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading