diff --git a/images/about.jpg b/images/about.jpg new file mode 100644 index 0000000..d43c9d4 Binary files /dev/null and b/images/about.jpg differ diff --git a/images/explore.jpg b/images/explore.jpg new file mode 100644 index 0000000..1e5176f Binary files /dev/null and b/images/explore.jpg differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000..c9aa592 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/header.jpg b/images/header.jpg new file mode 100644 index 0000000..0d70778 Binary files /dev/null and b/images/header.jpg differ diff --git a/images/index.html b/images/index.html new file mode 100644 index 0000000..8eaf98f --- /dev/null +++ b/images/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + +
+
+
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 0000000..3a21775 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..b57c978 Binary files /dev/null and b/images/logo.png differ diff --git a/images/room-1.jpg b/images/room-1.jpg new file mode 100644 index 0000000..48cb3e0 Binary files /dev/null and b/images/room-1.jpg differ diff --git a/images/room-2.jpg b/images/room-2.jpg new file mode 100644 index 0000000..b129578 Binary files /dev/null and b/images/room-2.jpg differ diff --git a/images/room-3.jpg b/images/room-3.jpg new file mode 100644 index 0000000..9c919bb Binary files /dev/null and b/images/room-3.jpg differ diff --git a/images/service.jpg b/images/service.jpg new file mode 100644 index 0000000..6e3f0b2 Binary files /dev/null and b/images/service.jpg differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 0000000..8c91c50 Binary files /dev/null and b/images/twitter.png differ diff --git a/images/youtube.png b/images/youtube.png new file mode 100644 index 0000000..e72ba61 Binary files /dev/null and b/images/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ef1e7e9 --- /dev/null +++ b/index.html @@ -0,0 +1,310 @@ + + + + + + + + + + + + Document + + + +
+
+ +
+

Simple - Unique - Friendly

+

Make Yourself At Home +
+ In Our Hotel +

+
+
+
+
+
+ + date_range + +
+ + +
+
+
+ + date_range + +
+ + +
+
+
+ + person + +
+ + +
+
+
+ +
+
+
+
+
+ +
+
+
+

ABOUT US

+
+
+
+

The Best Holidays Start Here!

+

+ With a focus on quality accommodations, personalized experiences, and seamless booking, + our + platform is dedicated to ensuring that every traveler embarks on their dream holiday + with + confidence and excitement. +

+ +
+
+
+
+
+

OUR LIVING ROOM

+
+
+
+

The Most Memorable Rest Time Starts Here.

+
+
+
+ +
+
+

Deluxe Ocean View

+

Bask in luxury with breathtaking ocean views from your private suite.

+
Starting from $299/night
+ +
+
+
+
+ +
+
+

Executive Cityscape Room

+

Experience urban elegance and modern comfort in the heart of the city.

+
Starting from $199/night
+ +
+
+
+
+ +
+
+

Family Garden Retreat

+

Spacious and inviting, perfect for creating cherished memories with loved ones.

+
Starting from $249/night
+ +
+
+
+
+
+
+
+
+
+

SERVICES

+
+
+
+

Strive Only For The Best.

+
    +
  • + + local_police + + High Class Security +
    • +
  • + + restore + + 24 Hour Room Service +
    • +
  • + + headphones + + Conference Room +
    • +
  • + + map + + Tourist Guide Support +
    • +
+
+
+
+
+ +
+
+
+

EXPLORE

+
+
+

What's New Today.

+
+
+
+

10th MAR 2023

+

A New Menu Is Available In Our Hotel.

