Happy 80th Independence Day 🇮🇳

contact

contact

Tags: Liquid Codes, contact · 12 Aug 2026

Page: Contact Us Page (Build Trust & Accessibility)

Snippet Code

<style>
  .section-responsive-padding {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .section-image-overlay.ambient {
    animation: animateAmbientOverlay 9s ease-in-out infinite;
  }

  .section-image-overlay {
    position: absolute;
    object-fit: contain;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .section-image-overlay.overlay-2.ambient {
    animation: animateAmbientOverlay 10s ease-in-out infinite;
  }

  .isolate {
    position: relative;
    z-index: 0;
  }

  .page-width {
    max-width: 1600px;
    margin: 0 auto;
  }

  .title-wrapper {
    margin-top: 0;
  }

  .center {
    text-align: center;
  }

  .title:not(.notification .title):not(.cart-title .title):not(.main-list-collection-banner .title):not(.product-banner-slider__wrapper .title) {
    font-weight: 700;
  }

  .multicolumn .title {
    margin: 0;
    width: 100%;
  }

  .text-color-heading-secondary {
    color: #ff3aa3;
    font-family: Nunito, sans-serif;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.2;
    word-break: break-word;
  }

  slider-component {
    --desktop-margin-left-first-item: 195px;
    position: relative;
    display: block;
  }

  .grid:last-child {
    margin-bottom: 0;
  }

  .multicolumn-list {
    margin-top: 0;
    padding: 0;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }

  .multicolumn-list__item {
    position: relative;
  }

  .grid__item {
    flex-grow: 1;
    flex-shrink: 0;
  }

  .multicolumn:not(.background-none) .multicolumn-card {
    height: 100%;
  }

  .multicolumn:not(background-none) .multicolumn-card {
    border-radius: 10px;
  }

  .image-position-top {
    background-color: #ffd2ea;
  }

  .multicolumn-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  .content-container {
    border: 0px solid #1010101a;
  }

  .multicolumn-card__info {
    position: relative;
    z-index: 1;
    padding: 25px 25px 30px;
  }

  .multicolumn-list .multicolumn-card__info .inline-richtext {
    line-height: 36.4px;
  }

  .multicolumn-list h3 {
    margin: 0;
  }

  .text-weight-600 {
    font-weight: 600;
  }

  .center .multicolumn-card__info>.rte {
    margin-right: auto;
    margin-left: auto;
  }

  .multicolumn-card__info>:nth-child(2) {
    margin-top: 10px;
  }

  .text-color-main {
    color: #101010;
  }

  .multicolumn-list .multicolumn-card__info p {
    line-height: 24px;
    font-size: 16px;
    letter-spacing: normal;
    font-family: Poppins, sans-serif;
    font-style: normal;
    font-weight: 400;
  }

  .rte>*:last-child {
    margin-bottom: 0;
  }

  .rte>*:first-child {
    margin-top: 0;
  }

  .multicolumn-list p {
    margin: 0;
  }

  .rte a {
    color: inherit;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness .1s ease;
    text-decoration: underline;
  }

  .rte a:hover {
    color: inherit;
    text-decoration-thickness: 2px;
  }

  .rte:after {
    clear: both;
    content: "";
    display: block;
  }

  .content-container:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 0px;
    box-shadow: 0px 4px 5px #10101000;
    z-index: -1;
  }

  .button:not(.scroll-to-top__button) {
    padding: 10px 30px;
  }

  :is(.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded) {
    min-height: 40px;
    height: 40px;
    line-height: 20.8px;
    text-transform: capitalize;
  }

  .center .button {
    color: #ffffff;
    background-color: #ff3aa3;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }

  .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    appearance: none;
    letter-spacing: initial;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #ff3aa3;
    border-radius: 40px;
    transition: all .1s ease;
  }

  .button:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff3aa3;
    z-index: -1;
  }

  .button:after {
    content: "";
    position: absolute;
    top: -.1rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    transform: translate(-101%);
    transition: all .4s ease-in-out;
    z-index: -1;
  }

  @keyframes animateAmbientOverlay {
    0% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }

    25% {
      transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
    }

    50% {
      transform: translate(-55%, -45%) scale(1.03) rotate(4deg);
    }

    75% {
      transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
    }

    100% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-rotate-in {
      animation: slideRotateIn .6s cubic-bezier(0, 0, .3, 1) forwards;
      animation-delay: 75ms;
    }

    .scroll-trigger.animate--slide-rotate-in {
      transform-origin: center bottom;
    }

    .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
      animation: slideIn .6s cubic-bezier(0, 0, .3, 1) forwards;
      animation-delay: calc(1 * 75ms);
    }
  }

  @media screen and (min-width: 750px) {
    .page-width {
      padding: 0 50px;
    }

    .title-wrapper.center {
      margin-left: auto;
      margin-right: auto;
    }

    .title-wrapper {
      max-width: 650px;
      margin-bottom: 40px;
    }

    .text-color-heading-secondary {
      font-size: 30px;
    }

    .grid {
      column-gap: 30px;
      row-gap: 28px;
    }

    .multicolumn-list__item {
      padding-bottom: 0;
    }

    .grid__item {
      max-width: 480px;
    }

    .text-weight-600 {
      font-size: 26px;
    }

    .multicolumn .button {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 950px) {
    .grid--3-col-desktop .grid__item {
      width: 313.292px;
    }
  }

  @media screen and (min-width: 1025px) {
    #shopify-section-template--26565450301745__multicolumn_ppBg3m .section-overlay .section-image-overlay {
      width: 10%;
      /* top: 10%; */
      left: 95%;
    }

    #shopify-section-template--26565450301745__multicolumn_ppBg3m .section-overlay .section-image-overlay.overlay-2 {
      width: 10%;
      top: 80%;
      left: 1%;
    }
  }

  @media screen and (max-width: 749px) {
    .section-responsive-padding {
      padding-top: 13.78px;
      padding-bottom: 37.1px;
    }

    .multicolumn-list:not(.slider--mobile).grid {
      row-gap: 40px;
    }

    .multicolumn-list:not(.slider) {
      padding-left: 15px;
      padding-right: 15px;
    }

    .multicolumn-list {
      margin: 0;
      width: 100%;
    }

    .button {
      font-size: 16px;
    }

    .title-wrapper {
      margin-top: 0;
      margin-bottom: 40px;
    }
  }

  @media screen and (max-width: 989px) {
    .grid--1-col-tablet-down .grid__item {
      width: 100%;
      max-width: 100%;
    }

    .multicolumn-list__item.mobile-center .multicolumn-card__info {
      text-align: center;
    }

    .multicolumn-list__item.mobile-center .multicolumn-card__info .rte {
      margin-left: auto;
      margin-right: auto;
    }

    .multicolumn-card__info>.rte {
      max-width: 400px;
    }

    .button:not(.scroll-to-top__button) {
      height: auto;
    }
  }

  @media screen and (max-width: 1024px) {
    #shopify-section-template--26565450301745__multicolumn_ppBg3m .section-overlay .section-image-overlay {
      width: 27%;
      /* top: 4%; */
      left: 94%;
    }

    #shopify-section-template--26565450301745__multicolumn_ppBg3m .section-overlay .section-image-overlay.overlay-2 {
      width: 15%;
      top: 90%;
      left: 1%;
    }
  }
