├── .eslintrc.json ├── .gitignore ├── README.md ├── babel.config.js ├── codegrade_mvp.test.js ├── jest.config.js ├── mocks ├── api.js ├── handlers.js ├── img │ ├── adventure.jpg │ ├── destination.jpg │ ├── fun-bus.jpg │ └── fun.jpg ├── jest.globals.js ├── jest.mocks.js └── server.js ├── package-lock.json ├── package.json ├── src ├── index.html ├── index.js └── less │ ├── footer.less │ ├── global.less │ ├── home-page.less │ ├── index.less │ ├── mixins.less │ ├── navigation.less │ ├── reset.less │ └── variables.less └── webpack.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true, 6 | "jest": true 7 | }, 8 | "extends": [ 9 | "eslint:recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaFeatures": {}, 13 | "ecmaVersion": "latest", 14 | "sourceType": "module" 15 | }, 16 | "rules": {} 17 | } 18 | -------------------------------------------------------------------------------- /.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 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 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 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | 118 | .DS_Store 119 | .vscode 120 | # Logs 121 | logs 122 | *.log 123 | npm-debug.log* 124 | yarn-debug.log* 125 | yarn-error.log* 126 | lerna-debug.log* 127 | .pnpm-debug.log* 128 | 129 | # Diagnostic reports (https://nodejs.org/api/report.html) 130 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 131 | 132 | # Runtime data 133 | pids 134 | *.pid 135 | *.seed 136 | *.pid.lock 137 | 138 | # Directory for instrumented libs generated by jscoverage/JSCover 139 | lib-cov 140 | 141 | # Coverage directory used by tools like istanbul 142 | coverage 143 | *.lcov 144 | 145 | # nyc test coverage 146 | .nyc_output 147 | 148 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 149 | .grunt 150 | 151 | # Bower dependency directory (https://bower.io/) 152 | bower_components 153 | 154 | # node-waf configuration 155 | .lock-wscript 156 | 157 | # Compiled binary addons (https://nodejs.org/api/addons.html) 158 | build/Release 159 | 160 | # Dependency directories 161 | node_modules/ 162 | jspm_packages/ 163 | 164 | # Snowpack dependency directory (https://snowpack.dev/) 165 | web_modules/ 166 | 167 | # TypeScript cache 168 | *.tsbuildinfo 169 | 170 | # Optional npm cache directory 171 | .npm 172 | 173 | # Optional eslint cache 174 | .eslintcache 175 | 176 | # Microbundle cache 177 | .rpt2_cache/ 178 | .rts2_cache_cjs/ 179 | .rts2_cache_es/ 180 | .rts2_cache_umd/ 181 | 182 | # Optional REPL history 183 | .node_repl_history 184 | 185 | # Output of 'npm pack' 186 | *.tgz 187 | 188 | # Yarn Integrity file 189 | .yarn-integrity 190 | 191 | # dotenv environment variables file 192 | .env 193 | .env.test 194 | .env.production 195 | 196 | # parcel-bundler cache (https://parceljs.org/) 197 | .cache 198 | .parcel-cache 199 | 200 | # Next.js build output 201 | .next 202 | out 203 | 204 | # Nuxt.js build / generate output 205 | .nuxt 206 | dist 207 | 208 | # Gatsby files 209 | .cache/ 210 | # Comment in the public line in if your project uses Gatsby and not Next.js 211 | # https://nextjs.org/blog/next-9-1#public-directory-support 212 | # public 213 | 214 | # vuepress build output 215 | .vuepress/dist 216 | 217 | # Serverless directories 218 | .serverless/ 219 | 220 | # FuseBox cache 221 | .fusebox/ 222 | 223 | # DynamoDB Local files 224 | .dynamodb/ 225 | 226 | # TernJS port file 227 | .tern-port 228 | 229 | # Stores VSCode versions used for testing VSCode extensions 230 | .vscode-test 231 | 232 | # yarn v2 233 | .yarn/cache 234 | .yarn/unplugged 235 | .yarn/build-state.yml 236 | .yarn/install-state.gz 237 | .pnp.* 238 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DOM II 2 | 3 | ## Project Description 4 | 5 | Fun Bus wants you to make their site more interactive. They are relying on you to provide 10 unique events to enhance their site. Explore the many events available to you by using the [MDN events reference](https://developer.mozilla.org/en-US/docs/Web/Events). 6 | 7 | ## Git Setup 8 | 9 | * [ ] Create a forked copy of this project. 10 | * [ ] Clone your OWN version of the repository. 11 | * [ ] Implement the project on the main branch, committing changes regularly. 12 | * [ ] Push commits: `git push origin main`. 13 | 14 | ## Running the project 15 | 16 | This project uses [Webpack and Babel](https://bloomtech-1.wistia.com/medias/bhi99dwr2x). Inside `src/index.html` you will notice there is no `script` tag linking the JavaScript, nor a `link` tag linking the styles. When the project starts, Webpack transcompiles the LESS into CSS, and injects the JavaScript and the styles into the HTML. 17 | 18 | Do not **move or rename any files** in this project. The website's source files live inside the `src` folder. Do not make changes to any files outside of the `src` folder, unless it's new dependecies declared in the `package.json` due to installing NPM libraries (E.G. `npm i lodash`). 19 | 20 | * [ ] Run `npm install` to download the project's dependencies. 21 | * [ ] Run `npm start` to launch the website on `http://localhost:3000`. 22 | 23 | ## MVP 24 | 25 | ### Create listeners of 10 types of events 26 | 27 | * [ ] Using your [index.js file](src/index.js), create [event listeners](https://developer.mozilla.org/en-US/docs/Web/Events) of at least 10 _different_ types. You must Use your creativity to make the Fun Bus site more interactive. For example you could change colors, animate objects, add DOM elements, remove them, etc. 28 | 29 | * [ ] Here are some event types you could try to use: 30 | * [ ] `mouseover` 31 | * [ ] `keydown` 32 | * [ ] `wheel` 33 | * [ ] `load` 34 | * [ ] `focus` 35 | * [ ] `resize` 36 | * [ ] `scroll` 37 | * [ ] `select` 38 | * [ ] `dblclick` 39 | * [ ] `drag / drop` 40 | 41 | Note: Drag and drop is a bit more advanced than the others. It's not actually a single type of event but several types that need to work together. 42 | 43 | ### Use preventDefault 44 | 45 | * [ ] Find a usecase for preventDefault. For example, you could prevent a link from navigating when clicked, or to navigate somewhere surprising. 46 | 47 | ## Submission Format 48 | 49 | * [ ] Submit project using Codegrade, as per the instructions in the learning platform. 50 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | testing: { // matches the `NODE_ENV=testing` in "test" script in package.json 4 | plugins: [ 5 | '@babel/plugin-transform-runtime', 6 | ], 7 | presets: [ 8 | [ 9 | '@babel/preset-env', { targets: { chrome: 57 } } 10 | ] 11 | ] 12 | } 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /codegrade_mvp.test.js: -------------------------------------------------------------------------------- 1 | const { server } = require('./mocks/server') 2 | const { screen } = require('@testing-library/dom') 3 | require('@testing-library/jest-dom/extend-expect') 4 | 5 | beforeAll(() => { 6 | require('./src/index') 7 | server.listen() 8 | }) 9 | afterAll(() => { 10 | server.close() 11 | }) 12 | afterEach(() => { 13 | server.resetHandlers() 14 | }) 15 | 16 | describe('just a sanity test', () => { 17 | test('[1] fun bus heading is in the DOM', () => { 18 | expect(screen.findByText(/fun bus/i, { selector: 'h1' })) 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * For a detailed explanation regarding each configuration property, visit: 3 | * https://jestjs.io/docs/configuration 4 | */ 5 | 6 | module.exports = { 7 | // All imported modules in your tests should be mocked automatically 8 | // automock: false, 9 | 10 | // Stop running tests after `n` failures 11 | // bail: 0, 12 | 13 | // The directory where Jest should store its cached dependency information 14 | // cacheDirectory: "/private/var/folders/mq/wc13nlwj4gdgcyshdy5j1hgr0000gn/T/jest_dx", 15 | 16 | // Automatically clear mock calls and instances between every test 17 | // clearMocks: false, 18 | 19 | // Indicates whether the coverage information should be collected while executing the test 20 | // collectCoverage: false, 21 | 22 | // An array of glob patterns indicating a set of files for which coverage information should be collected 23 | // collectCoverageFrom: undefined, 24 | 25 | // The directory where Jest should output its coverage files 26 | // coverageDirectory: undefined, 27 | 28 | // An array of regexp pattern strings used to skip coverage collection 29 | // coveragePathIgnorePatterns: [ 30 | // "/node_modules/" 31 | // ], 32 | 33 | // Indicates which provider should be used to instrument code for coverage 34 | coverageProvider: "v8", 35 | 36 | // A list of reporter names that Jest uses when writing coverage reports 37 | // coverageReporters: [ 38 | // "json", 39 | // "text", 40 | // "lcov", 41 | // "clover" 42 | // ], 43 | 44 | // An object that configures minimum threshold enforcement for coverage results 45 | // coverageThreshold: undefined, 46 | 47 | // A path to a custom dependency extractor 48 | // dependencyExtractor: undefined, 49 | 50 | // Make calling deprecated APIs throw helpful error messages 51 | // errorOnDeprecated: false, 52 | 53 | // Force coverage collection from ignored files using an array of glob patterns 54 | // forceCoverageMatch: [], 55 | 56 | // A path to a module which exports an async function that is triggered once before all test suites 57 | // globalSetup: undefined, 58 | 59 | // A path to a module which exports an async function that is triggered once after all test suites 60 | // globalTeardown: undefined, 61 | 62 | // A set of global variables that need to be available in all test environments 63 | // globals: {}, 64 | 65 | // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. 66 | // maxWorkers: "50%", 67 | 68 | // An array of directory names to be searched recursively up from the requiring module's location 69 | // moduleDirectories: [ 70 | // "node_modules" 71 | // ], 72 | 73 | // An array of file extensions your modules use 74 | // moduleFileExtensions: [ 75 | // "js", 76 | // "jsx", 77 | // "ts", 78 | // "tsx", 79 | // "json", 80 | // "node" 81 | // ], 82 | 83 | // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module 84 | moduleNameMapper: { 85 | "\\.(css|jpg|png|less)$": "/mocks/jest.mocks.js" 86 | }, 87 | 88 | // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader 89 | // modulePathIgnorePatterns: [], 90 | 91 | // Activates notifications for test results 92 | // notify: false, 93 | 94 | // An enum that specifies notification mode. Requires { notify: true } 95 | // notifyMode: "failure-change", 96 | 97 | // A preset that is used as a base for Jest's configuration 98 | // preset: undefined, 99 | 100 | // Run tests from one or more projects 101 | // projects: undefined, 102 | 103 | // Use this configuration option to add custom reporters to Jest 104 | // reporters: undefined, 105 | 106 | // Automatically reset mock state between every test 107 | // resetMocks: false, 108 | 109 | // Reset the module registry before running each individual test 110 | // resetModules: false, 111 | 112 | // A path to a custom resolver 113 | // resolver: undefined, 114 | 115 | // Automatically restore mock state between every test 116 | // restoreMocks: false, 117 | 118 | // The root directory that Jest should scan for tests and modules within 119 | // rootDir: undefined, 120 | 121 | // A list of paths to directories that Jest should use to search for files in 122 | // roots: [ 123 | // "" 124 | // ], 125 | 126 | // Allows you to use a custom runner instead of Jest's default test runner 127 | // runner: "jest-runner", 128 | 129 | // The paths to modules that run some code to configure or set up the testing environment before each test 130 | "setupFiles": [ 131 | "./mocks/jest.globals.js" 132 | ], 133 | 134 | // A list of paths to modules that run some code to configure or set up the testing framework before each test 135 | // setupFilesAfterEnv: [], 136 | 137 | // The number of seconds after which a test is considered as slow and reported as such in the results. 138 | // slowTestThreshold: 5, 139 | 140 | // A list of paths to snapshot serializer modules Jest should use for snapshot testing 141 | // snapshotSerializers: [], 142 | 143 | // The test environment that will be used for testing 144 | testEnvironment: "jsdom", 145 | 146 | // Options that will be passed to the testEnvironment 147 | // testEnvironmentOptions: {}, 148 | 149 | // Adds a location field to test results 150 | // testLocationInResults: false, 151 | 152 | // The glob patterns Jest uses to detect test files 153 | // testMatch: [ 154 | // "**/__tests__/**/*.[jt]s?(x)", 155 | // "**/?(*.)+(spec|test).[tj]s?(x)" 156 | // ], 157 | 158 | // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped 159 | // testPathIgnorePatterns: [ 160 | // "/node_modules/" 161 | // ], 162 | 163 | // The regexp pattern or array of patterns that Jest uses to detect test files 164 | // testRegex: [], 165 | 166 | // This option allows the use of a custom results processor 167 | // testResultsProcessor: undefined, 168 | 169 | // This option allows use of a custom test runner 170 | // testRunner: "jest-circus/runner", 171 | 172 | // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href 173 | // testURL: "http://localhost", 174 | 175 | // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout" 176 | // timers: "real", 177 | 178 | // A map from regular expressions to paths to transformers 179 | // transform: undefined, 180 | 181 | // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation 182 | // transformIgnorePatterns: [ 183 | // "/node_modules/", 184 | // "\\.pnp\\.[^\\/]+$" 185 | // ], 186 | 187 | // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them 188 | // unmockedModulePathPatterns: undefined, 189 | 190 | // Indicates whether each individual test should be reported during the run 191 | // verbose: undefined, 192 | 193 | // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode 194 | // watchPathIgnorePatterns: [], 195 | 196 | // Whether to use watchman for file crawling 197 | // watchman: true, 198 | }; 199 | -------------------------------------------------------------------------------- /mocks/api.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const express = require('express') 3 | const cors = require('cors') 4 | 5 | const api = express() 6 | 7 | api.use(express.json()) 8 | api.use('/img', express.static(path.join(__dirname, 'img'))) 9 | api.use(cors()) 10 | 11 | api.listen(9000, () => { 12 | console.log('listening on 9000') 13 | }) 14 | -------------------------------------------------------------------------------- /mocks/handlers.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const fs = require('fs') 3 | const { rest } = require('msw') 4 | 5 | function getImage(req, res, ctx) { 6 | const imageBuffer = fs.readFileSync( 7 | path.resolve(__dirname, 'img', 'logo.png'), 8 | ) 9 | return res( 10 | ctx.set('Content-Length', imageBuffer.byteLength.toString()), 11 | ctx.set('Content-Type', 'image/png'), 12 | ctx.body(imageBuffer), 13 | ) 14 | } 15 | 16 | exports.handlers = [ 17 | rest.get('http://localhost:9000/img/*', getImage), 18 | ] 19 | -------------------------------------------------------------------------------- /mocks/img/adventure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/DOM-II/e346f61df76da9c9545eb67b5af67e1eea94134b/mocks/img/adventure.jpg -------------------------------------------------------------------------------- /mocks/img/destination.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/DOM-II/e346f61df76da9c9545eb67b5af67e1eea94134b/mocks/img/destination.jpg -------------------------------------------------------------------------------- /mocks/img/fun-bus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/DOM-II/e346f61df76da9c9545eb67b5af67e1eea94134b/mocks/img/fun-bus.jpg -------------------------------------------------------------------------------- /mocks/img/fun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/DOM-II/e346f61df76da9c9545eb67b5af67e1eea94134b/mocks/img/fun.jpg -------------------------------------------------------------------------------- /mocks/jest.globals.js: -------------------------------------------------------------------------------- 1 | globalThis.fetch = require('node-fetch') 2 | -------------------------------------------------------------------------------- /mocks/jest.mocks.js: -------------------------------------------------------------------------------- 1 | module.exports = {} 2 | -------------------------------------------------------------------------------- /mocks/server.js: -------------------------------------------------------------------------------- 1 | const { setupServer } = require('msw/node') 2 | const { handlers } = require('./handlers') 3 | 4 | exports.server = setupServer(...handlers) 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dom-ii", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "start": "fkill :9000 :3000 -s && concurrently \"npm:backend\" \"npm:frontend\"", 6 | "frontend": "webpack serve --open", 7 | "backend": "node mocks/api.js", 8 | "test": "cross-env NODE_ENV=testing jest --verbose" 9 | }, 10 | "devDependencies": { 11 | "@babel/core": "^7.17.5", 12 | "@babel/plugin-transform-runtime": "^7.17.0", 13 | "@babel/preset-env": "^7.16.11", 14 | "@testing-library/dom": "^8.11.3", 15 | "@testing-library/jest-dom": "^5.16.2", 16 | "@types/jest": "^27.4.1", 17 | "babel-loader": "^8.2.3", 18 | "concurrently": "^7.0.0", 19 | "cross-env": "^7.0.3", 20 | "css-loader": "^6.6.0", 21 | "eslint": "^8.10.0", 22 | "fkill-cli": "^7.1.0", 23 | "html-loader": "^3.1.0", 24 | "html-webpack-plugin": "^5.5.0", 25 | "jest": "^27.5.1", 26 | "less": "^4.1.2", 27 | "less-loader": "^10.2.0", 28 | "msw": "^0.38.1", 29 | "nodemon": "^2.0.15", 30 | "style-loader": "^3.3.1", 31 | "webpack": "^5.69.1", 32 | "webpack-cli": "^4.9.2", 33 | "webpack-dev-server": "^4.7.4" 34 | }, 35 | "dependencies": { 36 | "cors": "^2.8.5", 37 | "express": "^4.17.3" 38 | }, 39 | "repository": { 40 | "type": "git", 41 | "url": "git+https://github.com/bloominstituteoftechnology/DOM-II.git" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Great Idea! 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Fun Bus

