My portfolio project: HomeStay

My porfolio project was to make a site using ChatGPT. My website is Called homeStay “Your home away From home.”

it is based on: Sonder
Sonder, a website used to let you book hotels or vacation rentals.
Sonder manages over 9,000 units in over 40 cities in 10 countries and has served over 1 million guests. It is the largest host on Airbnb Although it competes with Airbnb, Sonder leases and manages its own rentals. It targets travelers who prefer larger accommodations than a hotel room but want a more predictable experience than renting from an amateur host. Guests use a mobile app to check in and get customer support. The company outsources maintenance and housekeeping service

my tools were:

ChatGPT,
ChatGPT is a chatbot developed by OpenAI and launched on November 30, 2022. It is based on a large language model and allows users to shape conversations according to their preferences. Users can control the length, format, style, level of detail, and language of the conversation. Prompt engineering, which involves using successive prompts and replies, is used to provide context at each stage of the conversation.

Codecadamy,
Codecademy is an American online interactive platform that offers free coding classes in 12 different programming languages including Python, Java, Go, JavaScript, Ruby, SQL, C++, C#, and Swift, as well as markup languages HTML and CSS.

Audience:

Travelers, people looking to go on vacation and stay in a nice home.

Here is my code
HomeStay.html:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomeStay - Destinations</title>
    <link rel="stylesheet" href="destinations.css">
</head>

<body class="destinations">

    <!-- Header Section -->
    <header>
        <h1>HomeStay</h1>
        <p>Your Home Away From Home</p>
    </header>

    <!-- Navigation Section -->
    <nav>
        <ul>
            <li><a href="HomeStay.html">Home</a></li>
            <li><a href="accommodations.html">Accommodations</a></li>
            <li><a href="destinations.html">Destinations</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <!-- Main Content Section -->
    <main>
        <!-- Content specific to the Destinations page -->
        <section id="popular-destinations">
            <h2>Popular Destinations</h2>
            <p>Choose from over 40 cities in 10 countries for your next getaway.</p>
            <img src="Photos/Home-4.jfif" alt="Destination Image 1">
            <!-- Replace the above URL with the actual URL of your destination image -->
            <img src="Photos/House-5.jpg" alt="Destination Image 2">
            <!-- Replace the above URL with the actual URL of your destination image -->
        </section>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2023 HomeStay. All rights reserved.</p>
        <!-- Add additional footer content or links as needed -->
    </footer>

</body>

</html>

HomeStay.css:

/* Reset some default styles */
body,
h1,
h2,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

/* Apply a background color to the body */
body {
    background-color: #f0dc82;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
}

/* Header Styles */
header {
    background-color: #004080; /* Dark Blue */
    color: #fff;
    text-align: center;
    padding: 20px;
}

header h1 {
    font-size: 2em;
}

