-
Notifications
You must be signed in to change notification settings - Fork 0
/
front-page.php
184 lines (167 loc) · 7.74 KB
/
front-page.php
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<?php
/*
The main template file
*/
?>
<?php get_header() ?>
<!-- wordpress template hierarchy -->
<!-- https://developer.wordpress.org/themes/basics/template-hierarchy/ -->
<!-- welcome section -->
<div class="container-fluid text-center py-5">
<div class="row">
<!-- offset to 3 to make the header centered -->
<div class="col-md-6 offset-md-3">
<h3>Welcome to Tranquil Spa</h3>
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/divider-purple.png" alt="divider" class="w-25">
</div>
</div>
<div class="row mt-4 d-flex justify-content-around">
<div class="col-sm-3">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/makeup.jpg" alt="makeup image" class="card-img-top rounded-circle">
<div class="card-body">
<p class="card-text">Hair & make up </p>
</div>
</div>
<div class="col-sm-3">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/candles.jpg" alt="candles image" class="card-img-top rounded-circle">
<div class="card-body">
<p class="card-text">Spa facilities </p>
</div>
</div>
<div class="col-sm-3">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/retreat.jpg" alt="retreat image" class="card-img-top rounded-circle">
<div class="card-body">
<p class="card-text">Take a tour</p>
</div>
</div>
</div>
</div>
</div>
<!-- Offers -->
<div class="container-fluid text-center bg-dark py-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h3 class="text-light">Latest Spa Offers</h3>
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/divider-silver.png" alt="divider" class="pb-4 w-25">
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card">
<h4 class="card-header py-5">Family swim package <span class="font-weight-bold price">$60</span></h4>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Our most popular swim package, great value for families or groups up to 12 people </p>
</blockquote>
</div>
<ul class="list-group">
<li class="list-group-item font-italic">Up to 12 people</li>
<li class="list-group-item font-italic">Private sessions</li>
<li class="list-group-item font-italic">Swim lessons also available</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card">
<h4 class="card-header py-5">For the bride <span class="font-weight-bold price">$40</span></h4>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Our wedding packages are perfect for your big day. We can cater for groups large or small </p>
</blockquote>
</div>
<ul class="list-group">
<li class="list-group-item font-italic">Hair & make up</li>
<li class="list-group-item font-italic">Groups of any size</li>
<li class="list-group-item font-italic">Champagne & cocktails available</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card">
<h4 class="card-header py-5">Weekend pass<span class="font-weight-bold price">$60</span></h4>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Take full advantage of all of the facilities we have to offer with our unlimited weekend pass</p>
</blockquote>
</div>
<ul class="list-group">
<li class="list-group-item font-italic">Pool & sauna</li>
<li class="list-group-item font-italic">Full use of our gym</li>
<li class="list-group-item font-italic">Includes 2 treatments per person</li>
</ul>
</div>
</div>
</div> <!-- row-->
</div> <!--closing container-->
<!-- ABOUT US -->
<div class="container-fluid py-5 text-center bg-light">
<div class="row">
<div class="col-sm-6 offset-sm-3">
<h3>About Us</h3>
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/divider-purple.png" alt="divider" class="w-25">
</div>
</div>
<div class="row mt-2">
<div class="col">
<p class="text-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum reprehenderit qui nihil voluptatibus facilis, inventore molestiae aliquam est maxime ipsa, corporis veritatis amet laborum. Natus cumque quae odit quia totam?
Quas, aperiam! Quos praesentium perferendis voluptatum blanditiis, dolores magnam. Officia reiciendis consequuntur voluptatum tenetur vero! Odio nemo non aperiam totam ad. Architecto necessitatibus nihil eligendi corporis maxime quaerat commodi labore!
Provident repellendus quae voluptates at optio explicabo quos doloremque odio accusantium omnis sapiente commodi nemo libero, voluptatum, quod fuga, quis rem quibusdam repellat praesentium ipsum numquam assumenda quaerat sint. Nemo.
Et beatae accusantium a ipsa aliquid sunt nulla esse labore, odit pariatur ipsam nesciunt deserunt blanditiis commodi necessitatibus animi dolor, illum cupiditate quisquam accusamus iusto! Sunt expedita odio corrupti itaque.
Neque natus quaerat odio dolor esse tempore facere repellendus quia ab qui facilis praesentium reprehenderit dicta corporis incidunt ex nemo molestiae quos aliquid enim saepe tenetur, labore sequi error? Laudantium!
</p>
</div>
</div>
</div>
<!-- PRICE LIST SECTION -->
<div class="container-fluid py-5 bg-dark">
<div class="row">
<div class="col-sm-6 offset-sm-3 text-center">
<h3 class="text-light">Price List</h3>
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/divider-silver.png" alt="divider" class="pb-4 w-25">
</div>
</div>
<div class="row my-4">
<div class="col-sm-8">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/massage.jpg" alt="massage picture">
</div>
<div class="col-sm-4">
<h4 class="title text-center">Massages</h4>
<ul class="list-group list-group-flush text-light">
<li class="list-group-item">MASSAGE 1 <em>$10</em></li>
<li class="list-group-item">MASSAGE 2 <em>$10</em></li>
<li class="list-group-item">MASSAGE 3 <em>$10</em></li>
<li class="list-group-item">MASSAGE 4 <em>$10</em></li>
<li class="list-group-item">MASSAGE 5 <em>$10</em></li>
</ul>
</div>
</div>
<div class="row my-4">
<div class="col-sm-4">
<h4 class="title text-center">Facials</h4>
<ul class="list-group list-group-flush text-light">
<li class="list-group-item">Facial 1 <em>$10</em></li>
<li class="list-group-item">Facial 2 <em>$10</em></li>
<li class="list-group-item">Facial 3 <em>$10</em></li>
<li class="list-group-item">Facial 4 <em>$10</em></li>
<li class="list-group-item">Facial 5 <em>$10</em></li>
</ul>
</div>
<div class="col-sm-8">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/facial.jpg" alt="facial picture">
</div>
<div class="col-sm-8">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/cosmetics.jpg" alt="cosmetics picture">
</div>
<div class="col-sm-4">
<h4 class="title text-center">Hair & make up</h4>
<ul class="list-group list-group-flush text-light">
<li class="list-group-item">Hair styles 1 <em>$10</em></li>
<li class="list-group-item">Hair styles 2 <em>$10</em></li>
<li class="list-group-item">Hair styles 3 <em>$10</em></li>
<li class="list-group-item">Hair styles 4 <em>$10</em></li>
<li class="list-group-item">Hair styles 5 <em>$10</em></li>
</ul>
</div>
</div>
</div>
<?php get_footer() ?>