Pārlūkot izejas kodu

css for home and shopping cart pages

ananthvijay 2 gadus atpakaļ
vecāks
revīzija
c9b12f29ed
2 mainītis faili ar 247 papildinājumiem un 0 dzēšanām
  1. 202
    0
      styles/pages/_home.scss
  2. 45
    0
      styles/pages/_shopping-cart.scss

+ 202
- 0
styles/pages/_home.scss Parādīt failu

@@ -0,0 +1,202 @@
1
+/* home page */
2
+
3
+.button_dark.btn-dark {
4
+    background-color: #000000 !important;
5
+    font-family: "Satoshi", sans-serif;
6
+}
7
+
8
+.button_dark.btn-dark:hover {
9
+    background-color: #000000 !important;
10
+    font-family: "Satoshi", sans-serif;
11
+    opacity: 1 !important;
12
+}
13
+
14
+.home-main-container #navbar-head {
15
+    .navbar-nav .nav-item .nav-link {
16
+        color: #000000;
17
+        font-family: "Satoshi", sans-serif;
18
+    }
19
+}
20
+
21
+.hero-banner {
22
+    background-image: url(../../dist/assets/imgs/Home/banner.png);
23
+    // background-color: #cccccc;
24
+    background-size: cover;
25
+    background-repeat: no-repeat;
26
+    background-position: center center;
27
+    background-position-y: -100px;
28
+    // home-banner
29
+    .banner-main-container {
30
+        height: 475px;
31
+    }
32
+}
33
+
34
+.home-main-container .offer-main-sec {
35
+    .offer-sec {
36
+        margin-top: -35px;
37
+    }
38
+}
39
+
40
+.home-main-container .aw-feature-name {
41
+    h5 {
42
+        transform: rotate(180deg);
43
+        transform-origin: center center 0;
44
+        writing-mode: vertical-rl;
45
+    }
46
+}
47
+
48
+.home-main-container .out-of-world .card {
49
+    background-color: #0FA5C5;
50
+}
51
+
52
+.home-main-container .aw-support-sec {
53
+    .aw-support-sec-main-container {
54
+        background-color: #F2F9FB;
55
+    }
56
+    .news-letter-sec .news-letter-email:focus {
57
+        border-bottom: 1px solid white;
58
+        outline: none;
59
+    }
60
+    .news-letter-sec .news-letter-email::placeholder {
61
+        color: white;
62
+    }
63
+}
64
+
65
+.home-main-container .owl-carousel.star-products-img-sec .owl-dots {
66
+    text-align: left;
67
+    .owl-dot span {
68
+        height: 3px;
69
+        width: 25px;
70
+    }
71
+    .owl-dot.active {
72
+        color: #000000;
73
+    }
74
+}
75
+
76
+.home-main-container .owl-carousel.star-products-img-sec .owl-nav {
77
+    text-align: right;
78
+    margin-right: 5rem;
79
+}
80
+
81
+@media (min-width:1900px) {
82
+    .hero-banner {
83
+        background-size: 100% 100%;
84
+    }
85
+    .products-main-container .col-md-6 {
86
+        text-align: center !important;
87
+        .product-heading span {
88
+            text-align: center !important;
89
+            margin: auto !important;
90
+        }
91
+    }
92
+}
93
+
94
+@media (min-width:769px) and (max-width:1024px) {
95
+    .home-main-container {
96
+        .aw-partners.sec-space-1 {
97
+            margin-top: 0px;
98
+        }
99
+        .aw-partners .sec-space-3 {
100
+            margin-right: 60px;
101
+        }
102
+        .offer-main-sec {
103
+            .offer-sec {
104
+                margin-top: -30%;
105
+            }
106
+        }
107
+        .news-letter-sec {
108
+            .card-body.px-5 {
109
+                padding: 20px !important;
110
+            }
111
+        }
112
+        .news-letter-sec {
113
+            a.button_dark {
114
+                padding: 10px 5px;
115
+            }
116
+        }
117
+    }
118
+}
119
+
120
+@media (min-width:298px) and (max-width:768px) {
121
+    .home-main-container {
122
+        h5,
123
+        h6 {
124
+            font-size: 1rem;
125
+        }
126
+        .sec-space-1,
127
+        .sec-space-2 {
128
+            margin-top: 40px;
129
+        }
130
+        .banner-main-container {
131
+            height: 275px;
132
+            text-align: center;
133
+            .col-md-6 {
134
+                margin-top: 0px;
135
+            }
136
+            h1 {
137
+                font-size: 2rem;
138
+            }
139
+        }
140
+        .hero-banner {
141
+            background: #cccccc;
142
+        }
143
+        .mobile-text-center {
144
+            text-align: center;
145
+        }
146
+        // .aw-partners img {
147
+        //     width: 150px;
148
+        //     height: 50px;
149
+        // }
150
+        // .aw-partners .windows-icon-mb img {
151
+        //     width: 60px;
152
+        //     height: 50px;
153
+        // }
154
+        .aw-feature-name h5 {
155
+            transform: rotate(0deg);
156
+            writing-mode: horizontal-tb;
157
+        }
158
+        .products-main-container {
159
+            .enterprise-prd {
160
+                margin-top: 10px;
161
+            }
162
+        }
163
+        .news-letter-sec {
164
+            a.button_dark {
165
+                padding: 10px 5px;
166
+            }
167
+        }
168
+        .owl-carousel.star-products-img-sec .owl-nav {
169
+            text-align: center;
170
+            margin-right: 0px;
171
+        }
172
+        .star-products {
173
+            .owl-dots {
174
+                display: none;
175
+            }
176
+        }
177
+        .aw-support-sec-main-container {
178
+            .row {
179
+                margin: 0px !important;
180
+                text-align: center;
181
+            }
182
+            .col-md-4 {
183
+                border: none !important;
184
+            }
185
+            .support-sec-heading {
186
+                padding: 0 !important;
187
+            }
188
+        }
189
+    }
190
+    .footer-wrapper {
191
+        .accordion-button,
192
+        .accordion-body {
193
+            font-family: "Satoshi", sans-serif;
194
+            color: white;
195
+            background-color: #000000;
196
+        }
197
+        .accordion-button:not(.collapsed)::after,
198
+        .accordion-button.collapsed::after {
199
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
200
+        }
201
+    }
202
+}

