Talc free powder
unknown
javascript
7 months ago
8.8 kB
2
Indexable
Never
<style scoped> .product-nav { position: relative; display: flex; align-items: flex-end; justify-content: center; text-align: center; margin-bottom: 20px; font-weight: bold; border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 0 20px; margin-bottom: 20px; } .product-nav li { padding: 0; display: inline-block; min-width: min-content; margin: 0 20px -1px; cursor: pointer; } .product-nav .active { color: #ff7900; 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; width: 25%; } .card .img-txt-cont .txt-cont { align-self: center; width: 75%; } .card .img-txt-cont .img-cont img { border-radius: 50%; padding-right: 12px; } .results-card { padding: 15px 15px 15px 15px; border-radius: 12px 12px 12px 12px; box-shadow: 3px 3px 10px 0px #b4b736; text-align: center; margin-bottom: 20px; } .results-card img { width: 75%; border-radius: 7%; transform: scale(0.9); } .results-card img:hover { animation-name: grow-img; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } @media screen and (min-width: 767px) { .product-nav { font-size: 18px; } .card.active { display: flex !important; flex-wrap: wrap; justify-content: center; } .card.active:first-child { margin: 0 auto; width: 75%; } .results-card { width: calc(33.33% - 30px - 40px); margin: 0 20px; } .card .img-txt-cont { width: calc(50% - 40px); margin-bottom: 30px; padding: 0 20px; } } @keyframes grow-img { to { transform: scale(1); } } </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>: 400gm, 200gm</p> <p> Hi… I am a natural and ayurvedic replacement for harmful talcum powder with no side effects. I am fine, white, odourless powder extracted from the ayurvedic tubers of the Arrowroot plant. I am dermatologically tested, clinically proven, 100% vegan, PETA-certifies, cruelty-free, and free from all toxic chemicals, which makes me completely safe for your baby. Using me every day during a diaper change will keep your little angel rash-free and help them enjoy my natural cooling and freshness that makes their skin naturally radiant. You can also use me after every ShuShu Babies bath session to keep your munchkin happy, jolly, and sweat-free. I shall not only absorb wetness and prevent bacterial infection but also treat rashes, burns, and irritated skin. </p> </div> <div class="card"> <div class="results-card"> <div class="img-container"> <img src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/funny-infant-baby-holds-head-up_1163-2834.webp?v=1682599908" /> </div> <div class="txt-container"> <h3>Absorbs sweat</h3> <p> Keeps the skin dry by absorbing moisture and sweat that causes skin rashes, allergies, and infections. </p> </div> </div> <div class="results-card"> <div class="img-container"> <img src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/lovely-newborn-asian-baby-sleeping-furry-blanket_658552-165.webp?v=1682599908" /> </div> <div class="txt-container"> <h3>Prevents Diaper Rashes</h3> <p> Ayurvedic minerals and vitamins provide relief to diaper rashes and cool down the irritations caused by them. </p> </div> </div> <div class="results-card"> <div class="img-container"> <img src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/cute-little-baby-looking-into-camera_1150-15673.webp?v=1682599908" /> </div> <div class="txt-container"> <h3>Soothes skin</h3> <p> The anti-irritant and anti-inflammatory qualities improves skin texture, and reduce oiliness, which ultimately makes the skin radiant and glowy. </p> </div> </div> </div> <div class="card"> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/arrowroot_235904233-jpg-q07t6s9njdcqhl9i6cuai1h6s1euan0ymi4wcthbaw.webp?v=1682599908" /> </div> <div class="txt-cont"> <h5>Arrowroot</h5> <p> Arrowroot powder has several medicinal uses and is rich in iron, zinc, fiber, potassium, and magnesium that gives your baby a silky texture and a cooling effect. </p> </div> </div> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/Shankhapushpi-1-jpg-webp.webp?v=1682599908" /> </div> <div class="txt-cont"> <h5>Shankhapushpi</h5> <p> Shankhapushpi is an ayurvedic rejuvenating ingredient that provides cooling to rashes and retains moisture in the skin. </p> </div> </div> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/Ashwagandha-jpg-webp_af414bdf-12b2-49a1-a330-49887f0920a5.webp?v=1682599908" /> </div> <div class="txt-cont"> <h5>Ashwagandha</h5> <p> It has a high antioxidant content, which helps reduce marks left by small wounds, burns, or rashes. It lightens and brightens your baby’s skin. </p> </div> </div> <div class="img-txt-cont"> <div class="img-cont"> <img src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/1-1-q07t2w7p9210fowxw6avoiti9ml5fqkyf8xjul8z20.webp?v=1682599908" /> </div> <div class="txt-cont"> <h5>Saffron Powder</h5> <p> Saffron absorbs moisture and keeps the skin glowing. It also soothes your child’s skin and treats skin allergies to keep their skin smooth. </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>