Untitled
unknown
javascript
2 years ago
9.4 kB
6
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 20px;
}
.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>: 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="results-card">
<div class="img-container">
<img
src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/Scalp-Hydration-jpg.webp?v=1681989322"
/>
</div>
<div class="txt-container">
<h3>Scalp Hydration</h3>
<p>
Helps to prevent dry scalp, scalp itchiness, and scalp flaking,
and provides hydration to the scalp.
</p>
</div>
</div>
<div class="results-card">
<div class="img-container">
<img
src="https://cdn.shopify.com/s/files/1/0705/2050/4628/files/Healthy-hair-jpg.webp?v=1681989322"
/>
</div>
<div class="txt-container">
<h3>Healthy Hair</h3>
<p>
Strengthens and repairs your child’s hair by preventing breakage.
</p>
</div>
</div>
<div class="results-card">
<div class="img-container">
<img
src="https://www.shushubabies.com/wp-content/uploads/2022/04/skin-hydration.webp"
/>
</div>
<div class="txt-container">
<h3>Stimulates Growth</h3>
<p>
Promotes healthy hair growth and prevents hair loss and cradle cap
</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/Avocado-oil-2-jpg-webp.webp?v=1681989322"
/>
</div>
<div class="txt-cont">
<h5>Avocado oil</h5>
<p>
Avocado oil is enriched with natural ingredients that help hydrate
and moisturize your kid’s hair and scalp. It effectively soothes,
protects, and strengthens your little one’s hair growth.
</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/Amla-oil-1-jpg-webp.webp?v=1681989322"
/>
</div>
<div class="txt-cont">
<h5>Amla oil</h5>
<p>
Amla oil stimulates hair growth and prevents hair loss. It is an
Ayurvedic ingredient used for hair conditioning. It also
stimulates healthy hair growth.
</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/almond-1-2-jpg-webp.webp?v=1681989322"
/>
</div>
<div class="txt-cont">
<h5>Almond Oil</h5>
<p>
Naturally provides hair nourishment. It promotes hair growth and
strengthens hair roots. Regular head massages can also prevent
hair fall in kids.
</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/Castor-oil-5-jpg-webp.webp?v=1681989322"
/>
</div>
<div class="txt-cont">
<h5>Castor oil</h5>
<p>
Castor oil moisturizes the baby’s scalp and promotes silkier,
shinier hair growth. It can also be used to strengthen the roots
of children’s hair.
</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/Sesame-Oil-2-jpg-webp.webp?v=1681989322"
/>
</div>
<div class="txt-cont">
<h5>Sesame Oil</h5>
<p>
It improves blood circulation in the scalp and keeps it
moisturized. Its mild natural fragrance also helps kids sleep
better.
</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/Neroli-Essential-Oil-1-jpg-webp.webp?v=1681989322"
/>
</div>
<div class="txt-cont">
<h5>Neroli Essential Oil</h5>
<p>
Neroli essential oil naturally soothes and cleanses the scalp
which treats itchiness caused by dryness and dandruff.
</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...