code-internet-applications · Julia123-web · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025
diff --git a/src/index.html b/src/index.html
@@ -536,9 +536,9 @@ <h1 class="header__heading">
                     </div>
                     <div class="site-center is-flex is-aligned-center is-justified-center">
                       <div class="hero-slider__content-wrapper center has-navigation">
-                        <h2 class="hero-slider__heading hero-slider__heading--custom hero-slider__heading--secondary">
+                        <h1 class="hero-slider__heading hero-slider__heading--custom hero-slider__heading--secondary">
                           <span>We warm people</span>
-                        </h2>
+                        </h1>
                         <div class="hero-slider__text hero-slider__text--secondary">
                           <span>Heating cushions &amp; pads for indoors and outdoors</span>
                         </div>
@@ -568,9 +568,9 @@ <h2 class="hero-slider__heading hero-slider__heading--custom hero-slider__headin
                     </div>
                     <div class="site-center is-flex is-aligned-center is-justified-center">
                       <div class="hero-slider__content-wrapper center has-navigation">
-                        <h2 class="hero-slider__heading hero-slider__heading--custom hero-slider__heading--white">
+                        <h1 class="hero-slider__heading hero-slider__heading--custom hero-slider__heading--white">
                           <span>Image banner</span>
-                        </h2>
+                        </h1>
                         <div class="hero-slider__text hero-slider__text--white">
                           <span>Give customers details about the banner image or content on the template.</span>
                         </div>
@@ -615,7 +615,7 @@ <h2 class="hero-slider__heading hero-slider__heading--custom hero-slider__headin
             <div class="two-column-highlight-products is-grid is-aligned-center has-no-row-gap">
               <div class="two-column-highlight-products__content is-col-10 is-col-5-md is-col-4-xl grid-col-start-2 grid-col-start-1-md grid-col-start-2-xl">
                 <header>
-                  <h3>Make over with Stoov® covers</h3>
+                  <h1 class="h1">Make over with Stoov® covers</h1>
                 </header>
                 <div class="two-column-highlight-products__text">
                   <p>Our knitted covers are available in various colours. You can choose Terra Orange or Midnight Blue for example. Give your interior a twist or a subtle make over with a new cover for your Stoov® cushion.</p>
@@ -712,7 +712,7 @@ <h3>Make over with Stoov® covers</h3>
             <div class="two-column-info-block is-grid is-aligned-center">
               <div class="two-column-info-block__content is-col-10 is-col-5-md is-col-4-xl grid-col-start-2 grid-col-start-1-md grid-col-start-2-xl is-order-2 is-order-1-md">
                 <header>
-                  <h3 class="h3">Save energy with personal heating</h3>
+                  <h1 class="h1">Save energy with personal heating</h1>
                 </header>
                 <div class="two-column-info-block__text">
                   <p>Ever thought about how our heatingcushions can save energy? No more waste of warmth when you warm yourself directly with Stoov® heating cushions. Turn down your thermostat and enjoy your personal source of warmth.</p>
@@ -743,7 +743,7 @@ <h3 class="h3">Save energy with personal heating</h3>
             <div class="two-column-info-block is-grid is-aligned-center">
               <div class="two-column-info-block__content is-col-10 is-col-5-md is-col-4-xl grid-col-start-2 grid-col-start-1-md grid-col-start-2-xl is-order-2 is-order-1-md">
                 <header>
-                  <h3 class="h3">New season, new fabric</h3>
+                  <h1 class="h1">New season, new fabric</h1>
                 </header>
                 <div class="two-column-info-block__text">
                   <p>Stoov® celebrates the cozy season with beautiful news: velvet is added to our Ploov heating cushion collection! The velvet fabric comes in five spice colours, with a soft touch<br/>and subtle shimmer.</p>
@@ -762,6 +762,35 @@ <h3 class="h3">New season, new fabric</h3>
           </div>
         </div>
       </section>
