├── Module 1 - Putting it all together ├── images │ └── boardwalk.png ├── index.html └── normalize.css ├── Module 2 - Starting to think Responsively ├── images │ └── elephants.jpg ├── index.html └── normalize.css ├── Module 2- A simple life ├── css │ └── styles.css ├── img │ ├── about-me.jpg │ ├── deco.jpg │ ├── food.jpg │ ├── life.jpg │ └── work.jpg ├── index.html ├── normalize.css └── text │ ├── about-me.md │ ├── footer.md │ ├── hompage.md │ └── sidebar.md ├── Module 3 - BBQ splash page ├── images │ ├── dark-ribs.jpg │ └── ribs.jpg └── text │ └── text.md ├── Module 4 - Card component ├── css │ └── style.css ├── img │ └── tech.jpg ├── index.html └── normalize.css ├── Module 5 - Social life with grid ├── about-me.html ├── css │ └── styles.css ├── img │ ├── about-me.jpg │ ├── deco.jpg │ ├── food.jpg │ ├── life.jpg │ └── work.jpg ├── index.html ├── normalize.css ├── recent-posts.html └── text │ ├── about-me.md │ ├── footer.md │ ├── hompage.md │ └── sidebar.md ├── Module 6 - Jake and Elwood ├── img │ ├── about-me.jpg │ ├── contact.jpg │ ├── hero-bg.jpg │ └── logo.png ├── index.html ├── normalize.css └── text files │ ├── about.md │ ├── contact.md │ ├── footer.md │ └── homepage.md └── README.md /Module 1 - Putting it all together/images/boardwalk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 1 - Putting it all together/images/boardwalk.png -------------------------------------------------------------------------------- /Module 1 - Putting it all together/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Module 1 - Putting it all together/normalize.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | body { 6 | background-color: white; 7 | cursor: default; 8 | box-sizing: border-box; 9 | } 10 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 11 | 12 | 13 | html { 14 | font-family: sans-serif; 15 | 16 | line-height: 1.15; 17 | 18 | -ms-text-size-adjust: 100%; 19 | 20 | -webkit-text-size-adjust: 100%; 21 | 22 | } 23 | 24 | article, 25 | aside, 26 | footer, 27 | header, 28 | nav, 29 | section { 30 | display: block; 31 | } 32 | 33 | h1 { 34 | font-size: 2em; 35 | margin: 0.67em 0; 36 | } 37 | 38 | 39 | figcaption, 40 | figure, 41 | main { 42 | 43 | display: block; 44 | } 45 | 46 | figure { 47 | margin: 1em 40px; 48 | } 49 | 50 | hr { 51 | box-sizing: content-box; 52 | 53 | height: 0; 54 | 55 | overflow: visible; 56 | 57 | } 58 | 59 | pre { 60 | font-family: monospace, monospace; 61 | 62 | font-size: 1em; 63 | 64 | } 65 | 66 | 67 | a { 68 | background-color: transparent; 69 | 70 | -webkit-text-decoration-skip: objects; 71 | 72 | } 73 | 74 | a:active, 75 | a:hover { 76 | outline-width: 0; 77 | } 78 | 79 | abbr[title] { 80 | border-bottom: none; 81 | 82 | text-decoration: underline; 83 | 84 | text-decoration: underline dotted; 85 | 86 | } 87 | 88 | b, 89 | strong { 90 | font-weight: inherit; 91 | } 92 | 93 | b, 94 | strong { 95 | font-weight: bolder; 96 | } 97 | 98 | code, 99 | kbd, 100 | samp { 101 | font-family: monospace, monospace; 102 | 103 | font-size: 1em; 104 | 105 | } 106 | 107 | dfn { 108 | font-style: italic; 109 | } 110 | 111 | mark { 112 | background-color: #ff0; 113 | color: #000; 114 | } 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | sub, 121 | sup { 122 | font-size: 75%; 123 | line-height: 0; 124 | position: relative; 125 | vertical-align: baseline; 126 | } 127 | sub { 128 | bottom: -0.25em; 129 | } 130 | sup { 131 | top: -0.5em; 132 | } 133 | 134 | 135 | audio, 136 | video { 137 | display: inline-block; 138 | } 139 | 140 | audio:not([controls]) { 141 | display: none; 142 | height: 0; 143 | } 144 | 145 | img { 146 | border-style: none; 147 | } 148 | 149 | svg:not(:root) { 150 | overflow: hidden; 151 | } 152 | 153 | 154 | button, 155 | input, 156 | optgroup, 157 | select, 158 | textarea { 159 | font-family: sans-serif; 160 | 161 | font-size: 100%; 162 | 163 | line-height: 1.15; 164 | 165 | margin: 0; 166 | 167 | } 168 | 169 | button, 170 | input { 171 | 172 | overflow: visible; 173 | } 174 | 175 | button, 176 | select { 177 | 178 | text-transform: none; 179 | } 180 | 181 | button, 182 | html [type="button"], 183 | [type="reset"], 184 | [type="submit"] { 185 | -webkit-appearance: button; 186 | 187 | } 188 | 189 | button::-moz-focus-inner, 190 | [type="button"]::-moz-focus-inner, 191 | [type="reset"]::-moz-focus-inner, 192 | [type="submit"]::-moz-focus-inner { 193 | border-style: none; 194 | padding: 0; 195 | } 196 | 197 | button:-moz-focusring, 198 | [type="button"]:-moz-focusring, 199 | [type="reset"]:-moz-focusring, 200 | [type="submit"]:-moz-focusring { 201 | outline: 1px dotted ButtonText; 202 | } 203 | 204 | fieldset { 205 | border: 1px solid #c0c0c0; 206 | margin: 0 2px; 207 | padding: 0.35em 0.625em 0.75em; 208 | } 209 | 210 | legend { 211 | box-sizing: border-box; 212 | 213 | color: inherit; 214 | 215 | display: table; 216 | 217 | max-width: 100%; 218 | 219 | padding: 0; 220 | 221 | white-space: normal; 222 | 223 | } 224 | 225 | progress { 226 | display: inline-block; 227 | 228 | vertical-align: baseline; 229 | 230 | } 231 | 232 | textarea { 233 | overflow: auto; 234 | } 235 | 236 | [type="checkbox"], 237 | [type="radio"] { 238 | box-sizing: border-box; 239 | 240 | padding: 0; 241 | 242 | } 243 | 244 | [type="number"]::-webkit-inner-spin-button, 245 | [type="number"]::-webkit-outer-spin-button { 246 | height: auto; 247 | } 248 | 249 | [type="search"] { 250 | -webkit-appearance: textfield; 251 | 252 | outline-offset: -2px; 253 | 254 | } 255 | 256 | [type="search"]::-webkit-search-cancel-button, 257 | [type="search"]::-webkit-search-decoration { 258 | -webkit-appearance: none; 259 | } 260 | 261 | ::-webkit-file-upload-button { 262 | -webkit-appearance: button; 263 | 264 | font: inherit; 265 | 266 | } 267 | 268 | 269 | details, 270 | menu { 271 | display: block; 272 | } 273 | 274 | summary { 275 | display: list-item; 276 | } 277 | 278 | 279 | canvas { 280 | display: inline-block; 281 | } 282 | 283 | template { 284 | display: none; 285 | } 286 | 287 | 288 | [hidden] { 289 | display: none; 290 | } 291 | input:focus, 292 | input.__focus { 293 | outline: 4px solid rgba(117, 170, 255, 0.5); 294 | } 295 | button:focus, 296 | button.__focus { 297 | outline: 4px solid rgba(117, 170, 255, 0.5); 298 | } 299 | button:active, 300 | button.__active { 301 | -ms-transform: scale(0.97); 302 | transform: scale(0.97); 303 | } 304 | ::-moz-selection { 305 | background-color: #75aaff; 306 | } 307 | ::selection { 308 | background-color: #75aaff; 309 | } 310 | 311 | noscript { 312 | display: none !important; 313 | } -------------------------------------------------------------------------------- /Module 2 - Starting to think Responsively/images/elephants.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 2 - Starting to think Responsively/images/elephants.jpg -------------------------------------------------------------------------------- /Module 2 - Starting to think Responsively/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Starting to think responsively 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Module 2 - Starting to think Responsively/normalize.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | body { 6 | background-color: white; 7 | cursor: default; 8 | box-sizing: border-box; 9 | } 10 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 11 | 12 | 13 | html { 14 | font-family: sans-serif; 15 | 16 | line-height: 1.15; 17 | 18 | -ms-text-size-adjust: 100%; 19 | 20 | -webkit-text-size-adjust: 100%; 21 | 22 | } 23 | 24 | article, 25 | aside, 26 | footer, 27 | header, 28 | nav, 29 | section { 30 | display: block; 31 | } 32 | 33 | h1 { 34 | font-size: 2em; 35 | margin: 0.67em 0; 36 | } 37 | 38 | 39 | figcaption, 40 | figure, 41 | main { 42 | 43 | display: block; 44 | } 45 | 46 | figure { 47 | margin: 1em 40px; 48 | } 49 | 50 | hr { 51 | box-sizing: content-box; 52 | 53 | height: 0; 54 | 55 | overflow: visible; 56 | 57 | } 58 | 59 | pre { 60 | font-family: monospace, monospace; 61 | 62 | font-size: 1em; 63 | 64 | } 65 | 66 | 67 | a { 68 | background-color: transparent; 69 | 70 | -webkit-text-decoration-skip: objects; 71 | 72 | } 73 | 74 | a:active, 75 | a:hover { 76 | outline-width: 0; 77 | } 78 | 79 | abbr[title] { 80 | border-bottom: none; 81 | 82 | text-decoration: underline; 83 | 84 | text-decoration: underline dotted; 85 | 86 | } 87 | 88 | b, 89 | strong { 90 | font-weight: inherit; 91 | } 92 | 93 | b, 94 | strong { 95 | font-weight: bolder; 96 | } 97 | 98 | code, 99 | kbd, 100 | samp { 101 | font-family: monospace, monospace; 102 | 103 | font-size: 1em; 104 | 105 | } 106 | 107 | dfn { 108 | font-style: italic; 109 | } 110 | 111 | mark { 112 | background-color: #ff0; 113 | color: #000; 114 | } 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | sub, 121 | sup { 122 | font-size: 75%; 123 | line-height: 0; 124 | position: relative; 125 | vertical-align: baseline; 126 | } 127 | sub { 128 | bottom: -0.25em; 129 | } 130 | sup { 131 | top: -0.5em; 132 | } 133 | 134 | 135 | audio, 136 | video { 137 | display: inline-block; 138 | } 139 | 140 | audio:not([controls]) { 141 | display: none; 142 | height: 0; 143 | } 144 | 145 | img { 146 | border-style: none; 147 | } 148 | 149 | svg:not(:root) { 150 | overflow: hidden; 151 | } 152 | 153 | 154 | button, 155 | input, 156 | optgroup, 157 | select, 158 | textarea { 159 | font-family: sans-serif; 160 | 161 | font-size: 100%; 162 | 163 | line-height: 1.15; 164 | 165 | margin: 0; 166 | 167 | } 168 | 169 | button, 170 | input { 171 | 172 | overflow: visible; 173 | } 174 | 175 | button, 176 | select { 177 | 178 | text-transform: none; 179 | } 180 | 181 | button, 182 | html [type="button"], 183 | [type="reset"], 184 | [type="submit"] { 185 | -webkit-appearance: button; 186 | 187 | } 188 | 189 | button::-moz-focus-inner, 190 | [type="button"]::-moz-focus-inner, 191 | [type="reset"]::-moz-focus-inner, 192 | [type="submit"]::-moz-focus-inner { 193 | border-style: none; 194 | padding: 0; 195 | } 196 | 197 | button:-moz-focusring, 198 | [type="button"]:-moz-focusring, 199 | [type="reset"]:-moz-focusring, 200 | [type="submit"]:-moz-focusring { 201 | outline: 1px dotted ButtonText; 202 | } 203 | 204 | fieldset { 205 | border: 1px solid #c0c0c0; 206 | margin: 0 2px; 207 | padding: 0.35em 0.625em 0.75em; 208 | } 209 | 210 | legend { 211 | box-sizing: border-box; 212 | 213 | color: inherit; 214 | 215 | display: table; 216 | 217 | max-width: 100%; 218 | 219 | padding: 0; 220 | 221 | white-space: normal; 222 | 223 | } 224 | 225 | progress { 226 | display: inline-block; 227 | 228 | vertical-align: baseline; 229 | 230 | } 231 | 232 | textarea { 233 | overflow: auto; 234 | } 235 | 236 | [type="checkbox"], 237 | [type="radio"] { 238 | box-sizing: border-box; 239 | 240 | padding: 0; 241 | 242 | } 243 | 244 | [type="number"]::-webkit-inner-spin-button, 245 | [type="number"]::-webkit-outer-spin-button { 246 | height: auto; 247 | } 248 | 249 | [type="search"] { 250 | -webkit-appearance: textfield; 251 | 252 | outline-offset: -2px; 253 | 254 | } 255 | 256 | [type="search"]::-webkit-search-cancel-button, 257 | [type="search"]::-webkit-search-decoration { 258 | -webkit-appearance: none; 259 | } 260 | 261 | ::-webkit-file-upload-button { 262 | -webkit-appearance: button; 263 | 264 | font: inherit; 265 | 266 | } 267 | 268 | 269 | details, 270 | menu { 271 | display: block; 272 | } 273 | 274 | summary { 275 | display: list-item; 276 | } 277 | 278 | 279 | canvas { 280 | display: inline-block; 281 | } 282 | 283 | template { 284 | display: none; 285 | } 286 | 287 | 288 | [hidden] { 289 | display: none; 290 | } 291 | input:focus, 292 | input.__focus { 293 | outline: 4px solid rgba(117, 170, 255, 0.5); 294 | } 295 | button:focus, 296 | button.__focus { 297 | outline: 4px solid rgba(117, 170, 255, 0.5); 298 | } 299 | button:active, 300 | button.__active { 301 | -ms-transform: scale(0.97); 302 | transform: scale(0.97); 303 | } 304 | ::-moz-selection { 305 | background-color: #75aaff; 306 | } 307 | ::selection { 308 | background-color: #75aaff; 309 | } 310 | 311 | noscript { 312 | display: none !important; 313 | } -------------------------------------------------------------------------------- /Module 2- A simple life/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Fonts 2 | ----- 3 | font-family: 'Lora', serif; 4 | font-family: 'Ubuntu', sans-serif; 5 | */ 6 | 7 | body { 8 | margin: 0; 9 | font-family: 'Ubuntu', sans-serif; 10 | } 11 | 12 | /* ================= 13 | Typography 14 | ================= */ 15 | 16 | h1 { 17 | font-family: 'Lora', serif; 18 | font-weight: 400; 19 | color: #143774; 20 | font-size: 2rem; 21 | margin: 0; 22 | } 23 | 24 | .subtitle { 25 | font-weight: 700; 26 | color: #1792d2; 27 | font-size: .75rem; 28 | margin: 0; 29 | } 30 | 31 | /* ================= 32 | Layout 33 | ================= */ 34 | 35 | .container { 36 | width: 90%; 37 | max-width: 900px; 38 | margin: 0 auto; 39 | } 40 | 41 | .container-nav { 42 | display: flex; 43 | justify-content: space-between; 44 | } 45 | 46 | header { 47 | background: #f8f8f8; 48 | padding: 2em 0; 49 | } 50 | 51 | @media (max-width: 675px) { 52 | .container-nav { 53 | flex-direction: column; 54 | } 55 | 56 | header { 57 | text-align: center; 58 | } 59 | } 60 | 61 | /* navigation */ 62 | 63 | nav ul { 64 | list-style: none; 65 | padding: 0; 66 | display: flex; 67 | justify-content: center; 68 | } 69 | 70 | nav li { 71 | margin-left: 2em; 72 | } 73 | 74 | nav a { 75 | text-decoration: none; 76 | color: #707070; 77 | font-weight: 700; 78 | padding: .25em 0; 79 | } 80 | 81 | nav a:hover, 82 | nav a:focus { 83 | color: #1792d2; 84 | } 85 | 86 | .current-page { 87 | border-bottom: 1px solid #707070; 88 | } 89 | 90 | .current-page:hover { 91 | color: #707070; 92 | } 93 | 94 | @media (max-width: 675px) { 95 | nav ul { 96 | flex-direction: column; 97 | } 98 | 99 | nav li { 100 | margin: .5em 0; 101 | } 102 | } -------------------------------------------------------------------------------- /Module 2- A simple life/img/about-me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 2- A simple life/img/about-me.jpg -------------------------------------------------------------------------------- /Module 2- A simple life/img/deco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 2- A simple life/img/deco.jpg -------------------------------------------------------------------------------- /Module 2- A simple life/img/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 2- A simple life/img/food.jpg -------------------------------------------------------------------------------- /Module 2- A simple life/img/life.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 2- A simple life/img/life.jpg -------------------------------------------------------------------------------- /Module 2- A simple life/img/work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 2- A simple life/img/work.jpg -------------------------------------------------------------------------------- /Module 2- A simple life/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
9 |
10 |

Living the social life

11 |

A blog exploring minimalism in life

12 |
13 | 20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /Module 2- A simple life/normalize.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | body { 6 | background-color: white; 7 | cursor: default; 8 | box-sizing: border-box; 9 | } 10 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 11 | 12 | 13 | html { 14 | font-family: sans-serif; 15 | 16 | line-height: 1.15; 17 | 18 | -ms-text-size-adjust: 100%; 19 | 20 | -webkit-text-size-adjust: 100%; 21 | 22 | } 23 | 24 | article, 25 | aside, 26 | footer, 27 | header, 28 | nav, 29 | section { 30 | display: block; 31 | } 32 | 33 | h1 { 34 | font-size: 2em; 35 | margin: 0.67em 0; 36 | } 37 | 38 | 39 | figcaption, 40 | figure, 41 | main { 42 | 43 | display: block; 44 | } 45 | 46 | figure { 47 | margin: 1em 40px; 48 | } 49 | 50 | hr { 51 | box-sizing: content-box; 52 | 53 | height: 0; 54 | 55 | overflow: visible; 56 | 57 | } 58 | 59 | pre { 60 | font-family: monospace, monospace; 61 | 62 | font-size: 1em; 63 | 64 | } 65 | 66 | 67 | a { 68 | background-color: transparent; 69 | 70 | -webkit-text-decoration-skip: objects; 71 | 72 | } 73 | 74 | a:active, 75 | a:hover { 76 | outline-width: 0; 77 | } 78 | 79 | abbr[title] { 80 | border-bottom: none; 81 | 82 | text-decoration: underline; 83 | 84 | text-decoration: underline dotted; 85 | 86 | } 87 | 88 | b, 89 | strong { 90 | font-weight: inherit; 91 | } 92 | 93 | b, 94 | strong { 95 | font-weight: bolder; 96 | } 97 | 98 | code, 99 | kbd, 100 | samp { 101 | font-family: monospace, monospace; 102 | 103 | font-size: 1em; 104 | 105 | } 106 | 107 | dfn { 108 | font-style: italic; 109 | } 110 | 111 | mark { 112 | background-color: #ff0; 113 | color: #000; 114 | } 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | sub, 121 | sup { 122 | font-size: 75%; 123 | line-height: 0; 124 | position: relative; 125 | vertical-align: baseline; 126 | } 127 | sub { 128 | bottom: -0.25em; 129 | } 130 | sup { 131 | top: -0.5em; 132 | } 133 | 134 | 135 | audio, 136 | video { 137 | display: inline-block; 138 | } 139 | 140 | audio:not([controls]) { 141 | display: none; 142 | height: 0; 143 | } 144 | 145 | img { 146 | border-style: none; 147 | } 148 | 149 | svg:not(:root) { 150 | overflow: hidden; 151 | } 152 | 153 | 154 | button, 155 | input, 156 | optgroup, 157 | select, 158 | textarea { 159 | font-family: sans-serif; 160 | 161 | font-size: 100%; 162 | 163 | line-height: 1.15; 164 | 165 | margin: 0; 166 | 167 | } 168 | 169 | button, 170 | input { 171 | 172 | overflow: visible; 173 | } 174 | 175 | button, 176 | select { 177 | 178 | text-transform: none; 179 | } 180 | 181 | button, 182 | html [type="button"], 183 | [type="reset"], 184 | [type="submit"] { 185 | -webkit-appearance: button; 186 | 187 | } 188 | 189 | button::-moz-focus-inner, 190 | [type="button"]::-moz-focus-inner, 191 | [type="reset"]::-moz-focus-inner, 192 | [type="submit"]::-moz-focus-inner { 193 | border-style: none; 194 | padding: 0; 195 | } 196 | 197 | button:-moz-focusring, 198 | [type="button"]:-moz-focusring, 199 | [type="reset"]:-moz-focusring, 200 | [type="submit"]:-moz-focusring { 201 | outline: 1px dotted ButtonText; 202 | } 203 | 204 | fieldset { 205 | border: 1px solid #c0c0c0; 206 | margin: 0 2px; 207 | padding: 0.35em 0.625em 0.75em; 208 | } 209 | 210 | legend { 211 | box-sizing: border-box; 212 | 213 | color: inherit; 214 | 215 | display: table; 216 | 217 | max-width: 100%; 218 | 219 | padding: 0; 220 | 221 | white-space: normal; 222 | 223 | } 224 | 225 | progress { 226 | display: inline-block; 227 | 228 | vertical-align: baseline; 229 | 230 | } 231 | 232 | textarea { 233 | overflow: auto; 234 | } 235 | 236 | [type="checkbox"], 237 | [type="radio"] { 238 | box-sizing: border-box; 239 | 240 | padding: 0; 241 | 242 | } 243 | 244 | [type="number"]::-webkit-inner-spin-button, 245 | [type="number"]::-webkit-outer-spin-button { 246 | height: auto; 247 | } 248 | 249 | [type="search"] { 250 | -webkit-appearance: textfield; 251 | 252 | outline-offset: -2px; 253 | 254 | } 255 | 256 | [type="search"]::-webkit-search-cancel-button, 257 | [type="search"]::-webkit-search-decoration { 258 | -webkit-appearance: none; 259 | } 260 | 261 | ::-webkit-file-upload-button { 262 | -webkit-appearance: button; 263 | 264 | font: inherit; 265 | 266 | } 267 | 268 | 269 | details, 270 | menu { 271 | display: block; 272 | } 273 | 274 | summary { 275 | display: list-item; 276 | } 277 | 278 | 279 | canvas { 280 | display: inline-block; 281 | } 282 | 283 | template { 284 | display: none; 285 | } 286 | 287 | 288 | [hidden] { 289 | display: none; 290 | } 291 | input:focus, 292 | input.__focus { 293 | outline: 4px solid rgba(117, 170, 255, 0.5); 294 | } 295 | button:focus, 296 | button.__focus { 297 | outline: 4px solid rgba(117, 170, 255, 0.5); 298 | } 299 | button:active, 300 | button.__active { 301 | -ms-transform: scale(0.97); 302 | transform: scale(0.97); 303 | } 304 | ::-moz-selection { 305 | background-color: #75aaff; 306 | } 307 | ::selection { 308 | background-color: #75aaff; 309 | } 310 | 311 | noscript { 312 | display: none !important; 313 | } -------------------------------------------------------------------------------- /Module 2- A simple life/text/about-me.md: -------------------------------------------------------------------------------- 1 | ## My name is John and living the simple life saved my life 2 | 3 | I used to be a pack rat. I had so many things that I thought that I loved, but the truth was I couldn't even appreciate any of it because there was too much. 4 | 5 | Things were terrible. I had a job that I hated, a home that I didn't want to live in, and I couldn't hold a relationship. 6 | 7 | ### How I turned things around 8 | 9 | I was on the verge of a breakdown when I got rid of everything. I literally put 90% of my possessions in the garbage, sold my place and moved into a smaller apartment, and I quit my job. 10 | It wasn't easy at all, but everything around me was in such a bad place, I didn't know what else to do. And it worked. 11 | 12 | ### Now I live the simple life 13 | 14 | Now that I'm living a simple life, things are so much better. I'm less stressed, enjoy life and work more, and I have more free time to enjoy. 15 | 16 | With how much it turned my life around, I felt like I had no choice but to start sharing how I did it, and how others can benefit from living a simple life as well, which is why I started this site! 17 | 18 | -------------------------------------------------------------------------------- /Module 2- A simple life/text/footer.md: -------------------------------------------------------------------------------- 1 | Living the Simple Life 2 | Copyright 2019 3 | -------------------------------------------------------------------------------- /Module 2- A simple life/text/hompage.md: -------------------------------------------------------------------------------- 1 | July 23, 2019 | 3 comments 2 | 3 | ## Finding simplicity in life 4 | 5 | Life can get complicated really quickly, but it doesn't have to be! There are many ways to simplify your life, a few of which we've explored in the past. This week we're taking a bit of a approach though, in how you can find simplicity in the life you already living. 6 | 7 | continue reading 8 | 9 | 10 | 11 | ## Keeping cooking simple 12 | 13 | July 19, 2019 | 3 comments 14 | 15 | Food is a very important part of everyone's life. If you want to be healthy, you have to eat healthy. One of the easiest ways to do that is to keep your cooking nice and simple. 16 | 17 | continue reading 18 | 19 | 20 | 21 | ## Simplicity and work 22 | 23 | July 12, 2019 | 3 comments 24 | 25 | Work is often a major source of stress. People get frustrated, it ruins their relationship with others and it leads to burnout. By keeping your work life as simple as possible, it will help balance everything out. 26 | 27 | continue reading 28 | 29 | 30 | 31 | 32 | ## Simple decorations 33 | 34 | July 3, 2019 | 3 comments 35 | 36 | A home isn't a home until you've decorated a little. People either don't decorate, or they go overboard and it doesn't have the impact they were hoping for. Staying simple will help draw the eye where you want it to and make things pop like never before. 37 | 38 | continue reading -------------------------------------------------------------------------------- /Module 2- A simple life/text/sidebar.md: -------------------------------------------------------------------------------- 1 | ## About me 2 | 3 | I find life better, and I'm happier, when things are nice and simple. 4 | 5 | 6 | 7 | ## Recent posts 8 | 9 | ### Keeping cooking simple 10 | 11 | ### Simplicity and work 12 | 13 | ### Simple decorations 14 | -------------------------------------------------------------------------------- /Module 3 - BBQ splash page/images/dark-ribs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 3 - BBQ splash page/images/dark-ribs.jpg -------------------------------------------------------------------------------- /Module 3 - BBQ splash page/images/ribs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 3 - BBQ splash page/images/ribs.jpg -------------------------------------------------------------------------------- /Module 3 - BBQ splash page/text/text.md: -------------------------------------------------------------------------------- 1 | Mouthwateringly delicious 2 | 3 | Learn how to make the best BBQ ribs in town 4 | 5 | Join us for this live webinar 6 | 7 | Become a BBQ master! 8 | 9 | Register Today 10 | 11 | BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art! One way to speed up the process is to learn from the best. You can do just that by signing up for this free webinar! 12 | 13 | 14 | 15 | We'll never share your information 16 | without your permission -------------------------------------------------------------------------------- /Module 4 - Card component/css/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } -------------------------------------------------------------------------------- /Module 4 - Card component/img/tech.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 4 - Card component/img/tech.jpg -------------------------------------------------------------------------------- /Module 4 - Card component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Flexbox card 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Module 4 - Card component/normalize.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | body { 6 | background-color: white; 7 | cursor: default; 8 | box-sizing: border-box; 9 | } 10 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 11 | 12 | 13 | html { 14 | font-family: sans-serif; 15 | 16 | line-height: 1.15; 17 | 18 | -ms-text-size-adjust: 100%; 19 | 20 | -webkit-text-size-adjust: 100%; 21 | 22 | } 23 | 24 | article, 25 | aside, 26 | footer, 27 | header, 28 | nav, 29 | section { 30 | display: block; 31 | } 32 | 33 | h1 { 34 | font-size: 2em; 35 | margin: 0.67em 0; 36 | } 37 | 38 | 39 | figcaption, 40 | figure, 41 | main { 42 | 43 | display: block; 44 | } 45 | 46 | figure { 47 | margin: 1em 40px; 48 | } 49 | 50 | hr { 51 | box-sizing: content-box; 52 | 53 | height: 0; 54 | 55 | overflow: visible; 56 | 57 | } 58 | 59 | pre { 60 | font-family: monospace, monospace; 61 | 62 | font-size: 1em; 63 | 64 | } 65 | 66 | 67 | a { 68 | background-color: transparent; 69 | 70 | -webkit-text-decoration-skip: objects; 71 | 72 | } 73 | 74 | a:active, 75 | a:hover { 76 | outline-width: 0; 77 | } 78 | 79 | abbr[title] { 80 | border-bottom: none; 81 | 82 | text-decoration: underline; 83 | 84 | text-decoration: underline dotted; 85 | 86 | } 87 | 88 | b, 89 | strong { 90 | font-weight: inherit; 91 | } 92 | 93 | b, 94 | strong { 95 | font-weight: bolder; 96 | } 97 | 98 | code, 99 | kbd, 100 | samp { 101 | font-family: monospace, monospace; 102 | 103 | font-size: 1em; 104 | 105 | } 106 | 107 | dfn { 108 | font-style: italic; 109 | } 110 | 111 | mark { 112 | background-color: #ff0; 113 | color: #000; 114 | } 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | sub, 121 | sup { 122 | font-size: 75%; 123 | line-height: 0; 124 | position: relative; 125 | vertical-align: baseline; 126 | } 127 | sub { 128 | bottom: -0.25em; 129 | } 130 | sup { 131 | top: -0.5em; 132 | } 133 | 134 | 135 | audio, 136 | video { 137 | display: inline-block; 138 | } 139 | 140 | audio:not([controls]) { 141 | display: none; 142 | height: 0; 143 | } 144 | 145 | img { 146 | border-style: none; 147 | } 148 | 149 | svg:not(:root) { 150 | overflow: hidden; 151 | } 152 | 153 | 154 | button, 155 | input, 156 | optgroup, 157 | select, 158 | textarea { 159 | font-family: sans-serif; 160 | 161 | font-size: 100%; 162 | 163 | line-height: 1.15; 164 | 165 | margin: 0; 166 | 167 | } 168 | 169 | button, 170 | input { 171 | 172 | overflow: visible; 173 | } 174 | 175 | button, 176 | select { 177 | 178 | text-transform: none; 179 | } 180 | 181 | button, 182 | html [type="button"], 183 | [type="reset"], 184 | [type="submit"] { 185 | -webkit-appearance: button; 186 | 187 | } 188 | 189 | button::-moz-focus-inner, 190 | [type="button"]::-moz-focus-inner, 191 | [type="reset"]::-moz-focus-inner, 192 | [type="submit"]::-moz-focus-inner { 193 | border-style: none; 194 | padding: 0; 195 | } 196 | 197 | button:-moz-focusring, 198 | [type="button"]:-moz-focusring, 199 | [type="reset"]:-moz-focusring, 200 | [type="submit"]:-moz-focusring { 201 | outline: 1px dotted ButtonText; 202 | } 203 | 204 | fieldset { 205 | border: 1px solid #c0c0c0; 206 | margin: 0 2px; 207 | padding: 0.35em 0.625em 0.75em; 208 | } 209 | 210 | legend { 211 | box-sizing: border-box; 212 | 213 | color: inherit; 214 | 215 | display: table; 216 | 217 | max-width: 100%; 218 | 219 | padding: 0; 220 | 221 | white-space: normal; 222 | 223 | } 224 | 225 | progress { 226 | display: inline-block; 227 | 228 | vertical-align: baseline; 229 | 230 | } 231 | 232 | textarea { 233 | overflow: auto; 234 | } 235 | 236 | [type="checkbox"], 237 | [type="radio"] { 238 | box-sizing: border-box; 239 | 240 | padding: 0; 241 | 242 | } 243 | 244 | [type="number"]::-webkit-inner-spin-button, 245 | [type="number"]::-webkit-outer-spin-button { 246 | height: auto; 247 | } 248 | 249 | [type="search"] { 250 | -webkit-appearance: textfield; 251 | 252 | outline-offset: -2px; 253 | 254 | } 255 | 256 | [type="search"]::-webkit-search-cancel-button, 257 | [type="search"]::-webkit-search-decoration { 258 | -webkit-appearance: none; 259 | } 260 | 261 | ::-webkit-file-upload-button { 262 | -webkit-appearance: button; 263 | 264 | font: inherit; 265 | 266 | } 267 | 268 | 269 | details, 270 | menu { 271 | display: block; 272 | } 273 | 274 | summary { 275 | display: list-item; 276 | } 277 | 278 | 279 | canvas { 280 | display: inline-block; 281 | } 282 | 283 | template { 284 | display: none; 285 | } 286 | 287 | 288 | [hidden] { 289 | display: none; 290 | } 291 | input:focus, 292 | input.__focus { 293 | outline: 4px solid rgba(117, 170, 255, 0.5); 294 | } 295 | button:focus, 296 | button.__focus { 297 | outline: 4px solid rgba(117, 170, 255, 0.5); 298 | } 299 | button:active, 300 | button.__active { 301 | -ms-transform: scale(0.97); 302 | transform: scale(0.97); 303 | } 304 | ::-moz-selection { 305 | background-color: #75aaff; 306 | } 307 | ::selection { 308 | background-color: #75aaff; 309 | } 310 | 311 | noscript { 312 | display: none !important; 313 | } -------------------------------------------------------------------------------- /Module 5 - Social life with grid/about-me.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
9 |
10 |

Living the social life

11 |

A blog exploring minimalism in life

12 |
13 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |

My name is John and living the simple life saved my life

27 | 28 |

I used to be a pack rat. I had so many things that I thought that I loved, but the truth was I couldn't even appreciate any of it because there was too much.

29 |

Things were terrible. I had a job that I hated, a home that I didn't want to live in, and I couldn't hold a relationship.

30 | 31 |

How I turned things around

32 |

I was on the verge of a breakdown when I got rid of everything. I literally put 90% of my possessions in the garbage, sold my place and moved into a smaller apartment, and I quit my job.

33 |

It wasn't easy at all, but everything around me was in such a bad place, I didn't know what else to do. And it worked.

34 | 35 |

Now I live the simple life

36 |

Now that I'm living a simple life, things are so much better. I'm less stressed, enjoy life and work more, and I have more free time to enjoy.

37 |

With how much it turned my life around, I felt like I had no choice but to start sharing how I did it, and how others can benefit from living a simple life as well, which is why I started this site!

38 |
39 | 40 | 59 | 60 |
61 | 62 | 63 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /Module 5 - Social life with grid/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Fonts 2 | ----- 3 | font-family: 'Lora', serif; 4 | font-family: 'Ubuntu', sans-serif; 5 | */ 6 | 7 | body { 8 | margin: 0; 9 | font-family: 'Ubuntu', sans-serif; 10 | font-size: 1.125rem; 11 | font-weight: 300; 12 | line-height: 1.6; 13 | } 14 | 15 | img { 16 | max-width: 100%; 17 | display: block; 18 | } 19 | 20 | .image-full { 21 | max-height: 300px; 22 | width: 100%; 23 | object-fit: cover; 24 | margin-bottom: 2em; 25 | } 26 | 27 | /* ================= 28 | Typography 29 | ================= */ 30 | 31 | h1, 32 | h2, 33 | h3 { 34 | font-family: 'Lora', serif; 35 | font-weight: 400; 36 | color: #143774; 37 | margin-top: 0; 38 | } 39 | 40 | h1 { 41 | font-size: 2rem; 42 | margin: 0; 43 | } 44 | 45 | h3 { 46 | color: #1792d2; 47 | } 48 | 49 | a { 50 | color: #1792d2; 51 | } 52 | 53 | a:hover, 54 | a:focus { 55 | color: #143774; 56 | } 57 | 58 | strong { 59 | font-weight: 700; 60 | } 61 | 62 | /* h1 subtitle */ 63 | .subtitle { 64 | font-weight: 700; 65 | color: #1792d2; 66 | font-size: .75rem; 67 | margin: 0; 68 | text-transform: uppercase; 69 | } 70 | 71 | .article-title { 72 | font-size: 1.5rem; 73 | } 74 | 75 | .article-read-more, 76 | .article-info { 77 | font-size: .875rem; 78 | } 79 | 80 | .article-read-more { 81 | color: #1792d2; 82 | text-decoration: none; 83 | font-weight: 700; 84 | text-transform: uppercase; 85 | letter-spacing: 1px; 86 | } 87 | 88 | .article-read-more:hover, 89 | .article-read-more:focus { 90 | color: #143774; 91 | text-decoration: underline; 92 | } 93 | 94 | .article-info { 95 | margin: 2em 0; 96 | } 97 | 98 | .widget-title, 99 | .widget-recent-post-title { 100 | font-size: 1rem; 101 | line-height: 1.4; 102 | } 103 | 104 | .widget-title { 105 | font-family: 'Ubuntu', sans-serif; 106 | font-weight: 700; 107 | letter-spacing: 2px; 108 | } 109 | 110 | .widget-recent-post-title { 111 | color: #143774; 112 | } 113 | 114 | 115 | /* ================= 116 | Layout 117 | ================= */ 118 | 119 | .container { 120 | width: 90%; 121 | max-width: 900px; 122 | margin: 0 auto; 123 | } 124 | 125 | .container-flex { 126 | display: flex; 127 | flex-direction: column; 128 | justify-content: space-between; 129 | } 130 | 131 | header { 132 | background: #f8f8f8; 133 | padding: 2em 0; 134 | text-align: center; 135 | margin-bottom: 3em; 136 | } 137 | 138 | footer { 139 | background:#143774; 140 | color: white; 141 | text-align: center; 142 | padding: 3em 0; 143 | } 144 | 145 | @media (min-width: 675px) { 146 | header { 147 | text-align: left; 148 | } 149 | 150 | .container-flex { 151 | flex-direction: row; 152 | } 153 | 154 | main { 155 | width: 70%; 156 | } 157 | 158 | aside { 159 | width: 25%; 160 | min-width: 200px; 161 | margin-left: 1em; 162 | } 163 | } 164 | 165 | /* navigation */ 166 | 167 | nav ul { 168 | list-style: none; 169 | padding: 0; 170 | display: flex; 171 | justify-content: center; 172 | } 173 | 174 | nav li { 175 | margin-left: 2em; 176 | } 177 | 178 | nav a { 179 | text-decoration: none; 180 | color: #707070; 181 | font-weight: 700; 182 | text-transform: uppercase; 183 | letter-spacing: 1px; 184 | padding: .25em 0; 185 | } 186 | 187 | nav a:hover, 188 | nav a:focus { 189 | color: #1792d2; 190 | } 191 | 192 | .current-page { 193 | border-bottom: 1px solid #707070; 194 | } 195 | 196 | .current-page:hover { 197 | color: #707070; 198 | } 199 | 200 | @media (max-width: 675px) { 201 | nav ul { 202 | flex-direction: column; 203 | } 204 | 205 | nav li { 206 | margin: .5em 0; 207 | } 208 | } 209 | 210 | /* articles */ 211 | 212 | .article-featured { 213 | border-bottom: #707070 1px solid; 214 | padding-bottom: 2em; 215 | margin-bottom: 2em; 216 | } 217 | 218 | .article-recent { 219 | display: flex; 220 | flex-direction: column; 221 | margin-bottom: 2em; 222 | } 223 | 224 | .article-recent-main { 225 | order: 2; 226 | } 227 | 228 | .article-recent-secondary { 229 | order: 1; 230 | } 231 | 232 | @media (min-width: 675px) { 233 | .article-recent { 234 | flex-direction: row; 235 | justify-content: space-between; 236 | } 237 | 238 | .article-recent-main { 239 | width: 68%; 240 | } 241 | 242 | .article-recent-secondary { 243 | width: 30%; 244 | } 245 | 246 | .article-featured { 247 | display: flex; 248 | flex-direction: column; 249 | } 250 | 251 | .article-image { 252 | order: -2; 253 | min-height: 250px; 254 | object-fit: cover; 255 | /* object-position: left; */ 256 | } 257 | 258 | .article-info { 259 | order: -1; 260 | } 261 | } 262 | 263 | /* widgets */ 264 | 265 | .sidebar-widget { 266 | border: 20px solid #efefef; 267 | margin-bottom: 2em; 268 | padding: 1em; 269 | } 270 | 271 | .widget-recent-post { 272 | display: flex; 273 | flex-direction: column; 274 | border-bottom: 1px solid #707070; 275 | margin-bottom: 1em; 276 | } 277 | 278 | .widget-recent-post:last-child { 279 | border: 0; 280 | margin: 0; 281 | } 282 | 283 | .widget-image { 284 | order: -1; 285 | } -------------------------------------------------------------------------------- /Module 5 - Social life with grid/img/about-me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 5 - Social life with grid/img/about-me.jpg -------------------------------------------------------------------------------- /Module 5 - Social life with grid/img/deco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 5 - Social life with grid/img/deco.jpg -------------------------------------------------------------------------------- /Module 5 - Social life with grid/img/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 5 - Social life with grid/img/food.jpg -------------------------------------------------------------------------------- /Module 5 - Social life with grid/img/life.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 5 - Social life with grid/img/life.jpg -------------------------------------------------------------------------------- /Module 5 - Social life with grid/img/work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 5 - Social life with grid/img/work.jpg -------------------------------------------------------------------------------- /Module 5 - Social life with grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
9 |
10 |

Living the social life

11 |

A blog exploring minimalism in LIFE

12 |
13 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |

Finding simplicity in life

28 | simple white desk on a white wall with a plant on the far right side 29 |

July 23, 2019 | 3 comments

30 |

Life can get complicated really quickly, but it doesn't have to be! There are many ways to simplify your life, a few of which we've explored in the past. This week we're taking a bit of a approach though, in how you can find simplicity in the life you already living.

31 | Continue reading 32 |
33 | 34 |
35 |
36 |

How to keep your cooking simple

37 |

Food is a very important part of everyone's life. If you want to be healthy, you have to eat healthy. One of the easiest ways to do that is to keep your cooking nice and simple.

38 | CONTINUE READING 39 |
40 |
41 | two dumplings on a wood plate with chopsticks 42 |

July 19, 2019 | 3 comments

43 |
44 |
45 | 46 |
47 |
48 |

Simplicity and work

49 |

Work is often a major source of stress. People get frustrated, it ruins their relationship with others and it leads to burnout. By keeping your work life as simple as possible, it will help balance everything out.

50 | CONTINUE READING 51 |
52 |
53 | a chair white chair at a white desk on a white wall 54 |

July 12, 2019 | 3 comments

55 |
56 |
57 | 58 |
59 |
60 |

Simple decorations

61 |

A home isn't a home until you've decorated a little. People either don't decorate, or they go overboard and it doesn't have the impact they were hoping for. Staying simple will help draw the eye where you want it to and make things pop like never before.

62 | CONTINUE READING 63 |
64 |
65 | a green plant in a clear, round vase with water in it 66 |

July 3, 2019 | 3 comments

67 |
68 |
69 |
70 | 71 | 96 | 97 |
98 | 99 | 100 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /Module 5 - Social life with grid/normalize.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | body { 6 | background-color: white; 7 | cursor: default; 8 | box-sizing: border-box; 9 | } 10 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 11 | 12 | 13 | html { 14 | font-family: sans-serif; 15 | 16 | line-height: 1.15; 17 | 18 | -ms-text-size-adjust: 100%; 19 | 20 | -webkit-text-size-adjust: 100%; 21 | 22 | } 23 | 24 | article, 25 | aside, 26 | footer, 27 | header, 28 | nav, 29 | section { 30 | display: block; 31 | } 32 | 33 | h1 { 34 | font-size: 2em; 35 | margin: 0.67em 0; 36 | } 37 | 38 | 39 | figcaption, 40 | figure, 41 | main { 42 | 43 | display: block; 44 | } 45 | 46 | figure { 47 | margin: 1em 40px; 48 | } 49 | 50 | hr { 51 | box-sizing: content-box; 52 | 53 | height: 0; 54 | 55 | overflow: visible; 56 | 57 | } 58 | 59 | pre { 60 | font-family: monospace, monospace; 61 | 62 | font-size: 1em; 63 | 64 | } 65 | 66 | 67 | a { 68 | background-color: transparent; 69 | 70 | -webkit-text-decoration-skip: objects; 71 | 72 | } 73 | 74 | a:active, 75 | a:hover { 76 | outline-width: 0; 77 | } 78 | 79 | abbr[title] { 80 | border-bottom: none; 81 | 82 | text-decoration: underline; 83 | 84 | text-decoration: underline dotted; 85 | 86 | } 87 | 88 | b, 89 | strong { 90 | font-weight: inherit; 91 | } 92 | 93 | b, 94 | strong { 95 | font-weight: bolder; 96 | } 97 | 98 | code, 99 | kbd, 100 | samp { 101 | font-family: monospace, monospace; 102 | 103 | font-size: 1em; 104 | 105 | } 106 | 107 | dfn { 108 | font-style: italic; 109 | } 110 | 111 | mark { 112 | background-color: #ff0; 113 | color: #000; 114 | } 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | sub, 121 | sup { 122 | font-size: 75%; 123 | line-height: 0; 124 | position: relative; 125 | vertical-align: baseline; 126 | } 127 | sub { 128 | bottom: -0.25em; 129 | } 130 | sup { 131 | top: -0.5em; 132 | } 133 | 134 | 135 | audio, 136 | video { 137 | display: inline-block; 138 | } 139 | 140 | audio:not([controls]) { 141 | display: none; 142 | height: 0; 143 | } 144 | 145 | img { 146 | border-style: none; 147 | } 148 | 149 | svg:not(:root) { 150 | overflow: hidden; 151 | } 152 | 153 | 154 | button, 155 | input, 156 | optgroup, 157 | select, 158 | textarea { 159 | font-family: sans-serif; 160 | 161 | font-size: 100%; 162 | 163 | line-height: 1.15; 164 | 165 | margin: 0; 166 | 167 | } 168 | 169 | button, 170 | input { 171 | 172 | overflow: visible; 173 | } 174 | 175 | button, 176 | select { 177 | 178 | text-transform: none; 179 | } 180 | 181 | button, 182 | html [type="button"], 183 | [type="reset"], 184 | [type="submit"] { 185 | -webkit-appearance: button; 186 | 187 | } 188 | 189 | button::-moz-focus-inner, 190 | [type="button"]::-moz-focus-inner, 191 | [type="reset"]::-moz-focus-inner, 192 | [type="submit"]::-moz-focus-inner { 193 | border-style: none; 194 | padding: 0; 195 | } 196 | 197 | button:-moz-focusring, 198 | [type="button"]:-moz-focusring, 199 | [type="reset"]:-moz-focusring, 200 | [type="submit"]:-moz-focusring { 201 | outline: 1px dotted ButtonText; 202 | } 203 | 204 | fieldset { 205 | border: 1px solid #c0c0c0; 206 | margin: 0 2px; 207 | padding: 0.35em 0.625em 0.75em; 208 | } 209 | 210 | legend { 211 | box-sizing: border-box; 212 | 213 | color: inherit; 214 | 215 | display: table; 216 | 217 | max-width: 100%; 218 | 219 | padding: 0; 220 | 221 | white-space: normal; 222 | 223 | } 224 | 225 | progress { 226 | display: inline-block; 227 | 228 | vertical-align: baseline; 229 | 230 | } 231 | 232 | textarea { 233 | overflow: auto; 234 | } 235 | 236 | [type="checkbox"], 237 | [type="radio"] { 238 | box-sizing: border-box; 239 | 240 | padding: 0; 241 | 242 | } 243 | 244 | [type="number"]::-webkit-inner-spin-button, 245 | [type="number"]::-webkit-outer-spin-button { 246 | height: auto; 247 | } 248 | 249 | [type="search"] { 250 | -webkit-appearance: textfield; 251 | 252 | outline-offset: -2px; 253 | 254 | } 255 | 256 | [type="search"]::-webkit-search-cancel-button, 257 | [type="search"]::-webkit-search-decoration { 258 | -webkit-appearance: none; 259 | } 260 | 261 | ::-webkit-file-upload-button { 262 | -webkit-appearance: button; 263 | 264 | font: inherit; 265 | 266 | } 267 | 268 | 269 | details, 270 | menu { 271 | display: block; 272 | } 273 | 274 | summary { 275 | display: list-item; 276 | } 277 | 278 | 279 | canvas { 280 | display: inline-block; 281 | } 282 | 283 | template { 284 | display: none; 285 | } 286 | 287 | 288 | [hidden] { 289 | display: none; 290 | } 291 | input:focus, 292 | input.__focus { 293 | outline: 4px solid rgba(117, 170, 255, 0.5); 294 | } 295 | button:focus, 296 | button.__focus { 297 | outline: 4px solid rgba(117, 170, 255, 0.5); 298 | } 299 | button:active, 300 | button.__active { 301 | -ms-transform: scale(0.97); 302 | transform: scale(0.97); 303 | } 304 | ::-moz-selection { 305 | background-color: #75aaff; 306 | } 307 | ::selection { 308 | background-color: #75aaff; 309 | } 310 | 311 | noscript { 312 | display: none !important; 313 | } -------------------------------------------------------------------------------- /Module 5 - Social life with grid/recent-posts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
9 |
10 |

Living the social life

11 |

A blog exploring minimalism in life

12 |
13 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 |

Finding simplicity in life

29 |

Life can get complicated really quickly, but it doesn't have to be! There are many ways to simplify your life, a few of which we've explored in the past. This week we're taking a bit of a approach though, in how you can find simplicity in the life you already living.

30 | CONTINUE READING 31 |
32 |
33 | simple white desk on a white wall with a plant on the far right side 34 |

July 23, 2019 | 3 comments

35 |
36 |
37 | 38 |
39 |
40 |

How to keep your cooking simple

41 |

Food is a very important part of everyone's life. If you want to be healthy, you have to eat healthy. One of the easiest ways to do that is to keep your cooking nice and simple.

42 | CONTINUE READING 43 |
44 |
45 | two dumplings on a wood plate with chopsticks 46 |

July 19, 2019 | 3 comments

47 |
48 |
49 | 50 |
51 |
52 |

Simplicity and work

53 |

Work is often a major source of stress. People get frustrated, it ruins their relationship with others and it leads to burnout. By keeping your work life as simple as possible, it will help balance everything out.

54 | CONTINUE READING 55 |
56 |
57 | a chair white chair at a white desk on a white wall 58 |

July 12, 2019 | 3 comments

59 |
60 |
61 | 62 |
63 |
64 |

Simple decorations

65 |

A home isn't a home until you've decorated a little. People either don't decorate, or they go overboard and it doesn't have the impact they were hoping for. Staying simple will help draw the eye where you want it to and make things pop like never before.

66 | CONTINUE READING 67 |
68 |
69 | a green plant in a clear, round vase with water in it 70 |

July 3, 2019 | 3 comments

71 |
72 |
73 |
74 | 75 | 100 | 101 |
102 | 103 | 104 | 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /Module 5 - Social life with grid/text/about-me.md: -------------------------------------------------------------------------------- 1 | ## My name is John and living the simple life saved my life 2 | 3 | I used to be a pack rat. I had so many things that I thought that I loved, but the truth was I couldn't even appreciate any of it because there was too much. 4 | 5 | Things were terrible. I had a job that I hated, a home that I didn't want to live in, and I couldn't hold a relationship. 6 | 7 | ### How I turned things around 8 | 9 | I was on the verge of a breakdown when I got rid of everything. I literally put 90% of my possessions in the garbage, sold my place and moved into a smaller apartment, and I quit my job. 10 | It wasn't easy at all, but everything around me was in such a bad place, I didn't know what else to do. And it worked. 11 | 12 | ### Now I live the simple life 13 | 14 | Now that I'm living a simple life, things are so much better. I'm less stressed, enjoy life and work more, and I have more free time to enjoy. 15 | 16 | With how much it turned my life around, I felt like I had no choice but to start sharing how I did it, and how others can benefit from living a simple life as well, which is why I started this site! 17 | 18 | -------------------------------------------------------------------------------- /Module 5 - Social life with grid/text/footer.md: -------------------------------------------------------------------------------- 1 | Living the Simple Life 2 | Copyright 2019 3 | -------------------------------------------------------------------------------- /Module 5 - Social life with grid/text/hompage.md: -------------------------------------------------------------------------------- 1 | July 23, 2019 | 3 comments 2 | 3 | ## Finding simplicity in life 4 | 5 | Life can get complicated really quickly, but it doesn't have to be! There are many ways to simplify your life, a few of which we've explored in the past. This week we're taking a bit of a approach though, in how you can find simplicity in the life you already living. 6 | 7 | continue reading 8 | 9 | 10 | 11 | ## Keeping cooking simple 12 | 13 | July 19, 2019 | 3 comments 14 | 15 | Food is a very important part of everyone's life. If you want to be healthy, you have to eat healthy. One of the easiest ways to do that is to keep your cooking nice and simple. 16 | 17 | continue reading 18 | 19 | 20 | 21 | ## Simplicity and work 22 | 23 | July 12, 2019 | 3 comments 24 | 25 | Work is often a major source of stress. People get frustrated, it ruins their relationship with others and it leads to burnout. By keeping your work life as simple as possible, it will help balance everything out. 26 | 27 | continue reading 28 | 29 | 30 | 31 | 32 | ## Simple decorations 33 | 34 | July 3, 2019 | 3 comments 35 | 36 | A home isn't a home until you've decorated a little. People either don't decorate, or they go overboard and it doesn't have the impact they were hoping for. Staying simple will help draw the eye where you want it to and make things pop like never before. 37 | 38 | continue reading -------------------------------------------------------------------------------- /Module 5 - Social life with grid/text/sidebar.md: -------------------------------------------------------------------------------- 1 | ## About me 2 | 3 | I find life better, and I'm happier, when things are nice and simple. 4 | 5 | 6 | 7 | ## Recent posts 8 | 9 | ### Keeping cooking simple 10 | 11 | ### Simplicity and work 12 | 13 | ### Simple decorations 14 | -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/img/about-me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 6 - Jake and Elwood/img/about-me.jpg -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/img/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 6 - Jake and Elwood/img/contact.jpg -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/img/hero-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 6 - Jake and Elwood/img/hero-bg.jpg -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/reponsive-web-design-bootcamp/9d82cd89797e4da9759b15bcb984fa5a7467d9c0/Module 6 - Jake and Elwood/img/logo.png -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Jake & Elwood 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/normalize.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | body { 6 | background-color: white; 7 | cursor: default; 8 | box-sizing: border-box; 9 | } 10 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 11 | 12 | 13 | html { 14 | font-family: sans-serif; 15 | 16 | line-height: 1.15; 17 | 18 | -ms-text-size-adjust: 100%; 19 | 20 | -webkit-text-size-adjust: 100%; 21 | 22 | } 23 | 24 | article, 25 | aside, 26 | footer, 27 | header, 28 | nav, 29 | section { 30 | display: block; 31 | } 32 | 33 | h1 { 34 | font-size: 2em; 35 | margin: 0.67em 0; 36 | } 37 | 38 | 39 | figcaption, 40 | figure, 41 | main { 42 | 43 | display: block; 44 | } 45 | 46 | figure { 47 | margin: 1em 40px; 48 | } 49 | 50 | hr { 51 | box-sizing: content-box; 52 | 53 | height: 0; 54 | 55 | overflow: visible; 56 | 57 | } 58 | 59 | pre { 60 | font-family: monospace, monospace; 61 | 62 | font-size: 1em; 63 | 64 | } 65 | 66 | 67 | a { 68 | background-color: transparent; 69 | 70 | -webkit-text-decoration-skip: objects; 71 | 72 | } 73 | 74 | a:active, 75 | a:hover { 76 | outline-width: 0; 77 | } 78 | 79 | abbr[title] { 80 | border-bottom: none; 81 | 82 | text-decoration: underline; 83 | 84 | text-decoration: underline dotted; 85 | 86 | } 87 | 88 | b, 89 | strong { 90 | font-weight: inherit; 91 | } 92 | 93 | b, 94 | strong { 95 | font-weight: bolder; 96 | } 97 | 98 | code, 99 | kbd, 100 | samp { 101 | font-family: monospace, monospace; 102 | 103 | font-size: 1em; 104 | 105 | } 106 | 107 | dfn { 108 | font-style: italic; 109 | } 110 | 111 | mark { 112 | background-color: #ff0; 113 | color: #000; 114 | } 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | sub, 121 | sup { 122 | font-size: 75%; 123 | line-height: 0; 124 | position: relative; 125 | vertical-align: baseline; 126 | } 127 | sub { 128 | bottom: -0.25em; 129 | } 130 | sup { 131 | top: -0.5em; 132 | } 133 | 134 | 135 | audio, 136 | video { 137 | display: inline-block; 138 | } 139 | 140 | audio:not([controls]) { 141 | display: none; 142 | height: 0; 143 | } 144 | 145 | img { 146 | border-style: none; 147 | } 148 | 149 | svg:not(:root) { 150 | overflow: hidden; 151 | } 152 | 153 | 154 | button, 155 | input, 156 | optgroup, 157 | select, 158 | textarea { 159 | font-family: sans-serif; 160 | 161 | font-size: 100%; 162 | 163 | line-height: 1.15; 164 | 165 | margin: 0; 166 | 167 | } 168 | 169 | button, 170 | input { 171 | 172 | overflow: visible; 173 | } 174 | 175 | button, 176 | select { 177 | 178 | text-transform: none; 179 | } 180 | 181 | button, 182 | html [type="button"], 183 | [type="reset"], 184 | [type="submit"] { 185 | -webkit-appearance: button; 186 | 187 | } 188 | 189 | button::-moz-focus-inner, 190 | [type="button"]::-moz-focus-inner, 191 | [type="reset"]::-moz-focus-inner, 192 | [type="submit"]::-moz-focus-inner { 193 | border-style: none; 194 | padding: 0; 195 | } 196 | 197 | button:-moz-focusring, 198 | [type="button"]:-moz-focusring, 199 | [type="reset"]:-moz-focusring, 200 | [type="submit"]:-moz-focusring { 201 | outline: 1px dotted ButtonText; 202 | } 203 | 204 | fieldset { 205 | border: 1px solid #c0c0c0; 206 | margin: 0 2px; 207 | padding: 0.35em 0.625em 0.75em; 208 | } 209 | 210 | legend { 211 | box-sizing: border-box; 212 | 213 | color: inherit; 214 | 215 | display: table; 216 | 217 | max-width: 100%; 218 | 219 | padding: 0; 220 | 221 | white-space: normal; 222 | 223 | } 224 | 225 | progress { 226 | display: inline-block; 227 | 228 | vertical-align: baseline; 229 | 230 | } 231 | 232 | textarea { 233 | overflow: auto; 234 | } 235 | 236 | [type="checkbox"], 237 | [type="radio"] { 238 | box-sizing: border-box; 239 | 240 | padding: 0; 241 | 242 | } 243 | 244 | [type="number"]::-webkit-inner-spin-button, 245 | [type="number"]::-webkit-outer-spin-button { 246 | height: auto; 247 | } 248 | 249 | [type="search"] { 250 | -webkit-appearance: textfield; 251 | 252 | outline-offset: -2px; 253 | 254 | } 255 | 256 | [type="search"]::-webkit-search-cancel-button, 257 | [type="search"]::-webkit-search-decoration { 258 | -webkit-appearance: none; 259 | } 260 | 261 | ::-webkit-file-upload-button { 262 | -webkit-appearance: button; 263 | 264 | font: inherit; 265 | 266 | } 267 | 268 | 269 | details, 270 | menu { 271 | display: block; 272 | } 273 | 274 | summary { 275 | display: list-item; 276 | } 277 | 278 | 279 | canvas { 280 | display: inline-block; 281 | } 282 | 283 | template { 284 | display: none; 285 | } 286 | 287 | 288 | [hidden] { 289 | display: none; 290 | } 291 | input:focus, 292 | input.__focus { 293 | outline: 4px solid rgba(117, 170, 255, 0.5); 294 | } 295 | button:focus, 296 | button.__focus { 297 | outline: 4px solid rgba(117, 170, 255, 0.5); 298 | } 299 | button:active, 300 | button.__active { 301 | -ms-transform: scale(0.97); 302 | transform: scale(0.97); 303 | } 304 | ::-moz-selection { 305 | background-color: #75aaff; 306 | } 307 | ::selection { 308 | background-color: #75aaff; 309 | } 310 | 311 | noscript { 312 | display: none !important; 313 | } -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/text files/about.md: -------------------------------------------------------------------------------- 1 | # About us. 2 | 3 | We’re two brothers from Chicago. We can help you with SEO, SEM, content marketing and whatever else. 4 | 5 | ## We're really great guys 6 | 7 | We grew up in downtown Chicago, and we used to play in a band. Jake loves fried chicken, and Elwood loves dry white toast. 8 | 9 | While the band didn't make it, the hard work we put in trying to promote it sure did. Like a lot of people, we needed a website, and we needed to rank. The "experts" didn't seem to know what they were talking about, so we figured it out on our own. 10 | 11 | ## We can do all sorts of great stuff 12 | 13 | Honestly most people in this industry seem to be full of crap. We don't care what you've heard, or what others have told you, we get results and at the end of the day, what else matters? 14 | 15 | So sure, maybe we're a bit different from what you'd expect, but if you want to rank, market, and build your way to the top, we're the brothers for you. -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/text files/contact.md: -------------------------------------------------------------------------------- 1 | # Contact. 2 | 3 | Let us know how we can help you need and we’ll drive over to your place in our Bluesmobile the following day to discuss the deal. 4 | 5 | ## Getting in touch with us 6 | 7 | You can either use the form or send us an email. I'll get back in touch with you as soon as possible! -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/text files/footer.md: -------------------------------------------------------------------------------- 1 | Two brothers from Chicago that are just trying to pay back their debt by helping others with their SEO, SEM, and Content Marketing needs. 2 | 3 | © Jake&Elwood 2019 -------------------------------------------------------------------------------- /Module 6 - Jake and Elwood/text files/homepage.md: -------------------------------------------------------------------------------- 1 | # The only marketing agency on a mission from God, fully dedicated to increase your web traffic. 2 | 3 | We’re two brothers from Chicago that are trying to pay back our debt. We can help you with SEO, SEM content marketing and whatever else. 4 | 5 | ##About Us 6 | 7 | We grew up in downtown Chicago, and we used to play in a band. Jake loves fried chicken, and Elwood loves dry white toast. 8 | 9 | ## Our skills 10 | 11 | Elwood is an expert in SEO, SEM, and driving from the police. Jake is our social media specialist, and he has an amazing voice. 12 | 13 | ## Get in touch 14 | 15 | Send us an email with some info about what help you need and we’ll drive over to your place in our Bluesmobile the following day to discuss the deal. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Web Design Bootcamp | Scrimba course files 2 | Course files for the Responsive Web Design Bootcamp: https://scrimba.com/course/gresponsive/ 3 | 4 | All files start at the same place as the first video of the project. It includes all images, plus a starting HTML and CSS files. 5 | 6 | ## The normailze.css files 7 | You will also notice all the project foldes includes a `normalize.css` file. 8 | 9 | Scrimba includes this by default, behind the scenes. You'll want to leave this in each project file, and keep the link in the HTML file. 10 | By default, Scrimba places them in the root folder. If you'd prefer to stay organized, feel free to move it to the CSS folder, but ensure that you also update the path in all the HTML files if you do this :). 11 | --------------------------------------------------------------------------------