sachin.ganesh
/
anwi_website
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

headermuli

sachinganesh 2 år sedan
förälder
d0e512196b
incheckning
eb816fc2b5
5 ändrade filer med 120 tillägg och 22 borttagningar
Delad Vy Visa Diff Statistik
  1. Binär
      dist/assets/box.png
  2. Binär
      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är
dist/assets/box.png Visa fil


Binär
dist/assets/laptop.png Visa fil


+ 31
- 4
dist/css/main.css Visa fil 

@@ -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 Visa fil 

@@ -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 Visa fil 

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

Write Förhandsgranska
Laddar…
Avbryt
Spara