+
+       <!-- New Section - Two-columns-->
+     <section class="shopify-section section-two-column-info-block">
+
+      <!-- Section styles -->
+      <link rel="stylesheet" href="css/section-two-column-info-block.css" type="text/css">
+
+      <div class="container">
+        <div class="container-content">
+          <div class="two-column-info-block is-grid is-aligned-center">
+            <div class="two-column-info-block__content is-col-10 is-col-5-md grid-col-start-2 grid-col-start-1-md grid-col-start-2-xl is-order-2 is-order-1-md">
+              <header>
+                <h1 class="h1">Sustainable journey to your front door</h1>
+              </header>
+              <div class="two-column-info-block__text">
+                <p>We use as little plastic as possible to transport your Stoov®. Preferably not at all! If plastic packaging is nevertheless used, it is recyclabe or compostable. We also pack products as small and efficiently as possible, so that more orders fit in one van and there is less need to drive up and down.</p>
+              </div>
+            </div>
+              <div class="two-column-info-block__image is-col-12 is-col-5-md grid-col-start-7-md is-order-1 is-order-2-md">
+                <figure class="img img--wrapper">
+                  <picture>
+                    <img src="https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_2000x1300_crop_center.jpg" alt="new" >
+                </figure>
+              </div>
+
+          </div>
+        </div>
+      </div>
+    </section>
 
       <!-- Section - Products Slider -->
       <section class="shopify-section section-products-slider">
@@ -774,7 +803,7 @@ <h3 class="h3">New season, new fabric</h3>
 
         <swiper-slider class="container products-slider">
           <header class="container-header is-flex-md is-justified-space-between-md has-col-gap-md">
-            <h2 class="container-heading h4">Our products</h2>
+            <h1 class="container-heading h4">Our products</h1>
             <a href="#" class="link underlined-offset-link visibility-hidden visibility-md--visible">Discover all</a>
           </header>
           <div class="container-content">
@@ -1187,7 +1216,7 @@ <h2 class="review__stars">
                   </div>
                 </div>
               </h2>
-              <h2 class="review__heading">Excellent!</h2>
+              <h1 class="review__heading">Excellent!</h1>
               <div class="review__text text-desktop-lg">
                 <p>With 10.000+ reviews of enthusiastic Stoov® fans on Trustpilot & TrustedShops</p>
               </div>
@@ -1208,7 +1237,7 @@ <h2 class="review__heading">Excellent!</h2>
 
         <swiper-slider class="container products-slider">
           <header class="container-header">
-            <h2 class="container-heading h4">Featured products slider</h2>
+            <h1 class="container-heading h4">Featured products slider</h1>
           </header>
           <div class="container-content">
             <div class="products-slider__row">
@@ -1496,49 +1525,49 @@ <h2 class="container-heading h4">Featured products slider</h2>
             <div class="is-grid">
               <div class="usp__wrapper is-col-6 is-col-3-md">
                 <a class="usp__link link link--text" href="#">
