rachida26
-
Modifié le 1 juin 2022 à 14:43
jordane45
Messages postés38346Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention16 décembre 2024
-
1 juin 2022 à 15:09
Bonjour,
jessaye d'integrer une class a mon big-wrapper , mais lorsque j'inspecte mon code sur chrome , je ne vois pas la class active, je ne comprends pas ou est mon erreur , peut etre pourriez vous m'aider merci par avance
const hamburgerMenu = document.querySelector(".hamburger-menu");
const bigWrapper = document.querySelector(".big-wrapper");
function events(){
hamburgerMenu.addEventListener("click", () => {
bigWrapper.classList.toggle("active");
});
}
events();
.links{
display: none;
}
.hamburger-menu{
position:relative;
width: 2rem;
height: 2rem;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.hamburger-menu .bar1{
position: relative;
width: 100%;
height: 3px;
background-color: #fff;
border-radius: 3px;
}
.bar1::before, .bar1::after{
content: "";
position:absolute;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 3px;
}
<title>landing Page Responsive Optimisée SEO</title>
</head>
<body>
<main>
<div class="big-wrapper">
<header>
<div class="container">
<div class="logo">
<h1>Architecture<br>Moderne</h1>
</div>
<div class="links">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Projets</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="button">Obtenir un devis</a></li>
</ul>
</div>
<div class="hamburger-menu">
<div class="bar1">
</div>
</div>
</div>
</header>
<div class="showcase-area">
<div class="container">
<div class="left">
<div class="big-title"><h2>architecture consciente,<br>
l'avenir est là</h2>
<p class="text">Architecture Moderne vous propose des services tournant autour de l’architecture consciente et durable. Aborder les principes de l’architecture durable en accord avec l’environnement, la biologie de l’habitat, la neuro-architecture, la psychologie de l’habitat, le confort de l’occupant et sa santé, la connaissance de soi.</p>
<div class="cta">
<a href="#" class="button">Commencer maintenant</a>
</div>
</div>
</div>
<div id="images">
<div class="right">
<img src="./assets/images/home1.jpg" alt="">
<img src="./assets/images/home-landingPage1.jpg" alt="">
<img src="./assets/images/home-landingPage2.jpg" alt="">
<img src="./assets/images/home-landingPage4.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="title-plan">
<h2>Construisons l'avenir ensembe: architecture consciente </h2>
</div>
<div class="bar">
</div>
<div class="plans">
<img src="./assets/images/plan1.jpg" class="plan"alt="">
<img src="./assets/images/plan3.jpg" class="plan"alt="">
<img src="./assets/images/plan2.jpg" class="plan" alt="">
</div>
<div class="bar"></div>
<div class="description-part">
<div class="about-box">
<i class="uil uil-home about-icon"></i>
<h3 class="about-title">Feng shui occidental</h3>
<p class="about-paragraph">Le Feng Shui Occidental ou la psychologie de l’habitat est une pratique permettant d’harmoniser votre espace de vie en conscience pour plus de bien être chez vous et en vous. Un véritable outil de développement personnel, en utilisant votre lieu de vie comme support à votre épanouissement. Le Vastu Shastra, l’ancêtre du Feng Shui venant d’Inde, correspond à la science de l’habitat ou la médecine de l’habitat. </p>
</div>
<div class="about-box">
<i class="uil uil-no-entry about-icon"></i>
<h3 class="about-title">Architecture durable</h3>
<p class="about-paragraph">
L’architecture en lien avec le développement durable permet de créer des lieux en accord avec l’environnement et nos générations futures. Le bâtiment est au coeur de la lutte contre les changements climatiques. Agissons ensemble en consommant moins d’énergie et de ressources grâce aux principes durables et à l’économie circulaire.
</p>
</div>
<div class="about-box">
<i class="uil uil-heart about-icon"></i>
<h3 class="about-title">Développement personnel</h3>
<p class="about-paragraph">
Le développement personnel, le bien-être et l’harmonie intérieure sont au coeur de l’approche. Ces outils permettent une véritable transformation vers un épanouissement durable et aligné. Notre habitation est considérée comme notre 2 ème corps, en prendre soin, c’est aussi mettre tout en oeuvre pour nous épanouir.
Le bien-être chez soi, le bien-être en soi.
</p>
</div>
</div>
<section id="skills">
<h3 class="skills-title">Le bien être chez vous, <br> le bien être en vous</h3>
<p class="approach">Grâce à cette approche holistique, Hélène Nicodème vous accompagne<br> dans vos réflexions vers<br>une transformation intérieure profonde et dans un principe de co-création.</p>
<div>
<div id="experience">
<div class="counter">
<div class="data">
<div class="counter-value" data-count="15">0</div>
<span>ans d'expérience</span>
</div>
<div class="data">
<div class="counter-value" data-count="4000">0</div>
<span>heures de consultance</span>
</div>
<div class="data">
<div class="counter-value" data-count="200">0</div>
<span>projets</span>
</div>
<div class="data">
<div class="counter-value" data-count="17">0</div>
<span>parutions presse</span>
</div>
<div class="data">
<div class="counter-value" data-count="905">0</div>
<span>tasses de café</span>
</div>
</div>
</div>
</div>
</section>
<div>
<footer>
<div class="container2">
<div class="content_footer">
<div class="profil">
<div class="logo_area">
<img src="./assets/images/logo.png" alt="">
<em class="logo_name">Architecture Moderne</em>
<button id="dark_mode" class="moon"><i class="uil uil-moon"></i></button>
<button id="light_mode" class="sun hide"><i class="uil uil-sun"></i></button>
</div>
<div class="desc_area">
<p>Une nouvelle façon de construire pour une vivre une nouvelle vie</p>
</div>
<div class="social_media">
<a href="#"><i class="uil uil-facebook"></i></a>
<a href="#"><i class="uil uil-linkedin"></i></a>
<a href="#"><i class="uil uil-instagram-alt"></i></a>
<a href="#"><i class="uil uil-github"></i></a>
</div>
</div>
<div class="service_area">
<ul class="service_header">
<li class="service_name">Services</li>
<li><a href="#">Consulting</a></li>
<li><a href="#">Developpement</a></li>
<li><a href="#">Création</a></li>
<li><a href="#">Projets</a></li>
</ul>
<ul class="service_header">
<li class="service_name">Industrie</li>
<li><a href="#">Financement</a></li>
<li><a href="#">Secteur public</a></li>
<li><a href="#">Bureau</a></li>
<li><a href="#">Détails</a></li>
</ul>
<ul class="service_header">
<li class="service_name">Entreprise</li>
<li><a href="#">A propos</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Nous rejoindre</a></li>
</ul>
</div>
</div>
<hr>
<div class="footer_bottom">
<div class="copy_right">
<i class="uil uil-copyright"></i>
<em>2022 Architecture Modern</em>
</div>
<div class="tou">
<a href="#">Conditions d'utilisation</a>
<a href="#">Politique de confidentialité</a>
<a href="#">Cookies</a>
</div>
</div>
</div>
</footer>
</div>
</main>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="./assets/index.js"></script>
</body>
</html>
Configuration: Configuration: Macintosh / Chrome 102.0.5005.61
jordane45
Messages postés38346Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention16 décembre 20244 717 1 juin 2022 à 15:09
Bonjour,
Il manque des balises html dans ton code ...
le JS doit se trouver dans une balise <script>
Le css dans une balise <style>
et puis... il faut que ton JS ne s'exécute qu'une fois que ta page est chargée ... là où il est placé .. ( une fois les balises manquantes corrigées... ) il se lance AVANT que ton html ne soit généré...
Dans l'idéal, prends l'habitude de placer ton JS à la fin de ton document html ( juste avant le </body> )
