Lists

HTML Code

          
            <div class="c-category__overview u-body l-my-2 center-content">
            <!-- For tabs -->
            <!-- Pagination is coded with https://codepen.io/josetxu/pen/vYvgJVE with modifications -->
            <div class="c-category__tabs">
              <ul class="c-category__list l-flex l-flex-row">
                <li class="c-category__list-item c-category__list-item--active l-p-1"><span>Conifers</span></li>
                <li class="c-category__list-item l-p-1"><span>Deciduous Trees</span></li>
                <li class="c-category__list-item l-p-1 is-on-mobile-hidden is-on-desktop-visible"><span>Evergreen Trees</span></li>
                <li class="c-category__list-item l-p-1 is-on-mobile-hidden is-on-desktop-visible"><span>Grasses & Bamboos</span></li>
                <li class="c-category__list-item l-p-1 is-on-mobile-hidden is-on-desktop-visible"><span>Vines</span></li>
                <li class="c-category__list-item l-p-1 is-on-mobile-hidden is-on-desktop-visible"><span>Edibles</span></li>
                <li class="c-category__list-item l-p-1 is-on-desktop-hidden"><span>Expand Your Options</span>
                  <ul class="c-category__drop-down u-primary-bgcolor">
                    <li class="c-category__drop-down-option l-p-1"><a class="c-category__option-link c-category__option-link--hover u-navlinks" href="coming-soon.html">Evergreen Trees</a></li>
                    <li class="c-category__drop-down-option l-p-1"><a class="c-category__option-link c-category__option-link--hover u-navlinks" href="coming-soon.html">Grasses & Bamboos</a></li>
                    <li class="c-category__drop-down-option l-p-1"><a class="c-category__option-link c-category__option-link--hover u-navlinks" href="coming-soon.html">Vines</a></li>
                    <li class="c-category__drop-down-option l-p-1"><a class="c-category__option-link c-category__option-link--hover u-navlinks" href="coming-soon.html">Edibles</a></li>
                    <li class="c-category__drop-down-option l-p-1"><a class="c-category__option-link c-category__option-link--hover u-navlinks" href="coming-soon.html">Japanese Maples</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="c-category__info-wrapper l-flex l-flex-column l-flex-space-between l-flex-center-items l-p-1"
            >
              <!-- Category information with img and text -->
              <img class="c-category__img" src="images/spruce.jpg" alt="Potted Spruce Tree">
              <div class="c-category__text-wrapper l-p-1">
                <p class="c-category__text l-my-1">
                  Elevate your home's landscape with the timeless beauty and  enduring elegance of conifers.
                </p>
                <p class="c-category__text l-my-1">
                  From privacy screening to offering year-round visual interest, these remarkably low-maintenance trees add charm and functionality to your outdoor sanctuary.
                </p>
                <p class="c-category__text l-my-1">
                  Conifers bring timeless charm to your landscape with year-round greenery, offering privacy screening and low-maintenance upkeep. Their diverse forms inspire endless landscaping possibilities, while their scent and graceful branches evoke serene wilderness, elevating your outdoor sanctuary to new levels of beauty and tranquility.
                </p>
              </div>
            </div>
            <div
              class="c-category__info-wrapper l-flex l-flex-column l-flex-space-between l-flex-center-items l-p-1"
            >
              <!-- Category information with img and text -->
              <img class="c-category__img" src="images/albizia.jpg" alt="Albizia">
              <div class="c-category__text-wrapper l-p-1">
                <p class="c-category__text l-my-1">
                  Enhance your outdoor space with the captivating allure of Deciduous Trees.
                </p>
                <p class="c-category__text l-my-1">
                  From vibrant foliage that transforms with the seasons to providing shade and shelter, these trees offer a dynamic and picturesque addition to your landscape.
                </p>
                <p class="c-category__text l-my-1">
                  Deciduous trees bring a dynamic rhythm to your outdoor environment, showcasing a kaleidoscope of colors as their foliage transitions with the changing seasons. From the vibrant greens of spring to the fiery hues of autumn, their ever-changing palette offers an enchanting spectacle that invigorates your landscape throughout the year.
                </p>
              </div>
            </div>
            <div
              class="c-category__info-wrapper l-flex l-flex-column l-flex-space-between l-flex-center-items l-p-1"
            >
              <!-- Category information with img and text -->
              <img class="c-category__img" src="images/azalea.jpg" alt="A Beautiful Azalea Plant with Pink Flowers">
              <div class="c-category__text-wrapper l-p-1">
                <p class="c-category__text l-my-1">
                  Immerse yourself in the enduring elegance of Evergreen Trees, a cornerstone of any picturesque landscape.
                </p>
                <p class="c-category__text l-my-1">
                  Whether used as privacy screens, focal points, or to provide year-round interest, these resilient trees offer both aesthetic appeal and practical functionality.
                </p>
                <p class="c-category__text l-my-1">
                  Evergreen trees stand as steadfast guardians, infusing your landscape with enduring elegance and year-round vitality. Their lush foliage remains verdant and vibrant through all seasons, offering a timeless backdrop of greenery that captivates the eye and soothes the soul.
                </p>
              </div>
            </div>
            <div
              class="c-category__info-wrapper l-flex l-flex-column l-flex-space-between l-flex-center-items l-p-1"
            >
              <!-- Category information with img and text -->
              <img class="c-category__img" src="images/carex.jpg" alt="Potted Carex Plant">
              <div class="c-category__text-wrapper l-p-1">
                <p class="c-category__text l-my-1">
                  Embrace the natural elegance of Grasses & Bamboos.
                </p>
                <p class="c-category__text l-my-1">
                  With their graceful foliage and versatile appeal, these plants bring a touch of serenity and texture to your outdoor haven.
                </p>
                <p class="c-category__text l-my-1">
                  Grasses and bamboos offer a harmonious blend of natural elegance and tranquil beauty, enriching your outdoor haven with their graceful foliage and versatile charm. Whether swaying gently in the breeze or standing tall as architectural accents, these plants infuse your landscape with a sense of serenity and texture that captivates the senses.
                </p>
              </div>
            </div>
            <div
              class="c-category__info-wrapper l-flex l-flex-column l-flex-space-between l-flex-center-items l-p-1"
            >
              <!-- Category information with img and text -->
              <img class="c-category__img" src="images/honeysuckle.jpg" alt="Coral Honeysuckle">
              <div class="c-category__text-wrapper l-p-1">
                <p class="c-category__text l-my-1">
                  Unleash the beauty of Vines in your outdoor oasis.
                </p>
                <p class="c-category__text l-my-1">
                  From gracefully cascading down walls to creating lush natural privacy screens, vines offer endless possibilities for enhancing your outdoor sanctuary and transforming it into a tranquil haven of natural beauty and serenity.
                </p>
                <p class="c-category__text l-my-1">
                  Vines weave a tapestry of natural beauty within your outdoor oasis, offering versatile charm and endless possibilities for enhancement. Whether cascading gracefully down walls or weaving intricate patterns as natural privacy screens, these plants add an enchanting touch of whimsy and allure to your outdoor sanctuary.
                </p>
              </div>
            </div>
            <div
              class="c-category__info-wrapper l-flex l-flex-column l-flex-space-between l-flex-center-items l-p-1"
            >
              <!-- Category information with img and text -->
              <img class="c-category__img" src="images/hazelnut.jpg" alt="Hazelnuts in White Bowl on Cutting Board">
              <div class="c-category__text-wrapper l-p-1">
                <p class="c-category__text l-my-1">
                  Indulge in the bounty of Edibles.
                </p>
                <p class="c-category__text l-my-1">
                  From the crisp sweetness of apples to the luscious juiciness of pears, and the vibrant burst of cherries and plums, these fruits offer a delightful harvest for your garden.
                </p>
                <p class="c-category__text l-my-1">
                  Indulge in the abundance of edibles, where the crisp sweetness of apples, the luscious juiciness of pears, and the vibrant burst of cherries and plums await your harvest. These fruits not only tantalize the taste buds but also add a bountiful array of colors and textures to your garden, creating a feast for both the eyes and the palate.
                </p>
              </div>
            </div>
          </div>