+                  <p class="usp__title text-desktop-lg weight-regular">Wireless</p>
+                  <div class="usp__content text-sm">
+                    <p>Your personal heating buddy whenever and wherever you need it</p>
+                  </div>
                   <p class="usp__icon">
                     <svg class="icon icon-infrared_technology icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 56.7 39.5">
                       <path fill="currentColor" d="M24.55,20.46a.38.38,0,0,1,.38-.38h5.5l.07.05h.05a.22.22,0,0,1,.05.08h0v.07a.09.09,0,0,1,0,.07v5.39a.38.38,0,0,1-.38.38.38.38,0,0,1-.37-.37h0V21a5.6,5.6,0,0,0,.5,10.28,6.36,6.36,0,0,1,0,11.91.29.29,0,0,1-.13,0A.38.38,0,0,1,30,43a.39.39,0,0,1,.22-.49,5.61,5.61,0,0,0,0-10.51,6.34,6.34,0,0,1-1.35-11.19H24.93A.38.38,0,0,1,24.55,20.46Zm10.88.37h3.92A6.34,6.34,0,0,0,40.69,32a5.61,5.61,0,0,1,0,10.51.38.38,0,0,0,.13.73H41a6.36,6.36,0,0,0,0-11.91A5.6,5.6,0,0,1,40.45,21v4.81a.39.39,0,0,0,.31.44.39.39,0,0,0,.44-.32.24.24,0,0,0,0-.12V20.46a.09.09,0,0,0,0-.07v-.07h0a.22.22,0,0,0-.05-.08h0l-.07,0h-5.5a.39.39,0,0,0-.44.31.39.39,0,0,0,.32.44h.12Zm10.5,0h3.9a6.33,6.33,0,0,0-2.77,5.23,6.42,6.42,0,0,0,4.13,6,5.61,5.61,0,0,1,0,10.51.35.35,0,0,0,.16.67h.14a6.36,6.36,0,0,0,0-11.91A5.6,5.6,0,0,1,51,21v4.81a.39.39,0,0,0,.31.44.39.39,0,0,0,.44-.32.24.24,0,0,0,0-.12V20.32h0a.22.22,0,0,0,0-.08H46.07a.39.39,0,0,0-.44.31A.39.39,0,0,0,46,21a.24.24,0,0,0,.12,0ZM68.29,50.24,66.24,36a8.24,8.24,0,0,0-8.11-7,.39.39,0,0,0-.44.31.39.39,0,0,0,.32.44.24.24,0,0,0,.12,0,7.47,7.47,0,0,1,7.37,6.39l2,14.21a7.44,7.44,0,0,1-6.29,8.43,7.85,7.85,0,0,1-1.08.08H19.82a7.45,7.45,0,0,1-7.45-7.43,7.85,7.85,0,0,1,.08-1.08L14.5,36.14a7.47,7.47,0,0,1,7.37-6.39.39.39,0,0,0,.44-.31A.39.39,0,0,0,22,29a.24.24,0,0,0-.12,0,8.24,8.24,0,0,0-8.11,7l-2,14.21a8.2,8.2,0,0,0,7,9.29,8.92,8.92,0,0,0,1.16.08H60.18a8.19,8.19,0,0,0,8.19-8.21,7.54,7.54,0,0,0-.08-1.16Z" transform="translate(-11.68 -20.08)" />
                     </svg>
                   </p>
-                  <p class="usp__title text-desktop-lg weight-regular">Wireless</p>
-                  <div class="usp__content text-sm">
-                    <p>Your personal heating buddy whenever and wherever you need it</p>
-                  </div>
                 </a>
               </div>
               <div class="usp__wrapper is-col-6 is-col-3-md">
