sachinganesh 2 gadus atpakaļ
vecāks
revīzija
cac18aed87

+ 32
- 0
dist/css/main.css Parādīt failu

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 Parādīt failu

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 Parādīt failu

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 Parādīt failu

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 Parādīt failu

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
+}

Notiek ielāde…
Atcelt
Saglabāt