code added

dist/css/main.css

@@ -41,6 +41,15 @@ body {
 .font-1_5 {
   font-size: 2rem; }
 
+.font-1_7 {
+  font-size: 1.7rem; }
+
+.font-2 {
+  font-size: 2.2rem; }
+
+.font-2_2 {
+  font-size: 2.2rem; }
+
 .subtitle_1 {
   font-size: 1.5rem; }
 
@@ -53,6 +62,9 @@ body {
 .padding_top_14 {
   padding-top: 14rem; }
 
+.p-6 {
+  padding: 5rem; }
+
 .vh_60 {
   height: 60vh; }
 
@@ -65,6 +77,9 @@ body {
 .vh-15 {
   height: 15vh; }
 
+.fw-600 {
+  font-weight: 600; }
+
 .button_dark {
   clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
   padding-right: 1.7rem;
@@ -83,3 +98,20 @@ body {
 
 .priceCut_multi {
   font-size: .7rem; }
+
+.productOverview .overviewProductHeading {
+  font-size: 2.1rem; }
+
+.productOverview .overviewProductFullTitle {
+  padding: 2rem 13rem;
+  font-size: 3rem; }
+
+.productOverview .overviewProductDes {
+  padding: 0 2rem;
+  font-size: 1.5rem; }
+
+.PO_galleryContainer .PO_gallery_display {
+  min-height: 500px;
+  width: 100%;
+  background: white;
+  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }

dist/css/pages/productOverview.css

@@ -0,0 +1,28 @@
+.photo_dual {
+  width: 40rem; }
+
+.price_footer {
+  background-color: #52cba5; }
+
+.boxImgContainer {
+  width: 4rem; }
+
+.priceCut_multi {
+  font-size: .7rem; }
+
+.productOverview .overviewProductHeading {
+  font-size: 2.1rem; }
+
+.productOverview .overviewProductFullTitle {
+  padding: 2rem 13rem;
+  font-size: 3rem; }
+
+.productOverview .overviewProductDes {
+  padding: 0 2rem;
+  font-size: 1.5rem; }
+
+.PO_galleryContainer .PO_gallery_display {
+  min-height: 500px;
+  width: 100%;
+  background: white;
+  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }

dist/html/pages/laptopmulti.html

@@ -66,16 +66,29 @@
 
     </header>
     <section class="productOverview container">
-        <div class=" d-flex align-items-center container justify-content-between">
+        <div class=" d-flex flex-column p-6  align-items-center container justify-content-between">
-            <div>Overview</div>
+            <div class="font-1_7 overviewProductHeading fw-600">Overview</div>
-            <div>The Laptop of tomorrow with
+            <div class="font-2_2 text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with
                 4K OLED Dual Screen for Creative Multitasking</div>
-            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
                 amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
         </div>
     </section>
 
+    <!-- photos display -->
+    <div class="container PO_galleryContainer">
+        <div class="p-6 pt-0">
+            <div class="PO_gallery_display">
+               <img src="./../../assets/" />
+            </div>
+            <div>
+                box
+            </div>
+        </div>
+    </div>
+
+    <!-- photos display end -->
     <!-- footer -->
     <div id="footer-head"></div>
     <!-- end-footer -->

scss/base/_utilities.scss

@@ -12,6 +12,20 @@
   font-size: 2rem;
 }
 
+.font-1_7{
+  font-size: 1.7rem;
+}
+
+.font-2{
+  font-size: 2.2rem;
+}
+
+.font-2_2{
+  font-size: 2.2rem;
+}
+
+
+
 .subtitle_1 {
   font-size: 1.5rem;
 }
@@ -31,6 +45,13 @@
   padding-top: 14rem;
 }
 
+.p-6{
+  padding:5rem;
+}
+
+
+
+
 // heights
 
 .vh_60{
@@ -48,3 +69,10 @@
 .vh-15 {
   height: 15vh;
 }
+
+
+// font weight
+
+.fw-600{
+  font-weight: 600;
+}

scss/pages/productOverview.scss

@@ -17,3 +17,28 @@
     font-size: .7rem;
   }
   
+.productOverview{
+  .overviewProductHeading{
+    font-size: 2.1rem;
+  }
+
+  .overviewProductFullTitle{
+    padding: 2rem 13rem;
+    font-size: 3rem;
+  }
+
+  .overviewProductDes{
+    padding: 0 2rem;
+    font-size: 1.5rem;
+  }
+}
+
+.PO_galleryContainer{
+  .PO_gallery_display{
+    min-height: 500px;
+    width: 100%;
+
+    background: rgb(255,255,255);
+    background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
+  }
+}