+                <p class="usp__title text-desktop-lg weight-regular">Save energy</p>
+                <div class="usp__content text-sm">
+                  <p>Every degree lower on your thermostat saves 7% energy</p>
+                </div>
                 <p class="usp__icon">
                   <svg class="icon icon-dutch_design icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 51.52 50.76">
                     <path fill="currentColor" d="M65.33,24.39,55.16,15.26a1.26,1.26,0,0,0-1.7,0L43.28,24.39a1.27,1.27,0,0,0-.42.95V64.1a1.29,1.29,0,0,0,1.27,1.28H64.48a1.28,1.28,0,0,0,1.28-1.28V25.34A1.28,1.28,0,0,0,65.33,24.39ZM51,64.63V55.51a3.33,3.33,0,1,1,6.65-.36,2.16,2.16,0,0,1,0,.36v9.12Zm14-.53a.53.53,0,0,1-.53.53h-6.1V55.51a4.08,4.08,0,1,0-8.15-.4,2.67,2.67,0,0,0,0,.4v9.12h-6.1a.52.52,0,0,1-.52-.52h0V25.34a.52.52,0,0,1,.17-.39L54,15.82h0a.51.51,0,0,1,.7,0L64.83,25a.53.53,0,0,1,.18.39ZM37,22.2H35.14a.52.52,0,0,1-.52-.52h0v-2a1.27,1.27,0,0,0-1.27-1.27H31.64a.52.52,0,0,1-.52-.52h0v-2a1.27,1.27,0,0,0-1.27-1.27H22.68a1.27,1.27,0,0,0-1.27,1.27h0v2a.52.52,0,0,1-.52.52H19.18a1.27,1.27,0,0,0-1.27,1.27h0v2a.54.54,0,0,1-.52.52H15.52a1.27,1.27,0,0,0-1.28,1.26h0V64.1a1.28,1.28,0,0,0,1.28,1.28H37a1.29,1.29,0,0,0,1.27-1.28V23.47A1.27,1.27,0,0,0,37,22.2ZM22.94,64.63V55.51a3.33,3.33,0,1,1,6.65-.36,2.16,2.16,0,0,1,0,.36v9.12Zm14.59-.53a.52.52,0,0,1-.51.53H30.34V55.51a4.08,4.08,0,1,0-8.15-.4,2.67,2.67,0,0,0,0,.4v9.12H15.52A.53.53,0,0,1,15,64.1V23.47a.52.52,0,0,1,.52-.52H17.4a1.27,1.27,0,0,0,1.27-1.27h0v-2a.52.52,0,0,1,.52-.52H20.9a1.27,1.27,0,0,0,1.27-1.27h0v-2a.52.52,0,0,1,.52-.52h7.16a.52.52,0,0,1,.53.51h0v2a1.27,1.27,0,0,0,1.27,1.27h1.71a.54.54,0,0,1,.52.52v2A1.27,1.27,0,0,0,35.1,23H37a.52.52,0,0,1,.52.52h0ZM49.66,28.59A3.41,3.41,0,0,0,46.25,32v3.32a.38.38,0,0,0,.38.37h6.06a.39.39,0,0,0,.37-.37V32A3.41,3.41,0,0,0,49.66,28.59Zm2.65,6.35H47V32a2.66,2.66,0,1,1,5.31-.33,1.82,1.82,0,0,1,0,.33ZM59,28.59A3.41,3.41,0,0,0,55.55,32v3.36a.38.38,0,0,0,.38.37H62a.39.39,0,0,0,.37-.37V32A3.41,3.41,0,0,0,59,28.59Zm2.65,6.35H56.3V32a2.66,2.66,0,1,1,5.31-.33,1.82,1.82,0,0,1,0,.33Zm-12,4.93a3.41,3.41,0,0,0-3.41,3.41V46.6a.38.38,0,0,0,.38.37h6.06a.39.39,0,0,0,.37-.37V43.28a3.4,3.4,0,0,0-3.39-3.41Zm2.65,6.35H47V43.28A2.66,2.66,0,1,1,52.31,43a1.82,1.82,0,0,1,0,.33ZM59,39.87a3.41,3.41,0,0,0-3.41,3.41V46.6A.38.38,0,0,0,56,47h6a.39.39,0,0,0,.37-.37V43.28A3.41,3.41,0,0,0,59,39.87Zm2.65,6.35H56.3V43.28A2.66,2.66,0,1,1,61.61,43a1.82,1.82,0,0,1,0,.33ZM24.2,27H19.07a.38.38,0,0,0-.37.37h0v7.94a.38.38,0,0,0,.37.37H24.2a.38.38,0,0,0,.38-.37V27.38A.38.38,0,0,0,24.2,27Zm-.37,7.94H19.45V27.75h4.38ZM33.46,27H28.33a.38.38,0,0,0-.38.38v7.94a.38.38,0,0,0,.38.37h5.13a.39.39,0,0,0,.37-.37V27.38A.38.38,0,0,0,33.46,27Zm-.38,7.94H28.7V27.75h4.38ZM24.2,40.08H19.07a.36.36,0,0,0-.37.35v8a.38.38,0,0,0,.36.38H24.2a.38.38,0,0,0,.38-.38h0V40.45a.38.38,0,0,0-.37-.37ZM23.83,48H19.45V40.83h4.38Zm9.63-7.94H28.33a.38.38,0,0,0-.38.36h0v7.94a.38.38,0,0,0,.38.38h5.13a.38.38,0,0,0,.37-.38V40.45a.38.38,0,0,0-.37-.37ZM33.08,48H28.7V40.83h4.38ZM28.7,20.8a2.44,2.44,0,1,0-2.44,2.44A2.44,2.44,0,0,0,28.7,20.8Zm-2.44,1.69A1.69,1.69,0,1,1,28,20.8a1.69,1.69,0,0,1-1.74,1.69Zm30.49.1A2.44,2.44,0,1,0,54.28,25h0A2.44,2.44,0,0,0,56.75,22.59Zm-2.44,1.69A1.69,1.69,0,1,1,56,22.59h0A1.69,1.69,0,0,1,54.31,24.28Z" transform="translate(-14.24 -14.62)" />
                   </svg>
                 </p>
