finishing index layout
This commit is contained in:
parent
e52de768a8
commit
cee8aa6ba8
@ -4,29 +4,30 @@ function Footer() {
|
||||
return (
|
||||
<footer className={"bg-secondary footer-container"}>
|
||||
<div className={"content text-left footer-section"}>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>LOCATION</h2>
|
||||
<div className={"menu-list"}>
|
||||
<h2 className={'font-bold text-base'}>Region</h2>
|
||||
<a href={'#'} className={'text-sm block'}>Jawa</a>
|
||||
<a href={'#'} className={'text-sm block'}>Kalimantan</a>
|
||||
<a href={'#'} className={'text-sm block'}>Nusa Tenggara</a>
|
||||
<a href={'#'} className={'text-sm block'}>Bali</a>
|
||||
<a href={'#'} className={'text-sm block'}>Papua</a>
|
||||
<a href={'#'} className={'text-sm block'}>Sulawesi</a>
|
||||
<a href={'#'} className={'text-sm block'}>Sumatra</a>
|
||||
</div>
|
||||
<div className={'menu-list'}>
|
||||
<h2 className={'font-bold text-base'}>Location</h2>
|
||||
<a href={'#'} className={'text-sm block'}>Highest Rated</a>
|
||||
<a href={'#'} className={'text-sm block'}>Lowest Rated</a>
|
||||
<a href={'#'} className={'text-sm block'}>Recently Added</a>
|
||||
<a href={'#'} className={'text-sm block'}>Random</a>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>REGION</h2>
|
||||
<a href={'#'} className={'text-sm block'}>Jawa</a>
|
||||
<a href={'#'} className={'text-sm block'}>Kalimantan</a>
|
||||
<a href={'#'} className={'text-sm block'}>Nusa Tenggara</a>
|
||||
<a href={'#'} className={'text-sm block'}>Papua</a>
|
||||
<a href={'#'} className={'text-sm block'}>Sulawesi</a>
|
||||
<a href={'#'} className={'text-sm block'}>Sumatra</a>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>MORE</h2>
|
||||
<div className={"menu-list"}>
|
||||
<h2 className={'font-bold text-base'}>More</h2>
|
||||
<a href={"#"} className={'text-sm block'}>On this day</a>
|
||||
<a href={"#"} className={'text-sm block'}>Site updates</a>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>SITE DETAILS</h2>
|
||||
<div className={"menu-list"}>
|
||||
<h2 className={'font-bold text-base'}>Site Details</h2>
|
||||
<a href={'#'} className={'text-sm block'}>Faq</a>
|
||||
<a href={'#'} className={'text-sm block'}>Privacy policy</a>
|
||||
<a href={'#'} className={'text-sm block'}>Feedback</a>
|
||||
|
||||
@ -8,3 +8,24 @@
|
||||
.footer-section a {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
float: left;
|
||||
padding-right: 30px;
|
||||
margin: 0 30px 20px 0;
|
||||
}
|
||||
|
||||
.menu-list h2 {
|
||||
color: #939393;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 425px) {
|
||||
.menu-list a {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.menu-list h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
@ -42,7 +42,7 @@ function Header() {
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
<button onClick={onDropdown} className="dropdown-menu" style={{ backgroundColor: "#4b4b4b", padding: 5, margin: 'auto 0', borderRadius: 10, marginLeft: 'auto' }}>
|
||||
<button onClick={onDropdown} className="dropdown-menu bg-secondary" style={{ padding: 5, margin: 'auto 0', borderRadius: 10, marginLeft: 'auto' }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -39,7 +39,7 @@ function Home() {
|
||||
<SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
|
||||
{data.new_places.map((x: NewPlaces) => (
|
||||
<div className={"recently-added-section-card"}>
|
||||
<div className={'border-secondary'} style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7, borderWidth: 1 }}>
|
||||
<div className={'border-secondary recently-img-container'}>
|
||||
<img alt={x.name} src={x.thumbnail} loading="eager" style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
<div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
|
||||
@ -47,22 +47,22 @@ function Home() {
|
||||
<p className={'text-xs mt-1'}>{x.location}</p>
|
||||
</div>
|
||||
<div className={"flex flex-row items-center mb-3"}>
|
||||
<div className={'mr-3'}>
|
||||
<div className={'mr-3 users-score-bar'}>
|
||||
<p className={'text-sm text-center'}>{x.critic_rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
|
||||
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<p className={"text-sm text-tertiary"}>critic score ({x.critic_voters})</p>
|
||||
<p className={"users-score"}>critic score ({x.critic_voters})</p>
|
||||
</div>
|
||||
<div className={"flex flex-row items-center"}>
|
||||
<div className={'mr-3'}>
|
||||
<div className={'mr-3 users-score-bar'}>
|
||||
<p className={'text-sm text-center'}>{x.user_rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: ` ${x.user_rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<p className={'text-sm text-tertiary'}>user score ({x.user_voters})</p>
|
||||
<p className={'users-score'}>user score ({x.user_voters})</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -85,7 +85,7 @@ function Home() {
|
||||
<div className={"flex flex-row user-engagement"}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
|
||||
<p className={"mr-3 ml-1"}>{x.likes_count}</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="16" viewBox="0 -960 960 960" width="18"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
|
||||
<svg style={{ marginTop: 2}} stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
|
||||
<p className={"ml-1"}>{x.comments_count}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,9 +95,40 @@ function Home() {
|
||||
</section>
|
||||
{/* END RECENT NEWS / EVENT SECTION */}
|
||||
|
||||
{/* LOCATION CRITICS BEST AND USERS BEST SECTION */}
|
||||
|
||||
<section className={"mt-10"}>
|
||||
<SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
|
||||
<div>
|
||||
{popular_user_review.data.map((x) => (
|
||||
<div className={'text-sm reviews-container'}>
|
||||
<div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
|
||||
<img src={x.thumbnail} style={{ width: '100%' }} />
|
||||
</div>
|
||||
<p className={"text-sm location-titles"}>{x.place_name}</p>
|
||||
<p className={'text-xs mb-2'}>{x.location}</p>
|
||||
<p className={'text-sm'}>{x.username}</p>
|
||||
<div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
|
||||
<p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ clear: 'both'}} className={'mb-3'}/>
|
||||
<div className={'text-sm'}>
|
||||
{x.message}
|
||||
<a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
|
||||
<section className={"mt-10"}>
|
||||
<section className={"mt-10 mb-10"}>
|
||||
<div class={"grid grid-cols-4 lg:gap-12"}>
|
||||
<div className={'col-span-4 lg:col-span-2 trending-section'}>
|
||||
<SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
|
||||
@ -107,8 +138,8 @@ function Home() {
|
||||
<div className={"mb-2 trending-image-container"}>
|
||||
<img src={x.thumbnail} loading={"lazy"} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
<p>{x.name}</p>
|
||||
<p className={"text-xs"}>{x.location}</p>
|
||||
<p className={"location-title"}>{x.name}</p>
|
||||
<p className={"text-xs location-title"}>{x.location}</p>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
@ -158,36 +189,6 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* LOCATION CRITICS BEST AND USERS BEST SECTION */}
|
||||
|
||||
<section className={"mt-10"}>
|
||||
<SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
|
||||
<div>
|
||||
{popular_user_review.data.map((x) => (
|
||||
<div className={'text-sm'} style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
|
||||
<div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
|
||||
<img src={x.thumbnail} style={{ width: '100%' }} />
|
||||
</div>
|
||||
<p className={"text-sm location-titles"}>{x.place_name}</p>
|
||||
<p className={'text-xs mb-2'}>{x.location}</p>
|
||||
<p className={'text-sm'}>{x.username}</p>
|
||||
<div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
|
||||
<p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ clear: 'both'}} className={'mb-3'}/>
|
||||
<div>
|
||||
{x.message}
|
||||
<a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.main-content {
|
||||
padding: 20px 30px;
|
||||
padding: 20px 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -59,6 +59,12 @@
|
||||
float: left;
|
||||
}
|
||||
|
||||
.users-score {
|
||||
color: #a8adb3;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.critics-users-rating-container {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
@ -69,6 +75,23 @@
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.recently-img-container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
border-radius: 7px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
.reviews-container {
|
||||
display: inline-block;
|
||||
width: 33.3%;
|
||||
padding: 10px 2% 20px;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.recently-added-section-card {
|
||||
width: 24.3%;
|
||||
@ -86,6 +109,16 @@
|
||||
.trending-section {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.reviews-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.reviews-container:nth-child(-n+2) {
|
||||
border-bottom: 1px solid #38444d;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 625px) {
|
||||
@ -116,6 +149,10 @@
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 425px) {
|
||||
@ -123,8 +160,14 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.location-title {
|
||||
font-size: 10px;
|
||||
.news-link {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.recently-img-container {
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.critics-users-image {
|
||||
@ -142,4 +185,15 @@
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
.users-score {
|
||||
font-size: .75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.users-score-bar p {
|
||||
font-size: 0.75rem;;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user