Skip to content

Commit 896fa1d

Browse files
gaddevinaygaddevinay
committed
Fixed UI
1 parent ca0f788 commit 896fa1d

File tree

3 files changed

+174
-43
lines changed

3 files changed

+174
-43
lines changed

‎.vscode/settings.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"liveServer.settings.port": 5505
2+
"liveServer.settings.port": 5505,
3+
"liveServer.settings.useLocalIp": false
34
}

‎index.html

+130-23
Original file line numberDiff line numberDiff line change
@@ -95,18 +95,18 @@
9595

9696
<nav class="nav_menu2">
9797
<ul class="nav_link2">
98-
<li><a href="index.html">Home</a></li>
99-
<li><a href="#">Services</a></li>
100-
<li><a href="#about">About us</a></li>
101-
<li><a href="#contact">Contact us</a></li>
102-
<li><a href="./login/index.html"><button>Login</button></a></li>
98+
<li><a href="#home">Home</a></li>
99+
<li><a href="#service">Services</a></li>
100+
<li><a href="./Pages/About Page/about.html">About us</a></li>
101+
<li><a href="./Pages/contact/contact.html">Contact us</a></li>
102+
<li><a href="./Pages/login/login.html"><button>Login</button></a></li>
103103
</ul>
104104
</nav>
105105

106106
<!-- Header Section end -->
107107

108108
<!-- landing page -->
109-
<div class="container">
109+
<div class="container" id="home">
110110
<div class="content">
111111
<h1>
112112
Don't leave home <br />without
@@ -115,7 +115,7 @@ <h1>
115115
<h4>
116116
Say goodbye to the stress and hassle of shopping, and hello to the
117117
convenience and excitement of VigyBag. Get ready to shop smarter, not
118-
harder - <a href="#">Download VigyBag</a>
118+
harder &minus;<a href="#">Download&nbsp;VigyBag</a>
119119
</h4>
120120

121121
<!-- Search bar -->
@@ -146,7 +146,7 @@ <h4>
146146
<!-- product-1 -->
147147

148148
<div class="Accessories-box">
149-
<div>
149+
<div class="box-center">
150150
<div class="rectangle-42">
151151
<img src="img/Suit.webp" alt="" />
152152
</div>
@@ -155,44 +155,38 @@ <h4>
155155
<a href="#">Fashion & Accessories</a>
156156
</div>
157157
</div>
158-
<div>
159-
<!-- product-2 -->
160-
<div class="Accessories-box">
161-
<div>
158+
<!-- product-2 -->
159+
<div class="Accessories-box">
160+
<div class="box-center">
162161
<div class="rectangle-42">
163162
<img src="img/Stationery.webp" alt="" />
164163
</div>
165164
</div>
166165
<div class="product-name">
167166
<a href=""> Printing & Stationaries</a>
168167
</div>
169-
</div>
170168
</div>
171-
<div>
172-
<!-- product-3 -->
173-
<div class="Accessories-box">
174-
<div>
169+
<!-- product-3 -->
170+
<div class="Accessories-box">
171+
<div class="box-center">
175172
<div class="rectangle-42">
176173
<img src="img/Food Bar.webp" alt="" />
177174
</div>
178175
</div>
179176
<div class="product-name">
180177
<a href=""> Food & Beverages</a>
181178
</div>
182-
</div>
183179
</div>
184-
<div>
185-
<!-- product-4 -->
186-
<div class="Accessories-box">
187-
<div>
180+
<!-- product-4 -->
181+
<div class="Accessories-box">
182+
<div class="box-center">
188183
<div class="rectangle-42">
189184
<img src="img/Aroma.webp" alt="" />
190185
</div>
191186
</div>
192187
<div class="product-name">
193188
<a href=""> Beauty & Wellness</a>
194189
</div>
195-
</div>
196190
</div>
197191
</div>
198192

