Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 1e264089 by Ravindra Kanojiya
Options

updated home page

1 parent 7b495314
Inline Side-by-side
Showing 10 changed files with 198 additions and 11 deletions
components/home/Banner.js
......@@ -7,7 +7,8 @@ const Banner = () => {
const projects = {
responsive: {
0: {
items: 1
items: 1,
nav: false
},
450: {
items: 1
......@@ -31,7 +32,7 @@ const Banner = () => {
dots={false}
nav={true}
responsive={projects.responsive}
autoplay={false}
autoplay={true}
autoplayTimeout={5000}
center={false}
loop={false}
......@@ -66,7 +67,63 @@ const Banner = () => {
</div>
</div>
<div className="item">
<div className="slider-item slider-item-01">
<div className="slider-item slider-item-02">
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="item">
<div className="slider-item slider-item-03">
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="item">
<div className="slider-item slider-item-04">
<div className="d-table">
<div className="d-table-cell">
<div className="container">
......
components/home/LetDiscover.js
......@@ -9,7 +9,8 @@ const LetDiscover = () => {
const projects = {
responsive: {
0: {
items: 2
items: 2,
margin: 20
},
450: {
items: 3
......
components/layout/Footer.js
......@@ -4,6 +4,7 @@ import { Button } from "react-bootstrap";
const Footer = () => {
return (
<>
<footer>
<div className="container">
<div className="row">
......@@ -32,7 +33,7 @@ const Footer = () => {
</div>
<div className="row">
<div className="col-md-3">
<div className="footer-link">
<div className="footer-link mtp-0">
<h3>QUICK LINKS</h3>
<ul>
<li>
......@@ -137,6 +138,16 @@ const Footer = () => {
</div>
</div>
</footer>
<div className="copyright">
<div className="container">
<div className="row">
<div className="col-12">
<div>Copyright © 2024 ZanGO. All Rights Reserved</div>
</div>
</div>
</div>
</div>
</>
);
};
......
components/layout/Layout.js
......@@ -5,7 +5,7 @@ import Footer from "./Footer";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const Layout = ({ children, title = "", description = "" }) => {
const Layout = ({ children, title = "Zango", description = "" }) => {
return (
<div>
<Head>
......
styles/globals.css
......@@ -285,7 +285,7 @@ h6 {
transition: transform 0.5s;
transform: translateY(100px);
background-color: #fff;
border-radius: 0 0 20px 20px;
}
.header_wrap .navbar {
color: #fff;
......@@ -294,6 +294,10 @@ h6 {
left: 0;
top: 0;
z-index: 9;
border-radius: 0 0 20px 20px;
border-radius: 0rem 0rem 1.25rem 1.25rem;
background: #FFF;
box-shadow: 0px 4px 25px 2px rgba(0, 0, 0, 0.25);
}
.header_wrap.stick .navbar-expand-lg .navbar-nav .nav-link{
color: #000;
......@@ -319,8 +323,17 @@ h6 {
.slider-item.slider-item-01 {
background: url(/images/home-banner/01.jpg) no-repeat;
}
.slider-item.slider-item-02 {
background: url(/images/home-banner/02.jpg) no-repeat;
}
.slider-item.slider-item-03 {
background: url(/images/home-banner/03.jpg) no-repeat;
}
.slider-item.slider-item-04 {
background: url(/images/home-banner/04.jpg) no-repeat;
}
.home-banner{
padding-top: 135px;
padding-top: 119px;
margin-top: -135px;
}
.container-fluid {
......@@ -384,7 +397,7 @@ h6 {
.owl-custom01.owl-theme .owl-nav {
position: absolute;
left: 0;
top: calc(43% + 0px);
top: calc(33% + 0px);
margin: 0;
width: 100%;
}
......@@ -736,7 +749,13 @@ footer hr{
margin: 2.5rem 0;
opacity: inherit;
}
.copyright{
background: #000;
color: #fff;
font-size: 16px;
text-align: center;
padding: 1rem;
}
......@@ -769,4 +788,103 @@ footer hr{
width: 21px;
margin-left: 10px;
}
}
\ No newline at end of file
}
@media (max-width: 767px) {
footer .subscribe input {
width: 67%;
}
.footer-link h3 {
font-size: 20px;
}
footer .footer-link.mtp-0 {
padding-top: 0;
}
footer .footer-link {
padding-top: 2rem;
}
.signUp-to-experience-our-platform .title {
font-size: 32px;
line-height: 33px;
margin-bottom: 0.5rem;
}
.signUp-to-experience-our-platform-session{
background: url(../public/images/sign-up-exp-bg-m.png) no-repeat;
background-size: 100%;
object-fit: cover;
padding: 1rem;
color: #fff;
}
.testimonial-item .name {
font-size: 20px;
line-height: 22px;
}
.testimonial-item {
padding: 0 0rem;
}
.gift-an-experience-inner .img{
padding-top: 3rem;
}
.gift-an-experience-inner .content .title {
font-size: 32px;
line-height: 35px;
}
.gift-an-experience-inner {
padding: 1rem;
border-radius: 27px;
background: #F6F6F6 url(/images/gift-experience-bg-m.png) no-repeat center bottom;
}
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next {
right: calc(-9% + 1px);
}
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-prev {
left: calc(-9% + 1px);
}
.slider-item.slider-item-01 {
background: url(/images/home-banner/01-m.jpg) no-repeat;
}
.slider-item {
height: 200vw;
border-radius: 0 0 25px 25px;
background-position: 100% !important;
padding-top: 2rem;
}
.slider-item .d-table {
display: inherit!important;
}
.home-banner .banner-txt h1 {
font-size: 20px;
line-height: 22px;
}
.home-banner .banner-txt .title {
font-size: 32px;
line-height: 35px;
}
.searchbar-h input {
font-size: 13px;
}
.searchbar-h {
height: 55px;
padding: 1rem;
}
.searchbar-h .search-icon {
right: 8px;
top: 11px;
}
.searchbar-session {
margin-top: -33px;
}
.let-discover-session {
padding: 2rem 0;
}
.head01 .title {
font-size: 16px;
line-height: 18px;
}
.head01 h2 {
font-size: 32px;
line-height: 33px;
}
.carousal-c {
padding: 0 1rem;
}
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!