mirror of
https://github.com/yusufipk/trillo-react.git
synced 2026-09-11 10:56:15 +00:00
styled review section
This commit is contained in:
Yusuf Ipek
+3
-1
@@ -4,6 +4,7 @@
|
||||
@import "./SASS/abstracts/include-media";
|
||||
|
||||
@import "./SASS/components/buttons";
|
||||
@import "./SASS/components/components";
|
||||
|
||||
@import "./SASS/base/animations";
|
||||
@import "./SASS/base/typography";
|
||||
@@ -11,4 +12,5 @@
|
||||
@import "./SASS/base/utilities";
|
||||
|
||||
@import "./SASS/layout/layout";
|
||||
@import "./SASS/layout/home";
|
||||
|
||||
@import "./SASS/pages/home";
|
||||
|
||||
@@ -44,9 +44,9 @@ $big-font-size: 5rem;
|
||||
// OTHER
|
||||
|
||||
$shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
|
||||
$shadow-description: 0 2rem 5rem rgba($color-black, 0.06);
|
||||
$shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
|
||||
$shadow-link: 0 1rem 2rem rgba($color-black, 0.4);
|
||||
$shadow-blurry: 0 2rem 6rem rgba($color-black, 0.3);
|
||||
|
||||
$border-radius-small: 0.2rem;
|
||||
$border-radius-default: 0.3rem;
|
||||
$line: 1px solid $color-grey-light-2;
|
||||
|
||||
@@ -11,3 +11,7 @@ body {
|
||||
letter-spacing: 1px;
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
|
||||
.paragraph:not(:last-of-type) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@@ -9,9 +9,18 @@
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
& span {
|
||||
margin-left: 3px;
|
||||
transition: margin-left 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-grey-dark-1;
|
||||
animation: pulsate 1s infinite;
|
||||
// animation: pulsate 1s infinite;
|
||||
|
||||
span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
.list {
|
||||
list-style-type: none;
|
||||
margin: 3rem 0;
|
||||
padding: 3rem 0;
|
||||
border-top: $line;
|
||||
border-bottom: $line;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__item {
|
||||
flex: 0 0 50%;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
&__item::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 0.7rem;
|
||||
|
||||
background-color: $color-primary;
|
||||
mask-image: url(../../commons/img/chevron-thin-right.svg);
|
||||
mask-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend {
|
||||
font-size: 1.3rem;
|
||||
color: $color-grey-light-3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__photo {
|
||||
box-sizing: content-box;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
border-radius: 50%;
|
||||
border: 3px solid $color-white;
|
||||
}
|
||||
&__photo:not(:last-child) {
|
||||
margin-right: -1.5rem;
|
||||
}
|
||||
|
||||
&__count {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__friends {
|
||||
}
|
||||
}
|
||||
|
||||
.review {
|
||||
background-color: $color-white;
|
||||
box-shadow: $shadow-light;
|
||||
padding: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&__text {
|
||||
margin-bottom: 2rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__photo {
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
&__user-box {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__user-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
&__user-date {
|
||||
font-size: 1rem;
|
||||
color: $color-grey-dark-3;
|
||||
}
|
||||
|
||||
&__rating {
|
||||
color: $color-primary;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: 1;
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
top: -3.2rem;
|
||||
left: -1rem;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: $color-grey-light-2;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
}
|
||||
@@ -3,8 +3,6 @@
|
||||
margin: 8rem auto;
|
||||
background-color: $color-grey-light-2;
|
||||
box-shadow: $shadow-blurry;
|
||||
|
||||
min-height: 50rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -13,7 +11,31 @@
|
||||
|
||||
.hotel-view {
|
||||
background-color: $color-white;
|
||||
height: 80rem;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
padding: 4.5rem;
|
||||
background-color: $color-grey-light-1;
|
||||
border-bottom: $line;
|
||||
font-size: $normal-font-size;
|
||||
}
|
||||
|
||||
.description {
|
||||
background-color: $color-white;
|
||||
box-shadow: $shadow-description;
|
||||
padding: 3rem;
|
||||
flex: 0 0 60%;
|
||||
margin-right: 4.5rem;
|
||||
}
|
||||
|
||||
.user-reviews {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -210,7 +210,7 @@
|
||||
.overview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-grey-light-2;
|
||||
border-bottom: $line;
|
||||
|
||||
&__stars {
|
||||
margin-right: auto;
|
||||
@@ -2,6 +2,12 @@ import hotel1 from "../img/hotel-1.jpg";
|
||||
import hotel2 from "../img/hotel-2.jpg";
|
||||
import hotel3 from "../img/hotel-3.jpg";
|
||||
import sprite from "../img/sprite.svg";
|
||||
import user1 from "../img/user-1.jpg";
|
||||
import user2 from "../img/user-2.jpg";
|
||||
import user3 from "../img/user-3.jpg";
|
||||
import user4 from "../img/user-4.jpg";
|
||||
import user5 from "../img/user-5.jpg";
|
||||
import user6 from "../img/user-6.jpg";
|
||||
|
||||
function HotelView() {
|
||||
return (
|
||||
@@ -51,6 +57,78 @@ function HotelView() {
|
||||
<div className="overview__rating-count">429 votes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail">
|
||||
<div className="description">
|
||||
<p className="paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quos
|
||||
perspiciatis qui placeat omnis voluptatem porro alias, hic illum
|
||||
odio dicta. Asperiores minima dolor vero deleniti, quibusdam impedit
|
||||
nam voluptatem?
|
||||
</p>
|
||||
<p className="paragraph">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
|
||||
excepturi, reprehenderit voluptas architecto enim repudianda.
|
||||
</p>
|
||||
<ul className="list">
|
||||
<li className="list__item">Close to the beach</li>
|
||||
<li className="list__item">Breakfast included</li>
|
||||
<li className="list__item">Free airport shuttle</li>
|
||||
<li className="list__item">Free wifi in all rooms</li>
|
||||
<li className="list__item">Air conditioning and heating</li>
|
||||
<li className="list__item">Pets allowed</li>
|
||||
<li className="list__item">We speak all languages</li>
|
||||
<li className="list__item">Perfect for families</li>
|
||||
</ul>
|
||||
<div className="recommend">
|
||||
<p className="recommend__count">
|
||||
Lucy and 3 other friends recommend this hotel.
|
||||
</p>
|
||||
<div className="recommend__friends">
|
||||
<img src={user3} alt="Friend" className="recommend__photo" />
|
||||
<img src={user4} alt="Friend" className="recommend__photo" />
|
||||
<img src={user5} alt="Friend" className="recommend__photo" />
|
||||
<img src={user6} alt="Friend" className="recommend__photo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="user-reviews">
|
||||
<figure className="review">
|
||||
<blockquote className="review__text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
|
||||
beatae officia ipsum.
|
||||
</blockquote>
|
||||
<figcaption className="review__user">
|
||||
<img src={user1} alt="User" className="review__photo" />
|
||||
<div className="review__user-box">
|
||||
<p className="review__user-name">Nick Smith</p>
|
||||
<p className="review__user-date">Feb 23rd, 2017</p>
|
||||
</div>
|
||||
<div className="review__rating">7.8</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure className="review">
|
||||
<blockquote className="review__text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
|
||||
beatae officia ipsum.
|
||||
</blockquote>
|
||||
<figcaption className="review__user">
|
||||
<img src={user2} alt="User" className="review__photo" />
|
||||
<div className="review__user-box">
|
||||
<p className="review__user-name">Mary Thomas</p>
|
||||
<p className="review__user-date">Sept 13th, 2017</p>
|
||||
</div>
|
||||
<div className="review__rating">9.3</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<button className="btn-inline">
|
||||
Show all <span>→</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user