+ 45
- 0
styles/pages/_shopping-cart.scss Parādīt failu

@@ -0,0 +1,45 @@
1
+// shopping-cart
2
+.shopping-cart-main-container {
3
+    * {
4
+        font-family: "Satoshi", sans-serif;
5
+    }
6
+    h6 {
7
+        padding: 10px;
8
+        margin-bottom: 0;
9
+    }
10
+    background-color: #F5FFEA;
11
+    padding-bottom: 50px;
12
+    .cart-sec-highlighter {
13
+        .text-muted {
14
+            color: #C5C5C5 !important;
15
+        }
16
+    }
17
+    .alert-display-sec {
18
+        z-index: 1;
19
+    }
20
+}
21
+
22
+#footer-head {
23
+    .footer-wrapper.sec-space-1 {
24
+        margin-top: 0;
25
+    }
26
+}
27
+
28
+@media (max-width:1300px) {
29
+    .cart-sec-highlighter h5 {
30
+        font-size: 0.8rem;
31
+    }
32
+}
33
+
34
+@media (max-width:768px) {
35
+    .cart-sec-highlighter,
36
+    .shopping-cart-details-row-1 {
37
+        display: none !important;
38
+    }
39
+    .buy-together-sec {
40
+        text-align: center;
41
+        .row {
42
+            padding: 10px;
43
+        }
44
+    }
45
+}

Notiek ielāde…
Atcelt
Saglabāt