Skip to content

Commit

Permalink
Merge pull request #1793 from KrishPatel1205/branch19
Browse files Browse the repository at this point in the history 
[FIXED] Feat: Make a page for Greece #1791
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 31, 2024
2 parents 4f1c740 + 0a8f49e commit e8494a5
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 @@ -361,7 +361,7 @@ <h3>Italy</h3>

<div class="location-card" style="
background-image: url('https://plus.unsplash.com/premium_photo-1661963145672-a2bd28eba0fb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
">
" onclick="location.href='greece.html'">
<h3>Greece</h3>
<ul>
<li>Greece has the longest coastline in Europe</li>
Expand Down
234 changes: 234 additions & 0 deletions greece.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>Greece 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/28432038/pexels-photo-28432038/free-photo-of-stunning-sunset-view-of-fira-santorini.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">Greece</h1>
</div>
<br>
<br>
<h1>Top Hotels in Greece</h1>

<div class="container">
<div class="card-container">
<div class="hotel-card">
<img
src="https://static.prod.r53.tablethotels.com/media/hotels/slideshow_images_staged/large/1078674.jpg"
alt="Daios Cove Luxury Resort, Crete"
class="hotel-image"
/>
<h2>Daios Cove Luxury Resort</h2>
<p>Price per night: ₹65,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://www.minosbeach.com/wp-content/uploads/2021/03/MinosBeacharthotel__Aerial-scaled.jpg"
alt="Minos Beach Art Hotel, Agios Nikolaos, Crete"
class="hotel-image"
/>
<h2>Minos Beach Art Hotel</h2>
<p>Price per night: ₹70,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://ikosresorts.com/wp-content/uploads/2022/09/Halkidiki_Port-Glarokavos_2880x1920-1-scaled.jpg"
alt="Ikos Olia, Halkidiki"
class="hotel-image"
/>
<h2>Ikos Olia, Halkidiki</h2>
<p>Price per night: ₹75,990</p>
<button class="book-button">Book Now</button>
</div>
</div>

<div class="card-container">
<div class="hotel-card">
<img
src="https://www.fourseasons.com/alt/img-opt/~70.1530.0,0000-215,6943-3000,0000-1687,5000/publish/content/dam/fourseasons/images/web/APL/APL_851_original.jpg"
alt="Astir Palace Hotel, Vouliagmeni"
class="hotel-image"
/>
<h2>Astir Palace Hotel</h2>
<p>Price per night: ₹50,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://images.classic-collection.co.uk/content/DataObjects/PropertyReference/Image/image_891_v8.jpg"
alt="Grecotel Creta Palace, Chania"
class="hotel-image"
/>
<h2>Grecotel Creta Palace</h2>
<p>Price per night: ₹55,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://portoelounda.com/wp-content/uploads/2024/04/main_pool_site.jpeg"
alt="Porto Elounda Golf & Spa Resort, Crete"
class="hotel-image"
/>
<h2>Porto Elounda Resort</h2>
<p>Price per night: ₹60,990</p>
<button class="book-button">Book Now</button>
</div>
</div>

<div class="card-container">
<div class="hotel-card">
<img
src="https://cache.marriott.com/content/dam/marriott-renditions/dm-static-renditions/lc/emea/hws/a/athlc/en_us/photo/unlimited/assets/lc-athlc-hotel-building-exte-23349-39245-classic-hor.jpg?output-quality=70&interpolation=progressive-bilinear&downsize=1300px:*"
alt="Hotel Grande Bretagne, Athens"
class=" hotel-image"
/>
<h2>Hotel Grande Bretagne</h2>
<p>Price per night: ₹35,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://cache.marriott.com/is/image/marriotts7prod/athgl-exterior-5909:Wide-Ver?wid=750&fit=constrain"
alt="King George, Athens"
class="hotel-image"
/>
<h2>King George, Athens</h2>
<p>Price per night: ₹40,990</p>
<button class="book-button">Book Now</button>
</div>
<div class="hotel-card">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/1a/e1/c4/ad/njv-athens-plaza.jpg"
alt="NJV Athens Plaza Hotel, Athens"
class="hotel-image"
/>
<h2>NJV Athens Plaza Hotel</h2>
<p>Price per night: ₹45,990</p>
<button class="book-button">Book Now</button>
</div>
</div>
</div>
</body>
</html>

0 comments on commit e8494a5

Please sign in to comment.