Task1_Shivam_23153038/earnpage.html at main · CSI-Trainee-2024/Task1_Shivam_23153038 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Host Your Home on Airbnb</title>
    <link rel="stylesheet" href="earnpage.css">
</head>
<body>
    <!-- Header Section -->
    <header>
        <div class="navbar">
            <img src="images/aircover.png" alt="Airbnb Logo" class="logo">
            <!-- <button class="btn-primary">List your home</button> -->
        </div>
    </header>

    <!-- Estimate Section -->
    <section class="estimate">
        <div class="estimate-content">
            <h1>Your home could make ₹19,496 on Airbnb</h1>
            <p>2 nights · ₹2,785/night · <a href="#">Learn how we estimate earnings</a></p>
            <div class="search-bar">
                <input type="text" placeholder="Ghaziabad · Entire place · 2 bedrooms">
                <button>Search</button>
            </div>
        </div>
        <div class="map-placeholder">
            <img src="images/map.png" alt="Map" class="map-box">
        </div>
    </section>

    <!-- Steps Section -->
    <section class="steps">
        <h2>It's easy to list your home on Airbnb</h2>
        <div class="steps-container">
            <div class="step">
                <img src="images/step1.png" alt="Step 1" class="icon">
                <p>Create a listing for your place in just a few steps</p>
            </div>
            <div class="step">
                <img src="images/step2.png" alt="Step 2" class="icon">
                <p>Go at your own pace, and make changes whenever</p>
            </div>
            <div class="step">
                <img src="images/step3.png" alt="Step 3" class="icon">
                <p>Get 1:1 support from experienced hosts at any time</p>
            </div>
        </div>
        <button class="btn-secondary">List your home</button>
    </section>

    <!-- AirCover Section -->
    <section class="protection">
        <h2>However you host, you're protected</h2>
        <p>Top-to-bottom protection, included every time you host your home on Airbnb.</p>
        <ul>
            <li>✔️ Up to $3m USD damage protection</li>
            <li>✔️ Up to $1m USD liability insurance</li>
            <li>✔️ 24-hour safety line</li>
        </ul>
        <!-- <img src="images/aircover.png" alt="AirCover" class="aircover-img"> -->
        <button class="btn-secondary" style="margin: 15px;">Learn about AirCover</button>
    </section>

    <!-- Hosting Tools Section -->
    <section class="hosting-tools">
        <h2>All the tools you need to host, all in one app</h2>
        <div class="tools-container">
            <div class="tool">
                <img src="images/1.png" alt="Listing Editor" class="tool-img">
                <h3>Listing editor</h3>
                <p>Showcase every detail of your home</p>
            </div>
            <div class="tool">
                <img src="images/2.png" alt="Calendar" class="tool-img">
                <h3>Calendar</h3>
                <p>Manage your availability and pricing</p>
            </div>
            <div class="tool">
                <img src="images/3.png" alt="Messages" class="tool-img">
                <h3>Messages</h3>
                <p>Quickly message guests and support</p>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq">
        <h2>Your questions, answered</h2>
        <div class="faq-container">
            <details>
                <summary>Top questions</summary>
                <p>Find answers to the most commonly asked questions about hosting on Airbnb.</p>
            </details>
            <details>
                <summary>Hosting basics</summary>
                <p>Learn the basics of hosting and how to get started with Airbnb.</p>
            </details>
            <details>
                <summary>Policy & regulations</summary>
                <p>Understand the hosting policies and regulations to follow while hosting.</p>
            </details>
        </div>
        <button class="btn-secondary" style="margin-left: 190px;">Ask a host</button>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-links" style=" display: flex;">
            <div style="margin: 8%;">
                <h4>Support</h4>
                <p><a href="#">Help Center</a></p>
                <p><a href="#">AirCover</a></p>
            </div>
            <div style="margin: 8%;">
                <h4>Hosting</h4>
                <p><a href="#">Host your home</a></p>
                <p><a href="#">Community forum</a></p>
            </div>
            <div style="margin: 8%;">
                <h4>Airbnb</h4>
                <p><a href="#">Careers</a></p>
                <p><a href="#">Investors</a></p>
            </div>
        </div>
        <p class="footer-note">© 2024 Airbnb, Inc.</p>
    </footer>
</body>
</html>