generated from YearUpSpring2024/bootstrap-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (123 loc) · 5.6 KB
/
index.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- css -->
<link rel="stylesheet" href="./css/site.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="./index.html">Costas D'este Beach Resort and spa</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./over_night_stay.html">Longterm-Plan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./activities.html">Activities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./dining.html">Dinings</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="./offers.html" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Offers
</a>
<ul class="dropdown-menu">
<!-- <li><a class="dropdown-item" href="./events.html">Events</a></li> -->
<li><a class="dropdown-item" href="./rent_a_car.html">Rent a Car</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="./activities.html">Activities</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<!-- -->
<!-- <video autoplay muted loop>
<source src="./images/homePageImg/resort_intro.mp4" type="video/mp4">
</video> -->
<div class="jumbotron fluid text-center">
<h1 class="fluid">Welcome to paradise</h1>
<video autoplay muted loop>
<source src="./images/homePageImg/resort_intro.mp4" type="video/mp4">
</video>
<p class="lead mt-5">Escape to the tranquil shores of Costas D'este Beach Resort and Spa, where luxury meets
serenity.
Our resort offers a
sanctuary of indulgence, nestled amidst breathtaking views of the azure sea and golden sands. Immerse yourself
in the
elegance of our accommodations, from luxurious suites to secluded villas, each designed to provide the ultimate
retreat.</p>
<hr class="my-4">
<p class="text">Indulge in a world-class experience with rejuvenating spa treatments, gourmet dining, and
exhilarating water
sports.
Whether lounging by the infinity pool or exploring the vibrant coral reefs, every moment at Costas D'este
promises
relaxation and adventure. Come, discover a place where luxury and tranquility converge, creating unforgettable
memories
that last a lifetime.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<!-- second -->
<h3 class="mt-5 text-center">Here are our Room</h3>
<div class="card-group mt-5">
<div class="card">
<img class="card-img-top img-small" src="./images/homePageImg/newSize.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">room 4</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top img-small" src="./images/homePageImg/newSize.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Hotel 2</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top img-small" src="./images/homePageImg/newSize.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Room 2</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content.
This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="scripts/site.js"></script>
</body>
</html>