yusufipek/trillo-react
1
0
Fork 0
mirror of https://github.com/yusufipk/trillo-react.git synced 2026-09-12 03:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

styled review section

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-10 10:46:05 +03:00
parent 038b2f41ac
commit a796a86f4c
8 changed files with 236 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/commons/hotel-view/hotel-view.jsx
+78
View File
@@ -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>&rarr;</span>
</button>
</div>
</div>
</main>
);
}