17 | 23 |
24 |
25 | 26 |
27 |
28 | bus in the sand 29 |

Welcome To Fun Bus!

30 |

Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, 31 | travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger. Adventure fun 32 | traveler pretty design website expedition.

33 |
34 |
35 |
36 |

Let's Go!

37 |

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty 38 | simple traveling fun WordPress wanderlust darn simple organized.

39 |

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website 40 | theme.

41 |
42 |
43 | Let's go on an adventure! 44 |
45 |
46 |
47 |
48 | Lets have fun! 49 |
50 |
51 |

Adventure Awaits

52 |

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty 53 | simple traveling fun WordPress wanderlust darn simple organized.

54 |

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website 55 | theme.

56 |
57 | 58 |
59 |
60 |

Pick Your Destination

61 |

Expedition excursion design darn excursion fun, clean simple organized WordPress Travel colorful webdesign. 62 | Traveler blogger website design expedition clean excursion traveling.

63 | Second slide 64 |
65 |
66 | 67 |
68 |

Fun In The Sun

69 |

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. 70 | Traveler blogger website design expedition clean excursion traveling.

71 |
Sign Me Up!
72 |
73 |
74 |

Mountain Excursion

75 |

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. 76 | Traveler blogger website design expedition clean excursion traveling.