@@ -1082,6 +1076,119 @@ <h3>&#8377;349</h3>
10821076
</div>
10831077
</div>
10841078
</div>
1079+
<div class="item-card">
1080+
<div class="item-image" onclick="ebBtn()">
1081+
<img src="./img/iphone.webp" alt="" />
1082+
<button class="wishlist-icon" data-item-id="item22" onclick="changeColor(event, 'item22')">
1083+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
1084+
stroke="currentColor" class="w-6 h-6">
1085+
<path stroke-linecap="round" stroke-linejoin="round"
1086+
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
1087+
</svg>
1088+
</button>
1089+
</div>
1090+
<div class="item-description-2">
1091+
<div>
1092+
<div class="item-heading"><a href="">Iphone 11</a></div>
1093+
<p>cotton printed smooth shirt with multiple colors</p>
1094+
<div class="items-star">
1095+
<img src="img/Star_white.webp" alt="" />
1096+
<img src="img/Star_white.webp" alt="" />
1097+
<img src="img/Star_white.webp" alt="" />
1098+
<img src="img/Star_green.webp" alt="" />
1099+
<img src="img/Star_green.webp" alt="" />
1100+
<div>(36)</div>
1101+
</div>
1102+
1103+
<button class="add-to-card-button js-cd-add-to-cart">
1104+
Add to cart
1105+
<lord-icon
1106+
src="https://cdn.lordicon.com/pbrgppbb.json"
1107+
trigger="hover"
1108+
style="width:20px;height:20px">
1109+
</lord-icon>
1110+
</button>
1111+
</div>
1112+
<div class="item-heading">
1113+
<h3>&#8377;349</h3>
1114+
</div>
1115+
</div>
1116+
</div>
1117+
<div class="item-card">
1118+
<div class="item-image" onclick="ebBtn()">
1119+
<img src="./img/iphone.webp" alt="" />
1120+
<button class="wishlist-icon" data-item-id="item22" onclick="changeColor(event, 'item22')">
1121+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
1122+
stroke="currentColor" class="w-6 h-6">
1123+
<path stroke-linecap="round" stroke-linejoin="round"
1124+
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
1125+
</svg>
1126+
</button>
1127+
</div>
1128+
<div class="item-description-2">
1129+
<div>
1130+
<div class="item-heading"><a href="">Iphone 11</a></div>
1131+
<p>cotton printed smooth shirt with multiple colors</p>
1132+
<div class="items-star">
1133+
<img src="img/Star_white.webp" alt="" />
1134+
<img src="img/Star_white.webp" alt="" />
1135+
<img src="img/Star_white.webp" alt="" />
1136+
<img src="img/Star_green.webp" alt="" />
1137+
<img src="img/Star_green.webp" alt="" />
1138+
<div>(36)</div>
1139+
</div>
1140+
1141+
<button class="add-to-card-button js-cd-add-to-cart">
1142+
Add to cart
1143+
<lord-icon
1144+
src="https://cdn.lordicon.com/pbrgppbb.json"
1145+
trigger="hover"
1146+
style="width:20px;height:20px">
1147+
</lord-icon>
1148+
</button>
1149+
</div>
1150+
<div class="item-heading">
1151+
<h3>&#8377;349</h3>
1152+
</div>
1153+
</div>
1154+
</div><div class="item-card">
1155+
<div class="item-image" onclick="ebBtn()">
1156+
<img src="./img/iphone.webp" alt="" />
1157+
<button class="wishlist-icon" data-item-id="item22" onclick="changeColor(event, 'item22')">
1158+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
1159+
stroke="currentColor" class="w-6 h-6">
1160+
<path stroke-linecap="round" stroke-linejoin="round"
1161+
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
1162+
</svg>
1163+
</button>
1164+
</div>
1165+
<div class="item-description-2">
1166+
<div>
1167+
<div class="item-heading"><a href="">Iphone 11</a></div>
1168+
<p>cotton printed smooth shirt with multiple colors</p>
1169+
<div class="items-star">
1170+
<img src="img/Star_white.webp" alt="" />
1171+
<img src="img/Star_white.webp" alt="" />
1172+
<img src="img/Star_white.webp" alt="" />
1173+
<img src="img/Star_green.webp" alt="" />
1174+
<img src="img/Star_green.webp" alt="" />
1175+
<div>(36)</div>
1176+
</div>
1177+
1178+
<button class="add-to-card-button js-cd-add-to-cart">
1179+
Add to cart
1180+
<lord-icon
1181+
src="https://cdn.lordicon.com/pbrgppbb.json"
1182+
trigger="hover"
1183+
style="width:20px;height:20px">
1184+
</lord-icon>
1185+
</button>
1186+
</div>
1187+
<div class="item-heading">
1188+
<h3>&#8377;349</h3>
1189+
</div>
1190+
</div>
1191+
</div>
10851192
<div class="item-card">
10861193
<div class="item-image" onclick="ebBtn()">
10871194
<img src="./img/iphone.webp" alt="" />

‎style/style.css

