├── css └── main.css ├── flexbox-challenge-4.pdf ├── img ├── browser-firefox.svg ├── image-01.jpg └── image-02.jpg └── index.html /css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --clr-primary-200: #f3eed9; 3 | --clr-primary-400: red; 4 | 5 | --clr-neutral-100: #fff; 6 | --clr-neutral-900: #222c2a; 7 | 8 | --ff-primary: "Roboto", sans-serif; 9 | --ff-accent: "Playfair Display", serif; 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | font-family: var(--ff-primary); 20 | font-weight: 400; 21 | font-size: 1.3125rem; 22 | line-height: 1.6; 23 | background-image: url("abc"); 24 | } 25 | 26 | body, 27 | h1, 28 | h2, 29 | h3, 30 | p { 31 | margin: 0; 32 | } 33 | 34 | h1, 35 | h2, 36 | h3 { 37 | color: var(--clr-primary-400); 38 | font-family: var(--ff-accent); 39 | font-weight: 900; 40 | line-height: 1; 41 | } 42 | 43 | h2, 44 | h3, 45 | p { 46 | margin-bottom: 1em; 47 | } 48 | 49 | img { 50 | display: block; 51 | max-width: 100%; 52 | } 53 | 54 | .text-center { 55 | text-align: center; 56 | } 57 | 58 | header, 59 | section { 60 | padding: 4rem 0; 61 | @media (min-width: 40em) { 62 | header, 63 | section { 64 | padding: 7rem 0; 65 | } 66 | } 67 | } 68 | 69 | .container { 70 | margin-inline: auto; 71 | width: min(90%, 70.5rem); 72 | } 73 | 74 | .split { 75 | display: flex; 76 | flex-direction: column; 77 | } 78 | 79 | @media (min-width: 40em) { 80 | .split { 81 | flex-direction: row; 82 | } 83 | 84 | .split > * { 85 | flex-basis: 100%; 86 | } 87 | 88 | .split > * + * { 89 | margin-left: 2em; 90 | } 91 | } 92 | 93 | .container--narrow { 94 | max-width: 34rem; 95 | } 96 | 97 | .bg-light { 98 | background-color: var(--clr-primary-200); 99 | } 100 | 101 | .bg-primary { 102 | color: var(--clr-neutral-100); 103 | background-color: var(--clr-primary-400); 104 | } 105 | 106 | .bg-dark { 107 | color: var(--clr-neutral-100); 108 | background-color: var(--clr-neutral-900); 109 | } 110 | 111 | .bg-primary h2, 112 | .bg-dark h2 { 113 | color: var(--clr-primary-200); 114 | } 115 | -------------------------------------------------------------------------------- /flexbox-challenge-4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/responsive-made-easy/3a46accc8addc80838ec7c2fc76a2f07b26ada5e/flexbox-challenge-4.pdf -------------------------------------------------------------------------------- /img/browser-firefox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | browser-firefox 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /img/image-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/responsive-made-easy/3a46accc8addc80838ec7c2fc76a2f07b26ada5e/img/image-01.jpg -------------------------------------------------------------------------------- /img/image-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/responsive-made-easy/3a46accc8addc80838ec7c2fc76a2f07b26ada5e/img/image-02.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Made Easy 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

Lorem, ipsum dolor.

20 |

Responsive layouts don’t have to be a struggle

21 | 22 |
23 |
24 | 25 |
26 |
27 |

Quality Designs

28 |
29 |
30 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure aperiam inventore nemo, asperiores dolorem 31 | nisi voluptate omnis quam sit doloremque expedita architecto dicta, at consequatur.

32 |
33 |
34 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure aperiam inventore nemo, asperiores dolorem 35 | nisi voluptate omnis quam sit doloremque expedita architecto dicta, at consequatur.

36 |
37 |
38 |

Eum quisquam deleniti facere fugit. Vero quidem sunt fuga fugit ea voluptatum placeat ullam eveniet, 39 | minima 40 | sed veritatis laboriosam. Quia cumque est cupiditate quod eum?

41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 | foggy mountains with sun setting behind them 51 |
52 |
53 |

Made custom for you

54 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel ipsum dicta fuga vero aliquam! Officiis?

55 |
56 |
57 | man standing on mountain edge looking at sunset 58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 |
66 |
67 | foggy mountains with sun setting behind them 68 |
69 |
70 |

Created with care

71 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis id hic at vel voluptatem reiciendis 72 | aut, 73 | esse aperiam? Quia aperiam nesciunt sint iste laboriosam quibusdam minus molestias blanditiis esse!

74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 | --------------------------------------------------------------------------------