Talc free powder
unknown
javascript
2 years ago
8.8 kB
3
Indexable
<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>