</style>

<section id="shopify-section-template--26565450301745__multicolumn_ppBg3m" class="shopify-section section">
  <link href="//stylobug.com/cdn/shop/t/66/assets/section-multicolumn.css?v=115722156166684919691776954311"
    rel="stylesheet" type="text/css" media="all">
  <link href="//stylobug.com/cdn/shop/t/66/assets/component-slider.css?v=117175392398318864621776954311"
    rel="stylesheet" type="text/css" media="all">
  <div class="multicolumn gradient section-responsive-padding layout--default color-main-bg section-overlay">
    <img
      src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/a0a0f0e2-a4ec-4597-8baa-0b477e431e44hgh.png?v=1779352838&width=188"
      alt="background shape" width="188" height="188" loading="lazy" sizes="(min-width: 1600px) 100vw,
  (min-width: 750px) calc(100vw - 130px), calc(100vw - 50px)" class="section-image-overlay ambient">
    <!-- <img src="//stylobug.com/cdn/shop/files/Sunflower.png?v=1770232989&width=188" alt="background shape" width="188"
      height="188" loading="lazy" sizes="(min-width: 1600px) 100vw,
  (min-width: 750px) calc(100vw - 130px), calc(100vw - 50px)" class="section-image-overlay overlay-2 ambient"> -->

    <div class="page-width isolate">
      <div class="title-wrapper center">
        <h2 class="title inline-richtext h3 text-color-heading-secondary scroll-trigger animate--slide-rotate-in">
          Kidsy Clothing Enterprises
        </h2>
      </div>
      <slider-component class="slider-mobile-gutter">
        <ul class="multicolumn-list contains-content-container grid grid--1-col-tablet-down grid--3-col-desktop"
          id="Slider-template--26565450301745__multicolumn_ppBg3m" role="list">
          <li id="Slide-template--26565450301745__multicolumn_ppBg3m-1"
            class="multicolumn-list__item grid__item center mobile-center scroll-trigger animate--slide-in"
            data-cascade="" style="--animation-order: 1;">
            <div class="multicolumn-card content-container image-position-top color-bg-1">
              <div class="multicolumn-card__info">
                <h3 class="inline-richtext h4 text-color-heading-secondary text-weight-600">
                  WhatsApp
                </h3>
                <div class="rte text-color-main">
                  <p>
                    <a href="tel:+918980331672">+91 89803 31672</a>
                  </p>
                </div>
              </div>
            </div>
          </li>

          <li id="Slide-template--26565450301745__multicolumn_ppBg3m-2"
            class="multicolumn-list__item grid__item center mobile-center scroll-trigger animate--slide-in"
            data-cascade="" style="--animation-order: 2;">
            <div class="multicolumn-card content-container image-position-top color-bg-1">
              <div class="multicolumn-card__info">
                <h3 class="inline-richtext h4 text-color-heading-secondary text-weight-600">
                  Address
                </h3>
                <div class="rte text-color-main">
                  <p>Surat, Gujarat.</p>
                </div>
              </div>
            </div>
          </li>

          <li id="Slide-template--26565450301745__multicolumn_ppBg3m-3"
            class="multicolumn-list__item grid__item center mobile-center scroll-trigger animate--slide-in"
            data-cascade="" style="--animation-order: 3;">
            <div class="multicolumn-card content-container image-position-top color-bg-1">
              <div class="multicolumn-card__info">
                <h3 class="inline-richtext h4 text-color-heading-secondary text-weight-600">
                  Email
                </h3>
                <div class="rte text-color-main">
                  <p>
                    <a href="mailto:kidsyclothing.com@gmail.com">kidsyclothing.com@gmail.com</a>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </slider-component>
      <div class="center">
        <a class="button" href="https://api.whatsapp.com/send?phone=918980331672">
          WhatsApp Us
        </a>
      </div>
    </div>
  </div>
</section>

Instructions

Heyy Guys 👋
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!

Complete Video Tutorial: