Skip to content

Commit

Permalink
Merge pull request #1784 from KrishPatel1205/branch18
Browse files Browse the repository at this point in the history 
[FIXED] Feat: Make a page for Italy #1783
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 31, 2024
2 parents de4a8d5 + 11098b8 commit 0bb970d
Show file tree
Hide file tree
Showing 2 changed files with 234 additions and 1 deletion.
2 changes: 1 addition & 1 deletion book.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,7 +328,7 @@ <h3>Switzerland</h3>

<div class="location-card" style="
background-image: url('https://images.unsplash.com/photo-1520175480921-4edfa2983e0f?q=80&w=2067&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
">
" onclick="location.href='italy.html'">
<h3>Italy</h3>
<ul>
<li>Italy Most beautiful countries in the world</li>
Expand Down
233 changes: 233 additions & 0 deletions italy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Italy Travel - Hotels</title>

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./styles/popup.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link
href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<script src="https://kit.fontawesome.com/c4254e24a8.js" crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}

.main-image {
width: 100%;
height: 300px;
object-fit: cover;
background-image: url('https://images.pexels.com/photos/236516/pexels-photo-236516.jpeg');
background-position: bottom;
}

.main-heading {
font-size: 48px;
color: white;
text-align: center;
height: 500px;
padding-top: 120px;
}

.container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
width: 100vw;
}

.card-container {
display: flex;
flex-direction: row;
width: 100vw;
height: 590px;
align-items: center;
margin: auto;
margin-left: 100px;
margin-bottom: 50px;
}

h1 {
color: #2c3e50;
margin-bottom: 30px;
font-size: 5em;
}

.hotel-card {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin: 15px 40px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 450px;
height: 100%;
}

.hotel-image {
width: 100%;
max-height: 400px;
border-radius: 8px;
object-fit: cover;
height: 100%;
}

.hotel-card h2 {
color: #2980b9;
margin: 10px 0 10px;
font-size: 3rem;
}

.hotel-card p {
color: #7f8c8d;
font-size: 18px;
}

.book-button {
background-color: #2980b9;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.book-button:hover {
background-color: #1a6d99;
}
</style>
</head>
<body>
<div class="main-image">
<h1 class="main-heading">Italy</h1>
</div>
<br>
<br>
<h1>Top Hotels in Italy</h1>

<div class="container">
<div class="card-container">
<div class="hotel-card">
<img
src="https://q-xx.bstatic.com/xdata/images/hotel/max1024x768/314431331.jpg?k=5510a414e5d1531b9a75ea58b8fbfb6367a5deac8b1de1ff99762299c0626f86&o=?s=375x210&ar=16x9"
alt="Hotel Splendido, Portofino"
class="hotel-image"
/>
<h2>Hotel Splendido, Portofino</h2>
<p>Price per night: ₹45,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://www.grandhoteltremezzo.com/media/15ifu1em/grand-hotel-tremezzo-facade-ruben-ortiz-new-new.jpg?width=585&height=1012&format=webp&v=1daab84fb44bdf0"
alt="Grand Hotel Tremezzo, Lake Como"
class="hotel-image"
/>
<h2>Grand Hotel Tremezzo</h2>
<p>Price per night: ₹50,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://www.villadeste.com/wp-content/uploads/2023/02/Villa-dEste_Drone-View.jpg"
alt="Hotel Villa d'Este, Lake Como"
class="hotel-image"
/>
<h2>Hotel Villa d'Este</h2>
<p>Price per night: ₹55,990</p>
<button class="book-button">Book Now</button>
</div>
</div>

<div class="card-container">
<div class="hotel-card">
<img
src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/591472777.jpg?k=7f4a0525fac60c271a42675f3ade388689390f23f1efef78923c80756d6caa91&o=&hp=1"
alt="Hotel Principe di Savoia, Milan"
class="hotel-image"
/>
<h2>Principe di Savoia</h2>
<p>Price per night: ₹60,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://cdn.blastness.biz/media/1240/top/thumbs/full/1920-salone_feste.jpg"
alt="Grand Hotel Plaza, Rome"
class="hotel-image"
/>
<h2>Grand Hotel Plaza, Rome</h2>
<p>Price per night: ₹65,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://img.belmond.com/f_auto/t_2580x1299/photos/cip/cip-ext-aerial02.jpg"
alt="Hotel Cipriani, Venice"
class="hotel-image"
/>
<h2>Hotel Cipriani, Venice</h2>
<p>Price per night: ₹70,990</p>
<button class="book-button">Book Now</button>
</div>
</div>
<div class="card-container">
<div class="hotel-card">
<img
src="https://www.roccofortehotels.com/media/rp1hu5y5/rfh-villa-igiea-9437-jg-sep-19.jpg"
alt="Hotel Villa Igiea, Palermo"
class="hotel-image"
/>
<h2>Hotel Villa Igiea, Palermo</h2>
<p>Price per night: ₹75,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/465555986.jpg?k=127dd0ee98567210c68124e376bcc6f9b4efc032b9d8fed28e100e18e9e3a7d7&o=&hp=1"
alt="Grand Hotel Excelsior, Florence"
class="hotel-image"
/>
<h2>Grand Hotel Excelsior</h2>
<p>Price per night: ₹80,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://tyfzvhiz.cdn.imgeng.in/assets/uploads/room-103-ghdm-231041-h-rev.jpg"
alt="Hotel Grand Hotel et de Milan, Milan"
class="hotel-image"
/>
<h2>Grand Hotel et de Milan</h2>
<p>Price per night: ₹85,990</p>
<button class="book-button">Book Now</button>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 0bb970d

Please sign in to comment.