├── .gitignore
├── app_screenshot.png
├── assets
    ├── imgs
    │   ├── hashtag.jpg
    │   ├── lupa_selected.png
    │   └── suzanne-scacca-200px.jpg
    ├── reset.css
    └── styles.css
├── .stickler.yml
├── README.md
├── stylelint.config.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | 


--------------------------------------------------------------------------------
/app_screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carlosveigadev/smashing-magazine/HEAD/app_screenshot.png


--------------------------------------------------------------------------------
/assets/imgs/hashtag.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carlosveigadev/smashing-magazine/HEAD/assets/imgs/hashtag.jpg


--------------------------------------------------------------------------------
/assets/imgs/lupa_selected.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carlosveigadev/smashing-magazine/HEAD/assets/imgs/lupa_selected.png


--------------------------------------------------------------------------------
/assets/imgs/suzanne-scacca-200px.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carlosveigadev/smashing-magazine/HEAD/assets/imgs/suzanne-scacca-200px.jpg


--------------------------------------------------------------------------------
/.stickler.yml:
--------------------------------------------------------------------------------
 1 | # add the linters you want stickler to use for this project
 2 | linters:
 3 |   stylelint:
 4 |     # indicate where is the config file for stylelint
 5 |     config: 'stylelint.config.js'
 6 | 
 7 | # PLEASE DO NOT enable auto fixing options
 8 | # if you need extra support from you linter - do it in your local env as described in README for this config
 9 | 
10 | # find full documentation here: https://stickler-ci.com/docs
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Project Name
 2 | 
 3 | > This project consists of building a heatmap of the [Smashing magazine] (https://www.smashingmagazine.com/) website
 4 | 
 5 | ![screenshot](./app_screenshot.png)
 6 | 
 7 | In this simple project, we broke apart the website for a popular design magazine. The goal for this exercise was to start training our mindset to think in terms of visual hierarchy, typography and design principles.
 8 | 
 9 | ## Built With
10 | 
11 | - HTML,
12 | - CSS.
13 | 
14 | ## Live Demo
15 | 
16 | [Live Demo Link](https://raw.githack.com/wrakc/smashing-magazine/feature/index.html)
17 | 
18 | ## Authors
19 | 
20 | 👤 **Victor Gonzalez**
21 | 
22 | - [GitHub](https://github.com/shaqri)
23 | - [Twitter](https://twitter.com/victorgonbu1 )
24 | - [LinkedIn](https://www.linkedin.com/in/victor-manuel-gonzalez-buitrago-8704731a5/)
25 | 
26 | 👤 **Carlos Veiga**
27 | 
28 | - [GitHub](https://github.com/carlosveigadev)
29 | - [Twitter](https://twitter.com/carlosveigadev)
30 | - [LinkedIn](https://linkedin.com/carlosveigadev)
31 | 
32 | ## 🤝 Contributing
33 | 
34 | Contributions, issues and feature requests are welcome!
35 | 
36 | Feel free to check the [issues page](issues/).
37 | 
38 | ## Show your support
39 | 
40 | Give a ⭐️ if you like this project!
41 | 
42 | ## Acknowledgments
43 | 
44 | - Thanks microverse for the support;
45 | - Thanks minskins team;
46 | - Thanks the-manx team;
47 | 
48 | ## 📝 License
49 | 
50 | This project is [MIT](lic.url) licensed.
51 | 


--------------------------------------------------------------------------------
/assets/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | *,
  6 | ::after,
  7 | ::before {
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | html,
 12 | body,
 13 | div,
 14 | span,
 15 | applet,
 16 | object,
 17 | iframe,
 18 | h1,
 19 | h2,
 20 | h3,
 21 | h4,
 22 | h5,
 23 | h6,
 24 | p,
 25 | blockquote,
 26 | pre,
 27 | a,
 28 | abbr,
 29 | acronym,
 30 | address,
 31 | big,
 32 | cite,
 33 | code,
 34 | del,
 35 | dfn,
 36 | em,
 37 | img,
 38 | ins,
 39 | kbd,
 40 | q,
 41 | s,
 42 | samp,
 43 | small,
 44 | strike,
 45 | strong,
 46 | sub,
 47 | sup,
 48 | tt,
 49 | var,
 50 | b,
 51 | u,
 52 | i,
 53 | center,
 54 | dl,
 55 | dt,
 56 | dd,
 57 | ol,
 58 | ul,
 59 | li,
 60 | fieldset,
 61 | form,
 62 | label,
 63 | legend,
 64 | table,
 65 | caption,
 66 | tbody,
 67 | tfoot,
 68 | thead,
 69 | tr,
 70 | th,
 71 | td,
 72 | article,
 73 | aside,
 74 | canvas,
 75 | details,
 76 | embed,
 77 | figure,
 78 | figcaption,
 79 | footer,
 80 | header,
 81 | hgroup,
 82 | menu,
 83 | nav,
 84 | output,
 85 | ruby,
 86 | section,
 87 | summary,
 88 | time,
 89 | mark,
 90 | audio,
 91 | video {
 92 |   margin: 0;
 93 |   padding: 0;
 94 |   border: 0;
 95 |   font: inherit;
 96 |   font-size: 100%;
 97 |   vertical-align: baseline;
 98 |   font-family: 'Balsamiq Sans', cursive;
 99 | }
100 | 
101 | /* HTML5 display-role reset for older browsers */
102 | article,
103 | aside,
104 | details,
105 | figcaption,
106 | figure,
107 | footer,
108 | header,
109 | hgroup,
110 | menu,
111 | nav,
112 | section {
113 |   display: block;
114 | }
115 | 
116 | body {
117 |   line-height: 1;
118 | }
119 | 
120 | ol,
121 | ul {
122 |   list-style: none;
123 | }
124 | 
125 | blockquote,
126 | q {
127 |   quotes: none;
128 | }
129 | 
130 | blockquote::before,
131 | blockquote::after,
132 | q::before,
133 | q::after {
134 |   content: '';
135 |   content: none;
136 | }
137 | 
138 | table {
139 |   border-collapse: collapse;
140 |   border-spacing: 0;
141 | }
142 | 
143 | a {
144 |   text-decoration: none;
145 | }
146 | 


--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
  1 | "use strict"
  2 | 
  3 | module.exports = {
  4 |   "extends": "stylelint-config-recommended",
  5 |   "rules": {
  6 |     "at-rule-empty-line-before": [ "always", {
  7 |       except: [
  8 |         "blockless-after-same-name-blockless",
  9 |         "first-nested",
 10 |       ],
 11 |       ignore: ["after-comment"],
 12 |     } ],
 13 |     "at-rule-name-case": "lower",
 14 |     "at-rule-name-space-after": "always-single-line",
 15 |     "at-rule-semicolon-newline-after": "always",
 16 |     "at-rule-no-unknown": [
 17 |       true,
 18 |       {
 19 |         ignoreAtRules: [
 20 |           "each",
 21 |           "extend",
 22 |           "for",
 23 |           "function",
 24 |           "if",
 25 |           "include",
 26 |           "mixin",
 27 |           "while"
 28 |         ]
 29 |       }
 30 |     ],
 31 |     "block-closing-brace-empty-line-before": "never",
 32 |     "block-closing-brace-newline-after": "always",
 33 |     "block-closing-brace-newline-before": "always-multi-line",
 34 |     "block-closing-brace-space-before": "always-single-line",
 35 |     "block-opening-brace-newline-after": "always-multi-line",
 36 |     "block-opening-brace-space-after": "always-single-line",
 37 |     "block-opening-brace-space-before": "always",
 38 |     "color-hex-case": "lower",
 39 |     "color-hex-length": "short",
 40 |     "comment-empty-line-before": [ "always", {
 41 |       except: ["first-nested"],
 42 |       ignore: ["stylelint-commands"],
 43 |     } ],
 44 |     "comment-whitespace-inside": "always",
 45 |     "custom-property-empty-line-before": [ "always", {
 46 |       except: [
 47 |         "after-custom-property",
 48 |         "first-nested",
 49 |       ],
 50 |       ignore: [
 51 |         "after-comment",
 52 |         "inside-single-line-block",
 53 |       ],
 54 |     } ],
 55 |     "declaration-bang-space-after": "never",
 56 |     "declaration-bang-space-before": "always",
 57 |     "declaration-block-semicolon-newline-after": "always-multi-line",
 58 |     "declaration-block-semicolon-space-after": "always-single-line",
 59 |     "declaration-block-semicolon-space-before": "never",
 60 |     "declaration-block-single-line-max-declarations": 1,
 61 |     "declaration-block-trailing-semicolon": "always",
 62 |     "declaration-colon-newline-after": "always-multi-line",
 63 |     "declaration-colon-space-after": "always-single-line",
 64 |     "declaration-colon-space-before": "never",
 65 |     "declaration-empty-line-before": [ "always", {
 66 |       except: [
 67 |         "after-declaration",
 68 |         "first-nested",
 69 |       ],
 70 |       ignore: [
 71 |         "after-comment",
 72 |         "inside-single-line-block",
 73 |       ],
 74 |     } ],
 75 |     "function-comma-newline-after": "always-multi-line",
 76 |     "function-comma-space-after": "always-single-line",
 77 |     "function-comma-space-before": "never",
 78 |     "function-max-empty-lines": 0,
 79 |     "function-name-case": "lower",
 80 |     "function-parentheses-newline-inside": "always-multi-line",
 81 |     "function-parentheses-space-inside": "never-single-line",
 82 |     "function-whitespace-after": "always",
 83 |     "indentation": 2,
 84 |     "length-zero-no-unit": true,
 85 |     "max-empty-lines": 1,
 86 |     "media-feature-colon-space-after": "always",
 87 |     "media-feature-colon-space-before": "never",
 88 |     "media-feature-name-case": "lower",
 89 |     "media-feature-parentheses-space-inside": "never",
 90 |     "media-feature-range-operator-space-after": "always",
 91 |     "media-feature-range-operator-space-before": "always",
 92 |     "media-query-list-comma-newline-after": "always-multi-line",
 93 |     "media-query-list-comma-space-after": "always-single-line",
 94 |     "media-query-list-comma-space-before": "never",
 95 |     "no-eol-whitespace": true,
 96 |     "no-missing-end-of-source-newline": true,
 97 |     "number-leading-zero": "always",
 98 |     "number-no-trailing-zeros": true,
 99 |     "property-case": "lower",
100 |     "rule-empty-line-before": [ "always-multi-line", {
101 |       except: ["first-nested"],
102 |       ignore: ["after-comment"],
103 |     } ],
104 |     "selector-attribute-brackets-space-inside": "never",
105 |     "selector-attribute-operator-space-after": "never",
106 |     "selector-attribute-operator-space-before": "never",
107 |     "selector-combinator-space-after": "always",
108 |     "selector-combinator-space-before": "always",
109 |     "selector-descendant-combinator-no-non-space": true,
110 |     "selector-list-comma-newline-after": "always",
111 |     "selector-list-comma-space-before": "never",
112 |     "selector-max-empty-lines": 0,
113 |     "selector-pseudo-class-case": "lower",
114 |     "selector-pseudo-class-parentheses-space-inside": "never",
115 |     "selector-pseudo-element-case": "lower",
116 |     "selector-pseudo-element-colon-notation": "double",
117 |     "selector-type-case": "lower",
118 |     "unit-case": "lower",
119 |     "value-list-comma-newline-after": "always-multi-line",
120 |     "value-list-comma-space-after": "always-single-line",
121 |     "value-list-comma-space-before": "never",
122 |     "value-list-max-empty-lines": 0,
123 |   },
124 | }


--------------------------------------------------------------------------------
/assets/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --gray0: #bfbfbf;
  3 |   --gray1: #999;
  4 |   --gray2: #888;
  5 |   --gray3: #777;
  6 |   --gray4: #666;
  7 |   --gray5: #555;
  8 | }
  9 | 
 10 | .main-page {
 11 |   display: flex;
 12 |   flex-direction: column;
 13 |   background-color: var(--gray0);
 14 | }
 15 | 
 16 | .flex {
 17 |   display: flex;
 18 | }
 19 | 
 20 | nav img {
 21 |   height: 4.5em;
 22 | }
 23 | 
 24 | nav picture {
 25 |   justify-content: flex-end;
 26 |   align-items: center;
 27 | }
 28 | 
 29 | nav.flex > * {
 30 |   flex: 1.2;
 31 |   background-color: var(--gray1);
 32 |   height: 107px;
 33 | }
 34 | 
 35 | footer ul {
 36 |   width: 90%;
 37 |   list-style: disc;
 38 |   flex-flow: wrap;
 39 |   justify-content: center;
 40 |   line-height: 1.5;
 41 |   font-size: 1.2em;
 42 |   color: var(--gray5);
 43 |   text-align: center;
 44 |   box-sizing: border-box;
 45 |   margin: 2em 0;
 46 |   max-width: 60%;
 47 |   padding: 0;
 48 | }
 49 | 
 50 | nav.flex ul {
 51 |   flex: 5;
 52 |   padding: 0 1%;
 53 | }
 54 | 
 55 | nav.flex ul li {
 56 |   flex: 1;
 57 |   display: flex;
 58 |   align-items: center;
 59 |   justify-content: center;
 60 |   margin: 0 5px;
 61 | }
 62 | 
 63 | div article span a {
 64 |   color: var(--gray1);
 65 |   text-decoration: underline;
 66 | }
 67 | 
 68 | footer ul li a {
 69 |   color: white;
 70 |   margin-left: -5px;
 71 | }
 72 | 
 73 | .person-section div a {
 74 |   color: var(--gray3);
 75 |   text-decoration: underline;
 76 |   font-size: 1em;
 77 | }
 78 | 
 79 | .person-section h3 a {
 80 |   display: inline-block;
 81 |   text-decoration: none;
 82 |   margin: 1em 0;
 83 |   font-size: 2.5em;
 84 |   color: var(--gray5);
 85 |   font-weight: 700;
 86 | }
 87 | 
 88 | section.newsletter h2 a {
 89 |   display: inline-block;
 90 |   font-size: 3em;
 91 |   color: #fff;
 92 |   text-decoration: underline;
 93 |   padding: 1em 0;
 94 | }
 95 | 
 96 | main .content-table h2 a {
 97 |   color: white;
 98 |   display: block;
 99 |   text-decoration: underline;
100 |   font-size: 4em;
101 |   margin: 0.75em 5em;
102 |   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
103 | }
104 | 
105 | nav ul.flex a {
106 |   color: white;
107 |   font-family: 'Balsamiq Sans', cursive;
108 |   font-size: 22px;
109 |   font-weight: 700;
110 |   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
111 |   cursor: pointer;
112 | }
113 | 
114 | section.guides-section div ul li a {
115 |   text-decoration: underline;
116 |   color: var(--gray4);
117 |   line-height: 3em;
118 | }
119 | 
120 | .center .more-articles a {
121 |   color: var(--gray2);
122 | }
123 | 
124 | .person-section h3 a:hover {
125 |   color: var(--gray1);
126 |   transition: 0.75s;
127 | }
128 | 
129 | div.articles div.black a {
130 |   display: inline-block;
131 |   color: #fff;
132 |   margin-bottom: 1em;
133 | }
134 | 
135 | nav.flex ul li a:hover {
136 |   border-radius: 10px;
137 |   background-color: var(--gray2);
138 |   padding: 18px 10px;
139 | }
140 | 
141 | .logo img {
142 |   align-items: center;
143 | }
144 | 
145 | nav.flex .search-bar {
146 |   flex: 2;
147 | }
148 | 
149 | section.newsletter label button {
150 |   width: 80%;
151 |   border-radius: 0 8px 8px 0;
152 |   border: none;
153 |   margin-left: -4px;
154 |   border-left: 1px solid var(--gray1);
155 | }
156 | 
157 | nav.flex ul li button {
158 |   font-family: 'Balsamiq Sans', cursive;
159 |   color: white;
160 |   font-size: 22px;
161 |   padding: 18px 15px;
162 |   border: 1px solid var(--gray3);
163 |   background-color: var(--gray4);
164 |   border-radius: 11px;
165 |   box-shadow: 0 13px 27px -15px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
166 |   cursor: pointer;
167 | }
168 | 
169 | nav.flex ul li button:hover {
170 |   background-color: var(--gray5);
171 | }
172 | 
173 | .search-bar label {
174 |   align-items: center;
175 |   justify-content: center;
176 | }
177 | 
178 | .search-bar label input {
179 |   width: 325px;
180 |   height: 59px;
181 |   border-radius: 11px;
182 |   font-family: 'Balsamiq Sans', cursive;
183 |   text-indent: 40px;
184 |   font-size: 22px;
185 | }
186 | 
187 | .main-links {
188 |   color: white;
189 |   display: grid;
190 |   grid-template-columns: 1fr 1fr;
191 |   grid-template-rows: 780px 577px;
192 |   width: 100%;
193 |   margin: 0 auto;
194 | }
195 | 
196 | .first-row {
197 |   padding: 30% 12% 5% 12%;
198 | }
199 | 
200 | .second-row {
201 |   padding: 15% 12% 5% 12%;
202 | }
203 | 
204 | section.newsletter img {
205 |   width: 500px;
206 |   display: block;
207 |   padding: 3em;
208 | }
209 | 
210 | .main-links div img,
211 | .person-section .person-of-week picture img,
212 | .person-section .flex picture img {
213 |   width: 76px;
214 |   height: 76px;
215 |   transform: rotate(-10deg);
216 |   margin-right: 15px;
217 |   margin-bottom: 24px;
218 |   border-radius: 12px;
219 |   border: 4px solid white;
220 |   transition: transform 0.2s ease-out;
221 |   transform-origin: bottom left;
222 | }
223 | 
224 | .person-section .person-of-week picture img {
225 |   border: 8px solid var(--gray3);
226 |   width: 286px;
227 |   height: 286px;
228 | }
229 | 
230 | .person-section .flex picture img {
231 |   border: 4px solid var(--gray3);
232 | }
233 | 
234 | .main-links div img:hover {
235 |   transform: rotate(0deg);
236 | }
237 | 
238 | .flex.red-block div:last-child img {
239 |   width: 322px;
240 |   height: 414px;
241 |   transform: rotate(-10deg);
242 |   transition: transform 0.2s ease-out;
243 |   transform-origin: bottom left;
244 |   position: absolute;
245 |   bottom: 1.5em;
246 | }
247 | 
248 | .person-section .flex picture img:hover,
249 | .person-section .person-of-week picture img:hover,
250 | .flex.red-block div:last-child img:hover {
251 |   transform: rotate(0deg);
252 | }
253 | 
254 | .person-section .flex {
255 |   width: 100%;
256 | }
257 | 
258 | .main-links div .flex {
259 |   align-items: center;
260 | }
261 | 
262 | section.newsletter p {
263 |   padding: 1em 0;
264 |   width: 540px;
265 |   line-height: 1.5em;
266 |   font-size: 1.5em;
267 |   color: #fff;
268 |   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
269 | }
270 | 
271 | .person-section div p {
272 |   font-size: 1.3em;
273 |   line-height: 1.5em;
274 | }
275 | 
276 | main .content-table p {
277 |   margin: 2em 15em;
278 |   font-size: 1.5em;
279 |   line-height: 1.5em;
280 |   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
281 | }
282 | 
283 | div.articles p {
284 |   line-height: 2em;
285 |   font-size: 1em;
286 | }
287 | 
288 | footer div.second-list p {
289 |   text-align: center;
290 |   color: white;
291 |   line-height: 1.5em;
292 | }
293 | 
294 | .person-section .person-of-week p {
295 |   font-size: 1.5em;
296 |   color: var(--gray5);
297 |   line-height: 1.5em;
298 | }
299 | 
300 | .main-links div .flex p {
301 |   font-size: 22px;
302 |   font-weight: 700;
303 |   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
304 | }
305 | 
306 | .color-2 {
307 |   background-color: var(--gray2);
308 | }
309 | 
310 | .color-3 {
311 |   background-color: var(--gray3);
312 | }
313 | 
314 | .color-5 {
315 |   background-color: var(--gray5);
316 | }
317 | 
318 | .person-section div span {
319 |   color: var(--gray3);
320 |   margin-left: 10px;
321 |   font-size: 1em;
322 | }
323 | 
324 | main .content-table span {
325 |   display: block;
326 |   font-size: 1.5em;
327 |   text-transform: uppercase;
328 |   padding: 2em 0 1em 0;
329 | }
330 | 
331 | section.guides-section div span {
332 |   display: inline-block;
333 |   padding: 10px 0;
334 |   font-size: 1em;
335 |   text-transform: uppercase;
336 | }
337 | 
338 | .person-section div p span {
339 |   margin-left: 0;
340 | }
341 | 
342 | div.articles article span {
343 |   display: inline-block;
344 |   margin: 20px 0;
345 | }
346 | 
347 | .main-links div h2 span {
348 |   font-size: 0.4em;
349 |   vertical-align: middle;
350 | }
351 | 
352 | .main-links div .flex span {
353 |   padding: 0 5px;
354 |   font-style: italic;
355 | }
356 | 
357 | .main-links div h2 {
358 |   font-size: 3em;
359 |   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
360 | }
361 | 
362 | .main-links div h2 span i {
363 |   padding: 0 10px;
364 |   vertical-align: middle;
365 | }
366 | 
367 | .main-links div .hashtags {
368 |   margin: 20px 0;
369 | }
370 | 
371 | footer div .first li {
372 |   width: 80px;
373 |   text-align: left;
374 | }
375 | 
376 | footer div.second-list ul li {
377 |   line-height: 2em;
378 |   padding: 0 1em;
379 | }
380 | 
381 | section.guides-section div ul li {
382 |   list-style: disc;
383 | }
384 | 
385 | .main-links div .hashtags li {
386 |   padding: 0 20px;
387 | }
388 | 
389 | .main-links .arrow {
390 |   color: white;
391 |   font-size: 50px;
392 |   margin-top: 120px;
393 |   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
394 | }
395 | 
396 | .main-links .second-row .arrow {
397 |   margin-top: 50px;
398 | }
399 | 
400 | div.articles > * {
401 |   color: black;
402 |   position: relative;
403 | }
404 | 
405 | section.guides-section div {
406 |   padding-left: 3em;
407 |   margin-bottom: 2em;
408 | }
409 | 
410 | section.newsletter div {
411 |   justify-content: center;
412 |   width: 40%;
413 | }
414 | 
415 | .flex.red-block div {
416 |   background-color: var(--gray3);
417 |   color: #fff;
418 |   padding: 1.5em 6em;
419 | }
420 | 
421 | .person-section .person-of-week div {
422 |   align-self: flex-start;
423 | }
424 | 
425 | div.articles article > * {
426 |   color: black;
427 | }
428 | 
429 | .person-section > *:hover {
430 |   background-color: var(--gray1);
431 | }
432 | 
433 | div.articles > *:not(.black):hover,
434 | section.guides-section div:hover {
435 |   width: calc(100% + 60px);
436 |   height: calc(100% + 60px);
437 |   padding: 10px;
438 |   box-shadow: 1px 1px 5px var(--gray1), -1px -1px 5px var(--gray1);
439 |   background-color: var(--gray1);
440 | }
441 | 
442 | div.articles,
443 | .guides-section {
444 |   margin: 0 auto;
445 |   width: 90%;
446 |   display: grid;
447 |   grid-template-columns: repeat(4, 1fr);
448 |   grid-auto-rows: 700px;
449 |   grid-gap: 2em;
450 | }
451 | 
452 | div.articles:hover,
453 | section.guides-section:hover {
454 |   grid-gap: 4em;
455 | }
456 | 
457 | div.articles div.black {
458 |   border-radius: 5px;
459 |   grid-column: span 2;
460 |   text-align: center;
461 |   background-color: var(--gray5);
462 |   color: #fff;
463 |   padding: 2em;
464 | }
465 | 
466 | div.articles div.black h3 a {
467 |   font-size: 2em;
468 |   text-decoration: underline;
469 | }
470 | 
471 | div.articles div.black p a {
472 |   text-decoration: underline;
473 | }
474 | 
475 | button.white-button {
476 |   background-color: white;
477 |   color: var(--gray3);
478 |   border-radius: 8px;
479 |   font-size: 1.5em;
480 |   padding: 0.5em;
481 | }
482 | 
483 | button.white-button:hover {
484 |   color: var(--gray5);
485 | }
486 | 
487 | div.articles article a.article-arrow {
488 |   position: absolute;
489 |   bottom: 0;
490 |   left: 0;
491 |   padding: 30px;
492 |   font-size: 30px;
493 |   display: block;
494 | }
495 | 
496 | div.articles article a.article-arrow:hover {
497 |   background-color: var(--gray2);
498 | }
499 | 
500 | div.articles article h2 {
501 |   text-decoration: underline;
502 |   font-size: 2em;
503 |   font-weight: 700;
504 | }
505 | 
506 | div .imgs {
507 |   height: 290px;
508 |   width: 241px;
509 | }
510 | 
511 | .center {
512 |   margin: 0 auto;
513 | }
514 | 
515 | main div.more-articles {
516 |   justify-content: center;
517 |   margin: 5em auto;
518 |   border-bottom: 4px solid var(--gray3);
519 |   padding-bottom: 1em;
520 |   text-transform: uppercase;
521 |   max-width: 12em;
522 |   width: 100%;
523 | }
524 | 
525 | main .content-table {
526 |   height: 1055px;
527 |   background-image: linear-gradient(var(--gray5), var(--gray1));
528 |   text-align: center;
529 |   color: white;
530 | }
531 | 
532 | main .content-table .imgs_table {
533 |   width: 920px;
534 |   height: 517px;
535 |   display: block;
536 |   margin-top: 2.5em;
537 | }
538 | 
539 | main .person-section {
540 |   display: grid;
541 |   grid-template-columns: repeat(2, 1fr);
542 |   grid-auto-rows: 394px;
543 |   padding-top: 4em;
544 |   width: 90%;
545 | }
546 | 
547 | .person-section .person-of-week {
548 |   grid-column: span 2;
549 |   justify-content: center;
550 |   align-items: center;
551 |   width: 90%;
552 | }
553 | 
554 | footer h4 {
555 |   text-align: center;
556 |   display: block;
557 |   margin: 2em auto;
558 | }
559 | 
560 | footer div.first-list h4 {
561 |   color: white;
562 | }
563 | 
564 | .person-section .person-of-week h4 {
565 |   font-size: 1.5em;
566 |   text-transform: uppercase;
567 |   padding-bottom: 2em;
568 |   color: var(--gray2);
569 | }
570 | 
571 | .flex.red-block {
572 |   height: 420px;
573 |   margin-bottom: 4em;
574 | }
575 | 
576 | .flex.red-block div:first-child {
577 |   flex: 3;
578 | }
579 | 
580 | .flex.red-block div:last-child {
581 |   flex: 1;
582 |   position: relative;
583 | }
584 | 
585 | .flex.red-block div:first-child span {
586 |   display: inline-block;
587 |   font-size: 1.2em;
588 |   text-transform: uppercase;
589 | }
590 | 
591 | .flex.red-block div:first-child h2 a {
592 |   display: inline-block;
593 |   text-decoration: underline;
594 |   font-size: 4em;
595 |   padding: 0.5em 0;
596 |   color: #fff;
597 | }
598 | 
599 | footer div.second-list p:first-child {
600 |   font-style: italic;
601 | }
602 | 
603 | .flex.red-block div:first-child p {
604 |   font-size: 1.5em;
605 |   padding-bottom: 1em;
606 |   line-height: 1.5em;
607 | }
608 | 
609 | section.guides-section div h2 {
610 |   font-size: 2em;
611 |   font-weight: 700;
612 |   padding: 1em 0;
613 | }
614 | 
615 | section.guides-section div ul {
616 |   padding-left: 2em;
617 | }
618 | 
619 | section.newsletter {
620 |   width: 98%;
621 |   background-color: var(--gray3);
622 |   border-radius: 15px;
623 |   text-align: center;
624 |   margin-top: 7em;
625 | }
626 | 
627 | section.newsletter label {
628 |   display: block;
629 |   width: 500px;
630 | }
631 | 
632 | section.newsletter label input {
633 |   width: 120%;
634 |   background-color: white;
635 |   color: var(--gray3);
636 |   border-radius: 8px 0 0 8px;
637 |   font-size: 1.5em;
638 |   padding: 0.5em;
639 |   border: none;
640 | }
641 | 
642 | section.newsletter small {
643 |   display: inline-block;
644 |   color: #fff;
645 |   margin: 2em auto;
646 |   line-height: 1.5em;
647 |   font-size: 1.2em;
648 | }
649 | 
650 | footer {
651 |   background-color: var(--gray3);
652 |   width: 100%;
653 |   flex-direction: column;
654 |   align-items: center;
655 | }
656 | 
657 | footer div.first-list {
658 |   margin: 2em 0;
659 | }
660 | 
661 | footer .first.flex {
662 |   margin: 0 auto;
663 | }
664 | 
665 | footer div.second-list ul {
666 |   text-decoration: underline;
667 |   list-style: none;
668 |   margin: 2em auto;
669 |   width: 100%;
670 |   flex-flow: wrap;
671 |   text-align: center;
672 |   font-size: 1em;
673 | }
674 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zxx" dir="ltr">
  3 |   <head>
  4 |     <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>
  5 |     <link rel="stylesheet" href="assets/styles.css" type="text/css">
  6 |     <link rel="stylesheet" href="assets/reset.css" type="text/css">
  7 |     <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
  9 |     <meta charset="utf-8">
 10 |     <title>Smashing Magazine</title>
 11 |   </head>
 12 |     <!-- Content -->
 13 |     <body>
 14 |       <div class="main-page">
 15 |         <header>
 16 |             <!-- Navbar -->
 17 |             <nav class="flex">
 18 |                 <picture class="logo flex">
 19 |                  <img src="https://d33wubrfki0l68.cloudfront.net/81fa290218cedc39d32be7b1f1aba58a25829ebe/0a05f/images/logo--full.svg" alt="Logo">
 20 |                 </picture>
 21 |                 <ul class="flex">
 22 |                   <li><a href="#">Lorem</a></li>
 23 |                   <li><a href="#">Lorem</a></li>
 24 |                   <li><a href="#">Lorem</a></li>
 25 |                   <li><a href="#">Lorem</a></li>
 26 |                   <li><a href="#">Lorem</a></li>
 27 |                   <li><a href="#">Lorem</a></li>
 28 |                   <li><a href="#">Lorem</a></li>
 29 |                   <li><a href="#">Lorem</a></li>
 30 |                   <li><button type="button" name="more">Lorem</button></li>
 31 |                 </ul>
 32 |               <div class="search-bar flex">
 33 |                 <label class="flex" for="search">
 34 |                   <input type="text" id="search" name="search" value="" placeholder="Search articles...">
 35 |                 </label>
 36 |               </div>
 37 |             </nav>
 38 |         </header>
 39 |       <main>
 40 |         <section class="main-links">
 41 |           <div class="first-row color-3">
 42 |             <a>
 43 |               <div class="flex">
 44 |                 <img src="assets/imgs/suzanne-scacca-200px.jpg" alt="Person Image">
 45 |                 <p>Lorem ipsum</p>
 46 |                 <span>lorem</span>
 47 |               </div>
 48 |               <div>
 49 |                 <h2>
 50 |                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.<span><i class="fas fa-comment-alt"></i>Lorem ipsum dolor.</span>
 51 |                 </h2>
 52 |               </div>
 53 |               <ul class="hashtags flex">
 54 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
 55 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
 56 |               </ul>
 57 |               <div class="arrow">
 58 |                 <span class="arrow">→</span>
 59 |               </div>
 60 |             </a>
 61 |           </div>
 62 |           <div class="first-row color-2">
 63 |             <a>
 64 |               <div class="flex">
 65 |                 <img src="assets/imgs/suzanne-scacca-200px.jpg" alt="Person Image">
 66 |                 <p>Lorem ipsum</p>
 67 |                 <span>lorem</span>
 68 |               </div>
 69 |               <div>
 70 |                 <h2>
 71 |                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.<span><i class="fas fa-comment-alt"></i>Lorem ipsum dolor.</span>
 72 |                 </h2>
 73 |               </div>
 74 |               <ul class="hashtags flex">
 75 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
 76 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
 77 |               </ul>
 78 |               <div class="arrow">
 79 |                 <span class="arrow">→</span>
 80 |               </div>
 81 |             </a>
 82 |           </div>
 83 |           <div class="second-row color-5">
 84 |             <a>
 85 |               <div class="flex">
 86 |                 <img src="assets/imgs/suzanne-scacca-200px.jpg" alt="Person Image">
 87 |                 <p>Lorem ipsum</p>
 88 |                 <span>lorem</span>
 89 |               </div>
 90 |               <div>
 91 |                 <h2>
 92 |                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.<span><i class="fas fa-comment-alt"></i>Lorem ipsum dolor.</span>
 93 |                 </h2>
 94 |               </div>
 95 |               <ul class="hashtags flex">
 96 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
 97 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
 98 |               </ul>
 99 |               <div class="arrow">
100 |                 <span class="arrow">→</span>
101 |               </div>
102 |             </a>
103 |           </div>
104 |           <div class="second-row color-3">
105 |             <a>
106 |               <div class="flex">
107 |                 <img src="assets/imgs/suzanne-scacca-200px.jpg" alt="Person Image">
108 |                 <p>Lorem ipsum</p>
109 |                 <span>lorem</span>
110 |               </div>
111 |               <div>
112 |                 <h2>
113 |                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.<span><i class="fas fa-comment-alt"></i>Lorem ipsum dolor.</span>
114 |                 </h2>
115 |               </div>
116 |               <ul class="hashtags flex">
117 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
118 |                 <li><i class="fas fa-hashtag"></i>Lorem</li>
119 |               </ul>
120 |               <div class="arrow">
121 |                 <span class="arrow">→</span>
122 |               </div>
123 |             </a>
124 |           </div>
125 |         </section>
126 | 
127 |         <!-- Articles -->
128 |         <div class="articles">
129 |           <article>
130 |             <span>2 lorem ipsum</span>
131 |             <a href="#"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  ut labore et dolore magna aliqua.</h2></a>
132 |             <span>Lorem <a href="#">ipsum dolor.</a></span>
133 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
134 |             <a class="article-arrow" href="#">→</a>
135 |           </article>
136 |           <article>
137 |             <span>2 lorem ipsum</span>
138 |             <a href="#"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  ut labore et dolore magna aliqua.</h2></a>
139 |             <span>Lorem <a href="#">ipsum dolor.</a></span>
140 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
141 |             <a class="article-arrow" href="#">→</a>
142 |           </article>
143 |           <article>
144 |             <span>2 lorem ipsum</span>
145 |             <a href="#"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing eli incididunt ut labore et dolore magna aliqua.</h2></a>
146 |             <span>Lorem <a href="#">ipsum dolor.</a></span>
147 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
148 |             <a class="article-arrow" href="#">→</a>
149 |           </article>
150 |           <article>
151 |             <span>2 lorem ipsum</span>
152 |             <a href="#"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, incididunt ut labore et dolore magna aliqua.</h2></a>
153 |             <span>Lorem <a href="#">ipsum dolor.</a></span>
154 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
155 |             <a class="article-arrow" href="#">→</a>
156 |           </article>
157 |            <div class="black">
158 |             <img class="imgs" src="https://d33wubrfki0l68.cloudfront.net/aea2faf51cc69a1e10bb434aa92f7c3821f16787/e4922/images/smashing-cat/singing-barista.svg" alt="Image of mascot">
159 |             <h3><a href="#">1,651 Lorem Ipsum</a></h3>
160 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
161 |             <p><a href="#">Lorem ipsum dolor.</a></p>
162 |             <button type="button" name="button" class="white-button">Lorem ipsum.</button>
163 |             <p>Lorem ipsum dolor?<a href="#">Lorem ipsum!</a></p>
164 |           </div>
165 |             <article>
166 |               <span>2 lorem ipsum</span>
167 |               <a href="#"><h2>Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2></a>
168 |               <span>Lorem <a href="#">ipsum dolor.</a></span>
169 |               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
170 |               <a class="article-arrow" href="#">→</a>
171 |             </article>
172 |             <article>
173 |               <span>2 lorem ipsum</span>
174 |               <a href="#"><h2>Lorem ipsum dolor sit ametelit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2></a>
175 |               <span>Lorem <a href="#">ipsum dolor.</a></span>
176 |               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
177 |               <a class="article-arrow" href="#">→</a>
178 |             </article>
179 |             <article>
180 |               <span>2 lorem ipsum</span>
181 |               <a href="#"><h2>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2></a>
182 |               <span>Lorem <a href="#">ipsum dolor.</a></span>
183 |               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
184 |               <a class="article-arrow" href="#">→</a>
185 |             </article>
186 |             <article>
187 |               <span>2 lorem ipsum</span>
188 |               <a href="#"><h2>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2></a>
189 |               <span>Lorem <a href="#">ipsum dolor.</a></span>
190 |               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
191 |               <a class="article-arrow" href="#">→</a>
192 |             </article>
193 |           <div class="black">
194 |             <img class="imgs" src="https://d33wubrfki0l68.cloudfront.net/72280e1450d4ecfc45ef96ea00b27b4bf4ef5d06/eb759/images/smashing-cat/cat-smashing-tv-2.svg" alt="Image of a moscot">
195 |             <h3><a href="#">1,651 Lorem Ipsum</a></h3>
196 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
197 |             <p><a href="#">Lorem ipsum dolor.</a></p>
198 |             <button type="button" name="button"  class="white-button">Lorem ipsum.</button>
199 |             <p>Lorem ipsum dolor?<a href="#">Lorem ipsum!</a></p>
200 |           </div>
201 |         </div>
202 |         <div class="center">
203 |           <div class="more-articles">
204 |             <a href="#">Lorem ipsum dolor →</a>
205 |           </div>
206 |         </div>
207 |         <section class="content-table">
208 |           <span>Lorem ipsum - Lorem</span>
209 |           <h2><a href="#">Lorem "Ipsum!": dolor sit amet, adipisicing elit.</a></h2>
210 |           <p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit,</b> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
211 |           <button class="white-button" type="button" name="content">Lorem ipsum dolor sit →</button>
212 |           <img class="imgs_table center" src="https://d33wubrfki0l68.cloudfront.net/462dc72434238d15cb04dd6bc5a5ea4cc00704be/ca175/images/books/click__homepage-illustration.svg" alt="Image of mascot">
213 |         </section>
214 | 
215 |         <!-- Person of interest section -->
216 | 
217 |         <section class="person-section center">
218 |           <div class="person-of-week flex center">
219 |             <picture>
220 |               <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/175dda1d-8ea8-41aa-b624-9791277809ae/scott-ohara-opt.png" alt="Person">
221 |             </picture>
222 |             <div>
223 |               <h4>Lorem ipsum dolor.</h4>
224 |               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat!</p>
225 |             </div>
226 |           </div>
227 |           <div class="flex center">
228 |             <picture>
229 |               <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c485761-f30f-4860-b52d-dc7362a21e7c/joshua-levy-opt.png" alt="Person image">
230 |             </picture>
231 |             <div>
232 |               <a href="#">Lorem Ipsum</a><span>lorem</span>
233 |               <h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
234 |               <p><span>Lorem 26, 2020</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="#">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
235 |             </div>
236 |           </div>
237 |           <div class="flex center">
238 |             <picture>
239 |               <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c485761-f30f-4860-b52d-dc7362a21e7c/joshua-levy-opt.png" alt="Person image">
240 |             </picture>
241 |             <div>
242 |               <a href="#">Lorem ipsum</a><span>lorem</span>
243 |               <h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
244 |               <p><span>Lorem 26, 2020</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="#">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
245 |             </div>
246 |           </div>
247 |           <div class="flex center">
248 |             <picture>
249 |               <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c485761-f30f-4860-b52d-dc7362a21e7c/joshua-levy-opt.png" alt="Person image">
250 |             </picture>
251 |             <div>
252 |               <a href="#">Lorem ipsum</a><span>lorem</span>
253 |               <h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
254 |               <p><span>Lorem 26, 2020</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="#">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
255 |             </div>
256 |           </div>
257 |           <div class="flex center">
258 |             <picture>
259 |               <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c485761-f30f-4860-b52d-dc7362a21e7c/joshua-levy-opt.png" alt="Person image">
260 |             </picture>
261 |             <div>
262 |               <a href="#">Lorem ipsum</a><span>lorem</span>
263 |               <h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
264 |               <p><span>Lorem 26, 2020</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="#">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
265 |             </div>
266 |           </div>
267 |           <div class="flex center">
268 |             <picture>
269 |               <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c485761-f30f-4860-b52d-dc7362a21e7c/joshua-levy-opt.png" alt="Person image">
270 |             </picture>
271 |             <div>
272 |               <a href="#">Lorem ipsum</a><span>lorem</span>
273 |               <h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
274 |               <p><span>Lorem 26, 2020</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="#">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
275 |             </div>
276 |           </div>
277 |           <div class="flex center">
278 |             <picture>
279 |               <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c485761-f30f-4860-b52d-dc7362a21e7c/joshua-levy-opt.png" alt="Person image">
280 |             </picture>
281 |             <div>
282 |               <a href="#">Lorem ipsum</a><span>lorem</span>
283 |               <h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
284 |               <p><span>Lorem 26, 2020</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="#">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
285 |             </div>
286 |           </div>
287 |         </section>
288 | 
289 |         <!-- Division -->
290 |         <div class="center">
291 |           <div class="more-articles">
292 |             <a href="#">Lorem ipsum dolor →</a>
293 |           </div>
294 |         </div>
295 | 
296 |         <section class="flex red-block">
297 |           <div>
298 |             <span>Lorem ipsum dolor.</span>
299 |             <h2><a href="#">Lorem Ipsum</a></h2>
300 |             <p>Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>
301 |             <button class="white-button" type="button" name="button">Jump to table of contents ↬</button>
302 |           </div>
303 |           <div>
304 |             <img src="https://res.cloudinary.com/indysigner/image/upload/v1542959380/shop/design-systems-hardcover-book.png" alt="Book image.">
305 |           </div>
306 |         </section>
307 |         <section class="guides-section">
308 |           <div>
309 |             <span>Lorem</span>
310 |             <h2>Lorem ipsum dolor sit amet consectetur.</h2>
311 |             <ul>
312 |               <li><a href="#">Lorem ipsum dolor</a></li>
313 |               <li><a href="#">Lorem ipsum dolor</a></li>
314 |               <li><a href="#">Lorem ipsum </a></li>
315 |               <li><a href="#">Lorem ipsum dolor</a></li>
316 |               <li><a href="#">Lorem ipsum </a></li>
317 |               <li><a href="#">Lorem ipsum dolor</a></li>
318 |               <li><a href="#">Lorem ipsum </a></li>
319 |               <li><a href="#">Lorem ipsum dolor</a></li>
320 |             </ul>
321 |           </div>
322 |           <div>
323 |             <span>Lorem</span>
324 |             <h2>Lorem ipsum dolor sit amet consectetur.</h2>
325 |             <ul>
326 |               <li><a href="#">Lorem ipsum dolor</a></li>
327 |               <li><a href="#">Lorem ipsum dolor</a></li>
328 |               <li><a href="#">Lorem ipsum </a></li>
329 |               <li><a href="#">Lorem ipsum dolor</a></li>
330 |               <li><a href="#">Lorem ipsum </a></li>
331 |               <li><a href="#">Lorem ipsum dolor</a></li>
332 |               <li><a href="#">Lorem ipsum </a></li>
333 |             </ul>
334 |           </div>
335 |           <div>
336 |             <span>Lorem</span>
337 |             <h2>Lorem ipsum dolor sit amet consectetur.</h2>
338 |             <ul>
339 |               <li><a href="#">Lorem ipsum dolor</a></li>
340 |               <li><a href="#">Lorem ipsum dolor</a></li>
341 |               <li><a href="#">Lorem ipsum </a></li>
342 |               <li><a href="#">Lorem ipsum dolor</a></li>
343 |               <li><a href="#">Lorem ipsum </a></li>
344 |               <li><a href="#">Lorem ipsum dolor</a></li>
345 |               <li><a href="#">Lorem ipsum </a></li>
346 |               <li><a href="#">Lorem ipsum dolor</a></li>
347 |               <li><a href="#">Lorem ipsum </a></li>
348 |               <li><a href="#">Lorem ipsum dolor</a></li>
349 |             </ul>
350 |           </div>
351 |           <div>
352 |             <span>Lorem</span>
353 |             <h2>Lorem ipsum dolor sit amet consectetur.</h2>
354 |             <ul>
355 |               <li><a href="#">Lorem ipsum dolor</a></li>
356 |               <li><a href="#">Lorem ipsum dolor</a></li>
357 |               <li><a href="#">Lorem ipsum </a></li>
358 |               <li><a href="#">Lorem ipsum dolor</a></li>
359 |               <li><a href="#">Lorem ipsum </a></li>
360 |               <li><a href="#">Lorem ipsum dolor</a></li>
361 |               <li><a href="#">Lorem ipsum </a></li>
362 |               <li><a href="#">Lorem ipsum dolor</a></li>
363 |             </ul>
364 |           </div>
365 |         </section>
366 |         <section class="newsletter center">
367 |           <h2><a href="#">Lorem Ipsum</a></h2>
368 |           <p class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
369 |           <img class="center" src="https://d33wubrfki0l68.cloudfront.net/ce7741e1659c0366fda51555365194e0bfd136c0/ae578/images/smashing-cat/cat-with-trampet.svg" alt="Mascot iamge.">
370 |           <div class="center flex">
371 |             <label for="email-input">
372 |               <input id="email-input" type="email" name="email" value="" placeholder="Lorem (ipsum) dolor">
373 |             </label>
374 |             <label for="button">
375 |               <button id="button" type="button" name="button" class="white-button">Subscribe →</button>
376 |             </label>
377 |           </div>
378 |           <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.<br/>Lorem ipsum dolor sit amet, consectetur.</small>
379 |         </section>
380 | 
381 |         <!-- Division -->
382 |         <div class="center">
383 |           <div class="more-articles">
384 |             <a href="#">Lorem ipsum dolor →</a>
385 |           </div>
386 |         </div>
387 |       </main>
388 | 
389 |       <!-- Footer -->
390 |       <footer class="flex">
391 |         <div class="first-list">
392 |           <h4>LOREM IPSUM DOLOR SIT AMET.</h4>
393 |           <ul class="first flex">
394 |             <li><a href="#">Lorem</a></li>
395 |             <li><a href="#">Lorem</a></li>
396 |             <li><a href="#">Lorem</a></li>
397 |             <li><a href="#">Lorem</a></li>
398 |             <li><a href="#">Lorem</a></li>
399 |             <li><a href="#">Lorem</a></li>
400 |             <li><a href="#">Lorem</a></li>
401 |             <li><a href="#">Lorem</a></li>
402 |             <li><a href="#">Lorem</a></li>
403 |             <li><a href="#">Lorem</a></li>
404 |             <li><a href="#">Lorem</a></li>
405 |             <li><a href="#">Lorem</a></li>
406 |             <li><a href="#">Lorem</a></li>
407 |             <li><a href="#">Lorem</a></li>
408 |             <li><a href="#">Lorem</a></li>
409 |             <li><a href="#">Lorem</a></li>
410 |             <li><a href="#">Lorem</a></li>
411 |             <li><a href="#">Lorem</a></li>
412 |             <li><a href="#">Lorem</a></li>
413 |             <li><a href="#">Lorem</a></li>
414 |             <li><a href="#">Lorem</a></li>
415 |             <li><a href="#">Lorem</a></li>
416 |             <li><a href="#">Lorem</a></li>
417 |             <li><a href="#">Lorem</a></li>
418 |             <li><a href="#">Lorem</a></li>
419 |             <li><a href="#">Lorem</a></li>
420 |             <li><a href="#">Lorem</a></li>
421 |             <li><a href="#">Lorem</a></li>
422 |             <li><a href="#">Lorem</a></li>
423 |             <li><a href="#">Lorem</a></li>
424 |             <li><a href="#">Lorem</a></li>
425 |           </ul>
426 |         </div>
427 |         <div class="second-list">
428 |           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
429 |           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
430 |           <p>Lorem ipsum dolor sit amet, consectetur.</p>
431 |           <p>Lorem ipsum dolor.</p>
432 |           <ul class="flex">
433 |             <li><a href="#">✎ Lorem ipsum dolor</a></li>
434 |             <li><a href="#">Lorem ipsum</a></li>
435 |             <li><a href="#">Lorem ipsum dolor</a></li>
436 |             <li><a href="#">Lorem ipsum</a></li>
437 |             <li><a href="#">Lorem ipsum</a></li>
438 |             <li><a href="#">Lorem ipsum</a></li>
439 |             <li><a href="#">Lorem </a></li>
440 |           </ul>
441 |         </div>
442 |       </footer>
443 |     </div>
444 |   </body>
445 | </html>
446 | 


--------------------------------------------------------------------------------