trillo detail layout
This commit is contained in:
dqnid committed
1 parent
a0e1f31987
commit
a0387b8ca6
5 files changed
+337
-7
No files matched your search
@@ -25,7 +25,8 @@ Grey dark 3: #999
|
||||
--color-grey-dark-1: #333;
|
||||
--color-grey-dark-2: #777;
|
||||
--color-grey-dark-3: #999;
|
||||
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3); }
|
||||
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
|
||||
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06); }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -171,6 +172,80 @@ body {
|
||||
text-align: center;
|
||||
padding: 2.5rem; }
|
||||
|
||||
.gallery {
|
||||
display: flex; }
|
||||
.gallery__photo {
|
||||
width: 100%;
|
||||
display: block; }
|
||||
|
||||
.overview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-grey-light-2); }
|
||||
.overview__heading {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 1.5rem 3rem; }
|
||||
.overview__stars {
|
||||
margin-right: auto;
|
||||
display: flex; }
|
||||
.overview__icon-star, .overview__icon-location {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
fill: var(--color-primary); }
|
||||
.overview__location {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
vertical-align: center; }
|
||||
.overview__icon-location {
|
||||
margin-right: 0.5rem; }
|
||||
.overview__rating {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
margin-left: 3rem;
|
||||
padding: 0 2.25rem;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
.overview__rating-average {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: -3px; }
|
||||
.overview__rating-count {
|
||||
font-weight: 0.8rem;
|
||||
text-transform: uppercase; }
|
||||
|
||||
.btn-inline {
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: inherit;
|
||||
border-bottom: 1px solid currentColor;
|
||||
padding-bottom: 2px;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s; }
|
||||
.btn-inline:hover {
|
||||
color: var(--color-grey-dark-1); }
|
||||
.btn-inline:focus {
|
||||
outline: none;
|
||||
animation: pulsate 1s infinite; }
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: none; }
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: none; } }
|
||||
|
||||
.container {
|
||||
max-width: 120rem;
|
||||
min-height: 50rem;
|
||||
@@ -181,7 +256,7 @@ body {
|
||||
.header {
|
||||
height: 7rem;
|
||||
background-color: #fff;
|
||||
border-bottom: var(--color-grey-light-2);
|
||||
border-bottom: 1px solid var(--color-grey-light-2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -199,5 +274,22 @@ body {
|
||||
|
||||
.hotel-view {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
height: 80rem; }
|
||||
background-color: #fff; }
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
padding: 4.5rem;
|
||||
gap: 4.5rem;
|
||||
background-color: var(--color-grey-light-1);
|
||||
border-bottom: 1px solid var(--color-grey-light-2); }
|
||||
|
||||
.description {
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-light);
|
||||
padding: 3rem;
|
||||
flex: 0 0 60%;
|
||||
font-size: 1.4rem; }
|
||||
|
||||
.user-reviews {
|
||||
background-color: blue;
|
||||
flex: 1; }
|
||||
+110
-1
@@ -96,7 +96,116 @@
|
||||
<div class="legal">© 2017 by trillo. Al rights reserved.</div>
|
||||
</nav>
|
||||
|
||||
<main class="hotel-view">Hotel view</main>
|
||||
<main class="hotel-view">
|
||||
<div class="gallery">
|
||||
<figure class="gallery__item">
|
||||
<img
|
||||
src="img/hotel-1.jpg"
|
||||
alt="Photo of hotel 1"
|
||||
class="gallery__photo"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<figure class="gallery__item">
|
||||
<img
|
||||
src="img/hotel-2.jpg"
|
||||
alt="Photo of hotel 2"
|
||||
class="gallery__photo"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<figure class="gallery__item">
|
||||
<img
|
||||
src="img/hotel-3.jpg"
|
||||
alt="Photo of hotel 3"
|
||||
class="gallery__photo"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="overview">
|
||||
<h1 class="overview__heading">Hotel Las Palmas</h1>
|
||||
<div class="overview__stars">
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="overview__location">
|
||||
<svg class="overview__icon-location">
|
||||
<use xlink:href="img/sprite.svg#icon-location-pin"></use>
|
||||
</svg>
|
||||
<button class="btn-inline">Albufeira, Portugal</button>
|
||||
</div>
|
||||
|
||||
<div class="overview__rating">
|
||||
<div class="overview__rating-average">8.6</div>
|
||||
<div class="overview__rating-count">429 votes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<div class="description">
|
||||
<p class="paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
|
||||
nisi dignissimos debitis ratione sapiente saepe. Accusantium
|
||||
cumque, quas, ut corporis incidunt deserunt quae architecto
|
||||
voluptate.
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li class="list__item">Close to the beach</li>
|
||||
<li class="list__item">Breakfast included</li>
|
||||
<li class="list__item">Free airport shuttle</li>
|
||||
<li class="list__item">Free wifi in all rooms</li>
|
||||
<li class="list__item">Air conditioning and heating</li>
|
||||
<li class="list__item">Pets allowed</li>
|
||||
<li class="list__item">We speak all languages</li>
|
||||
<li class="list__item">Perfect for families</li>
|
||||
</ul>
|
||||
|
||||
<div class="recommend">
|
||||
<p class="recommend__count">
|
||||
Lucy and 3 other friends recommend this hotel.
|
||||
</p>
|
||||
<div class="recommend__friends">
|
||||
<img
|
||||
src="img/user-3.jpg"
|
||||
alt="Friend 1"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
<img
|
||||
src="img/user-4.jpg"
|
||||
alt="Friend 2"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
<img
|
||||
src="img/user-5.jpg"
|
||||
alt="Friend 3"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
<img
|
||||
src="img/user-6.jpg"
|
||||
alt="Friend 4"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-reviews">User reviews</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -29,6 +29,7 @@ Grey dark 3: #999
|
||||
--color-grey-dark-3: #999;
|
||||
|
||||
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
|
||||
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
@@ -185,3 +185,111 @@
|
||||
text-align: center;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
display: flex;
|
||||
|
||||
&__photo {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Overview
|
||||
.overview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-grey-light-2);
|
||||
|
||||
&__heading {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
margin-right: auto; // NOTE: to imitate flex: 1 effect but with a small final box, instead of one that extends all the space
|
||||
display: flex; // NOTE: because svg behave like inline so is either this or set line-height: 0 and font-size: 0;
|
||||
}
|
||||
|
||||
&__icon-star,
|
||||
&__icon-location {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
|
||||
&__location {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
&__icon-location {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&__rating {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
margin-left: 3rem;
|
||||
padding: 0 2.25rem;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__rating-average {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
&__rating-count {
|
||||
font-weight: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
// btn
|
||||
.btn-inline {
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: inherit; // NOTE: to make it more reusable
|
||||
border-bottom: 1px solid currentColor;
|
||||
padding-bottom: 2px;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-grey-dark-1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
animation: pulsate 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
transform: scale(1); // NOTE: needs an initial value in order to animate
|
||||
box-shadow: none;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
.header {
|
||||
height: 7rem;
|
||||
background-color: #fff;
|
||||
border-bottom: var(--color-grey-light-2);
|
||||
border-bottom: 1px solid var(--color-grey-light-2);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -33,6 +33,26 @@
|
||||
.hotel-view {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
height: 80rem; // temporary
|
||||
.detail {
|
||||
display: flex;
|
||||
padding: 4.5rem;
|
||||
gap: 4.5rem;
|
||||
|
||||
background-color: var(--color-grey-light-1);
|
||||
border-bottom: 1px solid var(--color-grey-light-2);
|
||||
}
|
||||
|
||||
.description {
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-light);
|
||||
padding: 3rem;
|
||||
flex: 0 0 60%;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.user-reviews {
|
||||
background-color: blue;
|
||||
flex: 1;
|
||||
}
|
||||
Reference in new issue
Block a user