Parcourir la source

Home and shopping cart pages

ananthvijay il y a 2 ans
Parent
révision
6c21a9aeab

+ 9
- 2
dist/html/pages/index.html Voir le fichier

@@ -31,17 +31,24 @@
31 31
                             <h5 class="mb-4">AIO24 - 1700N</h5>
32 32
                             <h1 class="banner_heading_4 mb-4">All-in-One</h1>
33 33
                             <h6 class="subtitle_1 mb-4">Extraordinary Performance and Unparalleled Flexibility</h6>
34
-                            <a class="btn btn-dark button_dark" href="#">Learn
34
+                            <a class="btn btn-dark button_dark" href="#">Know
35 35
                                     More</a>
36 36
                         </div>
37
+                        <div class="col-md-12 d-block d-sm-none">
38
+                            <img src="../../assets/imgs/Home/all-in-one-mobile.png" class="img-fluid" alt="mobile-all-in-one">
39
+                        </div>
37 40
                     </div>
38 41
                 </section>
39 42
                 <section class="offer-main-sec py-2 mb-3">
40 43
                     <div class="offer-sec bg-white shadow rounded ms-auto
41 44
                             col-md-4">
42
-                        <p class="py-3 text-center satoshi_font">Flat <span class="fw-bold"> 4,500</span> Instant Discount with HDFC credit card</p>
45
+                        <p class="py-3 text-center satoshi_font">Flat <span class="fw-bold"> 4,500</span> Instant Discount with HDFC Credit Card</p>
43 46
                     </div>
44 47
                 </section>
48
+                <div class="col-5 d-block d-sm-none">
49
+                    <a class="btn btn-dark button_dark mb-4" href="#">Know
50
+                        More</a>
51
+                    </div>
45 52
             </div>
46 53
         </section>
47 54
         <!-- end-banner -->

+ 10
- 11
dist/html/pages/shopping-cart.html Voir le fichier

@@ -45,10 +45,10 @@
45 45
             <div class="container pt-4">
46 46
                 <div class="row align-items-center bg-white rounded d-none d-sm-flex shopping-cart-details-row-1 ">
47 47
                     <div class="col-md-2">
48
-                        <h6>All</h6>
48
+                        <h6 class="text-center">All</h6>
49 49
                     </div>
50 50
                     <div class="col-md-4">
51
-                        <h6>Product Name</h6>
51
+                        <h6 class="text-center">Product Name</h6>
52 52
                     </div>
53 53
                     <div class="col-md-2">
54 54
                         <h6>Price</h6>
@@ -111,12 +111,12 @@
111 111
                         </div>
112 112
                     </div>
113 113
                 </div>
114
-                <div class="row bg-white rounded  d-block d-sm-none ">
114
+                <div class="bg-white rounded  d-block d-sm-none ">
115 115
                     <div class="card mb-3" style="max-width: 540px;">
116
+                        <div class="mx-auto mobile-cart-img">
117
+                            <img src="../../assets/imgs/Home/Shopping-cart-item-img.png" alt="shopping-cart-item-img" class="img-fluid">
118
+                        </div>
116 119
                         <div class="d-flex align-items-center g-0">
117
-                            <div class="col-md-4">
118
-                                <img src="../../assets/imgs/Home/Shopping-cart-item-img.png" alt="shopping-cart-item-img" class="img-fluid">
119
-                            </div>
120 120
                             <div class="col-md-8">
121 121
                                 <div class="card-body">
122 122
                                     <p class="mb-0"> Mi NoteBook Pro Lustrous Gray i5 11th Gen + Iris Xe Graphics 16GB RAM + 512GB NVMe SSD.</p>
@@ -164,8 +164,8 @@
164 164
                     </div>
165 165
                 </div>
166 166
             </div>
167
-            <div class="alert-display-sec position-fixed w-100 bottom-0">
168
-                <div class="alert alert-white bg-white border
167
+            <div class="alert-display-sec position-fixed w-100 bottom-0 ">
168
+                <div class="alert alert-white border
169 169
                                 border-end-0 border-start-0 mb-0 rounded-0
170 170
                                 alert-dismissible fade show" role="alert">
171 171
                     <div class="container">
@@ -182,8 +182,7 @@
182 182
                                     <h2 class="fw-bold"><svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
183 183
                                         <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z"/>
184 184
                                       </svg> 54,999.00</h01>
185
-                                        <a class="btn btn-dark
186
-                                                        button_dark" href="#">Check
185
+                                        <a class="btn btn-dark button_dark" href="#">Check
187 186
                                             Out</a>
188 187
                                 </div>
189 188
                             </div>
@@ -304,7 +303,7 @@
304 303
             </div>
305 304
             <div class=" delivery-to-sec sec-space-3 d-none d-sm-block">
306 305
                 <div class=" container ">
307
-                    <div class=" col-md-5 ">
306
+                    <div class="col-md-7 col-lg-5">
308 307
                         <div class=" d-flex align-items-center justify-content-around ">
309 308
                             <div class=" px-0 ">
310 309
                                 <h6>Delivery to

+ 19
- 2
styles/pages/_home.scss Voir le fichier

@@ -128,17 +128,25 @@
128 128
             margin-top: 40px;
129 129
         }
130 130
         .banner-main-container {
131
-            height: 275px;
131
+ 
132 132
             text-align: center;
133 133
             .col-md-6 {
134 134
                 margin-top: 0px;
135
+                .button_dark{
136
+                    display: none;
137
+                }
135 138
             }
136 139
             h1 {
137 140
                 font-size: 2rem;
138 141
             }
139 142
         }
140 143
         .hero-banner {
141
-            background: #cccccc;
144
+            // background: url(../../dist/assets/imgs/Home/All-in-one.png);
145
+            // background-size: cover;
146
+            background-position: 0;
147
+        }
148
+        .aw-main-features{
149
+            display: none;
142 150
         }
143 151
         .mobile-text-center {
144 152
             text-align: center;
@@ -186,6 +194,15 @@
186 194
                 padding: 0 !important;
187 195
             }
188 196
         }
197
+        .offer-main-sec{
198
+            margin-bottom: 0 !important;
199
+            padding: 0 !important;
200
+        }
201
+        .offer-sec{
202
+            p{
203
+                font-size: 0.85rem;
204
+            }
205
+        }
189 206
     }
190 207
     .footer-wrapper {
191 208
         .accordion-button,

+ 9
- 1
styles/pages/_shopping-cart.scss Voir le fichier

@@ -16,9 +16,14 @@
16 16
     }
17 17
     .alert-display-sec {
18 18
         z-index: 1;
19
+        .alert-dismissible{
20
+       background:rgb(255 255 255 / 66%)
21
+        }
19 22
     }
20 23
 }
21
-
24
+.warrenty-sec img{
25
+    width: 40px;
26
+}
22 27
 #footer-head {
23 28
     .footer-wrapper.sec-space-1 {
24 29
         margin-top: 0;
@@ -42,4 +47,7 @@
42 47
             padding: 10px;
43 48
         }
44 49
     }
50
+    .mobile-cart-img img{
51
+        width: 200px;
52
+    }
45 53
 }

Chargement…
Annuler
Enregistrer