Skip to content

Commit 310ad19

Browse files
Chen-AbudiChen-Abudi
authored
Feature/hotel description (#2)
* feat: hotel description * feat: added description + user reviews + call to action section
1 parent 70372a7 commit 310ad19

File tree

5 files changed

+507
-7
lines changed

5 files changed

+507
-7
lines changed

‎css/style.css

+158-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
--color-grey-dark-1: #333;
1010
--color-grey-dark-2: #777;
1111
--color-grey-dark-3: #999;
12-
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3); }
12+
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
13+
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
14+
--line: 1px solid var(--color-grey-light-2); }
1315

1416
* {
1517
margin: 0;
@@ -45,7 +47,7 @@ body {
4547
font-size: 1.4rem;
4648
height: 7rem;
4749
background-color: #fff;
48-
border-bottom: 1px solid var(--color-grey-light-2);
50+
border-bottom: var(--line);
4951
display: flex;
5052
justify-content: space-between;
5153
align-items: center; }
@@ -62,9 +64,28 @@ body {
6264

6365
.hotel-view {
6466
background-color: #fff;
65-
height: 80rem;
6667
flex: 1; }
6768

69+
.detail {
70+
display: flex;
71+
padding: 4.5rem;
72+
background-color: var(--color-grey-light-1);
73+
border-bottom: var(--line);
74+
font-size: 1.4rem; }
75+
76+
.description {
77+
background-color: #fff;
78+
flex: 0 0 60%;
79+
margin-right: 4.5rem;
80+
box-shadow: var(--shadow-light);
81+
padding: 3rem; }
82+
83+
.user-reviews {
84+
flex: 1;
85+
display: flex;
86+
flex-direction: column;
87+
align-items: center; }
88+
6889
.logo {
6990
height: 3.25rem;
7091
margin-left: 2rem; }
@@ -196,7 +217,7 @@ body {
196217
.overview {
197218
display: flex;
198219
align-items: center;
199-
border-bottom: 1px solid var(--color-grey-light-2); }
220+
border-bottom: var(--line); }
200221
.overview__header {
201222
font-size: 2.25rem;
202223
font-weight: 300;
@@ -244,8 +265,13 @@ body {
244265
background-color: transparent;
245266
cursor: pointer;
246267
transition: all 0.3s ease-in-out; }
268+
.button-inline span {
269+
margin-left: 3px;
270+
transition: margin-left 0.3s linear; }
247271
.button-inline:hover {
248272
color: var(--color-grey-dark-1); }
273+
.button-inline:hover span {
274+
margin-left: 8px; }
249275
.button-inline:focus {
250276
outline: none;
251277
animation: pulsate 1s infinite; }
@@ -260,3 +286,131 @@ body {
260286
100% {
261287
transform: scale(1);
262288
box-shadow: none; } }
289+
290+
.paragraph:not(:last-of-type) {
291+
margin-bottom: 2rem; }
292+
293+
.list {
294+
margin: 3rem 0;
295+
list-style: none;
296+
padding: 3rem 0;
297+
border-top: var(--line);
298+
border-bottom: var(--line);
299+
display: flex;
300+
flex-wrap: wrap; }
301+
.list__item {
302+
flex: 0 0 50%;
303+
margin-bottom: 0.7rem; }
304+
.list__item::before {
305+
content: "";
306+
display: inline-block;
307+
width: 1rem;
308+
height: 1rem;
309+
margin-right: 0.7rem;
310+
background-color: var(--color-primary);
311+
-webkit-mask-image: url(../assets/images/icons/chevron-thin-right.svg);
312+
-webkit-mask-size: cover;
313+
mask-image: url(../assets/images/icons/chevron-thin-right.svg);
314+
mask-size: cover; }
315+
316+
.recommend {
317+
font-size: 1.3rem;
318+
color: var(--color-grey-dark-3);
319+
display: flex;
320+
align-items: center; }
321+
.recommend__count {
322+
margin-right: auto; }
323+
.recommend__photo {
324+
box-sizing: content-box;
325+
width: 4rem;
326+
height: 4rem;
327+
border-radius: 50%;
328+
border: 3px solid #fff; }
329+
.recommend__photo:not(:last-child) {
330+
margin-right: -1.5rem; }
331+
332+
.review {
333+
background-color: #fff;
334+
box-shadow: var(--shadow-light);
335+
padding: 3rem;
336+
margin-bottom: 3.5rem;
337+
position: relative;
338+
overflow: hidden; }
339+
.review__text {
340+
margin-bottom: 2rem;
341+
position: relative;
342+
z-index: 10; }
343+
.review__user {
344+
display: flex;
345+
align-items: center; }
346+
.review__photo {
347+
width: 4.5rem;
348+
height: 4.5rem;
349+
border-radius: 50%;
350+
margin-right: 1.5rem; }
351+
.review__user-box {
352+
margin-right: auto; }
353+
.review__user-name {
354+
font-size: 1.1rem;
355+
font-weight: 600;
356+
text-transform: uppercase;
357+
margin-bottom: 0.4rem; }
358+
.review__user-date {
359+
color: var(--color-grey-dark-3);
360+
font-size: 1rem; }
361+
.review__rating {
362+
color: var(--color-primary);
363+
font-size: 2.4rem;
364+
font-weight: 300; }
365+
.review::before {
366+
content: "\201C";
367+
position: absolute;
368+
top: -3rem;
369+
left: -1rem;
370+
line-height: 1;
371+
font-size: 22rem;
372+
color: var(--color-grey-light-2);
373+
font-family: sans-serif;
374+
z-index: 1; }
375+
376+
.cta {
377+
padding: 3.5rem 0;
378+
text-align: center; }
379+
.cta__book-now {
380+
font-size: 2.15rem;
381+
font-weight: 300;
382+
text-transform: uppercase;
383+
margin-bottom: 2.5rem; }
384+
385+
.button {
386+
font-weight: 300;
387+
font-size: 1.6rem;
388+
text-transform: uppercase;
389+
border: none;
390+
border-radius: 100px;
391+
background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));
392+
color: #fff;
393+
position: relative;
394+
overflow: hidden; }
395+
.button > * {
396+
display: inline-block;
397+
width: 100%;
398+
height: 100%;
399+
transition: all 0.3s ease-in-out;
400+
cursor: pointer; }
401+
.button__visible {
402+
padding: 2rem 7.6rem; }
403+
.button__invisible {
404+
position: absolute;
405+
top: -100%;
406+
left: 0;
407+
padding: 2rem 0; }
408+
.button:hover {
409+
background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark)); }
410+
.button:hover .button__visible {
411+
transform: translateY(100%); }
412+
.button:hover .button__invisible {
413+
top: 0; }
414+
.button:focus {
415+
outline: none;
416+
animation: pulsate 1.5s infinite; }

