\r\n
\r\n \r\n {props.text}
\r\n\r\n
\r\n );\r\n}\r\n\r\nexport default Cards;","import React from 'react';\r\nimport '../App.css';\r\nimport { Button } from './Button';\r\nimport './HeroSection.css';\r\n\r\nfunction HeroSection() {\r\n return (\r\n Check out these EPIC Destinations!
\r\n\r\n
\r\n \r\n
\r\n - \r\n
- \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default HeroSection;","import React from 'react';\r\nimport './Footer.css';\r\nimport { Button } from './Button';\r\nimport { Link } from 'react-router-dom';\r\n\r\nfunction Footer() {\r\n return (\r\n ADVENTURE AWAITS
\r\nWhat are you waiting for?
\r\n\r\n \r\n GET STARTED\r\n \r\n \r\n WATCH TRAILER \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default Footer;","import React from 'react';\r\nimport '../../App.css';\r\nimport Cards from '../Cards';\r\nimport HeroSection from '../HeroSection';\r\nimport Footer from '../Footer';\r\n\r\nfunction Home() {\r\n return (\r\n <>\r\n \r\n Join the Adventure newsletter to receive our best vacation deals\r\n
\r\n\r\n You can unsubscribe at any time.\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n About Us
\r\n How it works\r\n Testimonials\r\n Careers\r\n Investors\r\n Terms of Service\r\n\r\n
\r\n Contact Us
\r\n Contact\r\n Support\r\n Destinations\r\n Sponsorships\r\n\r\n
\r\n \r\n
\r\n Videos
\r\n Submit Video\r\n Ambassadors\r\n Agency\r\n Influencer\r\n\r\n
\r\n Social Media
\r\n Instagram\r\n Facebook\r\n Youtube\r\n Twitter\r\n\r\n
\r\n \r\n \r\n TRVL\r\n \r\n \r\n
\r\n TRVL © 2020\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n SERVICES
;\r\n}","import React from 'react';\r\nimport '../../App.css';\r\n\r\nexport default function Products() {\r\n returnPRODUCTS
;\r\n}","import React from 'react';\r\nimport '../../App.css';\r\n\r\nexport default function SignUp() {\r\n returnLIKE & SUBSCRIBE
;\r\n}","import React from 'react';\nimport Navbar from './components/Navbar';\nimport './App.css';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport Home from './components/pages/Home';\nimport Services from './components/pages/Services';\nimport Products from './components/pages/Products';\nimport SignUp from './components/pages/SignUp';\n\nfunction App() {\n return (\n <>\n
+
+
+{props.text}
+
+
+);
+}
+
+export default Cards;
\ No newline at end of file
diff --git a/Travel_website/src/components/Footer.css b/Travel_website/src/components/Footer.css
new file mode 100644
index 0000000..55f2c26
--- /dev/null
+++ b/Travel_website/src/components/Footer.css
@@ -0,0 +1,163 @@
+.footer-container {
+ background-color: #242424;
+ padding: 4rem 0 2rem 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .footer-subscription {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+
+ margin-bottom: 24px;
+ padding: 24px;
+ color: #fff;
+ }
+
+ .footer-subscription > p {
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+ 'Lucida Sans', Arial, sans-serif;
+ }
+
+ .footer-subscription-heading {
+ margin-bottom: 24px;
+ font-size: 24px;
+ }
+
+ .footer-subscription-text {
+ margin-bottom: 24px;
+ font-size: 20px;
+ }
+
+ .footer-input {
+ padding: 8px 20px;
+ border-radius: 2px;
+ margin-right: 10px;
+ outline: none;
+ border: none;
+ font-size: 18px;
+ margin-bottom: 16px;
+ border: 1px solid #fff;
+ }
+
+ .footer-links {
+ width: 100%;
+ max-width: 1000px;
+ display: flex;
+ justify-content: center;
+ }
+
+ .footer-link-wrapper {
+ display: flex;
+ }
+
+ .footer-link-items {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin: 16px;
+ text-align: left;
+ width: 160px;
+ box-sizing: border-box;
+ }
+
+ .footer-link-items h2 {
+ margin-bottom: 16px;
+ }
+
+ .footer-link-items > h2 {
+ color: #fff;
+ }
+
+ .footer-link-items a {
+ color: #fff;
+ text-decoration: none;
+ margin-bottom: 0.5rem;
+ }
+
+ .footer-link-items a:hover {
+ color: #e9e9e9;
+ transition: 0.3s ease-out;
+ }
+
+ .footer-email-form h2 {
+ margin-bottom: 2rem;
+ }
+
+ .footer-input::placeholder {
+ color: #b1b1b1;
+ }
+
+ /* Social Icons */
+ .social-icon-link {
+ color: #fff;
+ font-size: 24px;
+ }
+
+ .social-media {
+ max-width: 1000px;
+ width: 100%;
+ }
+
+ .social-media-wrap {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 90%;
+ max-width: 1000px;
+ margin: 40px auto 0 auto;
+ }
+
+ .social-icons {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 240px;
+ }
+
+ .social-logo {
+ color: #fff;
+ justify-self: start;
+ margin-left: 20px;
+ cursor: pointer;
+ text-decoration: none;
+ font-size: 2rem;
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+ }
+
+ .website-rights {
+ color: #fff;
+ margin-bottom: 16px;
+ }
+
+ @media screen and (max-width: 820px) {
+ .footer-links {
+ padding-top: 2rem;
+ }
+
+ .footer-input {
+ width: 100%;
+ }
+
+ .btn {
+ width: 100%;
+ }
+
+ .footer-link-wrapper {
+ flex-direction: column;
+ }
+
+ .social-media-wrap {
+ flex-direction: column;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ }
\ No newline at end of file
diff --git a/Travel_website/src/components/Footer.js b/Travel_website/src/components/Footer.js
new file mode 100644
index 0000000..98494c7
--- /dev/null
+++ b/Travel_website/src/components/Footer.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import './Footer.css';
+import { Button } from './Button';
+import { Link } from 'react-router-dom';
+
+function Footer() {
+return (
+Check out these EPIC Destinations!
+
+
+
+
+-
+
-
+
+
+
+
+
+
+);
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/Travel_website/src/components/HeroSection.css b/Travel_website/src/components/HeroSection.css
new file mode 100644
index 0000000..0bd8328
--- /dev/null
+++ b/Travel_website/src/components/HeroSection.css
@@ -0,0 +1,86 @@
+video {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ z-index: -1;
+ }
+
+ .hero-container {
+ /* background: url('/public/images/img-2.jpg') center center/cover no-repeat; */
+ height: 100vh;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
+ object-fit: contain;
+ }
+
+ .hero-container > h1 {
+ color: #fff;
+ font-size: 100px;
+ margin-top: -100px;
+ }
+
+ .hero-container > p {
+ margin-top: 8px;
+ color: #fff;
+ font-size: 32px;
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+ 'Lucida Sans', Arial, sans-serif;
+ }
+
+ .hero-btns {
+ margin-top: 32px;
+ }
+
+ .hero-btns .btn {
+ margin: 6px;
+
+ }
+
+ .button1 {
+ margin: 5px;
+ /* padding: 15px; */
+ width: 220px;
+ background-color: white;
+ color: black;
+ font-size: 18px;
+ border: 3px solid #fff;
+ height: 50px;
+ cursor:pointer;
+
+ }
+
+ .fa-play-circle {
+ margin-left: 4px;
+ }
+
+ @media screen and (max-width: 960px) {
+ .hero-container > h1 {
+ font-size: 70px;
+ margin-top: -150px;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ .hero-container > h1 {
+ font-size: 50px;
+ margin-top: -100px;
+ }
+
+ .hero-container > p {
+ font-size: 30px;
+ }
+
+ .btn-mobile {
+ display: block;
+ text-decoration: none;
+ }
+
+ .btn {
+ width: 100%;
+ }
+ }
\ No newline at end of file
diff --git a/Travel_website/src/components/HeroSection.js b/Travel_website/src/components/HeroSection.js
new file mode 100644
index 0000000..22ad5fe
--- /dev/null
+++ b/Travel_website/src/components/HeroSection.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {} from 'react-router-dom';
+import '../App.css';
+import { Button } from './Button';
+import './HeroSection.css';
+
+function HeroSection() {
+return (
+
+);
+}
+
+export default HeroSection;
\ No newline at end of file
diff --git a/Travel_website/src/components/Navbar.css b/Travel_website/src/components/Navbar.css
new file mode 100644
index 0000000..edeb4ae
--- /dev/null
+++ b/Travel_website/src/components/Navbar.css
@@ -0,0 +1,158 @@
+.navbar {
+ background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
+ height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.2rem;
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ }
+
+ .navbar-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 80px;
+ max-width: 1500px;
+ }
+
+ .navbar-logo {
+ color: #fff;
+ justify-self: start;
+ margin-left: 20px;
+ cursor: pointer;
+ text-decoration: none;
+ font-size: 2rem;
+ display: flex;
+ align-items: center;
+ }
+
+ .fa-typo3 {
+ margin-left: 0.5rem;
+ font-size: 1.8rem;
+ }
+
+ .nav-menu {
+ display: grid;
+ grid-template-columns: repeat(4, auto);
+ grid-gap: 10px;
+ list-style: none;
+ text-align: center;
+ width: 60vw;
+ justify-content: end;
+ margin-right: 2rem;
+ }
+
+ .nav-item {
+ height: 80px;
+ }
+
+ .nav-links {
+ color: #fff;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ height: 100%;
+ }
+
+ .nav-links:hover {
+ border-bottom: 4px solid #fff;
+ transition: all 0.2s ease-out;
+ }
+
+ .fa-bars {
+ color: #fff;
+ }
+
+ .nav-links-mobile {
+ display: none;
+ }
+
+ .menu-icon {
+ display: none;
+ }
+
+ @media screen and (max-width: 960px) {
+ .NavbarItems {
+ position: relative;
+ }
+
+ .nav-menu {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 90vh;
+ position: absolute;
+ top: 80px;
+ left: -100%;
+ opacity: 1;
+ transition: all 0.5s ease;
+ }
+
+ .nav-menu.active {
+ background: #242222;
+ left: 0;
+ opacity: 1;
+ transition: all 0.5s ease;
+ z-index: 1;
+ }
+
+ .nav-links {
+ text-align: center;
+ padding: 2rem;
+ width: 100%;
+ display: table;
+ }
+
+ .nav-links:hover {
+ background-color: #fff;
+ color: #242424;
+ border-radius: 0;
+ }
+
+ .navbar-logo {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: translate(25%, 50%);
+ }
+
+ .menu-icon {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ transform: translate(-100%, 60%);
+ font-size: 1.8rem;
+ cursor: pointer;
+ }
+
+ .fa-times {
+ color: #fff;
+ font-size: 2rem;
+ }
+
+ .nav-links-mobile {
+ display: block;
+ text-align: center;
+ margin: 2rem auto;
+ border-radius: 4px;
+ width: 80%;
+ text-decoration: none;
+ font-size: 1.5rem;
+ background-color: transparent;
+ color: #fff;
+ padding: 14px 20px;
+ border: 1px solid #fff;
+ transition: all 0.3s ease-out;
+ }
+
+ .nav-links-mobile:hover {
+ background: #fff;
+ color: #242424;
+ transition: 250ms;
+ }
+ }
\ No newline at end of file
diff --git a/Travel_website/src/components/Navbar.js b/Travel_website/src/components/Navbar.js
new file mode 100644
index 0000000..e1126c4
--- /dev/null
+++ b/Travel_website/src/components/Navbar.js
@@ -0,0 +1,64 @@
+import React, {useState, useEffect} from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from './Button';
+import './Navbar.css';
+
+
+function Navbar() {
+const [click, setClick] = useState(false);
+const [button, setButton] = useState(true);
+
+const handleClick=()=>setClick(!click);
+const closeMobileMenu = () => setClick(false);
+
+const showButton = () => {
+if(window.innerWidth <= 960){
+setButton(false);
+} else {
+setButton(true);
+}
+}
+
+useEffect( () => {
+showButton()
+}, []);
+
+window.addEventListener('resize', showButton);
+
+return (
+<>
+
+
+)
+}
+
+export default Navbar
+
diff --git a/Travel_website/src/components/pages/Home.js b/Travel_website/src/components/pages/Home.js
new file mode 100644
index 0000000..29896a8
--- /dev/null
+++ b/Travel_website/src/components/pages/Home.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import '../../App.css';
+import HeroSection from "../HeroSection";
+import Cards from '../Cards';
+import Footer from '../Footer';
+
+function Home()
+{
+return (
+<>
++Join the Adventure newsletter to receive our best vacation deals +
++You can unsubscribe at any time. +
+
+
+
+