├── README.md ├── package.json ├── public ├── favicon.ico ├── images │ ├── img-1.jpg │ ├── img-2.jpg │ ├── img-3.jpg │ ├── img-4.jpg │ ├── img-5.jpg │ ├── img-6.jpg │ ├── img-7.jpg │ ├── img-8.jpg │ ├── img-9.jpg │ └── img-home.jpg ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── videos │ ├── video-1.mp4 │ └── video-2.mp4 └── src ├── App.css ├── App.js ├── components ├── Button.css ├── Button.js ├── CardItem.js ├── Cards.css ├── Cards.js ├── Footer.css ├── Footer.js ├── HeroSection.css ├── HeroSection.js ├── Navbar.css ├── Navbar.js └── pages │ ├── Home.js │ ├── Products.js │ ├── Services.js │ └── SignUp.js └── index.js /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "navbar-dropdown-v1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "3.4.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/favicon.ico -------------------------------------------------------------------------------- /public/images/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-1.jpg -------------------------------------------------------------------------------- /public/images/img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-2.jpg -------------------------------------------------------------------------------- /public/images/img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-3.jpg -------------------------------------------------------------------------------- /public/images/img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-4.jpg -------------------------------------------------------------------------------- /public/images/img-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-5.jpg -------------------------------------------------------------------------------- /public/images/img-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-6.jpg -------------------------------------------------------------------------------- /public/images/img-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-7.jpg -------------------------------------------------------------------------------- /public/images/img-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-8.jpg -------------------------------------------------------------------------------- /public/images/img-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-9.jpg -------------------------------------------------------------------------------- /public/images/img-home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/images/img-home.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 19 | 23 | 24 | 28 | 29 | 38 | React App 39 | 40 | 41 | 42 |
43 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/videos/video-1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/videos/video-1.mp4 -------------------------------------------------------------------------------- /public/videos/video-2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-website-v1/163f81957ac5e32eb01a114a759d3ac4a396e0a9/public/videos/video-2.mp4 -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'PT Sans', sans-serif; 6 | } 7 | 8 | .home, 9 | .services, 10 | .products, 11 | .sign-up { 12 | display: flex; 13 | height: 90vh; 14 | align-items: center; 15 | justify-content: center; 16 | font-size: 3rem; 17 | } 18 | 19 | .services { 20 | background-image: url('/images/img-2.jpg'); 21 | background-position: center; 22 | background-size: cover; 23 | background-repeat: no-repeat; 24 | color: #fff; 25 | font-size: 100px; 26 | } 27 | 28 | .products { 29 | background-image: url('/images/img-1.jpg'); 30 | background-position: center; 31 | background-size: fill; 32 | background-repeat: no-repeat; 33 | color: #fff; 34 | font-size: 100px; 35 | } 36 | 37 | .sign-up { 38 | background-image: url('/images/img-8.jpg'); 39 | background-position: center; 40 | background-size: cover; 41 | background-repeat: no-repeat; 42 | color: #fff; 43 | font-size: 100px; 44 | } 45 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navbar from './components/Navbar'; 3 | import './App.css'; 4 | import Home from './components/pages/Home'; 5 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 6 | import Services from './components/pages/Services'; 7 | import Products from './components/pages/Products'; 8 | import SignUp from './components/pages/SignUp'; 9 | 10 | function App() { 11 | return ( 12 | <> 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /src/components/Button.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #fff; 3 | } 4 | 5 | .btn { 6 | padding: 8px 20px; 7 | border-radius: 2px; 8 | outline: none; 9 | border: none; 10 | cursor: pointer; 11 | } 12 | 13 | .btn--primary { 14 | background-color: var(--primary); 15 | color: #242424; 16 | border: 1px solid var(--primary); 17 | } 18 | 19 | .btn--outline { 20 | background-color: transparent; 21 | color: #fff; 22 | padding: 8px 20px; 23 | border: 1px solid var(--primary); 24 | transition: all 0.3s ease-out; 25 | } 26 | 27 | .btn--medium { 28 | padding: 8px 20px; 29 | font-size: 18px; 30 | } 31 | 32 | .btn--large { 33 | padding: 12px 26px; 34 | font-size: 20px; 35 | } 36 | 37 | .btn--large:hover, 38 | .btn--medium:hover { 39 | transition: all 0.3s ease-out; 40 | background: #fff; 41 | color: #242424; 42 | transition: 250ms; 43 | } 44 | -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import './Button.css'; 3 | // import { Link } from 'react-router-dom'; 4 | 5 | // export function Button() { 6 | // return ( 7 | // 8 | // 9 | // 10 | // ); 11 | // } 12 | 13 | import React from 'react'; 14 | import './Button.css'; 15 | import { Link } from 'react-router-dom'; 16 | 17 | const STYLES = ['btn--primary', 'btn--outline', 'btn--test']; 18 | 19 | const SIZES = ['btn--medium', 'btn--large']; 20 | 21 | export const Button = ({ 22 | children, 23 | type, 24 | onClick, 25 | buttonStyle, 26 | buttonSize 27 | }) => { 28 | const checkButtonStyle = STYLES.includes(buttonStyle) 29 | ? buttonStyle 30 | : STYLES[0]; 31 | 32 | const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]; 33 | 34 | return ( 35 | 36 | 43 | 44 | ); 45 | }; 46 | -------------------------------------------------------------------------------- /src/components/CardItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | function CardItem(props) { 5 | return ( 6 | <> 7 |
  • 8 | 9 |
    10 | Travel Image 15 |
    16 |
    17 |
    {props.text}
    18 |
    19 | 20 |
    • 21 | 22 | ); 23 | } 24 | 25 | export default CardItem; 26 | -------------------------------------------------------------------------------- /src/components/Cards.css: -------------------------------------------------------------------------------- 1 | .cards { 2 | padding: 4rem; 3 | background: #fff; 4 | } 5 | 6 | h1 { 7 | text-align: center; 8 | } 9 | 10 | .cards__container { 11 | display: flex; 12 | flex-flow: column; 13 | align-items: center; 14 | max-width: 1120px; 15 | width: 90%; 16 | margin: 0 auto; 17 | } 18 | 19 | .cards__wrapper { 20 | position: relative; 21 | margin: 50px 0 45px; 22 | } 23 | 24 | .cards__items { 25 | margin-bottom: 24px; 26 | } 27 | 28 | .cards__item { 29 | display: flex; 30 | flex: 1; 31 | margin: 0 1rem; 32 | border-radius: 10px; 33 | } 34 | 35 | .cards__item__link { 36 | display: flex; 37 | flex-flow: column; 38 | width: 100%; 39 | box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17); 40 | -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); 41 | filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); 42 | border-radius: 10px; 43 | overflow: hidden; 44 | text-decoration: none; 45 | } 46 | 47 | .cards__item__pic-wrap { 48 | position: relative; 49 | width: 100%; 50 | padding-top: 67%; 51 | overflow: hidden; 52 | } 53 | 54 | .fade-img { 55 | animation-name: fade-img; 56 | animation-duration: 2s; 57 | } 58 | 59 | .cards__item__pic-wrap::after { 60 | content: attr(data-category); 61 | position: absolute; 62 | bottom: 0; 63 | margin-left: 10px; 64 | padding: 6px 8px; 65 | max-width: calc((100%) - 60px); 66 | font-size: 12px; 67 | font-weight: 700; 68 | color: #fff; 69 | background-color: #1f98f4; 70 | box-sizing: border-box; 71 | } 72 | 73 | .cards__item__img { 74 | position: absolute; 75 | top: 0; 76 | right: 0; 77 | bottom: 0; 78 | left: 0; 79 | display: block; 80 | width: 100%; 81 | max-width: 100%; 82 | height: 100%; 83 | max-height: 100%; 84 | object-fit: cover; 85 | transition: all 0.2s linear; 86 | } 87 | 88 | .cards__item__img:hover { 89 | transform: scale(1.1); 90 | } 91 | 92 | .cards__item__info { 93 | padding: 20px 30px 30px; 94 | } 95 | 96 | .cards__item__text { 97 | color: #252e48; 98 | font-size: 18px; 99 | line-height: 24px; 100 | } 101 | 102 | @media only screen and (min-width: 1200px) { 103 | .content__blog__container { 104 | width: 84%; 105 | } 106 | } 107 | 108 | @media only screen and (min-width: 1024px) { 109 | .cards__items { 110 | display: flex; 111 | } 112 | } 113 | 114 | @media only screen and (max-width: 1024px) { 115 | .cards__item { 116 | margin-bottom: 2rem; 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/components/Cards.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Cards.css'; 3 | import CardItem from './CardItem'; 4 | 5 | function Cards() { 6 | return ( 7 |
    8 |

    Check out these EPIC Destinations!

    9 |
    10 |
    11 |
      12 | 18 | 24 |
    25 |
      26 | 32 | 38 | 44 |
    45 |
    46 |
    47 |
    48 | ); 49 | } 50 | 51 | export default Cards; 52 | -------------------------------------------------------------------------------- /src/components/Footer.css: -------------------------------------------------------------------------------- 1 | .footer-container { 2 | background-color: #242424; 3 | padding: 4rem 0 2rem 0; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .footer-subscription { 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | text-align: center; 16 | 17 | margin-bottom: 24px; 18 | padding: 24px; 19 | color: #fff; 20 | } 21 | 22 | .footer-subscription > p { 23 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 24 | 'Lucida Sans', Arial, sans-serif; 25 | } 26 | 27 | .footer-subscription-heading { 28 | margin-bottom: 24px; 29 | font-size: 24px; 30 | } 31 | 32 | .footer-subscription-text { 33 | margin-bottom: 24px; 34 | font-size: 20px; 35 | } 36 | 37 | .footer-input { 38 | padding: 8px 20px; 39 | border-radius: 2px; 40 | margin-right: 10px; 41 | outline: none; 42 | border: none; 43 | font-size: 18px; 44 | margin-bottom: 16px; 45 | border: 1px solid #fff; 46 | } 47 | 48 | .footer-links { 49 | width: 100%; 50 | max-width: 1000px; 51 | display: flex; 52 | justify-content: center; 53 | } 54 | 55 | .footer-link-wrapper { 56 | display: flex; 57 | } 58 | 59 | .footer-link-items { 60 | display: flex; 61 | flex-direction: column; 62 | align-items: flex-start; 63 | margin: 16px; 64 | text-align: left; 65 | width: 160px; 66 | box-sizing: border-box; 67 | } 68 | 69 | .footer-link-items h2 { 70 | margin-bottom: 16px; 71 | } 72 | 73 | .footer-link-items > h2 { 74 | color: #fff; 75 | } 76 | 77 | .footer-link-items a { 78 | color: #fff; 79 | text-decoration: none; 80 | margin-bottom: 0.5rem; 81 | } 82 | 83 | .footer-link-items a:hover { 84 | color: #e9e9e9; 85 | transition: 0.3s ease-out; 86 | } 87 | 88 | .footer-email-form h2 { 89 | margin-bottom: 2rem; 90 | } 91 | 92 | .footer-input::placeholder { 93 | color: #b1b1b1; 94 | } 95 | 96 | /* Social Icons */ 97 | .social-icon-link { 98 | color: #fff; 99 | font-size: 24px; 100 | } 101 | 102 | .social-media { 103 | max-width: 1000px; 104 | width: 100%; 105 | } 106 | 107 | .social-media-wrap { 108 | display: flex; 109 | justify-content: space-between; 110 | align-items: center; 111 | width: 90%; 112 | max-width: 1000px; 113 | margin: 40px auto 0 auto; 114 | } 115 | 116 | .social-icons { 117 | display: flex; 118 | justify-content: space-between; 119 | align-items: center; 120 | width: 240px; 121 | } 122 | 123 | .social-logo { 124 | color: #fff; 125 | justify-self: start; 126 | margin-left: 20px; 127 | cursor: pointer; 128 | text-decoration: none; 129 | font-size: 2rem; 130 | display: flex; 131 | align-items: center; 132 | margin-bottom: 16px; 133 | } 134 | 135 | .website-rights { 136 | color: #fff; 137 | margin-bottom: 16px; 138 | } 139 | 140 | @media screen and (max-width: 820px) { 141 | .footer-links { 142 | padding-top: 2rem; 143 | } 144 | 145 | .footer-input { 146 | width: 100%; 147 | } 148 | 149 | .btn { 150 | width: 100%; 151 | } 152 | 153 | .footer-link-wrapper { 154 | flex-direction: column; 155 | } 156 | 157 | .social-media-wrap { 158 | flex-direction: column; 159 | } 160 | } 161 | 162 | @media screen and (max-width: 768px) { 163 | } 164 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Footer.css'; 3 | import { Button } from './Button'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | function Footer() { 7 | return ( 8 |
    9 |
    10 |

    11 | Join the Adventure newsletter to receive our best vacation deals 12 |

    13 |

    14 | You can unsubscribe at any time. 15 |

    16 |
    17 |
    18 | 24 | 25 |
    26 |
    27 |
    28 |
    29 |
    30 |
    31 |

    About Us

    32 | How it works 33 | Testimonials 34 | Careers 35 | Investors 36 | Terms of Service 37 |
    38 |
    39 |

    Contact Us

    40 | Contact 41 | Support 42 | Destinations 43 | Sponsorships 44 |
    45 |
    46 |
    47 |
    48 |

    Videos

    49 | Submit Video 50 | Ambassadors 51 | Agency 52 | Influencer 53 |
    54 |
    55 |

    Social Media

    56 | Instagram 57 | Facebook 58 | Youtube 59 | Twitter 60 |
    61 |
    62 |
    63 |
    64 | 115 |
    116 |
    117 | ); 118 | } 119 | 120 | export default Footer; 121 | -------------------------------------------------------------------------------- /src/components/HeroSection.css: -------------------------------------------------------------------------------- 1 | video { 2 | object-fit: cover; 3 | width: 100%; 4 | height: 100%; 5 | position: fixed; 6 | z-index: -1; 7 | } 8 | 9 | .hero-container { 10 | /* background: url('/images/img-home.jpg') center center/cover no-repeat; */ 11 | height: 100vh; 12 | width: 100%; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 18 | object-fit: contain; 19 | } 20 | 21 | .hero-container > h1 { 22 | color: #fff; 23 | font-size: 100px; 24 | margin-top: -100px; 25 | } 26 | 27 | .hero-container > p { 28 | margin-top: 8px; 29 | color: #fff; 30 | font-size: 32px; 31 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 32 | 'Lucida Sans', Arial, sans-serif; 33 | } 34 | 35 | .hero-btns { 36 | margin-top: 32px; 37 | } 38 | 39 | .hero-btns .btn { 40 | margin: 6px; 41 | } 42 | 43 | .fa-play-circle { 44 | margin-left: 4px; 45 | } 46 | 47 | @media screen and (max-width: 960px) { 48 | .hero-container > h1 { 49 | font-size: 70px; 50 | margin-top: -150px; 51 | } 52 | } 53 | 54 | @media screen and (max-width: 768px) { 55 | .hero-container > h1 { 56 | font-size: 50px; 57 | margin-top: -100px; 58 | } 59 | 60 | .hero-container > p { 61 | font-size: 30px; 62 | } 63 | 64 | .btn-mobile { 65 | display: block; 66 | text-decoration: none; 67 | } 68 | 69 | .btn { 70 | width: 100%; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/components/HeroSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../App.css'; 3 | import { Button } from './Button'; 4 | import './HeroSection.css'; 5 | 6 | function HeroSection() { 7 | return ( 8 |
    9 |
    30 | ); 31 | } 32 | 33 | export default HeroSection; 34 | -------------------------------------------------------------------------------- /src/components/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%); 3 | height: 80px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | font-size: 1.2rem; 8 | position: sticky; 9 | top: 0; 10 | z-index: 999; 11 | } 12 | 13 | .navbar-container { 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | height: 80px; 18 | max-width: 1500px; 19 | } 20 | 21 | .navbar-logo { 22 | color: #fff; 23 | justify-self: start; 24 | margin-left: 20px; 25 | cursor: pointer; 26 | text-decoration: none; 27 | font-size: 2rem; 28 | display: flex; 29 | align-items: center; 30 | } 31 | 32 | .fa-typo3 { 33 | margin-left: 0.5rem; 34 | font-size: 1.8rem; 35 | } 36 | 37 | .nav-menu { 38 | display: grid; 39 | grid-template-columns: repeat(4, auto); 40 | grid-gap: 10px; 41 | list-style: none; 42 | text-align: center; 43 | width: 60vw; 44 | justify-content: end; 45 | margin-right: 2rem; 46 | } 47 | 48 | .nav-item { 49 | height: 80px; 50 | } 51 | 52 | .nav-links { 53 | color: #fff; 54 | display: flex; 55 | align-items: center; 56 | text-decoration: none; 57 | padding: 0.5rem 1rem; 58 | height: 100%; 59 | } 60 | 61 | .nav-links:hover { 62 | border-bottom: 4px solid #fff; 63 | transition: all 0.2s ease-out; 64 | } 65 | 66 | .fa-bars { 67 | color: #fff; 68 | } 69 | 70 | .nav-links-mobile { 71 | display: none; 72 | } 73 | 74 | .menu-icon { 75 | display: none; 76 | } 77 | 78 | @media screen and (max-width: 960px) { 79 | .NavbarItems { 80 | position: relative; 81 | } 82 | 83 | .nav-menu { 84 | display: flex; 85 | flex-direction: column; 86 | width: 100%; 87 | height: 90vh; 88 | position: absolute; 89 | top: 80px; 90 | left: -100%; 91 | opacity: 1; 92 | transition: all 0.5s ease; 93 | } 94 | 95 | .nav-menu.active { 96 | background: #242222; 97 | left: 0; 98 | opacity: 1; 99 | transition: all 0.5s ease; 100 | z-index: 1; 101 | } 102 | 103 | .nav-links { 104 | text-align: center; 105 | padding: 2rem; 106 | width: 100%; 107 | display: table; 108 | } 109 | 110 | .nav-links:hover { 111 | background-color: #fff; 112 | color: #242424; 113 | border-radius: 0; 114 | } 115 | 116 | .navbar-logo { 117 | position: absolute; 118 | top: 0; 119 | left: 0; 120 | transform: translate(25%, 50%); 121 | } 122 | 123 | .menu-icon { 124 | display: block; 125 | position: absolute; 126 | top: 0; 127 | right: 0; 128 | transform: translate(-100%, 60%); 129 | font-size: 1.8rem; 130 | cursor: pointer; 131 | } 132 | 133 | .fa-times { 134 | color: #fff; 135 | font-size: 2rem; 136 | } 137 | 138 | .nav-links-mobile { 139 | display: block; 140 | text-align: center; 141 | margin: 2rem auto; 142 | border-radius: 4px; 143 | width: 80%; 144 | text-decoration: none; 145 | font-size: 1.5rem; 146 | background-color: transparent; 147 | color: #fff; 148 | padding: 14px 20px; 149 | border: 1px solid #fff; 150 | transition: all 0.3s ease-out; 151 | } 152 | 153 | .nav-links-mobile:hover { 154 | background: #fff; 155 | color: #242424; 156 | transition: 250ms; 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { Button } from './Button'; 3 | import { Link } from 'react-router-dom'; 4 | import './Navbar.css'; 5 | 6 | function Navbar() { 7 | const [click, setClick] = useState(false); 8 | const [button, setButton] = useState(true); 9 | 10 | const handleClick = () => setClick(!click); 11 | const closeMobileMenu = () => setClick(false); 12 | 13 | const showButton = () => { 14 | if (window.innerWidth <= 960) { 15 | setButton(false); 16 | } else { 17 | setButton(true); 18 | } 19 | }; 20 | 21 | useEffect(() => { 22 | showButton(); 23 | }, []); 24 | 25 | window.addEventListener('resize', showButton); 26 | 27 | return ( 28 | <> 29 | 76 | 77 | ); 78 | } 79 | 80 | export default Navbar; 81 | -------------------------------------------------------------------------------- /src/components/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../../App.css'; 3 | import Cards from '../Cards'; 4 | import HeroSection from '../HeroSection'; 5 | import Footer from '../Footer'; 6 | 7 | function Home() { 8 | return ( 9 | <> 10 | 11 | 12 |