Skip to content

Commit

Permalink
Dark mode Done
Browse files Browse the repository at this point in the history
  • Loading branch information
@roslove44
roslove44 committed Oct 3, 2023
1 parent 28702c8 commit 8544e78
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 70 deletions.
4 changes: 3 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
:root {
--color-principal: #FFC700;
--color-principal-hover: #c28306b7;
--color-secondary: #2F2F2F;
--tag: hsl(214, 100%, 59%);
--text-header: white;
--text-header-desc : rgba(255, 255, 255, 0.75);
Expand Down Expand Up @@ -533,7 +534,8 @@ button:focus {
=============================*/

.services-boxes {
border: 1px solid #e8e8e8;
/* border: 1px solid #e8e8e8; */
border: 1px solid transparent;
}

.services-boxes .services-boxes-icon i {
Expand Down
110 changes: 62 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item d-flex flex-column align-items-center">
<li class="nav-item d-flex flex-column align-items-lg-center">
<div class="mt-1">
<input type="checkbox" class="checkbox align-self-center" id="checkbox">
<label for="checkbox" class="checkbox-label">
Expand Down Expand Up @@ -128,7 +128,7 @@ <h1 class="header-name text-capitalize mb-0"><span class="simple-text-rotate fw-
<!-- END HOME -->

<!-- START ABOUT -->
<section class="section" id="about">
<section class="section pt-3" id="about" data-turn-bg-dark>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
Expand All @@ -138,12 +138,13 @@ <h1 class="header-name text-capitalize mb-0"><span class="simple-text-rotate fw-
</div>
<div class="col-lg-6">
<div class="mt-3">
<h2><span class="fw-bold">Moi ?</span></h2>
<h4 class="mt-4">Salut ! <span class="fw-bolder custom-title">Je suis Carrel AKODANDE
<h2><span class="fw-bolder" data-turn-text-principal>Moi ?</span></h2>
<h4 class="mt-4" data-turn-text-white>Salut ! <span class="fw-bolder custom-title">Je suis
Carrel AKODANDE
HONMA.</span>
</h4>
<i>expert en conception graphique et en stratégie numérique.</i>
<p class="text-muted mt-4">
<i data-turn-text-white>expert en conception graphique et en stratégie numérique.</i>
<p class="text-muted mt-4" data-turn-text-white>
Je suis un créateur passionné qui apporte une touche artistique à la
stratégie d'entreprise. Ma mission est de
transformer des concepts en visuels captivants et de construire des présences en ligne
Expand All @@ -153,9 +154,9 @@ <h4 class="mt-4">Salut ! <span class="fw-bolder custom-title">Je suis Carrel AKO
racontent une histoire et renforcent votre marque.
</p>
<p class="text-muted mt-2"></p>
<h2><span class="fw-bold">Pourquoi faire appel à moi ?</span></h2>
<h2><span class="fw-bold" data-turn-text-principal>Pourquoi faire appel à moi ?</span></h2>

<p class="text-muted mt-2">
<p class="text-muted mt-2" data-turn-text-white>
Les designs d'entreprise sont la pierre angulaire de votre stratégie marketing. Ils sont
essentiels pour attirer,
engager et convertir votre public cible. En collaborant avec moi, vous bénéficiez de
Expand All @@ -167,18 +168,19 @@ <h2><span class="fw-bold">Pourquoi faire appel à moi ?</span></h2>
class="btn btn-outline-custom btn-round btn-warning text-black">Rencontrons-nous</a>
<ul class="mb-0 about-social list-inline mt-4">
<li class="list-inline-item">
<a target="_blank"
<a data-turn-text-white target="_blank"
href="https://api.whatsapp.com/send?phone=22962790602&text=Bonjour%20Carrel%2C%20je%20vous%20contacte%20depuis%20votre%20site%20web.%20Pourriez-vous%20me%20fournir%20davantage%20de%20d%C3%A9tails%20%C3%A0%20concernant%20vos%20services%20%3F">
<i class="mdi mdi-whatsapp"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" target="_blank">
<a data-turn-text-white href="#" target="_blank">
<i class="mdi mdi-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.instagram.com/increase_your_brand/" target="_blank">
<a data-turn-text-white href="https://www.instagram.com/increase_your_brand/"
target="_blank">
<i class="mdi mdi-instagram"></i>
</a>
</li>
Expand All @@ -192,96 +194,103 @@ <h2><span class="fw-bold">Pourquoi faire appel à moi ?</span></h2>
<!-- END ABOUT -->

<!-- START SERVICES -->
<section class="section bg-light" id="services">
<section class="section bg-light" id="services" data-turn-bg-secondary>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="text-center">
<h2 class="custom-title">Mes <span class="fw-bold">Services</span></h2>
<p class="text-muted mx-auto mt-3">Découvrez comment je peux collaborer avec
<p class="text-muted mx-auto mt-3" data-turn-text-white>Découvrez comment je peux collaborer
avec
vous pour créer des expériences visuelles exceptionnelles et renforcer votre
présence en ligne.</p>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-4">
<div class="text-center services-boxes p-4 mt-4">
<div class="text-center services-boxes p-4 mt-4 shadow-lg">
<div class="services-boxes-icon">
<i class="mbri-responsive text-custom display-4"></i>
</div>
<div class="mt-4">
<h5 class="mb-0">Conceptions graphiques</h5>
<h5 class="mb-0" data-turn-text-principal>Conceptions graphiques</h5>
<div class="services-title-border"></div>
<p class="text-muted mt-3">Création d'affiches et de flyers percutants pour vos
<p class="text-muted mt-3" data-turn-text-white>Création d'affiches et de flyers percutants
pour vos
événements,
promotions et campagnes publicitaires.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="text-center services-boxes p-4 mt-4">
<div class="text-center services-boxes p-4 mt-4 shadow-lg">
<div class="services-boxes-icon">
<i class="mbri-touch text-custom display-4"></i>
</div>
<div class="mt-4">
<h5 class="mb-0">Visuels pour Réseaux Sociaux</h5>
<h5 class="mb-0" data-turn-text-principal>Visuels pour Réseaux Sociaux</h5>
<div class="services-title-border"></div>
<p class="text-muted mt-3">Développement de visuels engageants et adaptés aux médias sociaux
<p class="text-muted mt-3" data-turn-text-white>Développement de visuels engageants et
adaptés aux médias sociaux
pour renforcer votre présence en ligne.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="text-center services-boxes p-4 mt-4">
<div class="text-center services-boxes p-4 mt-4 shadow-lg">
<div class="services-boxes-icon">
<i class="mbri-underline text-custom display-4"></i>
</div>
<div class="mt-4">
<h5 class="mb-0">UI/UX Design</h5>
<h5 class="mb-0" data-turn-text-principal>UI/UX Design</h5>
<div class="services-title-border"></div>
<p class="text-muted mt-3">Conception experte de maquettes de sites web et d'applications
<p class="text-muted mt-3" data-turn-text-white>Conception experte de maquettes de sites web
et d'applications
mobiles pour une expérience utilisateur optimale.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="text-center services-boxes p-4 mt-4">
<div class="text-center services-boxes p-4 mt-4 shadow-lg">
<div class="services-boxes-icon">
<i class="mbri-image-slider text-custom display-4"></i>
</div>
<div class="mt-4">
<h5 class="mb-0">Branding</h5>
<h5 class="mb-0" data-turn-text-principal>Branding</h5>
<div class="services-title-border"></div>
<p class="text-muted mt-3">Élaboration d'identités visuelles uniques pour renforcer la
<p class="text-muted mt-3" data-turn-text-white>Élaboration d'identités visuelles uniques
pour renforcer la
reconnaissance de votre marque.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="text-center services-boxes p-4 mt-4">
<div class="text-center services-boxes p-4 mt-4 shadow-lg">
<div class="services-boxes-icon">
<i class="mbri-print text-custom display-4"></i>
</div>
<div class="mt-4">
<h5 class="mb-0">Conception d'imprimés</h5>
<h5 class="mb-0" data-turn-text-principal>Conception d'imprimés</h5>
<div class="services-title-border"></div>
<p class="text-muted mt-3">Création de supports imprimés tels que brochures, dépliants,
<p class="text-muted mt-3" data-turn-text-white>Création de supports imprimés tels que
brochures, dépliants,
cartes de visite, les vêtements et les articles promotionnels.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="text-center services-boxes p-4 mt-4">
<div class="text-center services-boxes p-4 mt-4 shadow-lg">
<div class="services-boxes-icon">
<i class="mbri-cust-feedback text-custom display-4"></i>
</div>
<div class="mt-4">
<h5 class="mb-0">Consultation en Design</h5>
<h5 class="mb-0" data-turn-text-principal>Consultation en Design</h5>
<div class="services-title-border"></div>
<p class="text-muted mt-3">Conseils et expertise en design pour vous guider dans vos
<p class="text-muted mt-3" data-turn-text-white>Conseils et expertise en design pour vous
guider dans vos
décisions stratégiques et support logiciel ( Canva, Adobe...).</p>
</div>
</div>
Expand All @@ -294,13 +303,14 @@ <h5 class="mb-0">Consultation en Design</h5>


<!-- START WORK -->
<section class="section text-center" id="portfolio">
<section class="section text-center" id="portfolio" data-turn-bg-dark>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="">
<h2 class="text-center custom-title"><span class="fw-bold">PORTFOLIO</span></h2>
<p class="text-muted mx-auto mt-3">Bienvenue dans mon portfolio, où l'art de la
<p class="text-muted mx-auto mt-3" data-turn-text-white>Bienvenue dans mon portfolio, où l'art
de la
créativité prend vie. Explorez un échantillon de mes projets passés, un
voyage visuel à travers une variété de réalisations qui illustrent ma passion pour la
conception graphique et la
Expand All @@ -310,11 +320,14 @@ <h2 class="text-center custom-title"><span class="fw-bold">PORTFOLIO</span></h2>
</div>
<div class="row mt-5 ">
<ul class="col list-unstyled list-inline mb-0 text-uppercase work_menu" id="menu-filter">
<li class="list-inline-item"><a class="active" data-filter="*">Récent</a></li>
<li class="list-inline-item"><a class="" data-filter=".entreprises">Entreprises</a></li>
<li class="list-inline-item"><a class="" data-filter=".evenements">Evènements</a></li>
<li class="list-inline-item"><a class="" data-filter=".organisme">Organisme</a></li>
<li class="list-inline-item"><a class="" data-filter=".ui">UI/UX</a></li>
<li class="list-inline-item"><a class="active" data-filter="*" data-turn-text-white>Récent</a></li>
<li class="list-inline-item"><a class="" data-filter=".entreprises"
data-turn-text-white>Entreprises</a></li>
<li class="list-inline-item"><a class="" data-filter=".evenements"
data-turn-text-white>Evènements</a></li>
<li class="list-inline-item"><a class="" data-filter=".organisme" data-turn-text-white>Organisme</a>
</li>
<li class="list-inline-item"><a class="" data-filter=".ui" data-turn-text-white>UI/UX</a></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -417,13 +430,14 @@ <h4 class="mb-0">Project Title</h4>


<!-- START CONTACT -->
<section class="section" id="contact">
<section class="section" id="contact" data-turn-bg-secondary>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="text-center">
<h2><span class="fw-bold custom-title">Contact</span></h2>
<p class="text-muted mx-auto section-subtitle mt-3">Parlons ensemble de votre projet. Je suis
<p class="text-muted mx-auto section-subtitle mt-3" data-turn-text-white>Parlons ensemble de
votre projet. Je suis
disponible pur tous vos travaux en FREELANCE</p>
</div>
</div>
Expand All @@ -435,12 +449,9 @@ <h2><span class="fw-bold custom-title">Contact</span></h2>
<i class="mbri-mobile2 text-custom h1"></i>
</div>
<div class="mt-3">
<h5 class="mb-0 contact_detail-title fw-bold">Téléphone</h5>
<p class="text-muted">
<a href="tel:+229 62 79 06 02"
style="color: rgba(73, 72, 72, 0.966); outline: none; text-decoration: none;">
+229 62 79 06 02
</a>
<h5 class="mb-0 contact_detail-title fw-bold" data-turn-text-white>Téléphone</h5>
<p class="text-muted" data-turn-text-white>
+229 62 79 06 02
</p>
</div>
</div>
Expand All @@ -451,8 +462,8 @@ <h5 class="mb-0 contact_detail-title fw-bold">Téléphone</h5>
<i class="mbri-letter text-custom h1"></i>
</div>
<div class="mt-3">
<h5 class="mb-0 contact_detail-title fw-bold">Email</h5>
<p class="text-muted">[email protected]</p>
<h5 class="mb-0 contact_detail-title fw-bold" data-turn-text-white>Email</h5>
<p class="text-muted" data-turn-text-white>[email protected]</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -571,6 +582,9 @@ <h5 class="mb-0 contact_detail-title fw-bold">Email</h5>
<!-- Magnific Popup Js -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Dark Mode Js -->
<script src="js/dark_mode.js"></script>

<!-- Custom Js -->
<script src="js/custom.js"></script>
<script>
Expand Down
15 changes: 0 additions & 15 deletions js/custom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,18 +68,3 @@ var scrollSpy = new bootstrap.ScrollSpy(document.body, {
$(".back_top").click(function () {
return $("html, body").animate({ scrollTop: 0 }, 1000), !1;
});

const about = document.querySelector("#about");
const checkbox = document.querySelector("#checkbox");
const wave_img = document.querySelector("#wave_img");

// Ajoutez un écouteur d'événements "change" à la case à cocher
checkbox.addEventListener("change", function () {
if (checkbox.checked) {
about.style.backgroundColor = "black";
wave_img.style.fill = "black";
} else {
about.style.backgroundColor = "";
wave_img.style.fill = "";
}
});
Loading

0 comments on commit 8544e78

Please sign in to comment.