├── assets ├── ham.png ├── hero1.png ├── png1.png ├── png2.png ├── png3.png ├── png4.png ├── png5.png ├── png6.png ├── bg-mob-2.jpg ├── bg-mob-ind.jpg ├── bg-scr-ind.jpg ├── face1_crop.jpg ├── face2_crop.jpg ├── face3_crop.jpg ├── face4_crop.jpg ├── face5_crop.jpg ├── face6_crop.jpg ├── lightgrey.JPG ├── partners.JPG ├── bg-scr-ind-1.jpg ├── camp-blog-1.jfif ├── camp-blog-2.jpg ├── partners-scr.JPG ├── bg-mob-ind-orange.jpg ├── header background.jpeg ├── attr.txt ├── down.svg ├── up.svg ├── fb.svg ├── twitter.svg ├── hero2.svg ├── AIC.svg ├── All In Campsters.svg └── topography.svg ├── js ├── mob-menu.js └── script.js ├── package.json ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── LICENSE ├── .gitignore ├── .github └── workflows │ └── linters.yml ├── index.html ├── README.md ├── about.html └── style └── style.css /assets/ham.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/ham.png -------------------------------------------------------------------------------- /assets/hero1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/hero1.png -------------------------------------------------------------------------------- /assets/png1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/png1.png -------------------------------------------------------------------------------- /assets/png2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/png2.png -------------------------------------------------------------------------------- /assets/png3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/png3.png -------------------------------------------------------------------------------- /assets/png4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/png4.png -------------------------------------------------------------------------------- /assets/png5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/png5.png -------------------------------------------------------------------------------- /assets/png6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/png6.png -------------------------------------------------------------------------------- /assets/bg-mob-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/bg-mob-2.jpg -------------------------------------------------------------------------------- /assets/bg-mob-ind.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/bg-mob-ind.jpg -------------------------------------------------------------------------------- /assets/bg-scr-ind.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/bg-scr-ind.jpg -------------------------------------------------------------------------------- /assets/face1_crop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/face1_crop.jpg -------------------------------------------------------------------------------- /assets/face2_crop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/face2_crop.jpg -------------------------------------------------------------------------------- /assets/face3_crop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/face3_crop.jpg -------------------------------------------------------------------------------- /assets/face4_crop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/face4_crop.jpg -------------------------------------------------------------------------------- /assets/face5_crop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/face5_crop.jpg -------------------------------------------------------------------------------- /assets/face6_crop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/face6_crop.jpg -------------------------------------------------------------------------------- /assets/lightgrey.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/lightgrey.JPG -------------------------------------------------------------------------------- /assets/partners.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/partners.JPG -------------------------------------------------------------------------------- /assets/bg-scr-ind-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/bg-scr-ind-1.jpg -------------------------------------------------------------------------------- /assets/camp-blog-1.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/camp-blog-1.jfif -------------------------------------------------------------------------------- /assets/camp-blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/camp-blog-2.jpg -------------------------------------------------------------------------------- /assets/partners-scr.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/partners-scr.JPG -------------------------------------------------------------------------------- /assets/bg-mob-ind-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/bg-mob-ind-orange.jpg -------------------------------------------------------------------------------- /assets/header background.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedit334/Module1_Capstone-Project/HEAD/assets/header background.jpeg -------------------------------------------------------------------------------- /assets/attr.txt: -------------------------------------------------------------------------------- 1 | Photo de Plato Terentev: https://www.pexels.com/fr-fr/photo/rhume-neige-paysage-nature-5828415/ 2 | Photo de Teemu R: https://www.pexels.com/fr-fr/photo/deux-personnes-se-trouvant-a-l-interieur-de-la-tente-1840421/ -------------------------------------------------------------------------------- /js/mob-menu.js: -------------------------------------------------------------------------------- 1 | const ham = document.querySelector('.ham'); 2 | const x = document.querySelector('.x'); 3 | const mobMenu = document.querySelector('.menu'); 4 | 5 | // Mobile menu 6 | ham.addEventListener('click', () => { 7 | mobMenu.classList.toggle('active-menu'); 8 | }); 9 | x.addEventListener('click', () => { 10 | mobMenu.classList.toggle('active-menu'); 11 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel-eslint": "^10.1.0", 4 | "eslint": "^7.32.0", 5 | "eslint-config-airbnb-base": "^14.2.1", 6 | "eslint-plugin-import": "^2.27.5", 7 | "stylelint": "^13.13.1", 8 | "stylelint-config-standard": "^21.0.0", 9 | "stylelint-csstree-validator": "^1.9.0", 10 | "stylelint-scss": "^3.21.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } -------------------------------------------------------------------------------- /assets/down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | -------------------------------------------------------------------------------- /assets/fb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 codedit334 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/hero2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /assets/AIC.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const programItems = document.querySelector('.program-items-list'); 2 | const staffItems = document.querySelector('.featured-instructors-list'); 3 | const toggleBtn = document.querySelector('.instructors-button'); 4 | 5 | // Programs Data 6 | const programItemsList = [ 7 | { 8 | img: './assets/png5.png', 9 | title: 'Tent Camping', 10 | desc: 'The dream of hiking and camping, in the most beautiful location on earth.', 11 | }, 12 | { 13 | img: './assets/png4.png', 14 | title: 'Rv Parks', 15 | desc: 'RV parks are about a lifestyle full of adventures, good food, and restful nights.', 16 | }, 17 | { 18 | img: './assets/png6.png', 19 | title: 'Cabins', 20 | desc: 'Relax with a trip to its cabins, where you can enjoy the beauty of the forest or water.', 21 | }, 22 | { 23 | img: './assets/png2.png', 24 | title: 'Treehouses', 25 | desc: 'The best place to camp in the world.', 26 | }, 27 | { 28 | img: './assets/png3.png', 29 | title: 'Glamping', 30 | desc: 'This is the ultimate combination of beautiful natural surroundings.', 31 | }, 32 | { 33 | img: './assets/png1.png', 34 | title: 'Camping sites', 35 | desc: 'Find the most popular camping sites across the world.', 36 | }, 37 | ]; 38 | 39 | // Staff Data 40 | const instructursItemsList = [ 41 | { 42 | img: './assets/face1_crop.jpg', 43 | name: 'Eliana Brady', 44 | occupation: 'Camping Instructor', 45 | desc: 'Experienced world class camping instructor.', 46 | }, 47 | { 48 | img: './assets/face2_crop.jpg', 49 | name: 'Howard Beard', 50 | occupation: 'Camping Consulor', 51 | desc: 'A passionate, experienced outdoor enthusiast, who has been working in the outdoor industry since 2009.', 52 | }, 53 | { 54 | img: './assets/face3_crop.jpg', 55 | name: 'Jemma Luna', 56 | occupation: 'Camping Instructor', 57 | desc: 'A certified camping instructor, I have been teaching for over 10 years.', 58 | }, 59 | { 60 | img: './assets/face4_crop.jpg', 61 | name: 'Talha Prince', 62 | occupation: 'Camping Consulor', 63 | desc: 'A camping consulor who helps you find the right camping site.', 64 | }, 65 | { 66 | img: './assets/face5_crop.jpg', 67 | name: 'Matilda Hanson', 68 | occupation: 'Photographer', 69 | desc: 'Photographer who loves to spend time behind the camera as well as in front of it.', 70 | }, 71 | { 72 | img: './assets/face6_crop.jpg', 73 | name: 'Clyde Duffy', 74 | occupation: 'Photographer', 75 | desc: 'Professional photographer who specifically specializes in camping and outdoor activities.', 76 | }, 77 | ]; 78 | 79 | // Display program section 80 | programItemsList.forEach((obj) => { 81 | programItems.innerHTML += ` 82 |
  • 83 | 84 |

    ${obj.title}

    85 |

    ${obj.desc}

    86 |
    • 87 | `; 88 | }); 89 | 90 | // Display staff section 91 | let addClass = ''; 92 | let classCount = 1; 93 | instructursItemsList.forEach((obj) => { 94 | if (classCount < 3) addClass = ''; else addClass = 'toggle'; 95 | staffItems.innerHTML += ` 96 |
  • 97 | Avatar 98 |
    99 |

    ${obj.name}

    100 |

    ${obj.occupation}

    101 | ___ 102 |

    ${obj.desc}

    103 |
    104 |
    • 105 | `; 106 | classCount += 1; 107 | }); 108 | 109 | // More button 110 | toggleBtn.addEventListener('click', () => { 111 | document.querySelectorAll('.instructors-button img').forEach((elem) => { 112 | elem.classList.toggle('none'); 113 | elem.classList.toggle('inline'); 114 | }); 115 | document.querySelectorAll('.instructors-button span').forEach((elem) => { 116 | elem.classList.toggle('inline'); 117 | elem.classList.toggle('none'); 118 | }); 119 | document.querySelectorAll('.toggle').forEach((elem) => { 120 | elem.classList.toggle('flex'); 121 | }); 122 | }); 123 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | All in campsters 13 | 14 | 15 | 16 |
    17 |
    18 | 25 |
    26 |
    27 | 30 | 39 |
    40 |
    41 |
    42 | 43 |
    44 | 47 |
    48 | 49 |
    50 |
    51 | 52 |
    53 |

    "Hello, fellow campers"

    54 |

    All in Campsters,
    international campers united

    55 |
    56 |
    57 |

    Our goal is to make your camping experience more enjoyable, so we’re always improving our 58 | services. 59 | That’s why we provide more than 30 different types of campsites, individual tents and 60 | adventures 61 | like treehouses, glamping and RV parks.

    62 |
    63 |
    64 |

    Get in touch with our support

    65 | From 8am -- > 8pm (UTC +1) every day 66 |
    67 | 68 |
    69 |
    70 |
    71 | 72 |
    73 |
    74 |

    Main Program

    75 | ______ 76 |
    77 |
    78 |
      79 | 80 |
    81 |
    82 |
    83 | 84 |
    85 |
    See Hole Program
    86 |
    87 | 88 |
    89 |
    90 |

    Our Staff

    91 | ______ 92 |
    93 |
    94 |
      95 | 96 |
    97 |
    98 |
    99 | 105 |
    106 |
    107 |
    108 |
    109 |

    Partners

    110 | ______ 111 |
    112 |
    113 | 114 |
    115 |
    116 | 120 |
    121 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    4 | 5 |

    All In Campsters

    6 |

    Module 1: Capstone Project

    7 | 8 |
    9 | 10 | 11 | 12 | # 📗 Table of Contents 13 | 14 | - [📖 About the Project](#about-project) 15 | - [🛠 Built With](#built-with) 16 | - [Tech Stack](#tech-stack) 17 | - [Key Features](#key-features) 18 | - [🚀 Live Demo](#live-demo) 19 | - [🎥 Video Description](#video-description) 20 | - [💻 Getting Started](#getting-started) 21 | - [Setup](#setup) 22 | - [Prerequisites](#prerequisites) 23 | - [Install](#install) 24 | - [Usage](#usage) 25 | - [Run tests](#run-tests) 26 | - [Deployment](#triangular_flag_on_post-deployment) 27 | - [👥 Authors](#authors) 28 | - [🔭 Future Features](#future-features) 29 | - [🤝 Contributing](#contributing) 30 | - [⭐️ Show your support](#support) 31 | - [🙏 Acknowledgements](#acknowledgements) 32 | - [❓ FAQ](#faq) 33 | - [📝 License](#license) 34 | 35 | 36 | 37 | # 📖 [Capstone Project 1] 38 | 39 | All In Campsters is my opportunity to put what i've learned during module 1 in practice. 40 | 41 | ## 🛠 Built With 42 | HTML, CSS, NodeJS 43 | ### Tech Stack 44 | 45 |
    46 | Structure 47 | 50 |
    51 | 52 |
    53 | Style 54 | 57 |
    58 | 59 |
    60 | Linters 61 | 65 |
    66 | 67 | 68 | 69 | ### Key Features 70 | 71 | -Linter is a tool to help you improve your code, it analizes the source code looking for problems. 72 | 73 | -Mobile first design: it's addapted to mobile screens. 74 | 75 | -Dynamic HTML: Write HTML Code using JavaScript. 76 | 77 |

    (back to top)

    78 | 79 | 80 | 81 | ## 🚀 Live Demo 82 | 83 | -Link: [https://codedit334.github.io/Module1_Capstone-Project/index.html](https://codedit334.github.io/Module1_Capstone-Project/index.html). 84 | 85 |

    (back to top)

    86 | 87 | 88 | 89 | ## 🎥 Video Description 90 | 91 | -Here is the [video](https://www.loom.com/share/b4c088c829ef462fa65b03153d6aaa35) description of the project. 92 | 93 |

    (back to top)

    94 | 95 | 96 | 97 | ## 💻 Getting Started 98 | 99 | To get a local copy up and running, follow these steps. 100 | 101 | 102 | ### Prerequisites 103 | 104 | In order to run this project you need: 105 | Open terminal on the same folder of the project and run: 106 | ```sh 107 | npm install 108 | ``` 109 | 110 | ### Setup 111 | 112 | Clone this repository to your desired folder: 113 | ```sh 114 | cd my-folder 115 | git clone git@github.com/codedit334/Module1_Capstone-Project.git 116 | ``` 117 | ### Install 118 | 119 | Install this project with: 120 | ```sh 121 | cd Module1_Capstone-Project 122 | npm install 123 | ``` 124 | 125 | ### Usage 126 | 127 | To run the project, open index.html 128 | 129 | 130 | ### Run tests 131 | 132 | To run tests, run the following command: 133 | 134 | To check for html errors run: 135 | ```sh 136 | npx hint . 137 | ``` 138 | To check for css errors run: 139 | ```sh 140 | npx stylelint "**/*.{css,scss}" 141 | ``` 142 | To check for js errors run: 143 | ```sh 144 | npx eslint . 145 | ``` 146 | 147 | ### Deployment 148 | 149 | Deployed using Github Pages. 150 | 151 |

    (back to top)

    152 | 153 | 154 | 155 | ## 👥 Authors 156 | 157 | 👤 Author1 158 | 159 | - GitHub: [@codedit334 ](https://github.com/codedit334) 160 | - Twitter: [@oussedit](https://twitter.com/oussedit) 161 | - LinkedIn: [Oussama Elabdioui](https://www.linkedin.com/in/oussama-elabdioui-4677a41b6/) 162 | 163 | 164 |

    (back to top)

    165 | 166 | 167 | 168 | ## 🔭 Future Features 169 | 170 | - Integrating Google Analitics 171 | 172 | 173 |

    (back to top)

    174 | 175 | 176 | 177 | ## 🤝 Contributing 178 | 179 | Contributions, issues, and feature requests are welcome! 180 | 181 | Feel free to check the [issues page](https://github.com/codedit334/Module1_Capstone-Project/issues). 182 | 183 |

    (back to top)

    184 | 185 | 186 | 187 | ## ⭐️ Show your support 188 | 189 | If you like this project send your feedback to encourage me to do more. 190 | 191 |

    (back to top)

    192 | 193 | 194 | 195 | ## 🙏 Acknowledgments 196 | 197 | I would like to thank Microverse for offering me this opportunity to learn, and practice my skills. 198 | 199 |

    (back to top)

    200 | 201 | 202 | 203 | ## ❓ FAQ 204 | 205 | -Why use linters? 206 | 207 | - The use of linters helps to diagnose and fix technical issues, also linters can help teams achieve a more readable and consistent style, through the enforcement of its rules. 208 | 209 | -Why use dynamic HTML: 210 | 211 | - Using dynamic HTML Avoids writing repetetive code, thanks to JS loops. 212 | 213 |

    (back to top)

    214 | 215 | 216 | 217 | ## 📝 License 218 | 219 | This project is [MIT](https://github.com/codedit334/Module1_Capstone-Project/blob/main/LICENSE) licensed. 220 | (Check the LICENSE file) 221 | 222 |

    (back to top)

    223 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | About All In Campsters 13 | 14 | 15 | 16 |
    17 |
    18 | 25 |
    26 |
    27 | 32 | 41 |
    42 |
    43 |
    44 | 47 |
    48 | 49 |
    50 |
    51 |
    52 |

    "Hello! Fellow Campers"

    53 |

    54 | All in Campsters: international campers 55 |

    56 |
    57 |
    58 |

    59 | Our website is the best way to find out about our programs and book your stay. We’re happy to 60 | help you plan your trip, whether it’s a weekend away with friends or an adventure holiday with 61 | family. 62 |

    63 |

    Camping is a great way to enjoy the outdoors. With our activities, you can stay fit and have fun 64 | while enjoying your time with friends and family.

    65 |

    66 | If you love camping, then come and join our friendly community of campers. See what other people are doing on the site and support them! 67 |

    68 |
    69 |
    70 |

    Please contact us per Email for any further questions

    71 |

    about All In Campsters

    72 |

    allincampsters@camper.com

    73 |
    74 |
    75 |
    76 | 77 |
    78 |
    79 |
    80 |

    All In Campsters

    81 |

    Simple and direct logo

    82 | ____ 83 |
    84 |
    85 |

    The logo of All In Campsters was decided

    86 |

    through the logo competition from 8. June to 7. July

    87 |

    We chose our logo for two main reasons. The first and most important one is that we enjoy working in a logo. The second reason is that we want our users to feel comfortable when they visit our website and interact with all the information on it.

    88 |
    89 |
    90 | logo 91 |
    92 |
    93 |
    94 | 95 |
    96 |
    97 |
    98 |

    See the All In Campsters Blog

    99 | ____ 100 |
    101 |
    102 |

    Take a look at the last two All In Campsters blog posts

    103 |
    104 |
    105 | 106 |

    Feb
    Romantic Valentine's Day Destinations

    107 | Blog Post 1 108 |     109 | 110 |

    Jan
    Campground Safety: A Guide for campers

    111 | Blog Post 2 112 |     113 |
    114 |
    115 |
    116 |
    117 |
    118 |

    Main Program

    119 | ______ 120 |
    121 |
    122 | 123 |
    124 |
    125 | 129 |
    130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap"); 2 | 3 | :root { 4 | --dark: #272a31; 5 | --light: #d3d3d3; 6 | --orange: #ec5242; 7 | } 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | body { 15 | font-family: "Lato", sans-serif; 16 | font-style: normal; 17 | } 18 | 19 | .wrapper-i { 20 | background-color: rgb(248, 248, 248); 21 | } 22 | 23 | .index-header, 24 | .about-header { 25 | width: 100%; 26 | opacity: 0.85; 27 | padding-bottom: 10px; 28 | } 29 | 30 | nav { 31 | width: 95%; 32 | margin: auto; 33 | } 34 | 35 | nav > img { 36 | padding: 30px 10px 10px 10px; 37 | width: 45px; 38 | height: 40px; 39 | } 40 | 41 | nav > ul { 42 | list-style: none; 43 | } 44 | 45 | .pre-navBar { 46 | display: none !important; 47 | } 48 | 49 | .nav-button { 50 | display: none; 51 | } 52 | 53 | .menu { 54 | position: fixed; 55 | z-index: 5000; 56 | left: -100%; 57 | width: 100%; 58 | height: 100vh; 59 | color: white !important; 60 | background-color: #272a31; 61 | } 62 | 63 | .menu.active-menu { 64 | position: fixed; 65 | z-index: 5000; 66 | width: 100%; 67 | left: 0; 68 | top: 0; 69 | height: 100vh; 70 | color: white; 71 | background-color: #272a31; 72 | } 73 | 74 | .menu a { 75 | text-decoration: none; 76 | color: gray; 77 | } 78 | 79 | .menu li { 80 | display: block; 81 | margin: 30px; 82 | list-style: none; 83 | font-size: 280%; 84 | cursor: pointer; 85 | } 86 | 87 | .x { 88 | float: right; 89 | list-style: none; 90 | } 91 | 92 | #hero { 93 | width: 100%; 94 | opacity: 0.9; 95 | padding: 13px 0 70px 0; 96 | } 97 | 98 | #hero::before { 99 | content: ""; 100 | background-image: url("../assets/hero2.svg"); 101 | background-repeat: no-repeat; 102 | background-size: cover; 103 | background-position: center; 104 | position: absolute; 105 | display: block; 106 | width: 200px; 107 | height: 300px; 108 | z-index: -1 !important; 109 | left: 0; 110 | bottom: 0; 111 | } 112 | 113 | #hero::after, 114 | #sec1::after { 115 | content: ""; 116 | background-image: url("../assets/hero1.png"); 117 | background-repeat: no-repeat; 118 | background-size: cover; 119 | background-position: center; 120 | position: absolute; 121 | display: block; 122 | width: 200px; 123 | height: 300px; 124 | z-index: 2 !important; 125 | right: 0; 126 | top: -27vh; 127 | } 128 | 129 | .hero-wrapper { 130 | width: 95%; 131 | margin: auto; 132 | } 133 | 134 | .hero-div-1 { 135 | padding-left: 10px; 136 | color: var(--orange); 137 | z-index: 1000; 138 | } 139 | 140 | .hero-div-1 h2 { 141 | font-size: 200%; 142 | font-weight: 400; 143 | margin: 30px 0 10px 0; 144 | z-index: 1000; 145 | } 146 | 147 | .hero-div-1 h1 { 148 | font-size: 300%; 149 | font-weight: bolder; 150 | margin: 0 0 20px 0; 151 | background-image: url("../assets/header background.jpeg"); 152 | background-repeat: no-repeat; 153 | background-size: cover; 154 | background-position-y: 0; 155 | -webkit-text-fill-color: transparent; 156 | -webkit-background-clip: text; 157 | background-clip: text; 158 | z-index: 1000 !important; 159 | } 160 | 161 | .hero-div-2 { 162 | background-color: rgb(248, 248, 248); 163 | color: var(--dark); 164 | border: 4px solid white; 165 | padding: 5px 14px; 166 | margin: 45px 0 30px 0; 167 | font-size: 108%; 168 | line-height: 1.5rem; 169 | z-index: 2000; 170 | } 171 | 172 | .hero-div-3 { 173 | background-color: rgb(248, 248, 248); 174 | color: var(--dark); 175 | padding-left: 10px; 176 | } 177 | 178 | .hero-div-3 > h3 { 179 | font-size: 180%; 180 | margin: 0 0 10px 0; 181 | font-weight: bolder; 182 | } 183 | 184 | .hero-div-3 > span { 185 | font-size: 140%; 186 | padding: 0; 187 | } 188 | 189 | /* Program */ 190 | #program { 191 | background: url("../assets/topography.svg"); 192 | position: relative; 193 | z-index: 1000; 194 | background-color: var(--dark); 195 | color: white; 196 | padding-bottom: 40px; 197 | } 198 | 199 | .program-title, 200 | .instructors-title, 201 | .partner-title { 202 | font-size: 140%; 203 | display: flex; 204 | flex-direction: column; 205 | justify-content: center; 206 | align-items: center; 207 | padding: 40px 0; 208 | } 209 | 210 | .program-title > span, 211 | .instructors-title > span { 212 | position: relative; 213 | bottom: 5px; 214 | color: var(--orange); 215 | } 216 | 217 | .program-items ul { 218 | list-style: none; 219 | } 220 | 221 | .program-items li { 222 | background-color: #414246; 223 | width: 90%; 224 | margin: auto; 225 | display: grid; 226 | grid-template-columns: 1fr 1fr 4fr; 227 | align-items: center; 228 | gap: 15px; 229 | padding: 12px; 230 | margin-top: 10px; 231 | opacity: 0.8; 232 | } 233 | 234 | .program-button { 235 | width: 80%; 236 | margin: auto; 237 | margin-top: 40px; 238 | } 239 | 240 | .program-button button { 241 | font-size: 110%; 242 | width: 100%; 243 | padding: 30px; 244 | color: white; 245 | background-color: var(--orange); 246 | border: none; 247 | outline: none; 248 | } 249 | 250 | /* Featured instructors */ 251 | .featured-instructors-list { 252 | width: 90%; 253 | margin: auto; 254 | } 255 | 256 | .featured-instructors-list > li { 257 | display: flex; 258 | gap: 20px; 259 | margin: 20px 0 0 10px; 260 | } 261 | 262 | .featured-instructors-list > li:nth-child(3), 263 | .featured-instructors-list > li:nth-child(4), 264 | .featured-instructors-list > li:nth-child(5), 265 | .featured-instructors-list > li:nth-child(6) { 266 | display: none; 267 | } 268 | 269 | .featured-instructors img { 270 | width: 100px; 271 | height: 100px; 272 | position: relative; 273 | top: 15px; 274 | left: 10px; 275 | } 276 | 277 | .instructors-title { 278 | padding-bottom: 10px !important; 279 | } 280 | 281 | .instructor h3 { 282 | font-size: 150%; 283 | } 284 | 285 | .instructor h4 { 286 | font-size: 110%; 287 | color: var(--orange); 288 | font-style: italic; 289 | } 290 | 291 | .instructor span { 292 | font-size: 90%; 293 | font-weight: 100; 294 | color: lightgray; 295 | position: relative; 296 | bottom: 8px; 297 | } 298 | 299 | .instructors-button { 300 | width: 90%; 301 | margin: 40px auto; 302 | } 303 | 304 | .instructors-button button { 305 | font-size: 110%; 306 | width: 100%; 307 | background-color: transparent; 308 | padding: 15px 0; 309 | border: 1px solid lightgray; 310 | } 311 | 312 | .instructors-button button:hover { 313 | background-color: #eee; 314 | } 315 | 316 | /* Partner */ 317 | #partner { 318 | display: block; 319 | background-color: #414246; 320 | padding-bottom: 60px; 321 | } 322 | 323 | .partner-title h3 { 324 | color: white; 325 | } 326 | 327 | .about-partner-title h3 { 328 | font-weight: 300 !important; 329 | } 330 | 331 | .partner-title span { 332 | color: var(--orange); 333 | } 334 | 335 | .partners { 336 | width: 85%; 337 | height: 100px; 338 | margin: auto; 339 | background: url("../assets/partners.JPG") no-repeat; 340 | background-size: contain; 341 | } 342 | 343 | /* Footer */ 344 | footer { 345 | height: 120px; 346 | width: 100%; 347 | display: flex; 348 | justify-content: center; 349 | color: var(--dark); 350 | font-weight: 500; 351 | font-size: 100%; 352 | } 353 | 354 | footer div { 355 | width: 43%; 356 | margin: auto; 357 | } 358 | 359 | /* ABOUT page */ 360 | .about-header { 361 | background-color: #f7f7f7; 362 | } 363 | 364 | /* Section 1 */ 365 | #sec1 { 366 | background-color: #f7f7f7; 367 | padding-bottom: 20px; 368 | } 369 | 370 | .sec1-wrapper { 371 | width: 94%; 372 | margin: auto; 373 | } 374 | 375 | .sec1-pt1 { 376 | color: var(--orange); 377 | text-align: center; 378 | } 379 | 380 | .sec1-pt1 h3 { 381 | font-size: 160%; 382 | font-weight: 500; 383 | padding-top: 20px; 384 | padding-bottom: 15px; 385 | } 386 | 387 | .sec1-pt1 h1 { 388 | font-size: 220%; 389 | padding-bottom: 35px; 390 | } 391 | 392 | .sec1-pt2 { 393 | background-color: white; 394 | border: 0.5px solid lightgray; 395 | margin-bottom: 20px; 396 | } 397 | 398 | .sec1-pt2 p { 399 | padding: 18px; 400 | } 401 | 402 | .sec1-pt3 { 403 | padding: 0 1px; 404 | display: flex; 405 | flex-direction: column; 406 | align-items: center; 407 | padding-bottom: 20px; 408 | } 409 | 410 | .sec1-pt3 p { 411 | text-align: center; 412 | } 413 | 414 | /* Section 2 */ 415 | .sec2-wrapper { 416 | width: 90%; 417 | margin: auto; 418 | } 419 | 420 | .sec2-pt1, 421 | .sec2-pt2 { 422 | color: var(--dark); 423 | display: flex; 424 | flex-direction: column; 425 | align-items: center; 426 | padding-top: 20px; 427 | } 428 | 429 | .sec2-pt1 h2, 430 | .sec3-title h2 { 431 | font-size: 180%; 432 | font-weight: 500; 433 | padding-top: 10px; 434 | } 435 | 436 | .sec2-pt1 span, 437 | .sec3-title span { 438 | color: var(--orange); 439 | } 440 | 441 | .sec2-pt2 { 442 | font-size: 100%; 443 | font-weight: 200; 444 | } 445 | 446 | .sec2-pt3 { 447 | width: 100%; 448 | border: 0.5px solid lightgray; 449 | padding: 40px 0; 450 | margin: 30px 0 40px 0; 451 | } 452 | 453 | .sec2-pt3 img { 454 | width: 100%; 455 | } 456 | 457 | /* Section 3 */ 458 | #sec3 { 459 | border-top: 0.5px solid lightgrey; 460 | } 461 | 462 | .sec3-wrapper { 463 | width: 80%; 464 | margin: auto; 465 | padding-top: 30px; 466 | } 467 | 468 | .sec3-desc, 469 | .sec3-title { 470 | display: flex; 471 | flex-direction: column; 472 | align-items: center; 473 | text-align: center; 474 | } 475 | 476 | .sec3-desc { 477 | font-size: 100%; 478 | font-weight: 300; 479 | color: var(--dark); 480 | margin-top: 20px; 481 | } 482 | 483 | .sec3-blog img { 484 | width: 100%; 485 | height: 200px; 486 | position: relative; 487 | z-index: -1; 488 | } 489 | 490 | .sec3-blog-img-1, 491 | .sec3-blog-img-2 { 492 | position: relative; 493 | display: inline-block; 494 | width: 100%; 495 | height: 200px; 496 | background-image: linear-gradient(180deg, var(--orange), transparent); 497 | } 498 | 499 | .sec3-blog-img-2 { 500 | position: relative !important; 501 | bottom: 70px !important; 502 | } 503 | 504 | .blog-title-1 { 505 | transform: translateY(0); 506 | } 507 | 508 | .blog-title-2 { 509 | transform: translateY(-70px); 510 | } 511 | 512 | .sec3-blog h3 { 513 | text-align: center; 514 | z-index: 5000; 515 | position: relative; 516 | top: 14vh; 517 | color: whitesmoke; 518 | padding: 0 10px; 519 | font-weight: 600; 520 | } 521 | 522 | .sec3-blog span { 523 | font-size: 120%; 524 | font-weight: 900; 525 | color: white; 526 | } 527 | 528 | .blog-img-2::after { 529 | content: "Campground Safety: A Guide for campers"; 530 | color: white; 531 | width: 100%; 532 | height: 20px; 533 | } 534 | 535 | .logo { 536 | display: none; 537 | } 538 | 539 | .logo a { 540 | text-decoration: none; 541 | color: inherit; 542 | } 543 | 544 | .program-anchor { 545 | display: none; 546 | } 547 | 548 | .sec1-pt2 :nth-child(2), 549 | .sec1-pt2 :nth-child(3), 550 | .sec2-pt2 :nth-child(3) { 551 | display: none; 552 | } 553 | 554 | .hide-span { 555 | display: none !important; 556 | } 557 | 558 | /* LINTER REQUESTS */ 559 | .menu li:nth-child(2), 560 | .menu li:nth-child(3) { 561 | margin-top: 100px; 562 | } 563 | 564 | .program-items li img { 565 | width: 50px; 566 | } 567 | 568 | .program-items li h4 { 569 | color: var(--orange); 570 | text-align: center; 571 | } 572 | 573 | .program-items li p { 574 | margin: 0 0 0 10px; 575 | } 576 | 577 | .instructors-button button img { 578 | width: 24px; 579 | position: relative; 580 | top: 5px; 581 | } 582 | 583 | .program-button button:hover { 584 | color: var(--orange); 585 | background-color: white; 586 | } 587 | 588 | .menu a:visited { 589 | color: inherit; 590 | } 591 | 592 | .menu a:focus { 593 | color: inherit; 594 | } 595 | 596 | .navBar { 597 | position: absolute; 598 | top: 30px !important; 599 | } 600 | 601 | /* Media Queries */ 602 | @media screen and (min-width: 768px) { 603 | /* INDEX */ 604 | .pre-navBar { 605 | position: absolute; 606 | top: 0; 607 | left: 0; 608 | z-index: 6000; 609 | width: 100%; 610 | height: 30px; 611 | background-color: #272a31; 612 | color: white; 613 | display: flex !important; 614 | justify-content: flex-end; 615 | } 616 | 617 | .pre-navBar ul { 618 | display: flex; 619 | align-items: center; 620 | list-style: none; 621 | gap: 15px; 622 | margin-right: 5vw; 623 | font-weight: 400; 624 | } 625 | 626 | .pre-navBar img { 627 | width: 22px; 628 | } 629 | 630 | .navBar { 631 | position: absolute; 632 | top: 0; 633 | left: 0; 634 | width: 100%; 635 | height: 100px; 636 | background-color: white; 637 | display: grid !important; 638 | grid-template-columns: 15% 70% 15% !important; 639 | z-index: 10000; 640 | } 641 | 642 | .navBar img { 643 | width: 200px; 644 | height: 80px; 645 | } 646 | 647 | .index-header { 648 | display: none; 649 | } 650 | 651 | .logo { 652 | display: flex; 653 | align-items: center; 654 | justify-content: center; 655 | } 656 | 657 | .menu { 658 | position: static; 659 | display: flex; 660 | align-items: center; 661 | justify-content: space-between; 662 | background-color: transparent; 663 | height: 100px; 664 | color: gray !important; 665 | } 666 | 667 | .menu br { 668 | display: none; 669 | } 670 | 671 | .menu li { 672 | padding: 0 18px !important; 673 | margin: 0 !important; 674 | font-size: 140%; 675 | cursor: pointer; 676 | } 677 | 678 | .nav-button { 679 | display: flex !important; 680 | align-items: center; 681 | justify-content: center; 682 | } 683 | 684 | .nav-button button { 685 | background-color: transparent; 686 | border: 5px solid var(--orange); 687 | color: var(--orange); 688 | padding: 10px; 689 | } 690 | 691 | .x { 692 | display: none !important; 693 | } 694 | 695 | .home { 696 | display: none !important; 697 | } 698 | 699 | /* Hero */ 700 | #hero::after, 701 | #sec1::after { 702 | background-position-y: -6vh; 703 | height: 400px; 704 | width: 300px; 705 | } 706 | 707 | #hero { 708 | padding-top: 200px; 709 | } 710 | 711 | .hero-wrapper { 712 | margin: auto; 713 | margin-left: 14vh; 714 | width: 77%; 715 | box-sizing: border-box; 716 | } 717 | 718 | .hero-div-1 br { 719 | display: block; 720 | } 721 | 722 | .hero-div-1 span { 723 | display: none; 724 | } 725 | 726 | .hero-div-1 h1 { 727 | background-position-y: -30vh; 728 | } 729 | 730 | /* Program */ 731 | .program-items-list { 732 | display: flex; 733 | gap: 9px; 734 | flex-wrap: wrap; 735 | justify-content: space-between; 736 | margin: 0 14vh; 737 | } 738 | 739 | .program-items li { 740 | display: flex; 741 | flex-direction: column; 742 | width: 200px; 743 | height: 180px; 744 | padding: 20px 10px; 745 | margin: 0; 746 | margin-bottom: 29px; 747 | } 748 | 749 | .program-button { 750 | display: none; 751 | } 752 | 753 | .program-anchor { 754 | display: block; 755 | width: 300px; 756 | text-align: center; 757 | color: white; 758 | padding: 20px; 759 | margin: auto; 760 | margin-top: 20px; 761 | } 762 | 763 | .program-anchor a { 764 | font-size: 180%; 765 | color: inherit; 766 | cursor: pointer; 767 | } 768 | 769 | /* Staff */ 770 | #instructors { 771 | padding-bottom: 70px; 772 | } 773 | 774 | .toggle { 775 | display: flex !important; 776 | } 777 | 778 | .instructors-button { 779 | display: none; 780 | } 781 | 782 | .featured-instructors-list { 783 | width: 80%; 784 | margin: 0 14vh !important; 785 | display: grid; 786 | gap: 0; 787 | grid-template-columns: 1fr 1fr; 788 | } 789 | 790 | .featured-instructors-list li { 791 | width: 300px; 792 | } 793 | 794 | /* Staff */ 795 | .partners { 796 | background: url("../assets/partners-scr.JPG") no-repeat; 797 | width: 80%; 798 | background-size: cover; 799 | } 800 | 801 | /* ABOUT */ 802 | 803 | /* Section 1 */ 804 | #sec1 { 805 | padding-top: 80px; 806 | } 807 | 808 | .sec1-pt1 h3 { 809 | display: none; 810 | } 811 | 812 | .sec1-pt1 h1 { 813 | width: 400px; 814 | margin: auto; 815 | } 816 | 817 | .sec1-pt2 { 818 | width: 69%; 819 | margin: auto; 820 | padding: 30px; 821 | margin-bottom: 20px; 822 | } 823 | 824 | .sec1-pt2 p { 825 | padding: 4px 0 !important; 826 | text-align: center; 827 | } 828 | 829 | /* Section 2 */ 830 | 831 | .sec2-pt2 p { 832 | width: 70%; 833 | text-align: center; 834 | } 835 | 836 | .sec2-pt3 { 837 | width: 55%; 838 | margin: 40px auto; 839 | } 840 | 841 | /* Section3 */ 842 | #sec3 { 843 | padding-bottom: 80px; 844 | } 845 | 846 | .sec3-blog { 847 | display: flex; 848 | justify-content: center; 849 | gap: 50px; 850 | } 851 | 852 | .sec3-blog span { 853 | width: 300px; 854 | } 855 | 856 | .sec3-blog img { 857 | bottom: 0; 858 | } 859 | 860 | .sec3-blog-img-2, 861 | .sec3-blog-img-1 { 862 | bottom: 30px !important; 863 | } 864 | 865 | .blog-title-2, 866 | .blog-title-1 { 867 | transform: translate(0) !important; 868 | } 869 | 870 | .partner-about { 871 | display: none !important; 872 | } 873 | 874 | footer { 875 | background-color: #272a31; 876 | color: white; 877 | height: 200px; 878 | display: grid; 879 | grid-template-columns: 1fr 1.6fr; 880 | align-items: center; 881 | font-size: 120%; 882 | padding-bottom: 0; 883 | } 884 | 885 | footer div { 886 | width: 80%; 887 | } 888 | 889 | .hide-span { 890 | display: inline !important; 891 | } 892 | 893 | footer :nth-child(1) { 894 | display: flex; 895 | justify-content: flex-end; 896 | } 897 | 898 | footer :nth-child(2) { 899 | margin-left: 40px; 900 | } 901 | 902 | .footer-index { 903 | background-color: rgb(228, 228, 228); 904 | color: var(--dark); 905 | } 906 | 907 | .sec1-pt2 :nth-child(1), 908 | .sec1-pt2 :nth-child(2), 909 | .sec1-pt2 :nth-child(3) { 910 | display: block; 911 | margin: 0; 912 | padding: 0; 913 | } 914 | 915 | .sec2-pt2 :nth-child(3) { 916 | display: block; 917 | } 918 | 919 | /* END */ 920 | } 921 | 922 | @media screen and (min-width: 1024px) { 923 | .navBar { 924 | display: grid !important; 925 | grid-template-columns: 2fr 3fr 1.5fr !important; 926 | } 927 | 928 | .nav-button { 929 | display: flex !important; 930 | align-items: center; 931 | justify-content: flex-end; 932 | } 933 | 934 | .nav-button button{ 935 | margin-right: 5vw; 936 | } 937 | 938 | .program-items-list { 939 | justify-content: space-between !important; 940 | gap: 10px; 941 | } 942 | 943 | /* END */ 944 | } 945 | 946 | @media screen and (min-width: 1120px) { 947 | .navBar { 948 | display: grid !important; 949 | grid-template-columns: 2fr 3fr 1.5fr !important; 950 | } 951 | 952 | .program-items-list { 953 | justify-content: center !important; 954 | gap: 8px; 955 | margin: auto; 956 | } 957 | 958 | .program-items-list li { 959 | width: 170px; 960 | height: 170px; 961 | } 962 | 963 | .program-items-list :nth-child(6) { 964 | display: none; 965 | } 966 | 967 | /* END */ 968 | } 969 | 970 | @media screen and (min-width: 1440px) { 971 | .hero-wrapper, 972 | .featured-instructors-list { 973 | margin: 0 23vh !important; 974 | } 975 | 976 | .partners { 977 | width: 80%; 978 | background-size: cover; 979 | } 980 | 981 | /* ABOUT */ 982 | 983 | /* Section 3 */ 984 | .sec3-blog { 985 | justify-content: center; 986 | gap: 50px; 987 | } 988 | 989 | /* END */ 990 | } 991 | 992 | /* Last */ 993 | .active { 994 | color: var(--orange) !important; 995 | } 996 | 997 | .inline { 998 | display: inline !important; 999 | } 1000 | 1001 | .flex { 1002 | display: flex !important; 1003 | } 1004 | 1005 | .none { 1006 | display: none !important; 1007 | } 1008 | -------------------------------------------------------------------------------- /assets/All In Campsters.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/topography.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------