瀏覽代碼

code added

sachinganesh 2 年之前
父節點
當前提交
cac18aed87
共有 5 個檔案被更改,包括 131 行新增5 行删除
  1. 32
    0
      dist/css/main.css
  2. 28
    0
      dist/css/pages/productOverview.css
  3. 17
    4
      dist/html/pages/laptopmulti.html
  4. 28
    0
      scss/base/_utilities.scss
  5. 26
    1
      scss/pages/productOverview.scss

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

Loading…
取消
儲存