diff --git a/src/css/your-order.css b/src/css/your-order.css
index acd1435..c5e2f4c 100644
--- a/src/css/your-order.css
+++ b/src/css/your-order.css
@@ -1 +1,282 @@
-/* Styles for "Your Order" section */
+:root {
+    --text: #141414;
+    --background: #576f35;
+    --background-2: #7a3145;
+    --main-text: #fbfbfb;
+    --harvest: rgba(251, 251, 251, 0.3);
+    --font-family: "Inter Tight", sans-serif;
+}
+
+
+.your-order {
+    padding:80px 0;
+}
+
+.your-order-title {
+    display: block;
+    font-size: 48px;
+    line-height: 1.04;
+    letter-spacing: -0.01em;
+    text-transform: uppercase;
+    margin-bottom: 29px;
+}
+
+.highlight-text-harvest {
+    color: var(--harvest);
+}
+
+.your-order-text {
+    font-weight: 500;
+    line-height: 1.29;
+    margin-bottom: 40px;
+}
+
+.order-block {
+    border-radius: 30px;
+    padding: 40px 20px;
+    background-color: var(--main-text);
+}
+
+.order-form-text {
+    margin-bottom: 40px;
+    font-size: 24px;
+    line-height: 1.08;
+    letter-spacing: -0.01em;
+    text-transform: uppercase;
+    color: var(--text);
+}
+
+.highlight-text-from-us {
+    color: var(--background-2);
+}
+
+.the-form {
+    color: var(--background);
+}
+
+.order-form {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-input {
+    border: 1px solid rgba(77, 61, 61, 0.2);
+    width: 100%;
+    border-radius: 30px;
+    padding-left: 16px;
+    margin-bottom: 15px;
+    height: 46px;
+}
+
+.form-input:user-valid {
+    border-color: #3cbc81;
+}
+
+.form-input:user-invalid {
+    border-color: #e74a3b;
+}
+
+.form-input:focus , .form-textarea:focus{
+    outline: none;
+    border-color: var(--background-2);
+}
+
+.form-textarea {
+    resize: none;
+    width: 100%;
+    border: 1px solid rgba(20, 20, 20, 0.2);
+    border-radius: 15px;
+    padding-left: 16px;
+    padding-top: 14px;
+    height: 91px;
+    margin-bottom: 20px;
+}
+
+.order-form ::placeholder{
+    font-weight: 500;
+    line-height: 129%;
+    letter-spacing: -0.02em;
+    color: var(--text);
+}
+
+.form-submit-btn {
+    font-weight: 600;
+    line-height: 1.29;
+    letter-spacing: -0.01em;
+    border: none;
+    text-transform: uppercase;
+    color: var(--main-text);
+    border-radius: 30px;
+    padding:16px 0;
+    max-width: 100%;
+    text-align: center;
+    background: var(--background);
+}
+
+.social-media-block {
+    margin-top: 20px;
+    border-radius: 30px;
+    padding: 40px 20px;
+    background-color: var(--background);
+}
+
+.order-block,
+.social-media-block{
+    min-width: 280px;
+}
+
+.social-media-image {
+    max-width: 100%;
+    border-radius: 15px;
+    max-height: 273px;
+    margin-bottom: 20px;
+}
+
+.social-media-text {
+        line-height: 1.29;
+        letter-spacing: -0.01em;
+        color: rgba(251, 251, 251, 0.5);
+}
+
+.social-media {
+    margin-top: 14px;
+}
+
+.social-media-item{
+    display: inline-block;
+}
+
+.social-media-item:not(:last-child){
+    margin-bottom: 8px;
+}
+
+.social-media-item:not(:last-child):after {
+    content: "/";
+    font-size: 24px;
+    line-height: 1.08;
+    margin: 0 8px;
+}
+
+.social-media-link {
+    font-size: 24px;
+    line-height: 1.08;
+    letter-spacing: -0.01em;
+}
+
+@media screen and (min-width:768px){
+    .your-order {
+        padding: 100px 0;
+    }
+    
+    .your-order-title{
+        font-size: 64px;
+        line-height: 1.0;
+    }
+    
+    .your-order-text{
+        line-height: 1.25;
+        max-width: 640px;
+    }
+
+    .order-block{
+        margin: 0 auto;
+        max-width: 628px;
+        padding: 50px 100px;
+    }
+
+    .order-form-text{
+        margin-bottom: 50px;
+    }
+
+    .form-input{
+        height: 52px;;
+        line-height: 1.25;
+    }
+
+    .order-form::placeholder{
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 1.25;
+        letter-spacing: -0.02em;
+    }
+
+    .form-textarea{
+        height: 95px;
+        margin-bottom: 25px;
+    }
+
+    .form-submit-btn{
+        font-size: 18px;
+        line-height: 1.11;
+    }
+
+    .social-media-block{
+        max-width: 628px;
+        margin: 0 auto;
+        margin-top: 25px;
+        padding: 50px;
+    }
+
+    .social-media-image{
+        margin-bottom: 50px;
+    }
+
+    .social-media-text{
+        font-size: 18px;
+        line-height: 1.11;
+    }
+
+    .social-media{
+        margin-top: 15px;
+    }
+
+    .social-media-item:not(:last-child):after{
+        font-size: 32px;
+        line-height: 1.0;
+        margin: 0 12px;
+    }
+
+    .social-media-item:not(:last-child) {
+        margin: 0;
+    }
+    
+    .social-media-link{
+        font-size: 32px;
+        line-height: 1.0;
+    }
+}
+
+@media screen and (min-width:1280px) {
+    .order-wrap{
+        display: flex;
+        gap: 24px;
+    }
+
+    .order-block{
+        padding: 50px;
+    }
+
+    .your-order-title{
+        margin-bottom: 25px;
+        margin-right: auto;
+        max-width: 751px;
+    }
+
+    .your-order-text {
+        margin-right: auto;
+        margin-bottom: 50px;
+        max-width: 742px;
+    }
+
+    .social-media-block{
+        margin-top: 0;
+    }
+
+    .order-block, .social-media-block  {
+        flex-basis: calc((100% - 24px) / 2);
+    }
+
+    .social-media-item:not(:last-child) {
+        margin-bottom: 12px;
+    }
+}
\ No newline at end of file
diff --git a/src/partials/your-order.html b/src/partials/your-order.html
index 5cdb0b6..4231e66 100644
--- a/src/partials/your-order.html
+++ b/src/partials/your-order.html
@@ -1,3 +1,85 @@
 <section class="your-order" id="your-order">
-  
+  <div class="container">
+    <h2 class="your-order-title">
+      fresh <span class="highlight-text-harvest">harvest</span> box has got you covered
+    </h2>
+    <p class="your-order-text">
+      Our boxes are packed with delicious, nutritious vegetables, perfect for
+      anyone looking to eat healthier or support local farmers. Order your box
+      today and start enjoying the best that nature has to offer!
+    </p>
+      <div class="order-wrap">
+        <div class="order-block">
+          <form class="order-form">
+            <p class="order-form-text">
+          Ordering <span class="highlight-text-from-us">from us</span> is quick and easy! Fill
+          out <span class="the-form">the form</span> below and we will contact
+          you!
+        </p>
+            <input
+              class="form-input"
+              type="text"
+              name="full-name"
+              required
+              placeholder="Full Name"
+              pattern="[A-ZА-Я][a-zа-я]+ [A-ZА-Я][a-zа-я]+$"
+              title="Please enter your full name, starting with capital letters (e.g., John Doe)."
+            />  
+            <input
+              class="form-input"
+              type="email"
+              name="email"
+              required
+              pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})"
+              placeholder="Email"
+              title="Please enter a valid email address (e.g., user@example.com)."
+            />
+            <textarea class="form-textarea" name="comment" placeholder="Comment"></textarea>
+            <button class="form-submit-btn" type="submit">Send</button>
+          </form>
+          </div>
+          <div class="social-media-block">
+              <picture>
+                <source media="(max-width: 767px)"
+                        srcset="./img/womfill-mob-1x-min.jpg 1x, 
+                                ./img/womfill-mob-2x-min.jpg 2x, 
+                                ./img/womfill-mob-3x-min.jpg 3x">
+                <source media="(max-width: 1279px)"
+                        srcset="./img/womfill-tab-1x-min.jpg 1x, 
+                                ./img/womfill-tab-2x-min.jpg 2x, 
+                                ./img/womfill-tab-3x-min.jpg 3x">
+                <source media="(min-width: 1280px)"
+                        srcset="./img/womfill-desc-1x-min.jpg 1x, 
+                                ./img/womfill-desc-2x-min.jpg 2x, 
+                                ./img/womfill-desc-3x-min.jpg 3x">
+                <img src="./img/womfill-tab-1x-min.jpg" class="social-media-image" alt="Woman filling the blender with fruits">
+              </picture>
+            <p class="social-media-text">Follow us on our social networks:</p>
+              <ul class="social-media">
+                <li class="social-media-item">
+                  <a
+                    class="social-media-link"
+                    target="_blank"
+                    href="https://www.instagram.com/goitclub/"
+                    >instagram</a>
+                </li>
+                <li class="social-media-item">
+                  <a
+                    class="social-media-link"
+                    target="_blank"
+                    href="https://www.youtube.com/c/GoIT"
+                    >facebook</a>
+                </li>
+                <li class="social-media-item">
+                  <a
+                    class="social-media-link"
+                    target="_blank"
+                    href="https://www.facebook.com/goITclub/"
+                    >youtube</a>
+                </li>
+              </ul>
+          </div>
+      </div>
+    </div>
+  </div>
 </section>