Skip to content

Commit 0085f7e

Browse files
mounikaperimounikaperi
committed
Building the Hotel Overview Section
1 parent f500e2b commit 0085f7e

File tree

6 files changed

+214
-3
lines changed

6 files changed

+214
-3
lines changed

‎Project-Trillio/css/style.css

+80-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ body {
4545
font-size: 1.4rem;
4646
height: 7rem;
4747
background-color: #fff;
48-
border-bottom: var(--color-grey-light-2);
48+
border-bottom: 1px solid var(--color-grey-light-2);
4949
display: flex;
5050
justify-content: space-between;
5151
align-items: center; }
@@ -190,3 +190,82 @@ body {
190190
text-align: center;
191191
padding: 2.5rem;
192192
color: var(--color-grey-light-4); }
193+
194+
.legal {
195+
font-size: 1.2rem;
196+
color: var(--color-grey-light-4);
197+
text-align: center;
198+
padding: 2.5rem; }
199+
200+
.gallery {
201+
display: flex; }
202+
.gallery__photo {
203+
width: 100%;
204+
display: block; }
205+
206+
.overview {
207+
display: flex;
208+
align-items: center;
209+
border-bottom: 1px solid var(--color-grey-light-2); }
210+
.overview__heading {
211+
font-size: 2.25rem;
212+
font-weight: 300;
213+
text-transform: uppercase;
214+
letter-spacing: 1px;
215+
padding: 1.5rem 3rem; }
216+
.overview__stars {
217+
margin-right: auto;
218+
display: flex; }
219+
.overview__icon-star, .overview__icon-location {
220+
width: 1.75rem;
221+
height: 1.75rem; }
222+
.overview__location {
223+
font-size: 1.2rem;
224+
display: flex;
225+
vertical-align: center; }
226+
.overview__icon-location {
227+
margin-right: 0.5rem; }
228+
.overview__rating {
229+
background-color: var(--color-primary);
230+
margin-left: 3rem;
231+
color: #fff;
232+
align-self: stretch;
233+
padding: 0 2.25rem;
234+
display: flex;
235+
flex-direction: column;
236+
justify-content: center;
237+
align-items: center; }
238+
.overview__rating-average {
239+
font-size: 2.25rem;
240+
font-weight: 300;
241+
margin-bottom: -3px; }
242+
.overview__rating-count {
243+
font-size: 0.8rem;
244+
text-transform: uppercase; }
245+
246+
.btn-inline {
247+
border: none;
248+
color: var(--color-primary);
249+
font-size: inherit;
250+
border-bottom: 1px solid var(--color-primary);
251+
padding-bottom: 2px;
252+
display: inline-block;
253+
background-color: transparent;
254+
cursor: pointer;
255+
transition: all 0.2s; }
256+
.btn-inline:hover {
257+
color: var(--color-grey-dark-1); }
258+
.btn-inline:focus {
259+
outline: none;
260+
animation: pulsate 1s infinite; }
261+
262+
@keyframes pulsate {
263+
0% {
264+
transform: scale(1);
265+
box-shadow: none; }
266+
50% {
267+
transform: scale(1.05);
268+
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); }
269+
100% {
270+
transform: scale(1);
271+
box-shadow: none; } }

‎Project-Trillio/images/icon-location.png

541 Bytes
Loading

‎Project-Trillio/images/icon-star.png

671 Bytes
Loading

‎Project-Trillio/index.html