77 |
Sign Me Up!
78 |
79 |
80 |

Island Getaway

81 |

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. 82 | Traveler blogger website design expedition clean excursion traveling.

83 |
Sign Me Up!
84 |
85 |
86 |
87 | 88 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './less/index.less' 2 | 3 | // Your code goes here! 4 | -------------------------------------------------------------------------------- /src/less/footer.less: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | border-top: 2px dashed @silver; 4 | background: @sandy-beach; 5 | 6 | p { 7 | text-align: center; 8 | color: @font-color; 9 | font-size: 1.6rem; 10 | padding: 20px; 11 | } 12 | } -------------------------------------------------------------------------------- /src/less/global.less: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-size: 62.5%; 7 | } 8 | 9 | html, body { 10 | font-family: 'Roboto', sans-serif; 11 | } 12 | 13 | h1, h2, h3, h4, h5 { 14 | font-family: 'Indie Flower', cursive; 15 | } 16 | 17 | h1 { 18 | font-size: 4rem; 19 | } 20 | 21 | h2 { 22 | font-size: 3.2rem; 23 | padding-bottom: 10px; 24 | } 25 | 26 | h4 { 27 | font-size: 2.5rem; 28 | padding-bottom: 10px; 29 | } 30 | 31 | p { 32 | line-height: 1.5; 33 | font-size: 1.6rem; 34 | padding-bottom: 10px; 35 | } 36 | 37 | img { 38 | max-width: 100%; 39 | height: auto; 40 | } 41 | 42 | .container { 43 | max-width: 800px; 44 | width: 100%; 45 | margin: 0 auto; 46 | 47 | @media @mobile { 48 | width: 90%; 49 | margin: 0 5%; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/less/home-page.less: -------------------------------------------------------------------------------- 1 | .home { 2 | 3 | .intro { 4 | padding: 90px 0 10px; 5 | border-bottom: 2px dashed @navigation-border; 6 | 7 | img { 8 | max-width: 100%; 9 | height: auto; 10 | } 11 | 12 | h2 { 13 | margin-top: 20px; 14 | } 15 | } 16 | 17 | .content-section { 18 | margin: 30px 0; 19 | display: flex; 20 | flex-wrap: wrap; 21 | justify-content: space-between; 22 | 23 | 24 | 25 | .text-content { 26 | width: 48%; 27 | padding-right: 1%; 28 | 29 | @media @mobile { 30 | width: 100%; 31 | padding: 0; 32 | } 33 | } 34 | 35 | .img-content { 36 | width: 48%; 37 | padding-left: 1%; 38 | 39 | @media @mobile { 40 | width: 100%; 41 | padding: 0; 42 | } 43 | 44 | img { 45 | border-radius: 10px; 46 | 47 | @media @mobile { 48 | width: 100%; 49 | } 50 | } 51 | } 52 | } 53 | 54 | .inverse-content { 55 | padding-bottom: 30px; 56 | border-bottom: 2px dashed @navigation-border; 57 | 58 | .text-content { 59 | padding-left: 1%; 60 | padding-right: 0; 61 | 62 | @media @mobile { 63 | order: 1; 64 | } 65 | } 66 | 67 | .img-content { 68 | padding-right: 1%; 69 | padding-left: 0; 70 | 71 | @media @mobile { 72 | order: 2; 73 | } 74 | } 75 | } 76 | 77 | .content-destination { 78 | width: 75%; 79 | margin: 0 auto 30px; 80 | 81 | @media @mobile { 82 | width: 100%; 83 | } 84 | 85 | img { 86 | border-radius: 10px; 87 | } 88 | } 89 | 90 | .content-pick { 91 | padding-top: 30px; 92 | border-top: 2px dashed @navigation-border; 93 | display: flex; 94 | justify-content: space-between; 95 | 96 | @media @mobile { 97 | flex-wrap: wrap; 98 | } 99 | 100 | .destination { 101 | width: 30%; 102 | margin-bottom: 30px; 103 | 104 | @media @mobile { 105 | width: 80%; 106 | margin: 0 auto 30px; 107 | } 108 | 109 | .btn { 110 | .button-creator(200px, 45px, @button-bg, @white, 1.8rem); 111 | } 112 | } 113 | } 114 | }// home -------------------------------------------------------------------------------- /src/less/index.less: -------------------------------------------------------------------------------- 1 | // Variables and Mixins 2 | @import 'variables.less'; 3 | @import 'mixins.less'; 4 | 5 | // Reset and Global Styles 6 | @import 'reset.less'; 7 | @import 'global.less'; 8 | 9 | // Reusable components 10 | @import 'navigation.less'; 11 | @import 'footer.less'; 12 | 13 | // Page Specific 14 | @import 'home-page.less'; -------------------------------------------------------------------------------- /src/less/mixins.less: -------------------------------------------------------------------------------- 1 | .center() { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | .border-radius(@radius) { 8 | -webkit-border-radius: @radius; 9 | -moz-border-radius: @radius; 10 | border-radius: @radius; 11 | } 12 | 13 | .button-creator(@width, @height, @bg-color, @font-color, @font-size) { 14 | .border-radius(15px); 15 | .center; 16 | width: @width; 17 | height: @height; 18 | background-color: @bg-color; 19 | color: @font-color; 20 | border: 1px solid @silver; 21 | cursor: pointer; 22 | font-size: @font-size; 23 | 24 | @media @mobile { 25 | width: 100%; 26 | } 27 | 28 | &:hover { 29 | background: @white; 30 | color: @button-bg; 31 | } 32 | } -------------------------------------------------------------------------------- /src/less/navigation.less: -------------------------------------------------------------------------------- 1 | .main-navigation { 2 | width: 100%; 3 | height: 90px; 4 | background: @main-bg; 5 | border-bottom: 2px dashed @navigation-border; 6 | position: fixed; 7 | 8 | .nav-container { 9 | height: 100%; 10 | display: flex; 11 | align-items: center; 12 | justify-content: space-between; 13 | 14 | @media @mobile { 15 | flex-wrap: wrap; 16 | justify-content: center; 17 | padding-top: 10px; 18 | } 19 | 20 | .logo-heading { 21 | @media @mobile { 22 | font-size: 3rem; 23 | } 24 | } 25 | 26 | .nav { 27 | width: 350px; 28 | display: flex; 29 | justify-content: space-evenly; 30 | 31 | @media @mobile { 32 | width: 100%; 33 | justify-content: space-around; 34 | } 35 | 36 | 37 | a { 38 | font-size: 1.6rem; 39 | color: @font-color; 40 | text-decoration: none; 41 | } 42 | } 43 | } 44 | } // .main-navigation -------------------------------------------------------------------------------- /src/less/reset.less: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /src/less/variables.less: -------------------------------------------------------------------------------- 1 | @mobile: ~"(max-width: 500px)"; 2 | 3 | // Color assignments 4 | @font-color: @shark; 5 | @button-bg: @eastern-blue; 6 | @main-bg: @white; 7 | @navigation-border: @silver; 8 | @footer-bg: @sandy-beach; 9 | 10 | // Colors 11 | @white: #FFFFFF; 12 | @silver: #C0C0C0; 13 | @shark: #212529; 14 | @eastern-blue: #17A2B8; 15 | @sandy-beach: #FFEBCD; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | 4 | module.exports = { 5 | entry: './src/index.js', 6 | mode: 'development', 7 | output: { 8 | filename: 'index.js', 9 | publicPath: '/', 10 | path: path.resolve(__dirname, 'dist'), 11 | }, 12 | devtool: 'source-map', 13 | plugins: [ 14 | new HtmlWebpackPlugin({ 15 | template: 'src/index.html', 16 | }), 17 | ], 18 | devServer: { 19 | static: path.join(__dirname, 'dist'), 20 | compress: true, 21 | port: 3000, 22 | }, 23 | module: { 24 | rules: [ 25 | { 26 | test: /\.html$/i, 27 | exclude: /node_modules/, 28 | loader: 'html-loader', 29 | }, 30 | { 31 | test: /\.m?js$/i, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: 'babel-loader', 35 | options: { 36 | 'presets': [['@babel/preset-env', { targets: { chrome: '80' } }]], 37 | } 38 | }, 39 | }, 40 | { 41 | test: /\.less$/i, 42 | exclude: /node_modules/, 43 | use: [ 44 | { loader: "style-loader" }, 45 | { loader: "css-loader" }, 46 | { loader: "less-loader" }, 47 | ], 48 | }, 49 | ], 50 | }, 51 | } 52 | --------------------------------------------------------------------------------