Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 8c3cbf8e by jaymehta
Options

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents cf1a2379 9f6e93ca
Inline Side-by-side
Showing 14 changed files with 301 additions and 166 deletions
components/blog-details/BlogsDetailInner.js
...@@ -12,7 +12,7 @@ const BlogsDetailInner = ({ blog }) => { ...@@ -12,7 +12,7 @@ const BlogsDetailInner = ({ blog }) => {
<section className="blog-detail-inner-session"> <section className="blog-detail-inner-session">
<div className="container"> <div className="container">
<div className="row align-items-center mb-3"> <div className="row align-items-center mb-3">
<div className="col-md-6"> <div className="col-6">
<div className="profile"> <div className="profile">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} />
...@@ -20,7 +20,7 @@ const BlogsDetailInner = ({ blog }) => { ...@@ -20,7 +20,7 @@ const BlogsDetailInner = ({ blog }) => {
<div className="name">{mainBlog?.attributes?.name}</div> <div className="name">{mainBlog?.attributes?.name}</div>
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-6">
<div className="date"> <div className="date">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" />
......
components/blog-details/MostReadBlogs.js
...@@ -32,84 +32,81 @@ const MostReadBlogs = () => { ...@@ -32,84 +32,81 @@ const MostReadBlogs = () => {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-12 position-relative"> <div className="col-12">
<Swiper <div className="position-relative">
slidesPerView={1} <Swiper
// autoplay={{ slidesPerView={1}
// delay: 2500, // autoplay={{
// disableOnInteraction: false // delay: 2500,
// }} // disableOnInteraction: false
// spaceBetween={10} // }}
navigation={{ nextEl: ".most-read-blog-arrow-left", prevEl: ".most-read-blog-arrow-right" }} // spaceBetween={10}
breakpoints={{ navigation={{ nextEl: ".most-read-blog-arrow-left", prevEl: ".most-read-blog-arrow-right" }}
640: { breakpoints={{
slidesPerView: 1, 640: {
spaceBetween: 20 slidesPerView: 1,
}, spaceBetween: 20
768: { },
slidesPerView: 2, 768: {
spaceBetween: 40 slidesPerView: 2,
}, spaceBetween: 40
1024: { },
slidesPerView: 3, 1024: {
spaceBetween: 20 slidesPerView: 3,
} spaceBetween: 20
}} }
modules={[Navigation, Autoplay]} }}
className="mySwiper01 mySwiper02" modules={[Navigation, Autoplay]}
> className="mySwiper01 mySwiper02"
{BlogData && >
BlogData.map(data => { {BlogData &&
return ( BlogData.map(data => {
<SwiperSlide> return (
<motion.div <SwiperSlide>
variants={zoomIn("left", 0.3)} <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
initial={"hidden"} <div className="blog-item">
whileInView={"show"} <div className="img-wrapper">
viewport={{ once: false, amount: 0.2 }}
>
<div className="blog-item">
<div className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="top-rated">{data.flag}</div>
</div>
<div className="info">
<div className="read-row">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" /> <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span> </span>
<div className="">{data.read}</div> <div className="top-rated">{data.flag}</div>
</div> </div>
<div className="title">{data.title}</div> <div className="info">
<div className="discription">{data.discription}</div> <div className="read-row">
<div className="read-more"> <span className="image-container">
<Button href="/listing" variant="primary"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
Read More </span>
</Button> <div className="">{data.read}</div>
</div>
<div className="title">{data.title}</div>
<div className="discription">{data.discription}</div>
<div className="read-more">
<Button href="/listing" variant="primary">
Read More
</Button>
</div>
</div> </div>
</div> </div>
</div> </motion.div>
</motion.div> </SwiperSlide>
</SwiperSlide> );
); })}
})} </Swiper>
</Swiper> <div className="swiper-nav">
<div className="swiper-nav"> <div className="navbutton d-flex justify-content-between ">
<div className="navbutton d-flex justify-content-between "> <button className="most-read-blog-arrow-right arrow">
<button className="most-read-blog-arrow-right arrow"> <span className="image-container">
<span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" /> </span>
</span> </button>
</button> <button className="most-read-blog-arrow-left arrow">
<button className="most-read-blog-arrow-left arrow"> <span className="image-container">
<span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" /> </span>
</span> </button>
</button>
</div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
components/blog/BlogItem.js
...@@ -300,7 +300,7 @@ const BlogsItem = ({blogs}) => { ...@@ -300,7 +300,7 @@ const BlogsItem = ({blogs}) => {
<div className="col-12"> <div className="col-12">
<div className="row"> <div className="row">
{blogs && {blogs &&
blogs.map(data => { blogs?.map(data => {
return ( return (
<div className="col-md-4"> <div className="col-md-4">
<div className="blog-item"> <div className="blog-item">
......
components/common/ActiveLink.js 0 → 100644
import Link from "next/link"
import { useRouter } from "next/router"
import React, { Children } from "react"
const ActiveLink = ({ children, activeClassName, ...props }) => {
const { asPath } = useRouter()
const child = Children.only(children)
const childClassName = child.props.className || ''
// pages/index.js will be matched via props.href
// pages/about.js will be matched via props.href
// pages/[slug].js will be matched via props.as
const className =
asPath === props.href || asPath === props.as
? `${childClassName} ${activeClassName}`.trim()
: childClassName
return (
<Link {...props}>
{React.cloneElement(child, {
className: className || null,
})}
</Link>
)
}
// ActiveLink.propTypes = {
// activeClassName: PropTypes.string.isRequired,
// }
export default ActiveLink
\ No newline at end of file \ No newline at end of file
components/detail/GuestReviews.js
...@@ -99,8 +99,8 @@ const GuestReviews = ({ activityById }) => { ...@@ -99,8 +99,8 @@ const GuestReviews = ({ activityById }) => {
<StarRatings <StarRatings
className="col-3 mx-2" className="col-3 mx-2"
rating={data.attributes.rating} rating={data.attributes.rating}
starRatedColor="yellow" // Set the rated color to yellow starRatedColor="#ffe20" // Set the rated color to yellow
starHoverColor="yellow" // Set the hover color to yellow starHoverColor="#ffe20" // Set the hover color to yellow
changeRating={() => {}} changeRating={() => {}}
numberOfStars={5} numberOfStars={5}
name="rating" name="rating"
...@@ -141,8 +141,8 @@ const GuestReviews = ({ activityById }) => { ...@@ -141,8 +141,8 @@ const GuestReviews = ({ activityById }) => {
<StarRatings <StarRatings
className="col-3 mx-2" className="col-3 mx-2"
rating={rating} rating={rating}
starRatedColor="yellow" // Set the rated color to yellow starRatedColor="#ffe20" // Set the rated color to yellow
starHoverColor="yellow" // Set the hover color to yellow starHoverColor="#ffe20" // Set the hover color to yellow
changeRating={handleRatingChange} changeRating={handleRatingChange}
numberOfStars={5} numberOfStars={5}
name="rating" name="rating"
......
components/detail/SimilarExperiences.js
...@@ -117,7 +117,7 @@ const SimilarExperiences = ({ allActivitiesData }) => { ...@@ -117,7 +117,7 @@ const SimilarExperiences = ({ allActivitiesData }) => {
<div className="title">{data.title}</div> <div className="title">{data.title}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
8.8 <span className="number">8.8</span>
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
......
components/home/BrowseExperiences.js
...@@ -91,7 +91,7 @@ const BrowseExperiences = ({ allActivitiesData }) => { ...@@ -91,7 +91,7 @@ const BrowseExperiences = ({ allActivitiesData }) => {
<div className="title">{data?.attributes?.name}</div> <div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
{data?.attributes?.rating} <span className="number">{data?.attributes?.rating}</span>
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
......
components/home/ProductItem.js
...@@ -73,7 +73,7 @@ const ProductItem = () => { ...@@ -73,7 +73,7 @@ const ProductItem = () => {
<div className="title">{data.title}</div> <div className="title">{data.title}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
8.8 <span className="number">8.8</span>
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
......
components/home/Testimonial.js
...@@ -52,8 +52,8 @@ const Testimonial = ({ testimonial }) => { ...@@ -52,8 +52,8 @@ const Testimonial = ({ testimonial }) => {
<div className="rating"> <div className="rating">
<StarRatings <StarRatings
rating={rating} rating={rating}
starRatedColor="yellow" // Set the rated color to yellow starRatedColor="#ffe200" // Set the rated color to yellow
starHoverColor="yellow" // Set the hover color to yellow starHoverColor="#ffe200" // Set the hover color to yellow
changeRating={handleRatingChange} changeRating={handleRatingChange}
numberOfStars={5} numberOfStars={5}
name='rating' name='rating'
......
components/layout/Header.js
...@@ -10,6 +10,7 @@ import { useRouter } from "next/router"; ...@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
import { getWishlists } from "../../redux/actions/activityAction"; import { getWishlists } from "../../redux/actions/activityAction";
import { Typeahead } from "react-bootstrap-typeahead"; import { Typeahead } from "react-bootstrap-typeahead";
import axios from "axios"; import axios from "axios";
import ActiveLink from "../common/ActiveLink";
const Header = () => { const Header = () => {
const { loadedUser } = useSelector(state => state.loadedUser); const { loadedUser } = useSelector(state => state.loadedUser);
...@@ -55,13 +56,22 @@ const Header = () => { ...@@ -55,13 +56,22 @@ const Header = () => {
<Navbar.Toggle aria-controls="navbarScroll" /> <Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll"> <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll> <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="/blog">Blogs</Nav.Link> <ActiveLink href="/blog" activeClassName="active">
<Nav.Link href="/gift-card" className="gift-card"> <a className="nav-link ">Blogs</a>
</ActiveLink>
<ActiveLink href="/gift-card" activeClassName="active ">
<a className="nav-link gift-card">Gift Card <span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span></a>
</ActiveLink>
{/* <Nav.Link href="/gift-card" className="gift-card">
Gift Card Gift Card
<span className="image-container"> <span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" /> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span> </span>
</Nav.Link> </Nav.Link> */}
</Nav> </Nav>
<Form className="d-flex me-3"> <Form className="d-flex me-3">
<div className="header-search"> <div className="header-search">
......
components/listing/ListingFilter.js
...@@ -201,28 +201,30 @@ const ListingFilter = () => { ...@@ -201,28 +201,30 @@ const ListingFilter = () => {
<div className="head">Date</div> <div className="head">Date</div>
</div> </div>
<div className="inner"> <div className="inner">
<div className="row"> <div className="data-filters-item">
<div className="col-6"> <div className="row">
<div>From</div> <div className="col-6 ">
<Space direction="vertical"> <label>From</label>
<DatePicker <Space direction="vertical">
onChange={(date, dateString) => { <DatePicker
console.log("date", date, dateString); onChange={(date, dateString) => {
dispatch(setActivityFilters({ filters: { ...activityFilters, startDate: dateString !== "" ? dateString : null } })); console.log("date", date, dateString);
}} dispatch(setActivityFilters({ filters: { ...activityFilters, startDate: dateString !== "" ? dateString : null } }));
/> }}
</Space> />
</div> </Space>
<div className="col-6"> </div>
<div>To</div> <div className="col-6">
<Space direction="vertical"> <label>To</label>
<DatePicker <Space direction="vertical">
onChange={(date, dateString) => { <DatePicker
console.log("date", date, dateString); onChange={(date, dateString) => {
dispatch(setActivityFilters({ filters: { ...activityFilters, endDate: dateString !== "" ? dateString : null } })); console.log("date", date, dateString);
}} dispatch(setActivityFilters({ filters: { ...activityFilters, endDate: dateString !== "" ? dateString : null } }));
/> }}
</Space> />
</Space>
</div>
</div> </div>
</div> </div>
</div> </div>
......
components/listing/ListingItems.js
...@@ -61,7 +61,7 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => ...@@ -61,7 +61,7 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
<div className="title">{data?.attributes?.name}</div> <div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
{data?.attributes?.rating} <span className="number">{data?.attributes?.rating}</span>
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
......
redux/reducers/blogReducer.js
import { FETCH_BLOGS_FAIL, FETCH_BLOGS_REQUEST, FETCH_BLOGS_SUCCESS, FETCH_BLOG_FAIL, FETCH_BLOG_REQUEST, FETCH_BLOG_SUCCESS, CLEAR_ERRORS } from "../constants/blogConstants"; import { FETCH_BLOGS_FAIL, FETCH_BLOGS_REQUEST, FETCH_BLOGS_SUCCESS, FETCH_BLOG_FAIL, FETCH_BLOG_REQUEST, FETCH_BLOG_SUCCESS, CLEAR_ERRORS } from "../constants/blogConstants";
export const blogsReducer = (state = { blogs: {} }, action) => { export const blogsReducer = (state = { blogs: [] }, action) => {
switch (action.type) { switch (action.type) {
case FETCH_BLOGS_REQUEST: case FETCH_BLOGS_REQUEST:
return { return {
......
styles/globals.css
...@@ -120,7 +120,7 @@ html { ...@@ -120,7 +120,7 @@ html {
body { body {
line-height: 1.4; line-height: 1.4;
font-family: "Sofia Pro", sans-serif !important; font-family: "Sofia Pro", sans-serif !important;
font-size: 16px !important; font-size: 0.833vw !important;
overflow-x: hidden; overflow-x: hidden;
font-weight: 400 !important; font-weight: 400 !important;
color: #000; color: #000;
...@@ -618,8 +618,8 @@ input:focus-visible { ...@@ -618,8 +618,8 @@ input:focus-visible {
p { p {
/* color: #000; /* color: #000;
font-family: "Sofia Pro Light"; */ font-family: "Sofia Pro Light"; */
font-size: 15px; font-size: 0.781vw;
line-height: 20px; line-height: 0.981vw;
} }
span.form-error, span.form-error,
...@@ -1928,6 +1928,12 @@ span.form-error, ...@@ -1928,6 +1928,12 @@ span.form-error,
position: relative; position: relative;
color: #000; color: #000;
} }
.browse-experiences-item .img-wrapper .image-container .image {
height: 220px !important;
background-color: #adadad;
border-radius: 24px 24px 0 0;
object-fit: cover !important;
}
.top-rated { .top-rated {
position: absolute; position: absolute;
...@@ -1952,8 +1958,13 @@ span.form-error, ...@@ -1952,8 +1958,13 @@ span.form-error,
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
margin-right: 10px; margin-right: 10px;
height: 23px; height: 23px;
display: flex;
align-items: center;
justify-content: center;
}
.info .rating-wishlist .rating .number{
padding-top: 0.2rem;
} }
.info .rating-wishlist .wishlist .image-container { .info .rating-wishlist .wishlist .image-container {
width: 19px; width: 19px;
display: block; display: block;
...@@ -1961,13 +1972,15 @@ span.form-error, ...@@ -1961,13 +1972,15 @@ span.form-error,
.info .rating-wishlist .rating .image-container { .info .rating-wishlist .rating .image-container {
width: 14px; width: 14px;
margin-top: -4px; /* margin-top: -4px; */
margin-left: 4px; margin-left: 4px;
} }
.product-info .wishlist-share > div {
margin-bottom: 1rem;
}
.browse-experiences-item .info .discription { .browse-experiences-item .info .discription {
font-size: 13px; font-size: 0.677vw;
line-height: 15px; line-height: 0.8vw;
color: #808080; color: #808080;
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -1989,8 +2002,8 @@ span.form-error, ...@@ -1989,8 +2002,8 @@ span.form-error,
} }
.browse-experiences-item .info .price { .browse-experiences-item .info .price {
font-size: 20px; font-size: 1.042vw;
line-height: 20px; line-height: 1.042vw;
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -2006,7 +2019,9 @@ span.form-error, ...@@ -2006,7 +2019,9 @@ span.form-error,
line-height: 11px; line-height: 11px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.browse-experiences-item .info .detail > div {
margin-bottom: 0.4rem;
}
.btn-outline-secondary { .btn-outline-secondary {
border: 1px solid #000; border: 1px solid #000;
font-size: 16px; font-size: 16px;
...@@ -2036,8 +2051,8 @@ span.form-error, ...@@ -2036,8 +2051,8 @@ span.form-error,
overflow: hidden; overflow: hidden;
} }
.gift-an-experience-inner .content .title { .gift-an-experience-inner .content .title {
font-size: 40px; font-size: 2.083vw;
line-height: 40px; line-height: 2.083vw;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
...@@ -2081,8 +2096,8 @@ span.form-error, ...@@ -2081,8 +2096,8 @@ span.form-error,
} }
.testimonial-item .name { .testimonial-item .name {
font-size: 24px; font-size: 1.25vw;
line-height: 24px; line-height: 1.25vw;
margin-top: 1rem; margin-top: 1rem;
} }
...@@ -2200,8 +2215,8 @@ footer hr { ...@@ -2200,8 +2215,8 @@ footer hr {
} }
.box-01 .head { .box-01 .head {
font-size: 20px; font-size: 1.042vw;
line-height: 20px; line-height: 1.042vw;
padding: 1rem; padding: 1rem;
} }
...@@ -2257,12 +2272,20 @@ footer hr { ...@@ -2257,12 +2272,20 @@ footer hr {
} }
.data-filters-item label { .data-filters-item label {
font-size: 14px; font-size: 0.729vw;
line-height: 0.729vw;
font-weight: 300; font-weight: 300;
display: flex;
align-items: center;
margin-bottom: 0.4rem;
} }
.form-select {
font-size: 0.833vw;
}
.data-filters-item label input { .data-filters-item label input {
margin-right: 0.2rem; margin-right: 0.4rem;
margin-top: -4px;
} }
.data-filters-item { .data-filters-item {
...@@ -2298,6 +2321,7 @@ footer hr { ...@@ -2298,6 +2321,7 @@ footer hr {
.box-01 .form-select { .box-01 .form-select {
border-color: #c3c3c3; border-color: #c3c3c3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem; padding: 0.575rem 2.55rem 0.575rem 0.95rem;
margin-bottom: 1rem;
} }
.box-01 .show-all { .box-01 .show-all {
...@@ -2522,8 +2546,8 @@ footer hr { ...@@ -2522,8 +2546,8 @@ footer hr {
} }
.product-info .location { .product-info .location {
font-size: 1.5rem; font-size: 1.25vw;
line-height: 1.5rem; line-height: 1.25vw;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
...@@ -2565,9 +2589,11 @@ footer hr { ...@@ -2565,9 +2589,11 @@ footer hr {
} }
.image-gallery-content .image-gallery-slide .image-gallery-image { .image-gallery-content .image-gallery-slide .image-gallery-image {
max-height: 100%; /* max-height: 100%; */
}
.image-gallery-content.image-gallery-thumbnails-bottom.fullscreen .image-gallery-thumbnail {
width: 100px;
} }
.breadcrumb-item + .breadcrumb-item::before { .breadcrumb-item + .breadcrumb-item::before {
content: ""; content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat; background: url(/images/icons/arrow-right-grey.svg) no-repeat;
...@@ -2734,8 +2760,8 @@ button:focus:not(:focus-visible) { ...@@ -2734,8 +2760,8 @@ button:focus:not(:focus-visible) {
display: none; display: none;
} }
.accordion-01 .accordion-button { .accordion-01 .accordion-button {
font-size: 20px; font-size: 1.042vw;
line-height: 28px; line-height: 1.042vw;
color: #000000; color: #000000;
position: relative; position: relative;
padding-top: 30px !important; padding-top: 30px !important;
...@@ -2815,7 +2841,8 @@ button:focus:not(:focus-visible) { ...@@ -2815,7 +2841,8 @@ button:focus:not(:focus-visible) {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
} }
.active>.page-link, .page-link.active{ .active > .page-link,
.page-link.active {
background-color: #0070bd; background-color: #0070bd;
border-color: #0070bd; border-color: #0070bd;
} }
...@@ -3258,7 +3285,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3258,7 +3285,7 @@ input[type="number"]::-webkit-outer-spin-button {
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
font-size: 13px; font-size: 0.677vw;
font-weight: 700; font-weight: 700;
} }
...@@ -3281,8 +3308,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3281,8 +3308,8 @@ input[type="number"]::-webkit-outer-spin-button {
} }
.blog-item .info .title { .blog-item .info .title {
font-size: 20px; font-size: 1.042vw;
line-height: 24px; line-height: 1.542vw;
margin-bottom: 1rem; margin-bottom: 1rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -3302,8 +3329,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3302,8 +3329,8 @@ input[type="number"]::-webkit-outer-spin-button {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.blog-item .info .read-more .btn { .blog-item .info .read-more .btn {
font-size: 13px; font-size: 0.677vw;
line-height: 15px; line-height: 0.677vw;
padding-top: 0.675rem; padding-top: 0.675rem;
padding-bottom: 0.675rem; padding-bottom: 0.675rem;
} }
...@@ -3364,8 +3391,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3364,8 +3391,8 @@ input[type="number"]::-webkit-outer-spin-button {
display: block; display: block;
} }
.blog-detail-inner-session h2 { .blog-detail-inner-session h2 {
font-size: 32px; font-size: 1.667vw;
line-height: 38px; line-height: 1.967vw;
font-weight: 400; font-weight: 400;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
...@@ -3432,10 +3459,10 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3432,10 +3459,10 @@ input[type="number"]::-webkit-outer-spin-button {
display: inline-block; display: inline-block;
/* border: 1px solid #000; */ /* border: 1px solid #000; */
border-radius: 12px; border-radius: 12px;
font-size: 22px; font-size: 1.146vw;
line-height: 22px; line-height: 22px;
margin: 0.5rem; margin: 0.5rem;
min-width: 155px; min-width: 9vw;
text-align: center; text-align: center;
background: #f7f5f1; background: #f7f5f1;
display: flex; display: flex;
...@@ -3498,7 +3525,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3498,7 +3525,7 @@ input[type="number"]::-webkit-outer-spin-button {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.gift-card-rt .title { .gift-card-rt .title {
font-size: 32px; font-size: 1.667vw;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.gift-card-amt { .gift-card-amt {
...@@ -3699,6 +3726,10 @@ img:hover { ...@@ -3699,6 +3726,10 @@ img:hover {
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link.active {
color: #000;
font-weight: bold;
}
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
font-size: 0.833vw; font-size: 0.833vw;
...@@ -3748,6 +3779,22 @@ img:hover { ...@@ -3748,6 +3779,22 @@ img:hover {
} }
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
.swiper-nav,
.home_nav {
margin-left: -25px;
}
p {
font-size: 1.3vw;
line-height: 1.5vw;
}
.testimonial-item .name {
font-size: 1.85vw;
line-height: 2vw;
margin-top: 1rem;
}
body {
font-size: 1.264vw !important;
}
.product-info .product-name { .product-info .product-name {
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
...@@ -3779,41 +3826,82 @@ img:hover { ...@@ -3779,41 +3826,82 @@ img:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.gift-card-amt ul li a, .gift-card-amt ul li label > span { .gift-card-amt ul li a,
.gift-card-amt ul li label {
min-width: 40vw;
}
.blog-detail-inner-session h2 {
font-size: 4.867vw;
line-height: 6.967vw;
margin-bottom: 1rem;
}
.blog-item .top-rated {
font-size: 2.8vw;
}
.blog-item .info .read-more .btn {
font-size: 3vw;
line-height: 3vw;
}
.blog-item .info .title {
font-size: 1.2rem;
line-height: 1.5rem;
}
p {
font-size: 0.9rem;
line-height: 1.5rem;
}
.product-info .location {
font-size: 1.3rem;
line-height: 1.5rem;
}
.browse-experiences-item .info .discription {
font-size: 0.813rem;
line-height: 1rem;
}
.browse-experiences-item .info .price {
font-size: 1rem;
line-height: 1.15rem;
}
body {
font-size: 0.875rem !important;
}
.gift-card-amt ul li a,
.gift-card-amt ul li label > span {
font-size: 12px; font-size: 12px;
} }
.gift-card-amt ul li a, .gift-card-amt ul li label { .gift-card-amt ul li a,
.gift-card-amt ul li label {
font-size: 16px; font-size: 16px;
height: 70px; height: 70px;
} }
.s-page-session { .s-page-session {
margin: 3rem 0; margin: 3rem 0;
} }
.accordion-01 .accordion-button { .accordion-01 .accordion-button {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
padding-top: 10px !important; padding-top: 10px !important;
padding-bottom: 10px !important; padding-bottom: 10px !important;
} }
.faqs-session { .faqs-session {
padding: 1rem 0 3rem; padding: 1rem 0 3rem;
} }
.availability-wrappper li { .availability-wrappper li {
margin: 0.5rem 0.5rem; margin: 0.5rem 0.5rem;
font-size: 14px; font-size: 14px;
} }
.availability-wrappper { .availability-wrappper {
margin-top: 0rem; margin-top: 0rem;
} }
.image-container.btn-gift { .image-container.btn-gift {
width: 3vw; width: 3vw;
} }
.box-01 .head { .box-01 .head {
font-size: 16px; font-size: 1rem;
line-height: 18px; line-height: 1.2rem;
padding: 1rem; padding: 1rem;
} }
.sub-categories a{ .sub-categories a {
font-size: 12px; font-size: 12px;
padding: 1rem; padding: 1rem;
height: 2rem; height: 2rem;
...@@ -4005,7 +4093,7 @@ img:hover { ...@@ -4005,7 +4093,7 @@ img:hover {
.our-mission .inner .title { .our-mission .inner .title {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
} }
.page-title-one { .page-title-one {
background: url(/images/banner/about-us-m.png) no-repeat; background: url(/images/banner/about-us-m.png) no-repeat;
} }
...@@ -4036,6 +4124,13 @@ img:hover { ...@@ -4036,6 +4124,13 @@ img:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.form-select {
font-size: 0.9rem;
}
.data-filters-item label {
font-size: 0.8rem;
line-height: 1rem;
}
.container-fluid { .container-fluid {
max-width: 100vw; max-width: 100vw;
} }
...@@ -4065,8 +4160,8 @@ img:hover { ...@@ -4065,8 +4160,8 @@ img:hover {
} }
.signUp-to-experience-our-platform .title { .signUp-to-experience-our-platform .title {
font-size: 32px; font-size: 1.5rem;
line-height: 33px; line-height: 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
...@@ -4092,8 +4187,8 @@ img:hover { ...@@ -4092,8 +4187,8 @@ img:hover {
} }
.gift-an-experience-inner .content .title { .gift-an-experience-inner .content .title {
font-size: 32px; font-size: 2rem;
line-height: 35px; line-height: 2rem;
} }
.gift-an-experience-inner { .gift-an-experience-inner {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!