sachinganesh 3 лет назад
Родитель
Сommit
cac18aed87

+ 32
- 0
dist/css/main.css Просмотреть файл

41
 .font-1_5 {
41
 .font-1_5 {
42
   font-size: 2rem; }
42
   font-size: 2rem; }
43
 
43
 
44
+.font-1_7 {
45
+  font-size: 1.7rem; }
46
+
47
+.font-2 {
48
+  font-size: 2.2rem; }
49
+
50
+.font-2_2 {
51
+  font-size: 2.2rem; }
52
+
44
 .subtitle_1 {
53
 .subtitle_1 {
45
   font-size: 1.5rem; }
54
   font-size: 1.5rem; }
46
 
55
 
53
 .padding_top_14 {
62
 .padding_top_14 {
54
   padding-top: 14rem; }
63
   padding-top: 14rem; }
55
 
64
 
65
+.p-6 {
66
+  padding: 5rem; }
67
+
56
 .vh_60 {
68
 .vh_60 {
57
   height: 60vh; }
69
   height: 60vh; }
58
 
70
 
65
 .vh-15 {
77
 .vh-15 {
66
   height: 15vh; }
78
   height: 15vh; }
67
 
79
 
80
+.fw-600 {
81
+  font-weight: 600; }
82
+
68
 .button_dark {
83
 .button_dark {
69
   clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
84
   clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
70
   padding-right: 1.7rem;
85
   padding-right: 1.7rem;
83
 
98
 
84
 .priceCut_multi {
99
 .priceCut_multi {
85
   font-size: .7rem; }
100
   font-size: .7rem; }
101
+
102
+.productOverview .overviewProductHeading {
103
+  font-size: 2.1rem; }
104
+
105
+.productOverview .overviewProductFullTitle {
106
+  padding: 2rem 13rem;
107
+  font-size: 3rem; }
108
+
109
+.productOverview .overviewProductDes {
110
+  padding: 0 2rem;
111
+  font-size: 1.5rem; }
112
+
113
+.PO_galleryContainer .PO_gallery_display {
114
+  min-height: 500px;
115
+  width: 100%;
116
+  background: white;
117
+  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }

+ 28
- 0
dist/css/pages/productOverview.css Просмотреть файл

1
+.photo_dual {
2
+  width: 40rem; }
3
+
4
+.price_footer {
5
+  background-color: #52cba5; }
6
+
7
+.boxImgContainer {
8
+  width: 4rem; }
9
+
10
+.priceCut_multi {
11
+  font-size: .7rem; }
12
+
13
+.productOverview .overviewProductHeading {
14
+  font-size: 2.1rem; }
15
+
16
+.productOverview .overviewProductFullTitle {
17
+  padding: 2rem 13rem;
18
+  font-size: 3rem; }
19
+
20
+.productOverview .overviewProductDes {
21
+  padding: 0 2rem;
22
+  font-size: 1.5rem; }
23
+
24
+.PO_galleryContainer .PO_gallery_display {
25
+  min-height: 500px;
26
+  width: 100%;
27
+  background: white;
28
+  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }

+ 17
- 4
dist/html/pages/laptopmulti.html Просмотреть файл

66
 
66
 
67
     </header>
67
     </header>
68
     <section class="productOverview container">
68
     <section class="productOverview container">
69
-        <div class=" d-flex align-items-center container justify-content-between">
70
-            <div>Overview</div>
71
-            <div>The Laptop of tomorrow with
69
+        <div class=" d-flex flex-column p-6  align-items-center container justify-content-between">
70
+            <div class="font-1_7 overviewProductHeading fw-600">Overview</div>
71
+            <div class="font-2_2 text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with
72
                 4K OLED Dual Screen for Creative Multitasking</div>
72
                 4K OLED Dual Screen for Creative Multitasking</div>
73
-            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
73
+            <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
74
                 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
74
                 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
75
                 amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
75
                 amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
76
         </div>
76
         </div>
77
     </section>
77
     </section>
78
 
78
 
79
+    <!-- photos display -->
80
+    <div class="container PO_galleryContainer">
81
+        <div class="p-6 pt-0">
82
+            <div class="PO_gallery_display">
83
+               <img src="./../../assets/" />
84
+            </div>
85
+            <div>
86
+                box
87
+            </div>
88
+        </div>
89
+    </div>
90
+
91
+    <!-- photos display end -->
79
     <!-- footer -->
92
     <!-- footer -->
80
     <div id="footer-head"></div>
93
     <div id="footer-head"></div>
81
     <!-- end-footer -->
94
     <!-- end-footer -->

+ 28
- 0
scss/base/_utilities.scss Просмотреть файл

12
   font-size: 2rem;
12
   font-size: 2rem;
13
 }
13
 }
14
 
14
 
15
+.font-1_7{
16
+  font-size: 1.7rem;
17
+}
18
+
19
+.font-2{
20
+  font-size: 2.2rem;
21
+}
22
+
23
+.font-2_2{
24
+  font-size: 2.2rem;
25
+}
26
+
27
+
28
+
15
 .subtitle_1 {
29
 .subtitle_1 {
16
   font-size: 1.5rem;
30
   font-size: 1.5rem;
17
 }
31
 }
31
   padding-top: 14rem;
45
   padding-top: 14rem;
32
 }
46
 }
33
 
47
 
48
+.p-6{
49
+  padding:5rem;
50
+}
51
+
52
+
53
+
54
+
34
 // heights
55
 // heights
35
 
56
 
36
 .vh_60{
57
 .vh_60{
48
 .vh-15 {
69
 .vh-15 {
49
   height: 15vh;
70
   height: 15vh;
50
 }
71
 }
72
+
73
+
74
+// font weight
75
+
76
+.fw-600{
77
+  font-weight: 600;
78
+}

+ 26
- 1
scss/pages/productOverview.scss Просмотреть файл

16
   .priceCut_multi{
16
   .priceCut_multi{
17
     font-size: .7rem;
17
     font-size: .7rem;
18
   }
18
   }
19
-  
19
+  
20
+.productOverview{
21
+  .overviewProductHeading{
22
+    font-size: 2.1rem;
23
+  }
24
+
25
+  .overviewProductFullTitle{
26
+    padding: 2rem 13rem;
27
+    font-size: 3rem;
28
+  }
29
+
30
+  .overviewProductDes{
31
+    padding: 0 2rem;
32
+    font-size: 1.5rem;
33
+  }
34
+}
35
+
36
+.PO_galleryContainer{
37
+  .PO_gallery_display{
38
+    min-height: 500px;
39
+    width: 100%;
40
+
41
+    background: rgb(255,255,255);
42
+    background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
43
+  }
44
+}

Загрузка…
Отмена
Сохранить