-                <p class="usp__title text-desktop-lg weight-regular">Save energy</p>
-                <div class="usp__content text-sm">
-                  <p>Every degree lower on your thermostat saves 7% energy</p>
-                </div>
               </div>
               <div class="usp__wrapper is-col-6 is-col-3-md">
+                <p class="usp__title text-desktop-lg weight-regular">Free shipment</p>
+                <div class="usp__content text-sm">
+                  <p>Fast & free shipping</p>
+                </div>
                 <p class="usp__icon">
                   <svg class="icon icon-shipping icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 63.69 43.03">
                     <path fill="currentColor" d="M65.79,38.61l-5.05-7.72a3.61,3.61,0,0,0-3.06-1.65H47.21V23.47a3.38,3.38,0,0,0-3.38-3.38H17a3.38,3.38,0,0,0-3.38,3.38h0v9.11H3.13a.39.39,0,0,0-.44.31.39.39,0,0,0,.32.44.24.24,0,0,0,.12,0H13.62v4.35H9.35a.38.38,0,0,0,0,.75h4.27V54A3.38,3.38,0,0,0,17,57.41h.7a6.91,6.91,0,0,0,13.61,0H49.61a6.91,6.91,0,0,0,13.62-.06,3.63,3.63,0,0,0,3.15-3.56V40.59A3.67,3.67,0,0,0,65.79,38.61ZM57.68,30a2.87,2.87,0,0,1,2.43,1.31l5,7.72c0,.08.08.16.13.23h-18V30ZM24.48,62.36A6.14,6.14,0,0,1,18.37,57a4.87,4.87,0,0,1-.06-.76,6.17,6.17,0,0,1,12.33,0,6.47,6.47,0,0,1-.05.76A6.14,6.14,0,0,1,24.48,62.36Zm6.91-6.13a6.92,6.92,0,0,0-13.83,0v.43H17A2.62,2.62,0,0,1,14.38,54V38.43H26.53a.38.38,0,0,0,0-.75H14.38V33.33h5.93a.38.38,0,0,0,0-.75H14.38V23.47A2.62,2.62,0,0,1,17,20.84H43.83a2.63,2.63,0,0,1,2.63,2.63h0V56.66H31.38C31.39,56.52,31.39,56.38,31.39,56.23Zm25,6.13A6.16,6.16,0,0,1,50.3,57h0a4.82,4.82,0,0,1,0-.76,6.17,6.17,0,0,1,12.33,0,4.57,4.57,0,0,1,0,.74h0a6.16,6.16,0,0,1-6.21,5.38Zm9.2-8.57a2.88,2.88,0,0,1-2.3,2.8v-.36a6.92,6.92,0,0,0-13.83,0v.43H47.21V40H65.56a2.88,2.88,0,0,1,.06.59Z" transform="translate(-2.69 -20.09)"/>
                   </svg>
                 </p>
-                <p class="usp__title text-desktop-lg weight-regular">Free shipment</p>
-                <div class="usp__content text-sm">
-                  <p>Fast & free shipping</p>
-                </div>
               </div>
               <div class="usp__wrapper is-col-6 is-col-3-md">
