Commit 7b495314 by Ravindra Kanojiya

updated home page

1 parent f50d0658
Showing 130 changed files with 921 additions and 52 deletions
import dynamic from "next/dynamic";
import React from "react";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
const Banner = () => {
const projects = {
responsive: {
0: {
items: 1
},
450: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
};
return (
<>
<section className="home-banner">
<div>
<OwlCarousel
className="owl-theme owl-custom01"
margin={50}
items={5}
dots={false}
nav={true}
responsive={projects.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
>
<div className="item">
<div className="slider-item slider-item-01">
<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-01">
<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>
</OwlCarousel>
</div>
</section>
</>
);
};
export default Banner;
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
const GiftAnExperience = () => {
return (
<>
<section className="gift-an-experience-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="gift-an-experience-inner">
<div className="row align-items-center">
<div className="col-md-6">
<div className="content">
<div className="title">Gift An Experience For Any Occasion</div>
<div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
<div>
<Button variant="primary">Gift An Experience</Button>
</div>
</div>
</div>
<div className="col-md-6">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.png" />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default GiftAnExperience;
import React, { Fragment } from "react";
// import cities from "../../cities.json";
import users from "../../users.json";
import Banner from "./Banner";
import SearchBar from "./SearchBar";
import LetDiscover from "./LetDiscover";
import BrowseExperiences from "./BrowseExperiences";
import GiftAnExperience from "./GiftAnExperience";
import Testimonial from "./Testimonial";
import SignUpToExperienceOurPlatform from "./SignUpToExperienceOurPlatform";
const Home = () => {
// console.log(users);
// myAPIData()
const MyAPIData = () => {
users.map(mydata => {
return (
<div className="card">
<div className="content-section">
<h1>{mydata.first_name}</h1>
<p>{mydata.last_name}</p>
<p>{mydata.email}</p>
<div className="icon-group">
<span>F</span>
<span>T</span>
<span>I</span>
<span>Y</span>
</div>
<div className="btn-group">
<button>Message</button>
<button>Subscribe</button>
</div>
<div className="another-group">
<div>
<h3>20.4K</h3>
</div>
<div>
<h3>14.3K</h3>
</div>
<div>
<h3>12.8K</h3>
</div>
</div>
</div>
</div>
);
});
};
// console.log(users);
return (
<Fragment>
<main>
<div className="body-xyz">
{/* <MyAPIData /> */}
<div>Hello world!</div>
</div>
<Banner />
<SearchBar />
<LetDiscover />
<BrowseExperiences />
<GiftAnExperience />
<Testimonial />
<SignUpToExperienceOurPlatform />
</main>
</Fragment>
);
......
import dynamic from "next/dynamic";
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
const LetDiscover = () => {
const projects = {
responsive: {
0: {
items: 2
},
450: {
items: 3
},
600: {
items: 5
},
1000: {
items: 6
}
}
};
return (
<>
<section className="let-discover-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<div className="head01">
<div className="title">Lets </div>
<h2>Discover</h2>
</div>
<div className="view-all-btn">
<Button variant="primary">View All</Button>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="let-discover-carousal carousal-c">
<OwlCarousel
className="owl-theme owl-custom01"
margin={50}
items={6}
dots={false}
nav={true}
responsive={projects.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/01.png" />
</span>
<div className="title">All</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/02.png" />
</span>
<div className="title">Art & History</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/03.png" />
</span>
<div className="title">Experiential Dining </div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/04.png" />
</span>
<div className="title">Family</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/05.png" />
</span>
<div className="title">Fitness</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/06.png" />
</span>
<div className="title">Performing Arts</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/01.png" />
</span>
<div className="title">Other</div>
</a>
</div>
</OwlCarousel>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default LetDiscover;
import Image from 'next/image'
import React from 'react'
import { Button } from 'react-bootstrap'
const SearchBar = () => {
return (
<>
<section className='searchbar-session'>
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='searchbar-h'>
<input type='text' placeholder='Search for products, brands or categories' />
<Button className="search-icon">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
</span>
</Button>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default SearchBar
import React from 'react'
import { Button } from 'react-bootstrap'
const SignUpToExperienceOurPlatform = () => {
return (
<>
<section className='signUp-to-experience-our-platform-session'>
<div className='container'>
<div className='row justify-content-center'>
<div className='col-md-8'>
<div className='signUp-to-experience-our-platform'>
<div className='title'>Sign Up to experience our platform</div>
<div className='disc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
<div className=''><Button variant="primary">Gift An Experience</Button></div>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default SignUpToExperienceOurPlatform
import dynamic from "next/dynamic";
import Image from "next/image";
import React from "react";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
const Testimonial = () => {
const projects = {
responsive: {
0: {
items: 1
},
450: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
};
return (
<>
<section className="testimonial-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="testimonial-carousal">
<OwlCarousel
className="owl-theme owl-custom01"
margin={50}
items={6}
dots={false}
nav={true}
responsive={projects.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
>
<div className="item">
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</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 className="name">Erika Payne, Los Angeles CA</div>
</div>
</div>
<div className="item">
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</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 className="name">Erika Payne, Los Angeles CA</div>
</div>
</div>
<div className="item">
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</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 className="name">Erika Payne, Los Angeles CA</div>
</div>
</div>
</OwlCarousel>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default Testimonial;
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
const Footer = () => {
return <footer className="py-1">
<div>
footer
return (
<footer>
<div className="container">
<div className="row">
<div className="col-md-9">
<div className="footer-logo">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/Zango-logo-footer.svg" />
</span>
</div>
</footer>;
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
</div>
<div className="col-md-3">
<div className="footer-link">
<h3>VENDOR SIGN UP</h3>
<div className="">
<Button variant="light me-3">Log In</Button>
<Button variant="primary">Sign Up</Button>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<hr />
</div>
</div>
<div className="row">
<div className="col-md-3">
<div className="footer-link">
<h3>QUICK LINKS</h3>
<ul>
<li>
<a href="">About Us</a>
</li>
<li>
<a href="">Corporate Programs</a>
</li>
<li>
<a href="">Private Events</a>
</li>
<li>
<a href="">Promo T & Cs</a>
</li>
<li>
<a href="">Gifting</a>
</li>
</ul>
</div>
</div>
<div className="col-md-3">
<div className="footer-link">
<h3>CONTACT </h3>
<div className="icon-text">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/location.svg" />
</span>
<div className="text">
<a href="">Lorem ipsum dolor sit amet</a>
</div>
</div>
<div className="icon-text">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/email.svg" />
</span>
<div className="text">
<a href="mailTo:zango@gmail.com">zango@gmail.com</a>
</div>
</div>
<div className="icon-text">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/phone-call.svg" />
</span>
<div className="text">
<a href="">+91-8798798798</a>
</div>
</div>
</div>
</div>
<div className="col-md-3">
<div className="footer-link">
<h3>HELP</h3>
<ul>
<li>
<a href="">Terms & Policy</a>
</li>
<li>
<a href="">Careers</a>
</li>
<li>
<a href="">FAQs</a>
</li>
</ul>
</div>
</div>
<div className="col-md-3">
<div className="footer-link mb-3">
<h3>FOLLOW US ON</h3>
<div className="social-icon">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/facebook.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/twitter.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/instagram.svg" />
</span>
</a>
</div>
</div>
<div className="footer-link">
<h3>JOIN OUR COMMUNITY</h3>
<div>Subscribe to gt information, latest news and other interesting offers</div>
<div className="subscribe">
<form action="">
<div className="row">
<div className="col-12">
<input id="subscribe" type="text" placeholder="Email Address"/>
<label htmlFor="subscribe"><Button variable="primary">Subscribe </Button></label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</footer>
);
};
export default Footer;
......@@ -4,14 +4,65 @@ import Link from "next/link";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
const Header = () => {
const [isSticky, setIsSticky] = useState(false);
useEffect(() => {
const handleScroll = () => {
// Check if the scroll position is greater than a certain threshold
const scrollY = window.scrollY || window.pageYOffset;
setIsSticky(scrollY > 50);
};
// Attach the scroll event listener when the component mounts
window.addEventListener('scroll', handleScroll);
// Clean up the event listener when the component unmounts
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<header>
<div>
Header
<header className={`header_wrap ${isSticky ? 'stick' : ''}`}>
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<Navbar.Brand href="#">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="#action1">Blogs</Nav.Link>
<Nav.Link href="#action2" className="gift-card">
Gift Card
<span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Nav.Link>
</Nav>
<Form className="d-flex me-3">
<div className="header-search">
<Form.Control type="search" placeholder="Search" className="me-2" aria-label="Search" />
<Button className="search-icon" variant="outline-success">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
</span>
</Button>
</div>
</Form>
<Button className="me-3" variant="primary">
Sign Up
</Button>
<Button className="" variant="primary">
Log In
</Button>
</Navbar.Collapse>
</Container>
</Navbar>
</header>
);
};
......
/** @type {import('next').NextConfig} */
const webpack = require("webpack");
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.plugins.push(
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}));
return config;
},
env: {
stripePublishableKey: "pk_test_51LeAqWSD8iV80gmAKccLEZAm1mYnjlzkL1cJxWJKFaHEMPzArGRRECPOG64e8GX2Hd112zBq3vQ3xSVb5IZQCRmh00N3DRtRse"
},
images: {
domains: ["hoffersapi.logicloop.io", "hoffers.logicloop.io", "localhost"]
domains: ["localhost"]
}
};
......
......@@ -25,6 +25,7 @@
"react-dom": "18.2.0",
"react-js-pagination": "^3.0.3",
"react-multi-carousel": "^2.8.2",
"react-owl-carousel": "^2.3.3",
"react-phone-input-2": "^2.15.1",
"react-player": "^2.11.0",
"react-rating": "^2.0.5",
......
import "../styles/globals.css";
import { wrapper } from "../redux/store";
import { SessionProvider } from "next-auth/react";
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
return (
......
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
No preview for this file type
@font-face {
font-family: 'Sofia Pro Semi';
src: url('SofiaProSemiBold.eot');
src: local('Sofia Pro Semi Bold'), local('SofiaProSemiBold'),
url('SofiaProSemiBold.eot?#iefix') format('embedded-opentype'),
url('SofiaProSemiBold.woff2') format('woff2'),
url('SofiaProSemiBold.woff') format('woff'),
url('SofiaProSemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProRegular-Italic.eot');
src: local('Sofia Pro Regular Italic'), local('SofiaProRegular-Italic'),
url('SofiaProRegular-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProRegular-Italic.woff2') format('woff2'),
url('SofiaProRegular-Italic.woff') format('woff'),
url('SofiaProRegular-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Sofia Pro Semi';
src: url('SofiaProSemiBold-Italic.eot');
src: local('Sofia Pro Semi Bold Italic'), local('SofiaProSemiBold-Italic'),
url('SofiaProSemiBold-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProSemiBold-Italic.woff2') format('woff2'),
url('SofiaProSemiBold-Italic.woff') format('woff'),
url('SofiaProSemiBold-Italic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProLight.eot');
src: local('Sofia Pro Light'), local('SofiaProLight'),
url('SofiaProLight.eot?#iefix') format('embedded-opentype'),
url('SofiaProLight.woff2') format('woff2'),
url('SofiaProLight.woff') format('woff'),
url('SofiaProLight.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProExtraLight.eot');
src: local('Sofia Pro ExtraLight'), local('SofiaProExtraLight'),
url('SofiaProExtraLight.eot?#iefix') format('embedded-opentype'),
url('SofiaProExtraLight.woff2') format('woff2'),
url('SofiaProExtraLight.woff') format('woff'),
url('SofiaProExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProMedium-Italic.eot');
src: local('Sofia Pro Medium Italic'), local('SofiaProMedium-Italic'),
url('SofiaProMedium-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProMedium-Italic.woff2') format('woff2'),
url('SofiaProMedium-Italic.woff') format('woff'),
url('SofiaProMedium-Italic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProUltraLight-Italic.eot');
src: local('Sofia Pro UltraLight Italic'), local('SofiaProUltraLight-Italic'),
url('SofiaProUltraLight-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProUltraLight-Italic.woff2') format('woff2'),
url('SofiaProUltraLight-Italic.woff') format('woff'),
url('SofiaProUltraLight-Italic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProRegular.eot');
src: local('Sofia Pro Regular'), local('SofiaProRegular'),
url('SofiaProRegular.eot?#iefix') format('embedded-opentype'),
url('SofiaProRegular.woff2') format('woff2'),
url('SofiaProRegular.woff') format('woff'),
url('SofiaProRegular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProMedium.eot');
src: local('Sofia Pro Medium'), local('SofiaProMedium'),
url('SofiaProMedium.eot?#iefix') format('embedded-opentype'),
url('SofiaProMedium.woff2') format('woff2'),
url('SofiaProMedium.woff') format('woff'),
url('SofiaProMedium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProBold.eot');
src: local('Sofia Pro Bold'), local('SofiaProBold'),
url('SofiaProBold.eot?#iefix') format('embedded-opentype'),
url('SofiaProBold.woff2') format('woff2'),
url('SofiaProBold.woff') format('woff'),
url('SofiaProBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProExtraLight-Italic.eot');
src: local('Sofia Pro ExtraLight Italic'), local('SofiaProExtraLight-Italic'),
url('SofiaProExtraLight-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProExtraLight-Italic.woff2') format('woff2'),
url('SofiaProExtraLight-Italic.woff') format('woff'),
url('SofiaProExtraLight-Italic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProLight-Italic.eot');
src: local('Sofia Pro Light Italic'), local('SofiaProLight-Italic'),
url('SofiaProLight-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProLight-Italic.woff2') format('woff2'),
url('SofiaProLight-Italic.woff') format('woff'),
url('SofiaProLight-Italic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProBlack-Italic.eot');
src: local('Sofia Pro Black Italic'), local('SofiaProBlack-Italic'),
url('SofiaProBlack-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProBlack-Italic.woff2') format('woff2'),
url('SofiaProBlack-Italic.woff') format('woff'),
url('SofiaProBlack-Italic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProBlack.eot');
src: local('Sofia Pro Black'), local('SofiaProBlack'),
url('SofiaProBlack.eot?#iefix') format('embedded-opentype'),
url('SofiaProBlack.woff2') format('woff2'),
url('SofiaProBlack.woff') format('woff'),
url('SofiaProBlack.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProUltraLight.eot');
src: local('Sofia Pro UltraLight'), local('SofiaProUltraLight'),
url('SofiaProUltraLight.eot?#iefix') format('embedded-opentype'),
url('SofiaProUltraLight.woff2') format('woff2'),
url('SofiaProUltraLight.woff') format('woff'),
url('SofiaProUltraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Sofia Pro';
src: url('SofiaProBold-Italic.eot');
src: local('Sofia Pro Bold Italic'), local('SofiaProBold-Italic'),
url('SofiaProBold-Italic.eot?#iefix') format('embedded-opentype'),
url('SofiaProBold-Italic.woff2') format('woff2'),
url('SofiaProBold-Italic.woff') format('woff'),
url('SofiaProBold-Italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!