Key Ingredients
unknown
javascript
2 years ago
6.8 kB
4
Indexable
<style> .product-nav { position: relative; display: flex; justify-content: center; text-align: center; margin-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .product-nav li { padding: 0; display: inline-block; min-width: min-content; margin: 0 20px -1px; } .product-nav .active { color: red; border-bottom: 3px solid #000; } .product-nav .active { left: 0; /* transform-origin: bottom; */ transition: transform 0.25s; transform: scaleY(1); bottom: 0; } .product-desc div.card { display: none; } .product-desc div.card.active { display: block; } .card .img-txt-cont { display: flex; margin-bottom: 20px; } .card .img-txt-cont .img-cont { align-self: center; } .card .img-txt-cont .txt-cont { align-self: center; } .card .img-txt-cont .img-cont img { border-radius: 50%; padding-right: 12px; } @media screen and (min-width: 767px) { .card.active { display: flex !important; flex-wrap: wrap; } .card .img-txt-cont { width: calc(50% - 40px); margin-bottom: 30px; padding: 0 20px; } } </style> <ul class="product-nav"> <li class="active">Description</li> <li>Key Results</li> <li>Key Ingredients</li> </ul> <div class="product-desc"> <div class="card active"> <p><strong>Quantity </strong>: 200ml</p> <p> Hi.. I am a super nourishing scalp and hair champi oil enriched with the perfect blend of natural essential oils. I am dermatologically tested, clinically-proven, 100% vegan, and free from all toxic chemicals, which makes me completely safe for your little munchkin. Using me every day for a relaxing massage session will strengthen the connection between you and your little angel. I will not only stimulate healthy blood flow but also moisturise your child’s scalp. I shall provide hydration and promote shinier and softer hair growth. I also help cure dry scalp, scalp itchiness, and cradle cap. </p> </div> <div class="card"> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp" /> </div> <div class="txt-cont"> <h5>Orange and Mandarin Essential Oil</h5> <p> It is enriched with Vitamin C that uplifts the mood of irritated babies. Orange and Mandarin neutralize skin toxins and promote healthy skin. </p> </div> </div> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp" /> </div> <div class="txt-cont"> <h5>Orange and Mandarin Essential Oil</h5> <p> It is enriched with Vitamin C that uplifts the mood of irritated babies. Orange and Mandarin neutralize skin toxins and promote healthy skin. </p> </div> </div> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp" /> </div> <div class="txt-cont"> <h5>Orange and Mandarin Essential Oil</h5> <p> It is enriched with Vitamin C that uplifts the mood of irritated babies. Orange and Mandarin neutralize skin toxins and promote healthy skin. </p> </div> </div> </div> <div class="card"> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp" /> </div> <div class="txt-cont"> <h5>2 Orange and Mandarin Essential Oil</h5> <p> It is enriched with Vitamin C that uplifts the mood of irritated babies. Orange and Mandarin neutralize skin toxins and promote healthy skin. </p> </div> </div> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp" /> </div> <div class="txt-cont"> <h5>Orange and Mandarin Essential Oil</h5> <p> It is enriched with Vitamin C that uplifts the mood of irritated babies. Orange and Mandarin neutralize skin toxins and promote healthy skin. </p> </div> </div> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://www.shushubabies.com/wp-content/uploads/2021/06/Orange-Essential-Oil-1-jpg.webp" /> </div> <div class="txt-cont"> <h5>Orange and Mandarin Essential Oil</h5> <p> It is enriched with Vitamin C that uplifts the mood of irritated babies. Orange and Mandarin neutralize skin toxins and promote healthy skin. </p> </div> </div> </div> </div> <script> const formNav = document.querySelector('.product-nav'); const formSections = document.querySelectorAll('.product-desc .card'); function setActiveElement(element, formSection) { formNav.querySelectorAll('li').forEach((el) => { el.classList.remove('active'); }); formSections.forEach((el) => { el.classList.remove('active'); }); element.classList.add('active'); formSection.classList.add('active'); } formNav.querySelectorAll('li').forEach((element, index) => { element.addEventListener('click', () => { setActiveElement(element, formSections[index]); console.log(index); }); }); </script>
Editor is loading...