sachinganesh 3年前
コミット
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
+}

読み込み中…
キャンセル
保存