+31-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,37 @@
7272
</div>
7373
</nav>
7474
<main class="hotel-view">
75-
75+
<div class="gallery">
76+
<figure class="gallery__item">
77+
<img src="images/hotel-1.jpg" alt="Photo of hotel 1" class="gallery__photo">
78+
</figure>
79+
<figure class="gallery__item">
80+
<img src="images/hotel-2.jpg" alt="Photo of hotel 2" class="gallery__photo">
81+
</figure>
82+
<figure class="gallery__item">
83+
<img src="images/hotel-3.jpg" alt="Photo of hotel 3" class="gallery__photo">
84+
</figure>
85+
</div>
86+
<div class="overview">
87+
<h1 class="overview__heading">
88+
Hotel Las Palmas
89+
</h1>
90+
<div class="overview__stars">
91+
<img src="images/icon-star.png" alt="Icon-star" class="overview__icon-star" />
92+
<img src="images/icon-star.png" alt="Icon-star" class="overview__icon-star" />
93+
<img src="images/icon-star.png" alt="Icon-star" class="overview__icon-star" />
94+
<img src="images/icon-star.png" alt="Icon-star" class="overview__icon-star" />
95+
<img src="images/icon-star.png" alt="Icon-star" class="overview__icon-star" />
96+
</div>
97+
<div class="overview__location">
98+
<img src="images/icon-location.png" alt="Location" class="overview__icon-location" />
99+
<button class="btn-inline">Albufeira, Portugal</button>
100+
</div>
101+
<div class="overview__rating">
102+
<div class="overview__rating-average">8.6</div>
103+
<div class="overview__rating-count">429 votes</div>
104+
</div>
105+
</div>
76106
</main>
77107
</div>
78108
</div>

‎Project-Trillio/sass/_components.scss

+102
Original file line numberDiff line numberDiff line change
@@ -155,4 +155,106 @@
155155
padding: 2.5rem;
156156
color: var(--color-grey-light-4);
157157
}
158+
}
159+
160+
//Legal Text
161+
.legal {
162+
font-size: 1.2rem;
163+
color: var(--color-grey-light-4);
164+
text-align: center;
165+
padding: 2.5rem;
166+
}
167+
168+
//Gallery
169+
.gallery {
170+
display: flex;
171+
&__photo {
172+
width: 100%;
173+
display: block;
174+
}
175+
}
176+
177+
//Hotel Overview
178+
.overview {
179+
display: flex;
180+
align-items: center;
181+
border-bottom: 1px solid var(--color-grey-light-2);
182+
&__heading {
183+
font-size: 2.25rem;
184+
font-weight: 300;
185+
text-transform: uppercase;
186+
letter-spacing: 1px;
187+
padding: 1.5rem 3rem;
188+
}
189+
&__stars {
190+
margin-right: auto;
191+
display: flex;
192+
}
193+
&__icon-star,
194+
&__icon-location {
195+
width: 1.75rem;
196+
height: 1.75rem;
197+
}
198+
&__location {
199+
font-size: 1.2rem;
200+
display: flex;
201+
vertical-align: center;
202+
}
203+
&__icon-location {
204+
margin-right: 0.5rem;
205+
}
206+
&__rating {
207+
background-color: var(--color-primary);
208+
margin-left: 3rem;
209+
color: #fff;
210+
align-self: stretch;
211+
padding: 0 2.25rem;
212+
display: flex;
213+
flex-direction: column;
214+
justify-content: center;
215+
align-items: center;
216+
}
217+
&__rating-average {
218+
font-size: 2.25rem;
219+
font-weight: 300;
220+
margin-bottom: -3px;
221+
}
222+
&__rating-count {
223+
font-size: 0.8rem;
224+
text-transform: uppercase;
225+
}
226+
}
227+
228+
//Button Inline
229+
.btn-inline {
230+
border: none;
231+
color: var(--color-primary);
232+
font-size: inherit;
233+
border-bottom: 1px solid var(--color-primary);
234+
padding-bottom: 2px;
235+
display: inline-block;
236+
background-color: transparent;
237+
cursor: pointer;
238+
transition: all 0.2s;
239+
&:hover{
240+
color: var(--color-grey-dark-1);
241+
}
242+
&:focus {
243+
outline: none;
244+
animation: pulsate 1s infinite;
245+
}
246+
}
247+
@keyframes pulsate {
248+
0% {
249+
transform: scale(1);
250+
box-shadow: none;
251+
}
252+
50% {
253+
transform: scale(1.05);
254+
box-shadow: 0 1rem 4rem rgba(0,0,0,0.25);
255+
}
256+
100% {
257+
transform: scale(1);
258+
box-shadow: none;
259+
}
158260
}

‎Project-Trillio/sass/_layout.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
font-size: 1.4rem;
1010
height: 7rem;
1111
background-color: #fff;
12-
border-bottom: var(--color-grey-light-2);
12+
border-bottom: 1px solid var(--color-grey-light-2);
1313
display: flex;
1414
justify-content: space-between;
1515
align-items: center;

0 commit comments

Comments
 (0)