+                <p class="usp__title text-desktop-lg weight-regular">30 days return policy</p>
+                <div class="usp__content text-sm">
+                  <p>Experience our infrared heating yourself</p>
+                </div>
                 <p class="usp__icon">
                   <svg class="icon icon-hassle_free_returns icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 58.57 62.74">
                     <path fill="currentColor" d="M25.08,55a.38.38,0,0,0,.37.38h29.1a.38.38,0,0,0,.37-.38V32.27h0a.3.3,0,0,0-.05-.15h0L50.21,24.8a.37.37,0,0,0-.32-.17H30.11a.37.37,0,0,0-.32.17l-4.65,7.27h0a.3.3,0,0,0-.05.15h0Zm29.09-.37H25.83v-22H54.17ZM30.31,25.38H49.69l1.58,2.47H28.73ZM28.25,28.6h23.5l2.11,3.29H26.14Zm3.13,14.24a.37.37,0,0,1,.1-.51h0a.38.38,0,0,1,.52.11,9.54,9.54,0,0,0,16,0,.38.38,0,0,1,.52-.11.37.37,0,0,1,.12.51h0a10.29,10.29,0,0,1-17.24,0Zm-11.57-23A28.57,28.57,0,0,0,16.36,56a.37.37,0,0,1-.09.51.36.36,0,0,1-.22.07.38.38,0,0,1-.31-.16A29.29,29.29,0,0,1,55.79,15.4l-1-6.34a.37.37,0,0,1,.74-.12L56.64,16a.35.35,0,0,1-.11.32h0a.39.39,0,0,1-.41.15l-6.8,1.11h-.06a.38.38,0,0,1-.37-.31.39.39,0,0,1,.31-.43l5.92-1a28.56,28.56,0,0,0-35.31,4ZM60.72,60.78A29.29,29.29,0,0,1,24.2,64.71l1,6.23a.39.39,0,0,1-.31.43h-.06a.38.38,0,0,1-.37-.32l-1.13-7a.39.39,0,0,1,.31-.43l7-1.15a.39.39,0,0,1,.43.31.37.37,0,0,1-.3.43h0l-6,1a28.53,28.53,0,0,0,38.91-40.1.36.36,0,0,1,.09-.51h0a.35.35,0,0,1,.5.08l0,0A29.33,29.33,0,0,1,60.72,60.78Z" transform="translate(-10.73 -8.63)" />
                   </svg>
                 </p>
-                <p class="usp__title text-desktop-lg weight-regular">30 days return policy</p>
-                <div class="usp__content text-sm">
-                  <p>Experience our infrared heating yourself</p>
-                </div>
               </div>
             </div>
           </div>

diff --git a/src/scss/component/component-usp.scss b/src/scss/component/component-usp.scss
@@ -66,4 +66,20 @@
       }
     }
   }
-}
+
+  //Mobile style
+  @include mqmax($bp-md) {
+    .is-grid {
+      display: flex;
+      flex-direction: row;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scroll-padding: 10px;
+    }
+    &__wrapper{
+      flex: 0 0 100%;
+      scroll-snap-align: center;
+    }
+  }
+}
+
diff --git a/src/scss/partials/_base.scss b/src/scss/partials/_base.scss
@@ -181,13 +181,13 @@ h6,
 
 h1,
 .h1 {
-  font-size: rem(64);
+  font-size: rem(50);
   line-height: rem(57);
   letter-spacing: rem(1);
   @include mqmin($bp-md) {
-    font-size: rem(150);
-    line-height: rem(135);
-    letter-spacing: rem(3);
+    font-size: rem(50);
+    line-height: rem(50);
+    letter-spacing: rem(1);
   }
 }
 
@@ -197,8 +197,8 @@ h2,
   line-height: rem(46);
   letter-spacing: rem(1);
   @include mqmin($bp-md) {
-    font-size: rem(64);
-    line-height: rem(70);
+    font-size: rem(40);
+    line-height: rem(1);
   }
 }
 

diff --git a/src/scss/section/section-hero-slider.scss b/src/scss/section/section-hero-slider.scss
@@ -49,7 +49,8 @@
     }
   }
   &__heading {
-    margin-bottom: rem(40);
+    margin-bottom: rem(20);
+    margin-top: rem(20);
     @include mqmin($bp-xl) {
       margin-bottom: rem(50);
     }