소스 검색

headermuli

sachinganesh 2 년 전
부모
커밋
eb816fc2b5
5개의 변경된 파일120개의 추가작업 그리고 22개의 파일을 삭제
  1. BIN
      dist/assets/box.png
  2. BIN
      dist/assets/laptop.png
  3. 31
    4
      dist/css/main.css
  4. 52
    14
      dist/html/pages/laptopmulti.html
  5. 37
    4
      scss/main.scss

BIN
dist/assets/box.png 파일 보기


BIN
dist/assets/laptop.png 파일 보기


+ 31
- 4
dist/css/main.css 파일 보기

@@ -11,10 +11,37 @@ html {
11 11
   background: linear-gradient(90deg, #3BB78F 0%, #0bab64 35%, #3bb78f 100%); }
12 12
 
13 13
 .banner_heading_4 {
14
-  font-size: 4rem; }
14
+  font-size: 3rem; }
15 15
 
16 16
 .subtitle_1 {
17
-  font-size: 1rem; }
17
+  font-size: 1.5rem; }
18 18
 
19
-.padding_top_12 {
20
-  padding-top: 12rem; }
19
+.padding_top_14 {
20
+  padding-top: 14rem; }
21
+
22
+.photo_dual {
23
+  width: 40rem; }
24
+
25
+.price_footer {
26
+  background-color: #52cba5; }
27
+
28
+.boxImgContainer {
29
+  width: 4rem; }
30
+
31
+.vh-85 {
32
+  height: 85vh; }
33
+
34
+.vh-15 {
35
+  height: 15vh; }
36
+
37
+.font-3 {
38
+  font-size: 3rem; }
39
+
40
+.font-1_5 {
41
+  font-size: 2rem; }
42
+
43
+.gap-1 {
44
+  font-size: 0.7rem; }
45
+
46
+.priceCut_multi {
47
+  font-size: .7rem; }

+ 52
- 14
dist/html/pages/laptopmulti.html 파일 보기

@@ -1,28 +1,66 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3
-  <head>
3
+
4
+<head>
4 5
     <meta charset="UTF-8" />
5 6
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 7
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7
-   
8
-    <link  rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
8
+
9
+    <link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
9 10
     <link rel="stylesheet" href="./../../css/main.css" />
10 11
     <title>project</title>
11
-  </head>
12
-  <body>
13
-    <div class=" bg-green vw-100 vh-100">
14
-        <div class="container h-100 text-white">
15
-            <div class="col-sm-4 padding_top_12 ">
16
-               <h1 class="banner_heading_4">Anwi xCreate</h1>
17
-                <div class="subtitle_12">2.5 Resolution | 120 Hz Refresh Rate</div>
12
+</head>
13
+
14
+<body>
15
+    <header class=" bg-green">
16
+        <div class="container vh-85 text-white ">
17
+            <div class="row h-100">
18
+                <div class="col-sm-4 padding_top_14 ">
19
+                    <h1 class="banner_heading_4">Anwi XCreate</h1>
20
+                    <div class="subtitle_1">2.5K Resolution | 120 Hz Refresh Rate</div>
21
+                </div>
22
+                <div class="col-sm-7 h-100">
23
+                    <div class="d-flex align-items-end justify-content-end h-100">
24
+                        <div class="photo_dual">
25
+                            <img class="w-100 h-100" src="./../../assets/laptop.png" alt="laptop">
26
+                        </div>
27
+                    </div>
28
+                </div>
18 29
             </div>
19
-            <div class="col-sm-7">
20 30
 
31
+        </div>
32
+        <div class="price_footer  vh-15 py-4 ">
33
+            <div class="d-flex align-items-center container justify-content-between">
34
+                <div class="d-flex">
35
+                    <div class="boxImgContainer">
36
+                        <img class="w-100 h-100" src="./../../assets/box.png" alt="box" />
37
+                    </div>
38
+                    <div class="ps-3">
39
+                        <div class="fw-bold">Delivery</div>
40
+                        <div>See estimated delivery times by</div>
41
+                        <div>entering your PIN code</div>
42
+                    </div>
43
+                </div>
44
+                <div class="d-flex align-items-center">
45
+                    <div class="pe-5">
46
+                        <div class="font-1_5 fw-bold">$69,999.00</div>
47
+                        <div class="d-flex align-items-center justify-content-end gap-1 priceCut_multi">
48
+                            <span class="text-decoration-line-through  pe-3">$ 89,999</span><span> Save $ 19,999</span>
49
+                        </div>
50
+                    </div>
51
+                    <div>
52
+                        <div>
53
+                            <button>Add to Cart</button>
54
+                        </div>
55
+                        <div>No Cost EMI Available <span>Learn more</span></div>
56
+                    </div>
57
+                </div>
21 58
             </div>
22 59
         </div>
23 60
 
24
-    </div>
61
+    </header>
62
+
63
+    <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
64
+</body>
25 65
 
26
-  <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
27
-  </body>
28 66
 </html>

+ 37
- 4
scss/main.scss 파일 보기

@@ -18,16 +18,49 @@ html{
18 18
 }
19 19
 
20 20
 .banner_heading_4{
21
-  font-size: 4rem;
21
+  font-size: 3rem;
22 22
 }
23 23
 
24 24
 .subtitle_1{
25
-  font-size: 1rem;
25
+  font-size: 1.5rem;
26 26
 }
27 27
 
28
-.padding_top_12{
29
-  padding-top: 12rem;
28
+.padding_top_14{
29
+  padding-top: 14rem;
30 30
 }
31 31
 
32
+.photo_dual{
33
+  width:40rem;
34
+}
35
+
36
+.price_footer{
37
+  background-color:#52cba5;
38
+}
39
+
40
+.boxImgContainer{
41
+  width: 4rem;
42
+
43
+}
44
+
45
+.vh-85{
46
+  height: 85vh;
47
+}
48
+
49
+.vh-15{
50
+  height: 15vh;
51
+}
32 52
 
53
+.font-3{
54
+  font-size: 3rem;
55
+}
56
+.font-1_5{
57
+  font-size: 2rem;
58
+}
59
+
60
+.gap-1{
61
+  font-size: 0.7rem;
62
+}
33 63
 
64
+.priceCut_multi{
65
+  font-size: .7rem;
66
+}

Loading…
취소
저장