Skip to content

Commit

Permalink
Merge pull request #1781 from KrishPatel1205/branch17
Browse files Browse the repository at this point in the history 
[FIXED] Feat: Make a page for Switzerland #1780
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 31, 2024
2 parents c210aac + 09c1d0e commit 812a8ed
Show file tree
Hide file tree
Showing 2 changed files with 235 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 @@ -333,7 +333,7 @@ <h3>Bali</h3>

<div class="location-card" style="
background-image: url('https://images.unsplash.com/photo-1547131303-543b40443e96?q=80&w=1797&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
">
" onclick="location.href='switzerland.html'">
<h3>Switzerland</h3>
<ul>
<li>Adventure Switzerland</li>
Expand Down
234 changes: 234 additions & 0 deletions switzerland.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Switzerland 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/2026454/pexels-photo-2026454.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
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">Switzerland</h1>
</div>
<br>
<br>
<h1>Top Hotels in Switzerland</h1>

<div class="container">
<div class="card-container">
<div class="hotel-card">
<img
src="https://static-new.lhw.com/HotelImages/Final/LW1626/lw1626_181060942_720x450.jpg"
alt="Baur au Lac, Zurich"
class="hotel-image"
/>
<h2>Baur au Lac, Zurich</h2>
<p>Price per night: ₹60,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://www.thedoldergrand.com/app/uploads/2020/09/HIBR_D_00198588_send-scaled.jpg"
alt="The Dolder Grand, Zurich"
class="hotel-image"
/>
<h2>The Dolder Grand, Zurich</h2>
<p>Price per night: ₹65,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://www.lestroisrois.com/imagegen/960/media/465404/grand-hotel-les-trois-rois.jpg"
alt="Grand Hotel Les Trois Rois, Basel"
class="hotel-image"
/>
<h2>Grand Hotel Les Trois Rois</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://cf.bstatic.com/xdata/images/hotel/max1024x768/352145450.jpg?k=fb0cf508198189d5b5668033541c5ca979319568ddac2876d52059aaf2f2d600&o=&hp=1"
alt="Hotel Eden Roc, Ascona"
class="hotel-image"
/>
<h2>Hotel Eden Roc, Ascona</h2>
<p>Price per night: ₹75,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://www.zermatterhof.ch/wp-content/uploads/2022/02/hotel-with-plaza.jpg.webp"
alt="Grand Hotel Zermatterhof, Zermatt"
class="hotel-image"
/>
<h2>Grand Hotel Zermatterhof</h2>
<p>Price per night: ₹80,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/28531625.jpg?k=bf8603c957cf1f74594c14915de413a68db92b4508f7a52fe73d73f49a698195&o=&hp=1"
alt="The Omnia, Zermatt"
class="hotel-image"
/>
<h2>The Omnia, Zermatt</h2>
<p>Price per night: ₹85,990</p>
<button class="book-button">Book Now</button>
</div>
</div>
<div class="card-container">
<div class="hotel-card">
<img
src="https://static.prod.r53.tablethotels.com/media/hotels/slideshow_images_staged/large/1183264.jpg"
alt="Hotel Villa Honegg, Interlaken"
class="hotel-image"
/>
<h2>Hotel Villa Honegg</h2>
<p>Price per night: ₹55,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://www.victoria-jungfrau.ch/wp-content/uploads/2021/06/vj_aussen_sommer_03-2.jpg"
alt="Grand Hotel Victoria-Jungfrau, Interlaken"
class="hotel-image"
/>
<h2>Hotel Victoria-Jungfrau</h2>
<p>Price per night: ₹60,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/67238818.jpg?k=1367e3860e357fdd67776c5e7cbbdcfcda79dc9428f065bf67b8d1510a700b83&o=&hp=1"
alt="Hotel Suisse, Geneva"
class="hotel-image"
/>
<h2>Hotel Suisse, Geneva</h2>
<p>Price per night: ₹65,990</p>
<button class="book-button">Book Now</button>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 812a8ed

Please sign in to comment.