Skip to content

Commit f9e80fa

Browse files
hiitarun1hiitarun1
committed
Improved Ui for popular destination section
1 parent c6ad885 commit f9e80fa

File tree

1 file changed

+86
-5
lines changed

1 file changed

+86
-5
lines changed

‎booking.html‎

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="icon" href="NeoRide.jpeg" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@400..800&family=Bungee+Spice&family=Emblema+One&family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
710
<title>NeoRide</title>
811
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
912

@@ -88,8 +91,8 @@
8891

8992

9093
/* Popular destinations */
91-
.popular-destinations{margin:3rem auto;padding:0 5%;max-width:1200px;}
92-
.popular-destinations h2{text-align:center;font-size:2rem;color:var(--primary-color);margin-bottom:1.5rem;}
94+
.popular-destinations{margin:6rem auto;padding:0 5%;max-width:1200px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;height: 50vh;}
95+
.popular-destinations h2{text-align:center;font-size:2rem;color:var(--primary-color);margin-bottom:1.5rem;font-family: kanit; padding-top: 2rem;}
9396
.destination-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;}
9497
.destination-card{background:#fff;border-radius:10px;padding:1.5rem;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,.05);cursor:pointer;transition:.3s}
9598
.destination-card:hover{transform:translateY(-5px)}
@@ -132,6 +135,72 @@
132135
/* 1-column Popular Destinations */
133136
.destination-grid{grid-template-columns:1fr;}
134137
}
138+
.destination-card {
139+
width: 300px;
140+
height: 200px;
141+
position: relative;
142+
overflow: hidden;
143+
border-radius: 20px;
144+
background: #222020;
145+
color: #ffffff;
146+
padding: 20px;
147+
text-align: center;
148+
cursor: pointer;
149+
display: flex;
150+
flex-direction: column;
151+
justify-content: center;
152+
align-items: center;
153+
154+
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,
155+
rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;
156+
}
157+
158+
.popular-destinations{
159+
background-color: #ffffff;
160+
161+
162+
}
163+
.destination-card::before {
164+
content: "";
165+
position: absolute;
166+
inset: 0;
167+
padding: 3px;
168+
border-radius: 20px;
169+
background: linear-gradient(90deg, #FF0080, #FF8C00, #40E0D0, #FF0080);
170+
background-size: 300% 300%;
171+
172+
-webkit-mask:
173+
linear-gradient(#000 0 0) content-box,
174+
linear-gradient(#000 0 0);
175+
-webkit-mask-composite: xor;
176+
mask-composite: exclude;
177+
178+
animation: glowing 5s linear infinite;
179+
}
180+
181+
@keyframes glowing {
182+
0% { background-position: 0% 50%; }
183+
50% { background-position: 100% 50%; }
184+
100% { background-position: 0% 50%; }
185+
}
186+
187+
.destination-card img {
188+
margin-bottom: 15px;
189+
}
190+
191+
.destination-card h3 {
192+
font-size: 1.8rem;
193+
margin-bottom: 10px;
194+
color: white;
195+
}
196+
197+
.destination-card p {
198+
font-size: 1.2rem;
199+
opacity: 0.8;
200+
color: rgb(255, 252, 252);
201+
font-size: 14px;
202+
}
203+
135204
</style>
136205
</head>
137206
<body>
@@ -173,9 +242,21 @@
173242
<section class="popular-destinations">
174243
<h2>Popular Destinations</h2>
175244
<div class="destination-grid">
176-
<div class="destination-card"><h3>Airport</h3><p>Get to the airport on time</p></div>
177-
<div class="destination-card"><h3>Train Station</h3><p>Connect with your train journey</p></div>
178-
<div class="destination-card"><h3>Downtown</h3><p>Explore the city center</p></div>
245+
<div class="destination-card">
246+
<img src="images/airplane.png" height="60px">
247+
<h3>Airport</h3>
248+
<p>Get to the airport on time</p>
249+
</div>
250+
<div class="destination-card">
251+
<img src="images/entrance.png" height="60px">
252+
<h3>Train Station</h3>
253+
<p>Connect with your train journey</p>
254+
</div>
255+
<div class="destination-card">
256+
<img src="images/apartment.png" height="60px">
257+
<h3>Downtown</h3>
258+
<p>Explore the city center</p>
259+
</div>
179260
</div>
180261
</section>
181262

0 commit comments

Comments
 (0)