‎index.html

+108
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@
118118
on Udemy.
119119
</div>
120120
</nav>
121+
121122
<main class="hotel-view">
122123
<div class="gallery">
123124
<figure class="gallery__item">
@@ -188,6 +189,113 @@ <h1 class="overview__header">Hotel Las Palmas</h1>
188189
<div class="overview__rating-count">429 votes</div>
189190
</div>
190191
</div>
192+
193+
<div class="detail">
194+
<div class="description">
195+
<p class="paragraph">
196+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
197+
nisi dignissimos debitis ratione sapiente saepe. Accusantium
198+
cumque, quas, ut corporis incidunt deserunt quae architecto
199+
voluptate.
200+
</p>
201+
<p class="paragraph">
202+
Accusantium cumque, quas, ut corporis incidunt deserunt quae
203+
architecto voluptate delectus, inventore iure aliquid aliquam.
204+
</p>
205+
206+
<ul class="list">
207+
<li class="list__item">Close to the beach</li>
208+
<li class="list__item">Breakfast included</li>
209+
<li class="list__item">Free airport shuttle</li>
210+
<li class="list__item">Free wifi in all rooms</li>
211+
<li class="list__item">Air conditioning and heating</li>
212+
<li class="list__item">Pets allowed</li>
213+
<li class="list__item">We speak all languages</li>
214+
<li class="list__item">Perfect for families</li>
215+
</ul>
216+
<div class="recommend">
217+
<p class="recommend__count">
218+
Lucy and 3 other friends recommend this hotel.
219+
</p>
220+
<div class="recommend__friends">
221+
<img
222+
src="assets/images/user/user-3.jpg"
223+
alt="Friend 1"
224+
class="recommend__photo"
225+
/>
226+
<img
227+
src="assets/images/user/user-4.jpg"
228+
alt="Friend 2"
229+
class="recommend__photo"
230+
/>
231+
<img
232+
src="assets/images/user/user-5.jpg"
233+
alt="Friend 3"
234+
class="recommend__photo"
235+
/>
236+
<img
237+
src="assets/images/user/user-6.jpg"
238+
alt="Friend 4"
239+
class="recommend__photo"
240+
/>
241+
</div>
242+
</div>
243+
</div>
244+
245+
<div class="user-reviews">
246+
<figure class="review">
247+
<blockquote class="review__text">
248+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
249+
doloremque architecto dicta animi, totam, itaque officia ex.
250+
</blockquote>
251+
<figcaption class="review__user">
252+
<img
253+
src="assets/images/user/user-1.jpg"
254+
alt="User 1"
255+
class="review__photo"
256+
/>
257+
<div class="review__user-box">
258+
<p class="review__user-name">Nick Smith</p>
259+
<p class="review__user-date">Feb 23rd, 2017</p>
260+
</div>
261+
<div class="review__rating">7.8</div>
262+
</figcaption>
263+
</figure>
264+
265+
<figure class="review">
266+
<blockquote class="review__text">
267+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
268+
doloremque architecto dicta animi.
269+
</blockquote>
270+
<figcaption class="review__user">
271+
<img
272+
src="assets/images/user/user-2.jpg"
273+
alt="User 2"
274+
class="review__photo"
275+
/>
276+
<div class="review__user-box">
277+
<p class="review__user-name">Mary Thomas</p>
278+
<p class="review__user-date">Sep 13th, 2017</p>
279+
</div>
280+
<div class="review__rating">9.3</div>
281+
</figcaption>
282+
</figure>
283+
284+
<button class="button-inline">
285+
Show all <span>&rarr;</span>
286+
</button>
287+
</div>
288+
</div>
289+
290+
<div class="cta">
291+
<h2 class="cta__book-now">
292+
Great news! We have 4 free rooms for your selected dates!
293+
</h2>
294+
<button class="button">
295+
<span class="button__visible">Book now</span>
296+
<span class="button__invisible">Only 4 rooms left</span>
297+
</button>
298+
</div>
191299
</main>
192300
</div>
193301
</div>

‎sass/_base.scss

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
--color-grey-dark-3: #999;
1414

1515
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
16+
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
17+
18+
--line: 1px solid var(--color-grey-light-2);
1619
}
1720

1821
* {

0 commit comments

Comments
 (0)