/* Navigation Styles */
nav {
    background-color: #0050a0; /* Blue */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Main Content Styles */
main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* Adjusted to maintain readability */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Section Styles */
section {
    margin-bottom: 20px;
}

h2 {
    color: #004080; /* Dark Blue */
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #004080; /* Dark Blue */
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Responsive Styles */
@media only screen and (max-width: 600px) {
    main {
        padding: 10px;
    }
}


accommodations.html:

<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomeStay - Accommodations</title>
    <link rel="stylesheet" href="accommodations.css">
</head>

<body class="accommodations">

    <!-- Header Section -->
    <header>
        <h1>HomeStay</h1>
        <p>Your Home Away From Home</p>
    </header>

    <!-- Navigation Section -->
    <nav>
        <ul>
            <li><a href="HomeStay.html">Home</a></li>
            <li><a href="accommodations.html">Accommodations</a></li>
            <li><a href="destinations.html">Destinations</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <!-- Main Content Section -->
    <main>
        <!-- Content specific to the Accommodations page -->
        <section id="accommodations">
            <h2>Our Accommodations</h2>
            <p>Explore our range of spacious and comfortable rentals.</p>
            <img src="Photos/Home-2.jpg" alt="Accommodation Image 1">
            <!-- Replace the above URL with the actual URL of your accommodation image -->
            <img src="Photos/Home-3.jpg" alt="Accommodation Image 2">
            <!-- Replace the above URL with the actual URL of your accommodation image -->
        </section>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2023 HomeStay. All rights reserved.</p>
        <!-- Add additional footer content or links as needed -->
    </footer>

</body>

</html>

Accommodations.css:

/* Reset some default styles */
body,
h1,
h2,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

/* Apply a background color to the body */
body.accommodations {
    background-color: #f0dc82; /* Flax Color */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
}

/* Header Styles */
header {
    background-color: #004080; /* Dark Blue */
    color: #fff;
    text-align: center;
    padding: 20px;
}

header h1 {
    font-size: 2em;
}

/* Navigation Styles */
nav {
    background-color: #0050a0; /* Blue */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Main Content Styles */
main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* Adjusted to maintain readability */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Section Styles */
#accommodations {
    margin-bottom: 20px;
}

h2 {
    color: #004080; /* Dark Blue */
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

/* Additional Style for the Second Image */
#accommodations img:nth-child(2) {
    max-width: 50%; /* Adjust the width as needed */
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #004080; /* Dark Blue */
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Responsive Styles */
@media only screen and (max-width: 600px) {
    main {
        padding: 10px;
    }
}

destinatinations.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomeStay - Destinations</title>
    <link rel="stylesheet" href="destinations.css">
</head>

<body class="destinations">

    <!-- Header Section -->
    <header>
        <h1>HomeStay</h1>
        <p>Your Home Away From Home</p>
    </header>

    <!-- Navigation Section -->
    <nav>
        <ul>
            <li><a href="HomeStay.html">Home</a></li>
            <li><a href="accommodations.html">Accommodations</a></li>
            <li><a href="destinations.html">Destinations</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <!-- Main Content Section -->
    <main>
        <!-- Content specific to the Destinations page -->
        <section id="popular-destinations">
            <h2>Popular Destinations</h2>
            <p>Choose from over 40 cities in 10 countries for your next getaway.</p>
            <img src="Photos/Home-4.jfif" alt="Destination Image 1">
            <!-- Replace the above URL with the actual URL of your destination image -->
            <img src="Photos/House-5.jpg" alt="Destination Image 2">
            <!-- Replace the above URL with the actual URL of your destination image -->
        </section>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2023 HomeStay. All rights reserved.</p>
        <!-- Add additional footer content or links as needed -->
    </footer>

</body>

</html>

Destinations.css:

/* Reset some default styles */
body,
h1,
h2,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

/* Apply a background color to the body */
body.destinations {
    background-color: #f0dc82; /* Flax Color */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
}

/* Header Styles */
header {
    background-color: #004080; /* Dark Blue */
    color: #fff;
    text-align: center;
    padding: 20px;
}

header h1 {
    font-size: 2em;
}

/* Navigation Styles */
nav {
    background-color: #0050a0; /* Blue */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Main Content Styles */
main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* Adjusted to maintain readability */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Section Styles */
#popular-destinations {
    margin-bottom: 20px;
}

h2 {
    color: #004080; /* Dark Blue */
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #004080; /* Dark Blue */
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Responsive Styles */
@media only screen and (max-width: 600px) {
    main {
        padding: 10px;
    }
}

about.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomeStay - About Us</title>
    <link rel="stylesheet" href="about.css">
</head>

<body class="about">

    <!-- Header Section -->
    <header>
        <h1>HomeStay</h1>
        <p>Your Home Away From Home</p>
    </header>

    <!-- Navigation Section -->
    <nav>
        <ul>
            <li><a href="HomeStay.html">Home</a></li>
            <li><a href="accommodations.html">Accommodations</a></li>
            <li><a href="destinations.html">Destinations</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <!-- Main Content Section -->
    <main>
        <!-- Content specific to the About Us page -->
        <section id="about-us">
            <h2>About HomeStay</h2>
            <p>Learn more about our mission and commitment to providing a predictable and enjoyable experience.</p>
            <img src="/Photos/house heroes..png" alt="About Us Image 1">
            <!-- Replace the above URL with the actual URL of your about us image -->
            <img src="/Photos/house heroes-2.jfif" alt="About Us Image 2">
            <!-- Replace the above URL with the actual URL of your about us image -->
        </section>


        

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2023 HomeStay. All rights reserved.</p>
        <!-- Add additional footer content or links as needed -->
    </footer>

</body>

</html>

about.css

/* Reset some default styles */
body,
h1,
h2,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

/* Apply a background color to the body */
body.about {
    background-color: #f0dc82; /* Flax Color */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
}

/* Header Styles */
header {
    background-color: #004080; /* Dark Blue */
    color: #fff;
    text-align: center;
    padding: 20px;
}

header h1 {
    font-size: 2em;
}

/* Navigation Styles */
nav {
    background-color: #0050a0; /* Blue */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Main Content Styles */
main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* Adjusted to maintain readability */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Section Styles */
#about-us {
    margin-bottom: 20px;
}

h2 {
    color: #004080; /* Dark Blue */
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #004080; /* Dark Blue */
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Responsive Styles */
@media only screen and (max-width: 600px) {
    main {
        padding: 10px;
    }
}

contact.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomeStay - Contact</title>
    <link rel="stylesheet" href="contact.css">
</head>

<body class="contact">

    <!-- Header Section -->
    <header>
        <h1>HomeStay</h1>
        <p>Your Home Away From Home</p>
    </header>

    <!-- Navigation Section -->
    <nav>
        <ul>
            <li><a href="HomeStay.html">Home</a></li>
            <li><a href="accommodations.html">Accommodations</a></li>
            <li><a href="destinations.html">Destinations</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <!-- Main Content Section -->
    <main>
        <!-- Content specific to the Contact page -->
        <section id="contact-form">
            <h2>Contact Us</h2>
            <p>Have questions or feedback? Reach out to us using the form below.</p>
            
            <form action="#" method="post">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="4" required></textarea>
                
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2023 HomeStay. All rights reserved.</p>
        <!-- Add additional footer content or links as needed -->
    </footer>

</body>

</html>

about.css:

/* Reset some default styles */
body,
h1,
h2,
p,
ul,
li,
form {
    margin: 0;
    padding: 0;
}

/* Apply a background color to the body */
body.contact {
    background-color: #f0dc82; /* Flax Color */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
}

/* Header Styles */
header {
    background-color: #004080; /* Dark Blue */
    color: #fff;
    text-align: center;
    padding: 20px;
}

header h1 {
    font-size: 2em;
}

/* Navigation Styles */
nav {
    background-color: #0050a0; /* Blue */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Main Content Styles */
main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* Adjusted to maintain readability */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Section Styles */
#contact-form {
    margin-bottom: 20px;
}

h2 {
    color: #004080; /* Dark Blue */
}

/* Form Styles */
form {
    display: grid;
    grid-gap: 10px;
}

label {
    font-weight: bold;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #004080; /* Dark Blue */
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #00214d; /* Darker Blue on hover */
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #004080; /* Dark Blue */
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Responsive Styles */
@media only screen and (max-width: 600px) {
    main {
        padding: 10px;
    }
}