+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bb099e4 --- /dev/null +++ b/style.css @@ -0,0 +1,467 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; + font-family: "Poppins", sans-serif; +} + +:root { + --bgPink: #e82574; + --bgDarkPink: #bc1c5c; + --textDark: #0c0a09; + --textLight: #78716c; + --white: #ffffff; + --max-width: 1200px; +} + +#wrapper { + height: 100vh; + overflow-y: auto; + overflow-x: hidden; +} + +.header-container { + width: 100%; + height: 700px; + background-image: url("./images/header.jpg"); + background-position: center center; + background-size: cover; + background-repeat: no-repeat; + isolation: isolate; +} + +nav { + position: static; + isolation: isolate; + height: 105px; + width: 100%; + display: flex; + justify-content: space-around; + align-items: center; + margin: auto; +} + +.logo img { + width: 120px; +} + +.nav-items{ + padding: 2rem; + display: flex; + align-items: center; + gap: 3rem; +} + +.nav-items a { + isolation: isolate; + color: var(--white); + text-decoration: none; +} + +.btn { + padding: 0.75rem 1.5rem; + font-size: 1rem; + border-radius: 5px; + border: none; + color: var(--white); + font-weight: 600; + background-color: var(--bgPink); + cursor: pointer; + transition: 0.3s; +} + +.btn:hover { + background-color: var(--bgDarkPink); +} + +.section-container { + width: var(--max-width); + margin: auto; + padding: 5rem 1rem; +} + +.hero-section { + padding-block: 10rem 15rem; +} + +.hero-section p { + color: var(--white); + font-size: 1.2rem; + opacity: 0.6; + margin-bottom: 1rem; + text-align: center; +} + +.hero-section h1 { + color: var(--white); + font-size: 4rem; + font-weight: 600; + line-height: 4.5rem; + letter-spacing: 0.15rem; + text-align: center; +} + +.hero-section h1 span { + color: var(--bgDarkPink); +} + +.booking { + padding-block: 0; +} + +.booking-form { + width: var(--max-width); + margin: auto; + display: flex; + padding: 2rem; + border-radius: 10px; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + background-color: var(--white); + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); + transform: translateY(-50%); +} + +.input-group { + display: flex; + flex: 1 1 220px; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.input-group span { + color: var(--bgPink); + font-size: 1.75rem; +} + +.input-group label { + font-weight: 600; + color: var(--textDark); +} + +.input-group input { + width: 100%; + max-width: 150px; + font-size: 0.9rem; + font-weight: 600; + padding-block: 5px; + color: var(--textLight); + border: none; +} + +.check-info { + display: flex; + flex-direction: column; + justify-content: center; +} + +.about-section { + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + overflow: hidden; + gap: 2rem; +} + +.about-image img { + max-width: 450px; + margin: auto; + border-radius: 5px; +} + +img { + width: 100%; + display: flex; +} + +.sub-heading { + display: flex; +} + +.sub-heading p { + font-size: 16px; + font-weight: 600; + color: var(--textDark); + margin-bottom: 1rem; + letter-spacing: 2px; +} + +.sub-heading div { + position: relative; + top: 11.5px; + margin-bottom: 0.5rem; + margin-left: 10px; + height: 1.5px; + width: 60px; + background-color: var(--bgPink); +} + +h2 { + max-width: 550px; + font-size: 2.5rem; + font-weight: 600; + margin-bottom: 1rem; + line-height: 3rem; + color: var(--textDark); +} + +.description { + max-width: 600px; + margin-bottom: 1rem; + color: var(--textLight); +} + +.room-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-top: 4rem; +} + +.card { + border-radius: 10px; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); +} + +.room-image { + position: relative; +} + +.room-image img { + border-radius: 10px 10px 0px 0px; +} + +.room-info { + padding: 1rem; +} + +.room-info h4 { + margin-bottom: 0.5rem; + font-size: 1.2rem; + font-weight: 600; +} + +.room-info p { + margin-bottom: 0.5rem; + color: var(--textLight); +} + +.room-info div { + margin-bottom: 1rem; + font-size: 1rem; + font-weight: 600; + color: var(--textLight); +} + +.room-info span { + color: var(--textDark); +} + +.service-section { + background-image: url("./images/service.jpg"); + background-position: center center; + background-size: cover; + background-repeat: no-repeat; +} + +.service-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-block: 0; +} + +.services { + background-color: var(--white); + padding: 2rem 4rem; + grid-column: 2/3; +} + +.service-list { + list-style: none; + margin-top: 2rem; + display: grid; + gap: 2rem; +} + +.service-list li { + font-size: 1.2rem; + font-weight: 500; + display: flex; + align-items: center; + gap: 1rem; + color: var(--textDark); +} + +.service-list li:nth-child(1) span { + color: #60a5fa; + background-color: #dbeafe; +} + +.service-list li:nth-child(2) span { + color: #f472b6; + background-color: #fce7f3; +} + +.service-list li:nth-child(3) span { + color: #c084fc; + background-color: #f3e8ff; +} + +.service-list li:nth-child(4) span { + color: #fb7185; + background-color: #ffe4e6; +} + +.service-list span { + padding: 12px 12px; + font-size: 1.75rem; + border-radius: 50%; +} + +.banner { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; + gap: 2rem; + background-color: var(--white); + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); + padding: 2rem; + border-radius: 10px; +} + +.banner-card { + text-align: center; + flex: 1 1 180px; +} + +.banner-card h4 { + font-size: 2rem; + font-weight: 600; + color: var(--text-dark); +} + +.banner-card p { + color: var(--textLight); +} + +.explore-heading { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.explore-container { + background-image: url("./images/explore.jpg"); + background-position: center center; + background-size: cover; + background-repeat: no-repeat; + margin-top: 4rem; + padding-block: 3rem; +} + +.explore-content { + width: 410px; + background-color: var(--white); + border-radius: 6px; + padding: 2rem; + margin-left: 9rem; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); +} + +.explore-content p { + margin-bottom: 0.5rem; +} + +.explore-content h4 { + margin-bottom: 1rem; + font-size: 1.2rem; + font-weight: 600; + line-height: 1.5rem; + color: var(--text-dark); +} + +.explore-content .btn { + color: var(--bgPink); + background-color: var(--white); + border: 1px solid var(--bgPink); +} + +.footer-section { + background-color: var(--textDark); +} + +.footer-panel1 { + position: relative; + top: 40px; + color: var(--textLight); + text-align: center; +} + +.footer-panel1 span { + border: 1px solid var(--white); + border-radius: 2.5px; + padding: 0.3rem 1rem; + cursor: pointer; +} + +.footer-panel2 { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 6rem 5rem; +} + +.column h4 { + color: var(--white); + margin-bottom: 2rem; + font-size: 1.2rem; + font-weight: 600; +} + +.column .description { + margin-block: 2rem; +} + +.footer-links { + list-style: none; + display: grid; + gap: 0.8rem; +} + +.footer-links a { + color: var(--textLight); + text-decoration: none; +} + +.socials { + display: flex; + align-items: center; + margin-top: 1.5rem; + gap: 1rem; + flex-wrap: wrap; +} + +.socials img { + width: 25px; + opacity: 0.8; + transition: 0.3s; +} + +.socials img:hover { + opacity: 1; +} + +.copyright { + font-size: 0.9rem; + padding: 1rem; + text-align: center; + color: var(--textLight); +} + + +