+42-19
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,10 @@ button {
118118

119119
.nav_menu2.show {
120120
display: block;
121+
position: fixed;
122+
width: -webkit-fill-available;
123+
top: 60px;
124+
z-index: 100;
121125
}
122126

123127
.burger-icon {
@@ -392,25 +396,30 @@ body.dark {
392396

393397
background-color: #d9d9d9;
394398
display: flex;
395-
justify-content: center;
399+
justify-content: space-around;
396400
align-items: center;
397401
}
398402

399403
.Accessories-box {
400404
border-radius: 14px;
401-
width: 130px;
405+
/*width: 130px;
402406
height: 220px;
403-
margin: 2em 5em 0 5em;
407+
margin: 2em 5em 0 5em;*/
408+
padding: 30px 0;
404409
align-items: center;
405410
}
406-
411+
.box-center{
412+
display: flex;
413+
justify-content: center;
414+
}
407415
.rectangle-42 {
408416
box-sizing: border-box;
409417
height: 108px;
410418
background: #d9d9d9;
411419
border: 3px solid #161b6e;
412420
border-radius: 25px;
413421
display: flex;
422+
width: fit-content;
414423
justify-content: center;
415424
align-items: center;
416425
cursor: pointer;
@@ -447,7 +456,14 @@ body.dark {
447456
line-height: 29px;
448457
text-align: center;
449458
}
450-
459+
@media(max-width:420px){
460+
.rectangle-42 img{
461+
width: 70px;
462+
}
463+
.rectangle-42{
464+
height: auto;
465+
}
466+
}
451467
/* app section */
452468

453469
.app-container {
@@ -598,8 +614,8 @@ body.dark {
598614

599615
.item-cards-div {
600616
display: flex;
601-
justify-content: center;
602-
margin: auto 2.5rem;
617+
/*justify-content: center;*/
618+
margin: auto ;
603619
width: 95%;
604620
overflow: hidden;
605621
}
@@ -638,7 +654,8 @@ body.dark {
638654
.item-card {
639655
padding: 1rem;
640656
/* margin-left: 3em; */
641-
min-width: 260px;
657+
/*min-width: 260px;*/
658+
min-width: 200px;
642659
/* height: 423px; */
643660
border-radius: 15px;
644661
/* box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02); */
@@ -656,7 +673,8 @@ body.dark {
656673
}
657674

658675
.item-image {
659-
height: 230px;
676+
/*height: 230px;*/
677+
height: 190px;
660678
background-color: #d9d9d9;
661679
padding: 20px;
662680
display: flex;
@@ -675,12 +693,14 @@ body.dark {
675693
}
676694

677695
/* Media queries for small devices */
678-
@media screen and (max-width: 767px) {
696+
@media screen and (max-width: 1070px){
679697
.container {
680698
flex-direction: column;
681699
align-items: center;
682-
padding-top: 20px;
700+
text-align: center;
683701
}
702+
}
703+
@media screen and (max-width: 767px) {
684704

685705
.container img {
686706
width: 100%;
@@ -716,20 +736,20 @@ body.dark {
716736
}
717737

718738
.Accessories-box {
719-
width: 100%;
739+
/* width: 100%;*/
720740
margin: 20px 0;
721741
}
722742

723-
.rectangle-42 {
743+
/*.rectangle-42 {
724744
height: 150px;
725-
}
745+
}*/
726746

727747
.product-name {
728748
font-size: 18px;
729749
}
730750

731751
.container .sec-img {
732-
max-width: 1000px;
752+
max-width: 400px;
733753
}
734754
}
735755

@@ -751,7 +771,7 @@ body.dark {
751771
}
752772

753773
.container .sec-img {
754-
max-width: 1000px;
774+
max-width: 600px;
755775
}
756776

757777
}
@@ -776,7 +796,7 @@ body.dark {
776796
}
777797

778798
.container .sec-img {
779-
max-width: 1000px;
799+
max-width: 400px;
780800
}
781801
}
782802

@@ -1281,8 +1301,8 @@ div.c a {
12811301
.row {
12821302
display: flex;
12831303
margin-bottom: 5vh;
1284-
padding-left: 0.5rem;
1285-
padding-right: 0.5rem;
1304+
/*padding-left: 0.5rem;
1305+
padding-right: 0.5rem;*/
12861306
font-family: 'DM Sans', 'Helvetica Neue';
12871307
font-family: 'Poppins';
12881308
}
@@ -1302,6 +1322,9 @@ div.c a {
13021322
display: flex;
13031323
flex-direction: column;
13041324
}
1325+
.testimonials .row{
1326+
align-items: center;
1327+
}
13051328
}
13061329

13071330
.service {

0 commit comments

Comments
 (0)