Untitled

mail@pastecode.io avatar
unknown
javascript
a year ago
9.4 kB
5
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>: 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>