├── .github ├── pull_request_template.md └── workflows │ └── close.yml ├── GRADING.md ├── HOW-TO-GET-HELP.md ├── HOW-TO-SUBMIT.md ├── HOW_TO_MARK.md ├── README.md ├── css ├── normalize.css └── style.css ├── favicon.ico ├── homepage-desktop.png ├── img ├── facebook-icon.svg ├── first-background.jpg ├── icon-coffee.svg ├── icon-devices.svg ├── icon-refill.svg ├── instagram-icon.svg ├── karma-logo.svg └── twitter-icon.svg ├── index.html ├── level-2 ├── README.md ├── checkmark.svg ├── homepage-desktop-extended.png ├── homepage-feature.png ├── store-desktop.png └── store-image_by-andrew-neel-unsplash.jpg └── level-3 ├── README.md ├── homepage-mobile.png ├── menu-hamburger.svg └── store-mobile.png /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 14 | 15 | **Volunteers: Are you marking this coursework?** _You can find a guide on how to mark this coursework in `HOW_TO_MARK.md` in the root of this repository_ 16 | 17 | # Your Details 18 | 19 | - Your Name: 20 | - Your City: 21 | - Your Slack Name: 22 | 23 | # Homework Details 24 | 25 | - Module: 26 | - Week: 27 | 28 | # Notes 29 | 30 | - What did you find easy? 31 | 32 | - What did you find hard? 33 | 34 | - What do you still not understand? 35 | 36 | - Any other notes? 37 | -------------------------------------------------------------------------------- /.github/workflows/close.yml: -------------------------------------------------------------------------------- 1 | name: "Close stale issues and PRs" 2 | on: 3 | workflow_dispatch: 4 | schedule: 5 | - cron: "30 1 * * *" 6 | 7 | jobs: 8 | stale: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/stale@v3 12 | with: 13 | stale-pr-message: "Your coursework submission has been closed because nobody has interacted with it in six weeks. You are welcome to re-open it to get more feedback." 14 | days-before-stale: 42 15 | days-before-close: 0 16 | days-before-issue-stale: -1 17 | days-before-issue-close: -1 18 | -------------------------------------------------------------------------------- /GRADING.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # Grading 8 | 9 | All coursework is graded using the Marking Guide found on the Syllabus. 10 | 11 | http://syllabus.codeyourfuture.io/guides/marking-guide 12 | 13 | If you have any questions on these guidelines - please ask. 14 | 15 | ## Coding Standards 16 | 17 | Your code should follow our Coding Standards or it will be marked poorly. 18 | 19 | https://syllabus.codeyourfuture.io/guides/code-style-guide 20 | -------------------------------------------------------------------------------- /HOW-TO-GET-HELP.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # How To Get Help 8 | 9 | When you get stuck it's important that you ask for help at the right time and in the right way - this means you will be able to solve your problem as quickly as possible! 10 | 11 | ## Guide 12 | 13 | Please review our guide on the Syllabus for how to get help 14 | 15 | https://syllabus.codeyourfuture.io/guides/escalation-policy/ 16 | 17 | You should complete all of the steps in the order listed to get help 18 | 19 | ## Reporting Issues in Coursework 20 | 21 | Is there a problem with this coursework? 22 | Have you noticed a bug? 23 | Does something not make sense? 24 | 25 | Post in the relevent channel on Slack depending on the module you are completing: 26 | 27 | - Git - `cyf-module-git` 28 | - HTML/CSS - `cyf-module-html-css` 29 | - JavaScript Core 1 - `cyf-module-js1` 30 | - JavaScript Core 2 - `cyf-module-js2` 31 | - JavaScript Core 2 - `cyf-module-js3` 32 | - React - `cyf-module-react` 33 | - Node - `cyf-module-node` 34 | - SQL - `cyf-module-sql` 35 | - MongoDB - `cyf-module-mongodb` 36 | 37 | None of these? Post in #cyf-syllabus. 38 | -------------------------------------------------------------------------------- /HOW-TO-SUBMIT.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # How To Submit Your Coursework 8 | 9 | You should use Git & Github to submit your coursework as a pull request. 10 | 11 | You can use the Github Desktop cheatsheet here to help you do this. 12 | 13 | [Github Desktop Cheatsheet](http://syllabus.codeyourfuture.io/git/cheatsheet) 14 | 15 | You can also use this lesson to help you submit your coursework. 16 | 17 | [Git Lesson](http://syllabus.codeyourfuture.io/git/index) 18 | 19 | ## Questions & Help 20 | 21 | Not being able to submit your coursework is not an excuse for not doing it. 22 | 23 | If you cannot submit your coursework you **must** message us on Slack to get help. 24 | -------------------------------------------------------------------------------- /HOW_TO_MARK.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | _This file is useful for Volunteers only_ 8 | 9 | ## 1) Solutions 10 | 11 | ### 1.1) Where to find solutions? 12 | 13 | You can find the solution to this coursework in a repository with the same name as this but with `-Solution` after the name. 14 | 15 | For example, for this repo: 16 | 17 | https://github.com/CodeYourFuture/JavaScript-Core-1-Coursework-Week1 18 | 19 | The solutions would be found in: 20 | 21 | https://github.com/CodeYourFuture/JavaScript-Core-1-Coursework-Week1-Solution 22 | 23 | **If you do not have access to these repositories** then please contact your City Coordinator to get access to our Github Team. 24 | 25 | ### 1.2) Using the Solutions Repo 26 | 27 | In these repositories you will find solutions to each week's coursework. These solutions are example answers and will not be the exact solution that students give. You should use it to inform your feedback of the coursework. 28 | 29 | Additionally, you will find marking guides in these places 30 | 31 | - The `marking` folder - Used to store multiple guides on marking 32 | - `marking.md` file - Used to store notes on common problems we're trying to address 33 | - `solutions.md` - A file used by students for notes on best practice 34 | 35 | ## 2) Before You Start 36 | 37 | ### 2.1) Feedback Guide 38 | 39 | A guide for marking coursework can be found here. Please read it before you start. 40 | 41 | https://docs.codeyourfuture.io/teams/education/homework-feedback 42 | 43 | ### 2.2) Marking Guide 44 | 45 | Here is a useful resources you can direct students to when you see them have common mistakes 46 | 47 | https://syllabus.codeyourfuture.io/guides/marking-guide 48 | 49 | This guide should be used when you see a student making a common mistake so instead of writing out a reply you can send them to the a good resource. 50 | 51 | For example, if the student is leaving in lots of commented out code you could write 52 | 53 | ```txt 54 | Great work so far! 55 | 56 | It's best if you remove code that you're not using, you can read more about this here 57 | https://syllabus.codeyourfuture.io/guides/marking-guide#commented-out-code 58 | ``` 59 | 60 | ### 3.3) Style Guide 61 | 62 | All code at CYF should follow this Style Guide 63 | 64 | https://syllabus.codeyourfuture.io/guides/code-style-guide/ 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # karma-clone 2 | 3 | The aim of this exercise is to create a page that looks just like this one: 4 | 5 | ![Karma desktop design](./homepage-desktop.png) 6 | 7 | ### Set up 8 | 9 | - **Fork and clone** this repo. 10 | - To fork, hit the 'fork' button in the top right corner of this page on Github. 11 | Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. 12 | - To clone, click the green button that says 'Code' on that page. 13 | Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Karma repository on Github (which was created when you forked). 14 | 15 | # Instructions 16 | 17 | - **Edit `index.html` and `style.css`** to re-create the design above. 18 | - Remember, use semantic HTML to re-create the structure, and style each element using CSS to make a perfect copy of the above image. 19 | - All the images and icons you need can be found in the `img` folder, and the font 'Roboto' is already loaded into the project. 20 | - **Only create the desktop design** for now. 21 | 22 | ### Submitting your work 23 | - **Commit and push your code often** (for example every half an hour)so you get into the habit and you avoid losing any code that you write if your machine crashes for example. 24 | - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [you can use this guide for creating pull requests](https://curriculum.codeyourfuture.io/guides/create-a-pull-request/). 25 | 26 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * --------------------------------------- 4 | * DO NOT EDIT THIS FILE. 5 | * All your styling should go in style.css 6 | * --------------------------------------- 7 | */ 8 | 9 | 10 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 11 | 12 | /** 13 | * 1. Set default font family to sans-serif. 14 | * 2. Prevent iOS text size adjust after orientation change, without disabling 15 | * user zoom. 16 | */ 17 | 18 | html { 19 | font-family: sans-serif; /* 1 */ 20 | -ms-text-size-adjust: 100%; /* 2 */ 21 | -webkit-text-size-adjust: 100%; /* 2 */ 22 | } 23 | 24 | /** 25 | * Remove default margin. 26 | */ 27 | 28 | body { 29 | margin: 0; 30 | } 31 | 32 | /* HTML5 display definitions 33 | ========================================================================== */ 34 | 35 | /** 36 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 37 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 38 | * and Firefox. 39 | * Correct `block` display not defined for `main` in IE 11. 40 | */ 41 | 42 | article, 43 | aside, 44 | details, 45 | figcaption, 46 | figure, 47 | footer, 48 | header, 49 | hgroup, 50 | main, 51 | menu, 52 | nav, 53 | section, 54 | summary { 55 | display: block; 56 | } 57 | 58 | /** 59 | * 1. Correct `inline-block` display not defined in IE 8/9. 60 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 61 | */ 62 | 63 | audio, 64 | canvas, 65 | progress, 66 | video { 67 | display: inline-block; /* 1 */ 68 | vertical-align: baseline; /* 2 */ 69 | } 70 | 71 | /** 72 | * Prevent modern browsers from displaying `audio` without controls. 73 | * Remove excess height in iOS 5 devices. 74 | */ 75 | 76 | audio:not([controls]) { 77 | display: none; 78 | height: 0; 79 | } 80 | 81 | /** 82 | * Address `[hidden]` styling not present in IE 8/9/10. 83 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 84 | */ 85 | 86 | [hidden], 87 | template { 88 | display: none; 89 | } 90 | 91 | /* Links 92 | ========================================================================== */ 93 | 94 | /** 95 | * Remove the gray background color from active links in IE 10. 96 | */ 97 | 98 | a { 99 | background-color: transparent; 100 | } 101 | 102 | /** 103 | * Improve readability when focused and also mouse hovered in all browsers. 104 | */ 105 | 106 | a:active, 107 | a:hover { 108 | outline: 0; 109 | } 110 | 111 | /* Text-level semantics 112 | ========================================================================== */ 113 | 114 | /** 115 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 116 | */ 117 | 118 | abbr[title] { 119 | border-bottom: 1px dotted; 120 | } 121 | 122 | /** 123 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 124 | */ 125 | 126 | b, 127 | strong { 128 | font-weight: bold; 129 | } 130 | 131 | /** 132 | * Address styling not present in Safari and Chrome. 133 | */ 134 | 135 | dfn { 136 | font-style: italic; 137 | } 138 | 139 | /** 140 | * Address variable `h1` font-size and margin within `section` and `article` 141 | * contexts in Firefox 4+, Safari, and Chrome. 142 | */ 143 | 144 | h1 { 145 | font-size: 2em; 146 | margin: 0.67em 0; 147 | } 148 | 149 | /** 150 | * Address styling not present in IE 8/9. 151 | */ 152 | 153 | mark { 154 | background: #ff0; 155 | color: #000; 156 | } 157 | 158 | /** 159 | * Address inconsistent and variable font size in all browsers. 160 | */ 161 | 162 | small { 163 | font-size: 80%; 164 | } 165 | 166 | /** 167 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 168 | */ 169 | 170 | sub, 171 | sup { 172 | font-size: 75%; 173 | line-height: 0; 174 | position: relative; 175 | vertical-align: baseline; 176 | } 177 | 178 | sup { 179 | top: -0.5em; 180 | } 181 | 182 | sub { 183 | bottom: -0.25em; 184 | } 185 | 186 | /* Embedded content 187 | ========================================================================== */ 188 | 189 | /** 190 | * Remove border when inside `a` element in IE 8/9/10. 191 | */ 192 | 193 | img { 194 | border: 0; 195 | } 196 | 197 | /** 198 | * Correct overflow not hidden in IE 9/10/11. 199 | */ 200 | 201 | svg:not(:root) { 202 | overflow: hidden; 203 | } 204 | 205 | /* Grouping content 206 | ========================================================================== */ 207 | 208 | /** 209 | * Address margin not present in IE 8/9 and Safari. 210 | */ 211 | 212 | figure { 213 | margin: 1em 40px; 214 | } 215 | 216 | /** 217 | * Address differences between Firefox and other browsers. 218 | */ 219 | 220 | hr { 221 | -moz-box-sizing: content-box; 222 | box-sizing: content-box; 223 | height: 0; 224 | } 225 | 226 | /** 227 | * Contain overflow in all browsers. 228 | */ 229 | 230 | pre { 231 | overflow: auto; 232 | } 233 | 234 | /** 235 | * Address odd `em`-unit font size rendering in all browsers. 236 | */ 237 | 238 | code, 239 | kbd, 240 | pre, 241 | samp { 242 | font-family: monospace, monospace; 243 | font-size: 1em; 244 | } 245 | 246 | /* Forms 247 | ========================================================================== */ 248 | 249 | /** 250 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 251 | * styling of `select`, unless a `border` property is set. 252 | */ 253 | 254 | /** 255 | * 1. Correct color not being inherited. 256 | * Known issue: affects color of disabled elements. 257 | * 2. Correct font properties not being inherited. 258 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 259 | */ 260 | 261 | button, 262 | input, 263 | optgroup, 264 | select, 265 | textarea { 266 | color: inherit; /* 1 */ 267 | font: inherit; /* 2 */ 268 | margin: 0; /* 3 */ 269 | } 270 | 271 | /** 272 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 273 | */ 274 | 275 | button { 276 | overflow: visible; 277 | } 278 | 279 | /** 280 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 281 | * All other form control elements do not inherit `text-transform` values. 282 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 283 | * Correct `select` style inheritance in Firefox. 284 | */ 285 | 286 | button, 287 | select { 288 | text-transform: none; 289 | } 290 | 291 | /** 292 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 293 | * and `video` controls. 294 | * 2. Correct inability to style clickable `input` types in iOS. 295 | * 3. Improve usability and consistency of cursor style between image-type 296 | * `input` and others. 297 | */ 298 | 299 | button, 300 | html input[type="button"], /* 1 */ 301 | input[type="reset"], 302 | input[type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | cursor: pointer; /* 3 */ 305 | } 306 | 307 | /** 308 | * Re-set default cursor for disabled elements. 309 | */ 310 | 311 | button[disabled], 312 | html input[disabled] { 313 | cursor: default; 314 | } 315 | 316 | /** 317 | * Remove inner padding and border in Firefox 4+. 318 | */ 319 | 320 | button::-moz-focus-inner, 321 | input::-moz-focus-inner { 322 | border: 0; 323 | padding: 0; 324 | } 325 | 326 | /** 327 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 328 | * the UA stylesheet. 329 | */ 330 | 331 | input { 332 | line-height: normal; 333 | } 334 | 335 | /** 336 | * It's recommended that you don't attempt to style these elements. 337 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 338 | * 339 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 340 | * 2. Remove excess padding in IE 8/9/10. 341 | */ 342 | 343 | input[type="checkbox"], 344 | input[type="radio"] { 345 | box-sizing: border-box; /* 1 */ 346 | padding: 0; /* 2 */ 347 | } 348 | 349 | /** 350 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 351 | * `font-size` values of the `input`, it causes the cursor style of the 352 | * decrement button to change from `default` to `text`. 353 | */ 354 | 355 | input[type="number"]::-webkit-inner-spin-button, 356 | input[type="number"]::-webkit-outer-spin-button { 357 | height: auto; 358 | } 359 | 360 | /** 361 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 362 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 363 | * (include `-moz` to future-proof). 364 | */ 365 | 366 | input[type="search"] { 367 | -webkit-appearance: textfield; /* 1 */ 368 | -moz-box-sizing: content-box; 369 | -webkit-box-sizing: content-box; /* 2 */ 370 | box-sizing: content-box; 371 | } 372 | 373 | /** 374 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 375 | * Safari (but not Chrome) clips the cancel button when the search input has 376 | * padding (and `textfield` appearance). 377 | */ 378 | 379 | input[type="search"]::-webkit-search-cancel-button, 380 | input[type="search"]::-webkit-search-decoration { 381 | -webkit-appearance: none; 382 | } 383 | 384 | /** 385 | * Define consistent border, margin, and padding. 386 | */ 387 | 388 | fieldset { 389 | border: 1px solid #c0c0c0; 390 | margin: 0 2px; 391 | padding: 0.35em 0.625em 0.75em; 392 | } 393 | 394 | /** 395 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 396 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 397 | */ 398 | 399 | legend { 400 | border: 0; /* 1 */ 401 | padding: 0; /* 2 */ 402 | } 403 | 404 | /** 405 | * Remove default vertical scrollbar in IE 8/9/10/11. 406 | */ 407 | 408 | textarea { 409 | overflow: auto; 410 | } 411 | 412 | /** 413 | * Don't inherit the `font-weight` (applied by a rule above). 414 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 415 | */ 416 | 417 | optgroup { 418 | font-weight: bold; 419 | } 420 | 421 | /* Tables 422 | ========================================================================== */ 423 | 424 | /** 425 | * Remove most spacing between table cells. 426 | */ 427 | 428 | table { 429 | border-collapse: collapse; 430 | border-spacing: 0; 431 | } 432 | 433 | td, 434 | th { 435 | padding: 0; 436 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | 2 | /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ 3 | 4 | body { 5 | font-family: 'Roboto', sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | } 8 | 9 | /** 10 | * Add your custom styles below 11 | * 12 | * Remember: 13 | * - Be organised, use comments and separate your styles into meaningful chunks 14 | * for example: General styles, Navigation styles, Hero styles, Footer etc. 15 | * 16 | * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' 17 | */ 18 | 19 | 20 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/favicon.ico -------------------------------------------------------------------------------- /homepage-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/homepage-desktop.png -------------------------------------------------------------------------------- /img/facebook-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /img/first-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/img/first-background.jpg -------------------------------------------------------------------------------- /img/icon-coffee.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /img/icon-devices.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /img/icon-refill.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | -------------------------------------------------------------------------------- /img/instagram-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 18 | -------------------------------------------------------------------------------- /img/karma-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /img/twitter-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Karma 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /level-2/README.md: -------------------------------------------------------------------------------- 1 | # karma-clone 2 | ## Level 2 3 | The aim of this exercise is to: 4 | - add a new section to the homepage 5 | - create a new 'store' page with an order form 6 | - connect the 2 pages together by adding navigation 7 | 8 | # Instructions 9 | 10 | - You'll find the designs inside the 'level-2' folder. 11 | - Add the new section in your `index.html` 12 | - Create a new page called `store.html` and re-create the design for the store page (the design is `level-2/store-desktop.png`) 13 | - For the store page styles, you can keep using the same `style.css` file and add your store page styles in there. 14 | You could also create a specific `store.css` file, but make sure you don't repeat the CSS already in `style.css`! 15 | - Connect the 2 pages by: 16 | - making the homepage's "Get Karma today" button navigate to the store page. 17 | - making the header navigation "Store" link navigate to the store page, and the "Meet Karma" link navigate to the homepage. 18 | 19 | ### Stretch goal 20 | 21 | **Custom radio buttons and checkbox** 22 | 23 | The 2 radio buttons and the checkbox in the store page design are tricky to style and will require you to do a little research. Focus on the rest of the form and layout first, and leave these until the end as a stretch goal. 24 | 25 | ## Submitting your work 26 | - Remember to **commit and push your code often** 27 | - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [you can use this guide for creating pull requests](https://curriculum.codeyourfuture.io/guides/create-a-pull-request/). 28 | **Note:** If you've added your level 2 code to the same branch, then it will just update your previous Pull Request and you won't need a new PR. 29 | 30 | ## Designs 31 | 32 | ![Homepage extended design](./homepage-desktop-extended.png) 33 | 34 | ![Store design](./store-desktop.png) 35 | 36 | -------------------------------------------------------------------------------- /level-2/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /level-2/homepage-desktop-extended.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/level-2/homepage-desktop-extended.png -------------------------------------------------------------------------------- /level-2/homepage-feature.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/level-2/homepage-feature.png -------------------------------------------------------------------------------- /level-2/store-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/level-2/store-desktop.png -------------------------------------------------------------------------------- /level-2/store-image_by-andrew-neel-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/level-2/store-image_by-andrew-neel-unsplash.jpg -------------------------------------------------------------------------------- /level-3/README.md: -------------------------------------------------------------------------------- 1 | # karma-clone 2 | ## Level 3 3 | 4 | Now let's make this website responsive! 5 | 6 | # Instructions 7 | 8 | - Use media queries to make both the homepage and the order page look good on mobile. 9 | - You'll find the mobile designs inside the 'level-3' folder. 10 | - You can use 1 or 2 breakpoints, it's up to you (if you're not sure, start with 768px - it's a classic one as it's the width of an iPad and a good point to switch from a mobile layout to a desktop layout). 11 | - You might have to change some of your existing HTML and CSS code so that your webpage can match the mobile and desktop designs 12 | 13 | ### Submitting your work 14 | - Remember to **commit and push your code often** 15 | - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [you can use this guide for creating pull requests](https://curriculum.codeyourfuture.io/guides/create-a-pull-request/). 16 | **Note:** If you've added your level 3 code to the same branch you used for the previous levels, then it will just update your existing Pull Request and you won't need a new PR. 17 | 18 | ## Designs 19 | 20 | ![Homepage mobile design](./homepage-mobile.png) 21 | 22 | ![Store mobile design](./store-mobile.png) 23 | -------------------------------------------------------------------------------- /level-3/homepage-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/level-3/homepage-mobile.png -------------------------------------------------------------------------------- /level-3/menu-hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /level-3/store-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Module-Project/b587720ca882ddb09e73aa21bc48f687d3ce28ed/level-3/store-mobile.png --------------------------------------------------------------------------------