new updates

package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "eslint": "^8.49.0",
     "glob": "^10.3.4",
+    "scroll-lock": "^2.1.5",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
     "vite": "^4.4.5",
@@ -21,7 +22,6 @@
     "vite-plugin-stylelint": "^5.1.1"
   },
   "dependencies": {
-    "modern-normalize": "^2.0.0",
-    "scroll-lock": "^2.1.5"
+    "modern-normalize": "^2.0.0"
   }
 }

src/css/index.css

@@ -3,6 +3,7 @@
 @import url('./header.css');
 @import url('./hero.css');
 @import url('./order.css');
+@import url('./steps.css');
 
 :root {
   font-synthesis: none;
@@ -18,6 +19,7 @@
   --primary-brand-color: rgb(161, 196, 135);
   --secondary-brand-color: rgb(119, 172, 99);
   --third-brand-color: rgb(252, 138, 17);
+  --fourth-brand-color: rgb(250, 243, 231);
   --transition-timings: 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 

src/css/reset.css

@@ -33,6 +33,7 @@ button {
 
 h1,
 h2,
+h3,
 p {
   margin: 0;
   padding: 0;

src/css/steps.css

@@ -0,0 +1,79 @@
+.steps-section {
+  margin-bottom: 80px;
+}
+
+.steps-container {
+  height: 661px;
+  padding: 40px 20px 0 20px;
+  background-color: var(--fourth-brand-color);
+  border-radius: 40px;
+  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Ccircle cx='2.77718' cy='3.25906' r='2.51253' fill='%23A1C487' fill-opacity='0.69'/%3E%3C/svg%3E"); */
+}
+
+.step-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.16;
+  letter-spacing: -0.96px;
+  text-transform: uppercase;
+  margin-bottom: 40px;
+}
+
+.steps-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.steps-item:first-of-type {
+  width: 176px;
+}
+
+.steps-item:nth-child(2) {
+  width: 166px;
+}
+
+.steps-item:nth-child(3) {
+  width: 199px;
+}
+
+.steps-item::before {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--primary-brand-color);
+  content: '1';
+  width: 40px;
+  height: 38px;
+  border-radius: 50%;
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: -0.72px;
+  margin-right: 14px;
+}
+
+.steps-item::before {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--primary-brand-color);
+  content: '1';
+  width: 40px;
+  height: 38px;
+  border-radius: 50%;
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: -0.72px;
+}
+
+.steps-item:nth-of-type(2)::before {
+  content: '2';
+}
+
+.steps-item:nth-of-type(3)::before {
+  content: '3';
+}
+
+.step-block {
+  margin-top: 37px;
+}

src/index.html

@@ -12,6 +12,7 @@
     <main>
       <load src="partials/hero.html" />
       <load src="partials/order.html" />
+      <load src="partials/steps.html" />
     </main>
     <script type="module" src="./js/header.js"></script>
   </body>

src/partials/steps.html

@@ -0,0 +1,48 @@
+<section class="steps-section">
+  <div class="container">
+    <div class="steps-container">
+      <div class="step-info">
+        <h3 class="step-title">3 Easy Steps for Buying Fresh Vegetables</h3>
+        <ul class="steps-list">
+          <li class="steps-item">
+            Just choose the vegetable you want to order by clicking on the checkboxes next to it.
+          </li>
+          <li class="steps-item">Click on the basket and fill out the form.</li>
+          <li class="steps-item">
+            Sit back and relax! Your fresh vegetables basket will be delivered.
+          </li>
+        </ul>
+      </div>
+      <div class="step-block">
+        <picture class="order-picture">
+          <source
+            media="(width >= 1280px)"
+            srcset="
+              ./img/desktop/order/order-girl.avif    1x,
+              ./img/desktop/order/[email protected] 2x
+            "
+            type="image/avif"
+          />
+          <source
+            media="(width >= 768px)"
+            srcset="./img/tablet/order/order-girl.avif 1x, ./img/tablet/order/[email protected] 2x"
+            type="image/avif"
+          />
+          <source
+            media="(width < 767px)"
+            srcset="./img/mobile/order/order-girl.avif 1x, ./img/mobile/order/[email protected] 2x"
+            type="image/avif"
+          />
+          <img
+            class="step-img"
+            src="./img/mobile/order/order-girl.avif"
+            alt="Girl"
+            loading="lazy"
+          />
+        </picture>
+      </div>
+    </div>
+    <div class="step-block"></div>
+    <div class="step-block"></div>
+  </div>
+</section>