├── big-screenshot.png
├── images
└── tnw-logo.png
├── small-screenshot.png
├── .stickler.yml
├── script.js
├── stylelint.config.js
├── README.md
├── styles.css
└── index.html
/big-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kitpao/Responsive-Design/HEAD/big-screenshot.png
--------------------------------------------------------------------------------
/images/tnw-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kitpao/Responsive-Design/HEAD/images/tnw-logo.png
--------------------------------------------------------------------------------
/small-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kitpao/Responsive-Design/HEAD/small-screenshot.png
--------------------------------------------------------------------------------
/.stickler.yml:
--------------------------------------------------------------------------------
1 | linters:
2 | stylelint:
3 | config: 'stylelint.config.js'
4 |
5 | fixers:
6 | enable: true
7 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | window.onscroll = function () {
2 | logosticky();
3 | };
4 |
5 | window.onresize = function () {
6 | resizable();
7 | };
8 |
9 | var nav = document.getElementById('navid');
10 | var sticky = nav.offsetTop;
11 | var image = document.getElementById('logo-token');
12 | var logo = document.getElementById('logo-token-2');
13 | var mainnav = document.getElementById('mainnavid');
14 | var yellow = document.getElementById('yellow');
15 |
16 | function logosticky() {
17 | if (window.pageYOffset > sticky) {
18 | image.style.display = 'none';
19 | logo.style.display = 'block';
20 | mainnav.style.paddingLeft = '120px';
21 | yellow.style.paddingLeft = '126px';
22 | } else if (window.pageYOffset < sticky && window.innerWidth >= 1023) {
23 | image.style.display = 'none';
24 | logo.style.display = 'none';
25 | mainnav.style.paddingLeft = '14px';
26 | yellow.style.paddingLeft = '20px';
27 | } else if (window.pageYOffset < sticky && window.innerWidth <= 1024) {
28 | logo.style.display = 'none';
29 | image.style.display = 'block';
30 | }
31 | }
32 |
33 | function resizable() {
34 | if (window.innerWidth > 1023) {
35 | image.style.display = 'none';
36 | logo.style.display = 'none';
37 | mainnav.style.paddingLeft = '15px';
38 | } else if (window.innerWidth < 1024) {
39 | logo.style.display = 'none';
40 | image.style.display = 'block';
41 | mainnav.style.paddingLeft = '120px';
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/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 | "block-closing-brace-empty-line-before": "never",
17 | "block-closing-brace-newline-after": "always",
18 | "block-closing-brace-newline-before": "always-multi-line",
19 | "block-closing-brace-space-before": "always-single-line",
20 | "block-opening-brace-newline-after": "always-multi-line",
21 | "block-opening-brace-space-after": "always-single-line",
22 | "block-opening-brace-space-before": "always",
23 | "color-hex-case": "lower",
24 | "color-hex-length": "short",
25 | "comment-empty-line-before": [ "always", {
26 | except: ["first-nested"],
27 | ignore: ["stylelint-commands"],
28 | } ],
29 | "comment-whitespace-inside": "always",
30 | "custom-property-empty-line-before": [ "always", {
31 | except: [
32 | "after-custom-property",
33 | "first-nested",
34 | ],
35 | ignore: [
36 | "after-comment",
37 | "inside-single-line-block",
38 | ],
39 | } ],
40 | "declaration-bang-space-after": "never",
41 | "declaration-bang-space-before": "always",
42 | "declaration-block-semicolon-newline-after": "always-multi-line",
43 | "declaration-block-semicolon-space-after": "always-single-line",
44 | "declaration-block-semicolon-space-before": "never",
45 | "declaration-block-single-line-max-declarations": 1,
46 | "declaration-block-trailing-semicolon": "always",
47 | "declaration-colon-newline-after": "always-multi-line",
48 | "declaration-colon-space-after": "always-single-line",
49 | "declaration-colon-space-before": "never",
50 | "declaration-empty-line-before": [ "always", {
51 | except: [
52 | "after-declaration",
53 | "first-nested",
54 | ],
55 | ignore: [
56 | "after-comment",
57 | "inside-single-line-block",
58 | ],
59 | } ],
60 | "function-comma-newline-after": "always-multi-line",
61 | "function-comma-space-after": "always-single-line",
62 | "function-comma-space-before": "never",
63 | "function-max-empty-lines": 0,
64 | "function-name-case": "lower",
65 | "function-parentheses-newline-inside": "always-multi-line",
66 | "function-parentheses-space-inside": "never-single-line",
67 | "function-whitespace-after": "always",
68 | "indentation": 2,
69 | "length-zero-no-unit": true,
70 | "max-empty-lines": 1,
71 | "media-feature-colon-space-after": "always",
72 | "media-feature-colon-space-before": "never",
73 | "media-feature-name-case": "lower",
74 | "media-feature-parentheses-space-inside": "never",
75 | "media-feature-range-operator-space-after": "always",
76 | "media-feature-range-operator-space-before": "always",
77 | "media-query-list-comma-newline-after": "always-multi-line",
78 | "media-query-list-comma-space-after": "always-single-line",
79 | "media-query-list-comma-space-before": "never",
80 | "no-eol-whitespace": true,
81 | "no-missing-end-of-source-newline": true,
82 | "number-leading-zero": "always",
83 | "number-no-trailing-zeros": true,
84 | "property-case": "lower",
85 | "rule-empty-line-before": [ "always-multi-line", {
86 | except: ["first-nested"],
87 | ignore: ["after-comment"],
88 | } ],
89 | "selector-attribute-brackets-space-inside": "never",
90 | "selector-attribute-operator-space-after": "never",
91 | "selector-attribute-operator-space-before": "never",
92 | "selector-combinator-space-after": "always",
93 | "selector-combinator-space-before": "always",
94 | "selector-descendant-combinator-no-non-space": true,
95 | "selector-list-comma-newline-after": "always",
96 | "selector-list-comma-space-before": "never",
97 | "selector-max-empty-lines": 0,
98 | "selector-pseudo-class-case": "lower",
99 | "selector-pseudo-class-parentheses-space-inside": "never",
100 | "selector-pseudo-element-case": "lower",
101 | "selector-pseudo-element-colon-notation": "double",
102 | "selector-type-case": "lower",
103 | "unit-case": "lower",
104 | "value-list-comma-newline-after": "always-multi-line",
105 | "value-list-comma-space-after": "always-single-line",
106 | "value-list-comma-space-before": "never",
107 | "value-list-max-empty-lines": 0,
108 | },
109 | }
110 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [![Contributors][contributors-shield]][contributors-url]
2 | [![Forks][forks-shield]][forks-url]
3 | [![Stargazers][stars-shield]][stars-url]
4 | [![Issues][issues-shield]][issues-url]
5 | [![LinkedIn][linkedin-shield]][linkedin-url]
6 | [![LinkedIn][linkedin-shield2]][linkedin-url2]
7 |
8 |
9 |
11 |
Responsive-Design
12 |
13 | Objective: Analize and make a clone of the-next-web page, using responsive design identifying the breakpoints for devices transition and responsive behavior.
14 | Explore the docs » View Demo
19 | ·
20 | Report Bug
21 | ·
22 | Request Feature
23 |
24 |
25 |
26 | ## Table of Contents
27 | * [About the Project](#about-the-project)
28 | * [Built With](#built-with)
29 | * [Usage](#usage)
30 | * [Roadmap](#roadmap)
31 | * [Contact](#contact)
32 | * [Acknowledgements](#acknowledgements)
33 |
34 |
35 | ## About The Project
36 | (Click in the image to see our static version of the webpage https://thenextweb.com/)
37 | [![Product Name Screen Shot][product-example]](https://rawcdn.githack.com/leonmezu1/Responsive-Design/016da4a73d40825c48cc55d8b51b53f355382ae8/index.html)
38 |
39 | Skills to use and requirements:
40 |
41 | Identify the breakpoint points used in the original page, align elements with float or flex and grids, use background images, gradients and elements positioning.
42 |
43 |
44 | MUST: use of linterns, follow CSS best practices, use of CSS Reset, use W3c validation services, use Github flow guidelines to collaborate, double check devices compatibility.
45 |
46 |
47 | ### Built With
48 |
49 | The project was developed using the following technologies:
50 | - HTML
51 | - CSS
52 | - JAVASCRIPT
53 |
54 | ## Usage
55 | * Click on the image at the top to see our static version or on the following [link](https://rawcdn.githack.com/kitpao/Responsive-Design/016da4a73d40825c48cc55d8b51b53f355382ae8/index.html)
56 | * You can resize the window to see the responsive behaviors for 3 different screen sizes
57 | * You can hover the mouse over the different items as links and images to see the different effects
58 |
59 | Here is an example of the size seen in mobile version:
60 | [![Product Name Screen Shot][product-screenshot]](https://rawcdn.githack.com/leonmezu1/Responsive-Design/016da4a73d40825c48cc55d8b51b53f355382ae8/index.html)
61 |
62 | ## Roadmap
63 |
64 | See the [open issues](https://github.com/leonmezu1/Responsive-Design/issues) for a list of proposed features (and known issues).
65 |
66 | ## Contact
67 |
68 |
69 | Project Link: [https://github.com/kitpao/Responsive-Design](https://github.com/kitpao/Responsive-Design)
70 |
71 |
72 |
73 | Kitzia Paola Vidal Marroquin - [Github user: kitpao](https://github.com/kitpao)
74 |
75 |
76 |
77 | kitpao91@gmail.com
78 | |
79 |
80 | Portfolio
81 | |
82 |
83 | LinkedIn
84 | |
85 |
86 | Twitter
87 |
88 |
89 |
90 |
91 |
92 | Leonardo Mezu - [Github user: leonmezu1](https://github.com/leonmezu1)
93 |
94 |
95 |
97 | leo7xs@gmail.com
98 | |
99 |
100 | Portfolio
101 | |
102 |
103 | LinkedIn
104 | |
105 |
106 | Twitter
107 |
108 |
109 |
110 | ## Acknowledgements
111 | - [Microverse curriculum Html & CSS section](https://www.microverse.org/?grsf=6ns691)
112 | - [The Odin project: Building with responsive design](https://www.theodinproject.com/courses/html-and-css/lessons/building-with-responsive-design)
113 |
114 |
115 | [contributors-shield]: https://img.shields.io/github/contributors/kitpao/Responsive-Design.svg?style=flat-square
116 | [contributors-url]: https://github.com/kitpao/Responsive-Design/graphs/contributors
117 | [forks-shield]: https://img.shields.io/github/forks/kitpao/Responsive-Design.svg?style=flat-square
118 | [forks-url]: https://github.com/kitpao/Responsive-Design/network/members
119 | [stars-shield]: https://img.shields.io/github/stars/kitpao/Responsive-Design.svg?style=flat-square
120 | [stars-url]: https://github.com/kitpao/kitpao/Responsive-Design/stargazers
121 | [issues-shield]: https://img.shields.io/github/issues/leonmezu1/Responsive-Design.svg?style=flat-square
122 | [issues-url]: https://github.com/leonmezu1/Responsive-Design/issues
123 | [license-shield]: https://img.shields.io/github/license/kitpao/Responsive-Design.svg?style=flat-square
124 | [license-url]: https://github.com/kitpao/Responsive-Design/blob/master/LICENSE.txt
125 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
126 | [linkedin-url]: https://www.linkedin.com/in/kitzia-paola-vidal/
127 | [linkedin-shield2]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
128 | [linkedin-url2]: https://www.linkedin.com/in/leonardomezlob/
129 | [product-screenshot]: small-screenshot.png
130 | [product-example]: big-screenshot.png
131 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | /* -----------------------------CSS RESET------------------------- */
2 |
3 | html,
4 | body,
5 | div,
6 | span,
7 | object,
8 | iframe,
9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5,
14 | h6,
15 | p,
16 | blockquote,
17 | pre,
18 | abbr,
19 | address,
20 | cite,
21 | code,
22 | del,
23 | dfn,
24 | em,
25 | img,
26 | ins,
27 | kbd,
28 | q,
29 | samp,
30 | small,
31 | strong,
32 | sub,
33 | sup,
34 | var,
35 | b,
36 | i,
37 | dl,
38 | dt,
39 | dd,
40 | ol,
41 | ul,
42 | li,
43 | fieldset,
44 | form,
45 | label,
46 | legend,
47 | table,
48 | caption,
49 | tbody,
50 | tfoot,
51 | thead,
52 | tr,
53 | th,
54 | td,
55 | article,
56 | aside,
57 | canvas,
58 | details,
59 | figcaption,
60 | figure,
61 | footer,
62 | header,
63 | hgroup,
64 | menu,
65 | nav,
66 | section,
67 | summary,
68 | time,
69 | mark,
70 | audio,
71 | video {
72 | margin: 0;
73 | padding: 0;
74 | border: 0;
75 | outline: 0;
76 | font-size: 100%;
77 | vertical-align: baseline;
78 | background: transparent;
79 | }
80 |
81 | body {
82 | position: relative;
83 | font-family: "Work Sans", "Arial", sans-serif;
84 | line-height: 1;
85 | }
86 |
87 | article,
88 | aside,
89 | details,
90 | figcaption,
91 | figure,
92 | footer,
93 | header,
94 | hgroup,
95 | menu,
96 | nav,
97 | section {
98 | display: block;
99 | }
100 |
101 | nav ul {
102 | list-style: none;
103 | }
104 |
105 | blockquote,
106 | q {
107 | quotes: none;
108 | }
109 |
110 | blockquote::before,
111 | blockquote::after,
112 | q::before,
113 | q::after {
114 | content: "";
115 | content: none;
116 | }
117 |
118 | a {
119 | margin: 0;
120 | padding: 0;
121 | font-size: 100%;
122 | vertical-align: baseline;
123 | background: transparent;
124 | }
125 |
126 | /* change colours to suit your needs */
127 |
128 | ins {
129 | background-color: #ff9;
130 | color: #000;
131 | text-decoration: none;
132 | }
133 |
134 | /* change colours to suit your needs */
135 |
136 | mark {
137 | background-color: #ff9;
138 | color: #000;
139 | font-style: italic;
140 | font-weight: bold;
141 | }
142 |
143 | del {
144 | text-decoration: line-through;
145 | }
146 |
147 | abbr[title],
148 | dfn[title] {
149 | border-bottom: 1px dotted;
150 | cursor: help;
151 | }
152 |
153 | table {
154 | border-collapse: collapse;
155 | border-spacing: 0;
156 | }
157 |
158 | /* change border colour to suit your needs */
159 |
160 | hr {
161 | display: block;
162 | height: 1px;
163 | border: 0;
164 | border-top: 1px solid #ccc;
165 | margin: 1em 0;
166 | padding: 0;
167 | }
168 |
169 | input,
170 | select {
171 | vertical-align: middle;
172 | }
173 |
174 | /* -----------------------End of CSS RESET---------------------- */
175 |
176 | /* General tools */
177 |
178 | .box {
179 | display: block;
180 | }
181 |
182 | .wrapped {
183 | margin: 8.5rem auto;
184 | max-width: 1192px;
185 | padding: 0 2rem;
186 | }
187 |
188 | *,
189 | *::after,
190 | *::before {
191 | -ms-box-sizing: border-box;
192 | -webkit-box-sizing: border-box;
193 | -moz-box-sizing: border-box;
194 | box-sizing: border-box;
195 | }
196 |
197 | html {
198 | font-size: 62.5%;
199 | letter-spacing: -0.08rem;
200 | }
201 |
202 | /*
203 | ============================================================================
204 | NAV BAR section
205 | ============================================================================
206 | */
207 |
208 | .topnav {
209 | list-style-type: none;
210 | margin: 0;
211 | padding-left: 20px;
212 | overflow: hidden;
213 | background-color: #131313;
214 | height: 32px;
215 | }
216 |
217 | .topnav li {
218 | float: left;
219 | list-style: none;
220 | }
221 |
222 | .mainnav li {
223 | float: left;
224 | flex-direction: row;
225 | flex-wrap: nowrap;
226 | list-style: none;
227 | }
228 |
229 | .topnav li:nth-child(n + 7) {
230 | float: right;
231 | }
232 |
233 | .topnav li:nth-child(7) {
234 | padding-right: 1rem;
235 | }
236 |
237 | .title-section a {
238 | text-decoration: none;
239 | color: #fff;
240 | }
241 |
242 | .art-details a {
243 | color: inherit;
244 | }
245 |
246 | .dropdown-content a {
247 | color: #fff9;
248 | text-decoration: none;
249 | display: block;
250 | width: 100%;
251 | text-align: left !important;
252 | padding-left: 10px;
253 | }
254 |
255 | .logo2-dropdown-content a {
256 | display: block;
257 | color: #fff9;
258 | font-size: 13px;
259 | text-decoration: none;
260 | width: 100%;
261 | padding: 8px;
262 | }
263 |
264 | .mainnav li a {
265 | display: inline-block;
266 | text-align: center;
267 | padding: 0 20px 0 5px;
268 | text-decoration: none;
269 | text-transform: uppercase;
270 | font-size: 1.6rem;
271 | font-weight: 500;
272 | line-height: 48px;
273 | color: #aaa;
274 | }
275 |
276 | .topnav li a {
277 | display: inline-block;
278 | text-align: center;
279 | padding: 0 7px;
280 | text-decoration: none;
281 | font-size: 1.6rem;
282 | line-height: 32px;
283 | color: #fff9;
284 | }
285 |
286 | .title-section a:first-child {
287 | font-family: "Nunito Sans", sans-serif;
288 | font-size: 1.3rem;
289 | letter-spacing: 0.02rem;
290 | }
291 |
292 | .art-details a:hover {
293 | color: #fff;
294 | }
295 |
296 | .logo2-dropdown-content a:hover {
297 | color: #fff;
298 | }
299 |
300 | .fundings-container .items-block a {
301 | text-decoration: none;
302 | color: inherit;
303 | font-size: 1.5rem;
304 | }
305 |
306 | .topnav li a:hover {
307 | color: white;
308 | }
309 |
310 | .topnav .right {
311 | justify-content: flex-end;
312 | }
313 |
314 | #news {
315 | color: white;
316 | }
317 |
318 | .dropdown-content {
319 | display: none;
320 | position: absolute;
321 | background-color: #131313;
322 | top: 32px;
323 | width: 220px;
324 | text-align: left;
325 | z-index: 999;
326 | }
327 |
328 | .last-drop {
329 | border-top: 1px solid #ffffff1a;
330 | }
331 |
332 | .dropdown:hover .dropdown-content {
333 | display: block;
334 | }
335 |
336 | .logo {
337 | display: none;
338 | position: fixed;
339 | top: 0;
340 | left: 0;
341 | width: 106px;
342 | height: 80px;
343 | background: linear-gradient(to bottom right, #c09, #f42 85%);
344 | text-align: center;
345 | z-index: 33;
346 | }
347 |
348 | .logo img {
349 | width: 80px;
350 | padding-top: 30px;
351 | -webkit-transition: padding-top 1s;
352 | transition: padding-top 1s;
353 | z-index: 3;
354 | }
355 |
356 | .logo2 {
357 | display: none;
358 | position: fixed;
359 | top: 0;
360 | left: 0;
361 | width: 106px;
362 | height: 48px;
363 | background: linear-gradient(to bottom right, #c09, #f42 85%);
364 | text-align: center;
365 | z-index: 9;
366 | }
367 |
368 | .logo2 img {
369 | width: 70px;
370 | height: 35px;
371 | padding-top: 16px;
372 | -webkit-transition: padding-top 1s;
373 | transition: padding-top 1s;
374 | z-index: 9;
375 | }
376 |
377 | .logo2-dropdown-content {
378 | position: absolute;
379 | background-color: #131313;
380 | top: 78px;
381 | left: 0;
382 | width: 106px;
383 | text-align: center;
384 | z-index: 9;
385 | max-height: 0;
386 | overflow: hidden;
387 | transition: max-height 0.5s;
388 | }
389 |
390 | .logo2:hover,
391 | .logo:hover {
392 | background-image: url(https://cdn0.tnwcdn.com/wp-content/themes/cyberdelia/assets/img/home-1.gif);
393 | }
394 |
395 | .logo2:hover .logo2-dropdown-content {
396 | max-height: 1000px;
397 | }
398 |
399 | .nav {
400 | background: #fff;
401 | -webkit-box-shadow: 0 0 32px rgba(0, 0, 0, 0.15);
402 | box-shadow: 0 0 32px rgba(0, 0, 0, 0.15);
403 | height: 48px;
404 | left: 0;
405 | position: sticky;
406 | right: 0;
407 | top: 0;
408 | z-index: 9;
409 | overflow: hidden;
410 | }
411 |
412 | .mainnav {
413 | list-style-type: none;
414 | margin: 0;
415 | padding-left: 15px;
416 | }
417 |
418 | .mainnav li a:hover {
419 | color: #000;
420 | }
421 |
422 | .search-icon {
423 | height: 100%;
424 | padding: 1.6rem;
425 | color: #b8b8b8;
426 | border-left: 1px solid #e8e8e8;
427 | font-size: 1.8rem;
428 | float: right;
429 | line-height: 0.8rem;
430 | }
431 |
432 | .search-icon:hover {
433 | color: #707070;
434 | }
435 |
436 | .burger-icon {
437 | float: right;
438 | height: 100%;
439 | padding: 1.6rem;
440 | color: #f42;
441 | border-left: 1px solid #e8e8e8;
442 | font-size: 2rem;
443 | line-height: 0.8rem;
444 | }
445 |
446 | .announces-nav {
447 | font-family: "Nunito Sans", sans-serif;
448 | font-size: 1.6rem;
449 | box-shadow: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.15);
450 | line-height: 3rem;
451 | background: #fd3;
452 | color: #000;
453 | width: 100%;
454 | height: 2.96rem;
455 | white-space: nowrap;
456 | overflow: hidden;
457 | text-overflow: ellipsis;
458 | position: sticky;
459 | top: 48px;
460 | z-index: 100;
461 | padding-left: 2rem;
462 | }
463 |
464 | @media only screen and (min-width: 1024px) {
465 | #logoid {
466 | display: block;
467 | height: 80px;
468 | }
469 |
470 | .topnav,
471 | .mainnav {
472 | padding-left: 12px;
473 | }
474 |
475 | .burger-icon {
476 | display: none;
477 | }
478 | }
479 |
480 | @media screen and (max-width: 767px) {
481 | .topnav,
482 | .mainnav {
483 | display: none;
484 | }
485 |
486 | #logoid {
487 | display: block;
488 | height: 48px;
489 | }
490 |
491 | .logo img {
492 | padding-top: 16px;
493 | }
494 |
495 | .announces-nav {
496 | padding-left: 0;
497 | text-align: center;
498 | }
499 | }
500 |
501 | @media screen and (min-width: 768px) and (max-width: 1023px) {
502 | .announces-nav {
503 | font-size: 16px;
504 | }
505 |
506 | .topnav {
507 | padding-left: 12rem;
508 | }
509 |
510 | .topnav li:nth-child(n + 7) {
511 | display: none;
512 | }
513 |
514 | .burger-icon {
515 | display: none;
516 | }
517 | }
518 |
519 | /* ---------------------END OF NAV----------------- */
520 |
521 | /*
522 | ============================================================================
523 | HERO section
524 | ============================================================================
525 | */
526 |
527 | .main-grid {
528 | margin-top: 0.2rem;
529 | margin-left: 0.8rem;
530 | margin-right: 0.8rem;
531 | display: flex;
532 | flex: wrap;
533 | width: auto;
534 | }
535 |
536 | .big-article {
537 | display: flex;
538 | flex-direction: column;
539 | justify-content: flex-end;
540 | flex: 1 1 76%;
541 | height: 54.3rem;
542 | flex-basis: 50%;
543 | margin-bottom: 0.8rem;
544 | background:
545 | linear-gradient(
546 | 165deg,
547 | rgba(0, 0, 0, 0.4) 0 40%,
548 | rgba(0, 0, 0, 0.85) 80% 100%
549 | ),
550 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Apple-TV-back-to-the-future-header-image-796x417.png")
551 | no-repeat center;
552 | background-size: cover;
553 | color: white;
554 | }
555 |
556 | .big-article:hover {
557 | background:
558 | linear-gradient(
559 | 165deg,
560 | rgba(0, 0, 0, 0.3) 0 40%,
561 | rgba(0, 0, 0, 0.85) 83% 100%
562 | ),
563 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Apple-TV-back-to-the-future-header-image-796x417.png")
564 | no-repeat center;
565 | background-size: cover;
566 | }
567 |
568 | .top-logo-section {
569 | display: none;
570 | }
571 |
572 | .title-section {
573 | margin: 1.7rem;
574 | margin-bottom: 2.1rem;
575 | }
576 |
577 | .art-title {
578 | font-size: 5.2rem;
579 | font-weight: 700;
580 | line-height: 1.2;
581 | }
582 |
583 | .art-details {
584 | margin-top: 1.2rem;
585 | font-size: 1.2rem;
586 | color: rgba(255, 255, 255, 0.65);
587 | letter-spacing: 0.01rem;
588 | }
589 |
590 | .side {
591 | flex: 1 1 16.5%;
592 | margin-left: 0.8rem;
593 | display: flex;
594 | flex-direction: column;
595 | }
596 |
597 | .side-article {
598 | flex-basis: 50%;
599 | height: 10rem;
600 | margin-bottom: 0.8rem;
601 | display: flex;
602 | align-items: flex-end;
603 | }
604 |
605 | .side .art-title {
606 | font-size: 3rem;
607 | line-height: 3.1rem;
608 | }
609 |
610 | .first {
611 | background:
612 | linear-gradient(
613 | 165deg,
614 | rgba(0, 0, 0, 0.4) 0 40%,
615 | rgba(0, 0, 0, 0.85) 80% 100%
616 | ),
617 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/200-calories-10-796x417.png")
618 | no-repeat center;
619 | background-size: cover;
620 | }
621 |
622 | .first:hover {
623 | background:
624 | linear-gradient(
625 | 165deg,
626 | rgba(0, 0, 0, 0.3) 0 40%,
627 | rgba(0, 0, 0, 0.85) 83% 100%
628 | ),
629 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/200-calories-10-796x417.png")
630 | no-repeat center;
631 | background-size: cover;
632 | }
633 |
634 | .second {
635 | background:
636 | linear-gradient(
637 | 165deg,
638 | rgba(0, 0, 0, 0.4) 0 40%,
639 | rgba(0, 0, 0, 0.85) 80% 100%
640 | ),
641 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/syndication_bb-796x417.jpg")
642 | no-repeat center;
643 | background-size: cover;
644 | }
645 |
646 | .second:hover {
647 | background:
648 | linear-gradient(
649 | 165deg,
650 | rgba(0, 0, 0, 0.3) 0 40%,
651 | rgba(0, 0, 0, 0.85) 83% 100%
652 | ),
653 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/syndication_bb-796x417.jpg")
654 | no-repeat center;
655 | background-size: cover;
656 | }
657 |
658 | /* ----------------MEDIA: mobile screen width: <768px;-------------------- */
659 |
660 | @media screen and (max-width: 767px) {
661 | .main-grid {
662 | flex-direction: column;
663 | }
664 |
665 | .big-article {
666 | flex: 1 1 24.5rem;
667 | width: 100%;
668 | }
669 |
670 | .art-title {
671 | font-size: 2rem;
672 | line-height: 1.1;
673 | }
674 |
675 | .title-section {
676 | margin: 1.2rem;
677 | margin-bottom: 1.8rem;
678 | }
679 |
680 | .art-details {
681 | margin-top: 0.6rem;
682 | }
683 |
684 | .side-article {
685 | width: 100%;
686 | flex: 2 1 24.5rem;
687 | height: 28rem;
688 | }
689 |
690 | .side {
691 | margin-left: 0;
692 | }
693 |
694 | .side .art-title {
695 | font-size: 2rem;
696 | line-height: 1.1;
697 | }
698 | }
699 |
700 | /* --------------MEDIA: medium screen (tablets) width: 768-1024px;--------- */
701 |
702 | @media screen and (min-width: 768px) and (max-width: 1023px) {
703 | .big-article {
704 | height: 49.4rem;
705 | }
706 |
707 | .title-section {
708 | margin: 1.3rem;
709 | margin-bottom: 1.9rem;
710 | }
711 |
712 | .art-title {
713 | font-size: 3.7rem;
714 | line-height: 1.1;
715 | }
716 |
717 | .art-details {
718 | margin-top: 1rem;
719 | }
720 |
721 | .side .art-title {
722 | font-size: 2rem;
723 | line-height: 2.2rem;
724 | }
725 |
726 | .side .art-details {
727 | margin-top: 0.7rem;
728 | }
729 | }
730 |
731 | /* ------------------MEDIA: desktop or laptop width: >1024px;-------------- */
732 |
733 | @media screen and (min-width: 1024px) {
734 | .big-article {
735 | justify-content: space-between;
736 | background:
737 | linear-gradient(
738 | 165deg,
739 | rgba(255, 68, 34, 0.87) 0% 28%,
740 | rgba(255, 68, 34, 0.4) 40% 41%,
741 | rgba(0, 0, 0, 0.9) 72% 100%
742 | ),
743 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Apple-TV-back-to-the-future-header-image-796x417.png")
744 | no-repeat center;
745 | background-size: cover;
746 | }
747 |
748 | .big-article:hover {
749 | background:
750 | linear-gradient(
751 | 165deg,
752 | rgba(255, 68, 34, 0.87) 0% 28%,
753 | rgba(255, 68, 34, 0.32) 40% 41%,
754 | rgba(0, 0, 0, 0.9) 72% 100%
755 | ),
756 | url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Apple-TV-back-to-the-future-header-image-796x417.png")
757 | no-repeat center;
758 | background-size: cover;
759 | }
760 |
761 | .top-logo-section {
762 | display: flex;
763 | justify-content: space-between;
764 | margin: 1.9rem;
765 | font-size: 1.5rem;
766 | font-weight: 400;
767 | }
768 |
769 | .logo3 .date p {
770 | text-align: right;
771 | }
772 |
773 | .logo3 {
774 | width: 53%;
775 | }
776 |
777 | .logo3 img {
778 | width: 100%;
779 | }
780 | }
781 |
782 | /*
783 | ============================================================================
784 | Latest News section
785 | ============================================================================
786 | */
787 |
788 | .latest-news {
789 | font-family: "Nunito Sans", sans-serif;
790 | font-family: "Work Sans", "Arial", sans-serif;
791 | font-size: 1.5rem;
792 | }
793 |
794 | .container {
795 | margin: 0 0;
796 | padding: 0 0;
797 | line-height: 1.2;
798 | align-items: center;
799 | display: flex;
800 | flex-flow: row wrap;
801 | -ms-flex-flow: row wrap;
802 | -webkit-box-orient: horizontal;
803 | -webkit-box-direction: normal;
804 | }
805 |
806 | .story-image {
807 | background-size: cover;
808 | }
809 |
810 | h2 {
811 | color: #f42;
812 | font-size: 2.8rem;
813 | font-weight: 700;
814 | margin-bottom: 1.6rem;
815 | }
816 |
817 | .block-title h1 {
818 | color: #f42;
819 | font-size: 2.8rem;
820 | font-weight: 700;
821 | margin-bottom: 2.5rem;
822 | }
823 |
824 | .block-title h1:hover {
825 | color: #000;
826 | }
827 |
828 | .imgback1 {
829 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/iPhone-11.00_07_21_14.Still008-480x270.png);
830 | background-repeat: no-repeat;
831 | background-position: center;
832 | }
833 |
834 | .imgback2 {
835 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Untitled-design117-516x270.png);
836 | background-repeat: no-repeat;
837 | background-position: center;
838 | }
839 |
840 | .imgback3 {
841 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/stalker-relection-eye-japan-516x270.jpg);
842 | background-repeat: no-repeat;
843 | background-position: center;
844 | }
845 |
846 | .imgback4 {
847 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/sonydeal-516x270.png);
848 | background-repeat: no-repeat;
849 | background-position: center;
850 | }
851 |
852 | .imgback5 {
853 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/bank-of-england-facebook-blockchain-cryptocurrency-libra-rules-engagement-405x270.jpg);
854 | background-repeat: no-repeat;
855 | background-position: center;
856 | }
857 |
858 | .imgback6 {
859 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/04/sextortion-blockchain-cryptocurrency-bitcoin-masturbation-video-hack-480x270.jpg);
860 | background-repeat: no-repeat;
861 | background-position: center;
862 | }
863 |
864 | .imgback7 {
865 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/sale_22049_primary_image_wide-540x270.jpg);
866 | background-repeat: no-repeat;
867 | background-position: center;
868 | }
869 |
870 | .imgback8 {
871 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/200-calories-9-516x270.png);
872 | background-repeat: no-repeat;
873 | background-position: center;
874 | }
875 |
876 | /* ----------------MEDIA: mobile screen width: <768px;-------------------- */
877 |
878 | @media screen and (max-width: 767px) {
879 | .container {
880 | margin: -12px;
881 | }
882 |
883 | .news-block {
884 | font-size: 1.4rem;
885 | display: inline-flex;
886 | padding: 1.2rem;
887 | }
888 |
889 | .block-text {
890 | display: flex;
891 | flex-direction: column;
892 | }
893 |
894 | .news-block h4 {
895 | margin-bottom: 1rem;
896 | font-weight: 600;
897 | font-size: 1.6rem;
898 | letter-spacing: 0;
899 | }
900 |
901 | .news-block a {
902 | text-decoration: none;
903 | color: #000;
904 | }
905 |
906 | .news-block .story-byline a {
907 | font-family: "Nunito Sans", sans-serif;
908 | color: #aaa;
909 | }
910 |
911 | .news-block .story-byline a:hover {
912 | color: #555;
913 | }
914 |
915 | .news-block .news-title a:hover {
916 | color: #f42;
917 | }
918 |
919 | .news-block ul {
920 | list-style: none;
921 | }
922 |
923 | .news-block li {
924 | float: left;
925 | padding-right: 1rem;
926 | color: #aaa;
927 | }
928 |
929 | .story-image {
930 | background-size: cover;
931 | min-height: 7.5rem;
932 | min-width: 7.5rem;
933 | margin-right: 0.8rem;
934 | }
935 | }
936 |
937 | /* --------------MEDIA: medium screen (tablets) width: 768-1024px;--------- */
938 |
939 | @media screen and (min-width: 768px) and (max-width: 1023px) {
940 | .container {
941 | margin: -12px;
942 | }
943 |
944 | .news-block h4 {
945 | font-weight: 600;
946 | font-size: 1.6rem;
947 | margin-bottom: 1rem;
948 | letter-spacing: 0;
949 | }
950 |
951 | .news-block {
952 | font-size: 1.4rem;
953 | display: flex;
954 | flex-direction: column;
955 | min-width: 23rem;
956 | flex-basis: 33.333%;
957 | max-width: 33.333%;
958 | padding: 1rem;
959 | height: 27.06rem;
960 | }
961 |
962 | .news-block a {
963 | text-decoration: none;
964 | color: #000;
965 | }
966 |
967 | .news-block .story-byline a {
968 | font-family: "Nunito Sans", sans-serif;
969 | color: #aaa;
970 | }
971 |
972 | .news-block .story-byline a:hover {
973 | color: #555;
974 | }
975 |
976 | .news-block .news-title a:hover {
977 | color: #f42;
978 | }
979 |
980 | .news-block ul {
981 | list-style: none;
982 | }
983 |
984 | .news-block li {
985 | float: left;
986 | padding-right: 1rem;
987 | color: #aaa;
988 | }
989 |
990 | .story-image {
991 | height: 13.5rem;
992 | margin-bottom: 1rem;
993 | width: 100%;
994 | }
995 | }
996 |
997 | /* ------------------MEDIA: desktop or laptop width: >1024px;-------------- */
998 |
999 | @media screen and (min-width: 1024px) {
1000 | .special-events {
1001 | padding-top: 3rem;
1002 | }
1003 |
1004 | .container {
1005 | margin: -12px;
1006 | }
1007 |
1008 | .news-block h4 {
1009 | font-size: 1.6rem;
1010 | margin-bottom: 1rem;
1011 | letter-spacing: 0;
1012 | font-weight: 600;
1013 | }
1014 |
1015 | .news-block {
1016 | font-size: 1.4rem;
1017 | display: flex;
1018 | flex-direction: column;
1019 | min-width: 23rem;
1020 | flex-basis: 25%;
1021 | max-width: 25%;
1022 | padding: 1.2rem;
1023 | height: 25.54rem;
1024 | }
1025 |
1026 | .news-block a {
1027 | text-decoration: none;
1028 | color: #000;
1029 | }
1030 |
1031 | .news-block .story-byline a {
1032 | font-family: "Nunito Sans", sans-serif;
1033 | color: #aaa;
1034 | }
1035 |
1036 | .news-block .story-byline a:hover {
1037 | color: #555;
1038 | }
1039 |
1040 | .news-block .news-title a:hover {
1041 | color: #f42;
1042 | }
1043 |
1044 | .news-block ul {
1045 | list-style: none;
1046 | }
1047 |
1048 | .news-block li {
1049 | float: left;
1050 | padding-right: 1rem;
1051 | color: #aaa;
1052 | }
1053 |
1054 | .story-image {
1055 | height: 13.5rem;
1056 | margin-bottom: 1rem;
1057 | width: 100%;
1058 | }
1059 | }
1060 |
1061 | /*
1062 | ============================================================================
1063 | Special Events section
1064 | ============================================================================
1065 | */
1066 |
1067 | .imgbackspc1 {
1068 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/597d12de5f1604078c51be9c3b365e60.jpg);
1069 | }
1070 |
1071 | .imgbackspc2 {
1072 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/EF4hwt-W4AILDL9-480x270.jpeg);
1073 | }
1074 |
1075 | .imgbackspc3 {
1076 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Windows-10X-517x270.jpg);
1077 | background-repeat: no-repeat;
1078 | background-position: center;
1079 | }
1080 |
1081 | .imgbackspc4 {
1082 | background-image: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/MicrosoftSurfaceProx-512x270.jpg);
1083 | background-repeat: no-repeat;
1084 | background-position: center;
1085 | }
1086 |
1087 | /*
1088 | ============================================================================
1089 | Latest Funding section
1090 | ============================================================================
1091 | */
1092 |
1093 | .block-title-section {
1094 | display: flex;
1095 | justify-content: space-between;
1096 | flex-wrap: wrap;
1097 | align-items: baseline;
1098 | }
1099 |
1100 | .block-title-section > .block-title {
1101 | width: 63rem;
1102 | }
1103 |
1104 | .little-menu {
1105 | display: flex;
1106 | }
1107 |
1108 | .little-menu .info {
1109 | font-size: 1.8rem;
1110 | color: #f42;
1111 | text-decoration: none;
1112 | margin-bottom: 3rem;
1113 | }
1114 |
1115 | .little-menu .separator {
1116 | display: inline-block;
1117 | font-size: 1.6rem;
1118 | color: #f42;
1119 | padding: 0 0.5rem;
1120 | }
1121 |
1122 | .little-menu .info:hover {
1123 | color: #000;
1124 | }
1125 |
1126 | .fundings-container {
1127 | display: flex;
1128 | flex-wrap: wrap;
1129 | min-height: 24.2rem;
1130 | }
1131 |
1132 | .items-block {
1133 | margin-left: 2.45rem;
1134 | flex: 1;
1135 | background-color: rgba(255, 68, 34, 0.02);
1136 | z-index: -1;
1137 | }
1138 |
1139 | .items-block:first-child {
1140 | margin-left: 0;
1141 | }
1142 |
1143 | .principal-block {
1144 | position: relative;
1145 | }
1146 |
1147 | .absolute-icon {
1148 | position: absolute;
1149 | margin: 1.07rem;
1150 | height: 6rem;
1151 | width: 6rem;
1152 | }
1153 |
1154 | .absolute-icon img {
1155 | height: 6rem;
1156 | width: 6rem;
1157 | object-fit: cover;
1158 | }
1159 |
1160 | .orange-title,
1161 | .price-title {
1162 | padding-left: 8.14rem;
1163 | padding-right: 3rem;
1164 | font-size: 1.8rem;
1165 | font-weight: 700;
1166 | }
1167 |
1168 | .orange-title {
1169 | height: 3.93rem;
1170 | background-color: #f42;
1171 | color: #fff;
1172 | line-height: 3.93rem;
1173 | text-overflow: ellipsis;
1174 | white-space: wrap;
1175 | overflow: hidden;
1176 | }
1177 |
1178 | .price-title {
1179 | height: 5.73rem;
1180 | background-color: rgba(255, 68, 34, 0.08);
1181 | }
1182 |
1183 | .price-title > * {
1184 | display: block;
1185 | padding-top: 0.2rem;
1186 | font-weight: 500;
1187 | opacity: 0.6;
1188 | font-size: 1.1rem;
1189 | letter-spacing: 0.01rem;
1190 | font-family: "Nunito Sans", sans-serif;
1191 | }
1192 |
1193 | .bold-price {
1194 | padding-top: 1.07rem;
1195 | font-weight: inherit;
1196 | opacity: inherit;
1197 | font-size: inherit;
1198 | letter-spacing: inherit;
1199 | font-family: inherit;
1200 | }
1201 |
1202 | .light-orange {
1203 | line-height: 2.2rem;
1204 | padding: 1.3rem;
1205 | font-size: 1.3rem;
1206 | font-weight: 300;
1207 | padding-right: 2.8rem;
1208 | }
1209 |
1210 | .light-orange i {
1211 | margin-right: 0.6rem;
1212 | }
1213 |
1214 | .finantial {
1215 | border-top: 1px solid rgba(255, 68, 34, 0.25);
1216 | font-size: 1.2rem;
1217 | }
1218 |
1219 | .light {
1220 | opacity: 0.5;
1221 | }
1222 |
1223 | .last-none {
1224 | display: none;
1225 | }
1226 |
1227 | /* -----------------------MEDIA: mobile screen width: <768px;------------- */
1228 |
1229 | @media screen and (max-width: 767px) {
1230 | .block-title-section > .block-title h1 {
1231 | margin-bottom: 1.8rem;
1232 | }
1233 |
1234 | .little-menu .separator {
1235 | display: none;
1236 | }
1237 |
1238 | .little-menu .info {
1239 | font-size: 1.5rem;
1240 | }
1241 |
1242 | .little-menu {
1243 | flex-direction: column-reverse;
1244 | }
1245 |
1246 | .items-block {
1247 | flex-basis: 100%;
1248 | margin-left: 0;
1249 | margin-bottom: 1.6rem;
1250 | }
1251 | }
1252 |
1253 | /* --------MEDIA: medium screen (tablets) width: 768-1024px;------------- */
1254 |
1255 | @media screen and (min-width: 768px) and (max-width: 1023px) {
1256 | .little-menu {
1257 | flex-direction: row-reverse;
1258 | }
1259 | }
1260 |
1261 | /* --------------MEDIA: desktop or laptop width: >1024px;----------------- */
1262 |
1263 | @media screen and (min-width: 1024px) {
1264 | .last-none {
1265 | display: block;
1266 | }
1267 | }
1268 |
1269 | /*
1270 | ============================================================================
1271 | Latest deals section
1272 | ============================================================================
1273 | */
1274 | .news-block-tall {
1275 | z-index: 5;
1276 | }
1277 |
1278 | .imgbacklat1 {
1279 | background-image: url(https://cdnp1.stackassets.com/4c6357549bbe196eac7a2a550f3cf2a380f39e44/store/7d5851d962ea8a62a7e9939f0efebc686b69d83821b63060d3109048021b/sale_19399_primary_image.jpg);
1280 | }
1281 |
1282 | .imgbacklat2 {
1283 | background-image: url(https://cdnp3.stackassets.com/bed8a337b83198aecc1eaa97708a1b437deda193/store/3401bc6dc8fdbd03d86935b56cd418289be7709784a3817f7fdbaa862678/sale_22157_primary_image.jpg);
1284 | }
1285 |
1286 | .imgbacklat3 {
1287 | background-image: url(https://cdnp3.stackassets.com/80ea22e2919f5826b2765ad58a70ffdb0b1e217a/store/de89b6bc5feee838ebfcc0ae7ccc32f5e1556f453b6f538292a1e60842a4/sale_22062_primary_image.jpg);
1288 | }
1289 |
1290 | .imgbacklat4 {
1291 | background-image: url(https://cdnp2.stackassets.com/2de045f5c08675c61ee700230f0604fdd2e3e557/store/385003e89ed9c8e0938a35490994921cbd3a1c1ecde92e3f84376549f152/sale_18127_primary_image.jpg);
1292 | }
1293 |
1294 | .imgbacklat5 {
1295 | background-image: url(https://cdnp2.stackassets.com/9bfcf7d57291fdbaedfef0ca269c21a6264fa5d5/store/551a266bb1b658bfca7a48be3ae2739adcc71803ce42255c3b110e4bc779/sale_22291_primary_image.jpg);
1296 | }
1297 |
1298 | .imgbacklat6 {
1299 | background-image: url(https://cdnp2.stackassets.com/a0695bf765f5209ae845b845a7c316092891ea4a/store/54b7b525a385b2b1962c1fa649e01986728b5e98aa2a64343bbbf30681bd/sale_15929_primary_image.jpg);
1300 | }
1301 |
1302 | .imgbacklat7 {
1303 | background-image: url(https://cdnp1.stackassets.com/8d42ed94c5d1b5f03edbf017be3c9abc50c08e6a/store/d1f496d0e86783f61df9f78dca238fe1e7bf03690d064b709038ca4d648a/sale_22408_primary_image.jpg);
1304 | }
1305 |
1306 | .imgbacklat8 {
1307 | background-image: url(https://cdnp0.stackassets.com/0bcaf472e484efc5812ba81caff99e8d92b3e6e9/store/a608033f5bd5c0926a52360990ea5bd8a7241593db592e096d16df200727/product_30218_product_shots4.jpg);
1308 | }
1309 |
1310 | .story-deal {
1311 | background-image: url(https://cdn0.tnwcdn.com/wp-content/themes/cyberdelia/assets/img/deals-ribbon.svg);
1312 | background-repeat: no-repeat;
1313 | background-size: contain;
1314 | color: #000;
1315 | display: block;
1316 | height: 8rem;
1317 | overflow: hidden;
1318 | pointer-events: none;
1319 | position: absolute;
1320 | right: 1.2rem;
1321 | top: 1.2rem;
1322 | width: 80px;
1323 | z-index: 2;
1324 | }
1325 |
1326 | .story-deal h3 {
1327 | position: absolute;
1328 | top: 2rem;
1329 | right: 1rem;
1330 | transform: rotate(45deg);
1331 | }
1332 |
1333 | /* ----------------MEDIA: mobile screen width: <768px;-------------------- */
1334 |
1335 | @media screen and (max-width: 767px) {
1336 | .news-block-tall {
1337 | font-size: 1.4rem;
1338 | display: inline-flex;
1339 | padding: 1.2rem;
1340 | z-index: 2;
1341 | }
1342 |
1343 | .block-text {
1344 | display: flex;
1345 | flex-direction: column;
1346 | }
1347 |
1348 | .news-block-tall h4 {
1349 | font-size: 1.6rem;
1350 | margin-bottom: 1rem;
1351 | letter-spacing: 0;
1352 | font-weight: 600;
1353 | }
1354 |
1355 | .news-block-tall a {
1356 | text-decoration: none;
1357 | color: #000;
1358 | }
1359 |
1360 | .news-block-tall .price-byline a {
1361 | font-family: "Nunito Sans", sans-serif;
1362 | color: #aaa;
1363 | }
1364 |
1365 | .news-block-tall .news-title a:hover {
1366 | color: #f42;
1367 | }
1368 |
1369 | .news-block-tall ul {
1370 | list-style: none;
1371 | }
1372 |
1373 | .news-block-tall .price-byline a:hover {
1374 | color: #555;
1375 | }
1376 |
1377 | .news-block-tall li {
1378 | float: left;
1379 | padding-right: 1rem;
1380 | color: #aaa;
1381 | }
1382 |
1383 | .story-image {
1384 | background-size: cover;
1385 | max-height: 7.5rem;
1386 | max-width: 7.5rem;
1387 | margin-right: 0.8rem;
1388 | }
1389 |
1390 | .imgbacklat1 {
1391 | background-repeat: no-repeat;
1392 | background-position: center;
1393 | }
1394 |
1395 | .imgbacklat2 {
1396 | background-repeat: no-repeat;
1397 | background-position: center;
1398 | }
1399 |
1400 | .imgbacklat3 {
1401 | background-repeat: no-repeat;
1402 | background-position: center;
1403 | }
1404 |
1405 | .imgbacklat4 {
1406 | background-repeat: no-repeat;
1407 | background-position: center;
1408 | }
1409 |
1410 | .imgbacklat5 {
1411 | background-repeat: no-repeat;
1412 | background-position: center;
1413 | }
1414 |
1415 | .imgbacklat6 {
1416 | background-repeat: no-repeat;
1417 | background-position: center;
1418 | }
1419 |
1420 | .imgbacklat7 {
1421 | background-repeat: no-repeat;
1422 | background-position: center;
1423 | }
1424 |
1425 | .imgbacklat8 {
1426 | background-repeat: no-repeat;
1427 | background-position: center;
1428 | }
1429 |
1430 | .story-deal {
1431 | display: none;
1432 | }
1433 | }
1434 |
1435 | /* --------------MEDIA: medium screen (tablets) width: 768-1024px;--------- */
1436 |
1437 | @media screen and (min-width: 768px) and (max-width: 1023px) {
1438 | .container {
1439 | margin: -12px;
1440 | }
1441 |
1442 | .news-block-tall h4 {
1443 | font-size: 1.6rem;
1444 | margin-bottom: 1rem;
1445 | letter-spacing: 0;
1446 | font-weight: 600;
1447 | }
1448 |
1449 | .news-block-tall {
1450 | position: relative;
1451 | font-size: 1.4rem;
1452 | display: flex;
1453 | flex-direction: column;
1454 | min-width: 23rem;
1455 | flex-basis: 33.333%;
1456 | max-width: 33.333%;
1457 | padding: 1rem;
1458 | height: auto;
1459 | }
1460 |
1461 | .news-block-tall a {
1462 | text-decoration: none;
1463 | color: #000;
1464 | }
1465 |
1466 | .news-block-tall .story-byline a {
1467 | font-family: "Nunito Sans", sans-serif;
1468 | color: #aaa;
1469 | }
1470 |
1471 | .news-block-tall .story-byline a:hover {
1472 | color: #555;
1473 | }
1474 |
1475 | .news-block-tall .news-title a:hover {
1476 | color: #f42;
1477 | }
1478 |
1479 | .news-block-tall ul {
1480 | list-style: none;
1481 | }
1482 |
1483 | .news-block-tall li {
1484 | float: left;
1485 | padding-right: 1rem;
1486 | color: #aaa;
1487 | }
1488 |
1489 | .story-image {
1490 | height: 22.15rem;
1491 | min-height: 16.746rem;
1492 | margin-bottom: 1rem;
1493 | width: 100%;
1494 | }
1495 |
1496 | .story-deal {
1497 | top: 1rem;
1498 | right: 1rem;
1499 | }
1500 |
1501 | .story-deal h3 {
1502 | position: absolute;
1503 | top: 2rem;
1504 | right: 1rem;
1505 | transform: rotate(50deg);
1506 | }
1507 | }
1508 |
1509 | @media screen and (min-width: 1024px) {
1510 | .news-block-tall h4 {
1511 | font-size: 1.6rem;
1512 | margin-bottom: 1rem;
1513 | letter-spacing: 0;
1514 | font-weight: 600;
1515 | }
1516 |
1517 | .news-block-tall {
1518 | position: relative;
1519 | font-size: 1.4rem;
1520 | display: flex;
1521 | flex-direction: column;
1522 | min-width: 23rem;
1523 | flex-basis: 25%;
1524 | max-width: 25%;
1525 | padding: 1.2rem;
1526 | height: auto;
1527 | }
1528 |
1529 | .news-block-tall a {
1530 | text-decoration: none;
1531 | color: #000;
1532 | }
1533 |
1534 | .news-block-tall .story-byline a {
1535 | font-family: "Nunito Sans", sans-serif;
1536 | color: #aaa;
1537 | }
1538 |
1539 | .news-block-tall .story-byline a:hover {
1540 | color: #555;
1541 | }
1542 |
1543 | .news-block-tall .news-title a:hover {
1544 | color: #f42;
1545 | }
1546 |
1547 | .news-block-tall ul {
1548 | list-style: none;
1549 | }
1550 |
1551 | .news-block-tall li {
1552 | float: left;
1553 | padding-right: 1rem;
1554 | color: #aaa;
1555 | }
1556 |
1557 | .news-price {
1558 | display: flex;
1559 | height: auto;
1560 | }
1561 |
1562 | .news-block-tall .price-byline:first-child a {
1563 | text-decoration: line-through;
1564 | font-size: 1.4rem;
1565 | line-height: 2.3rem;
1566 | color: #aaa;
1567 | }
1568 |
1569 | .news-block-tall .price-byline:last-child span {
1570 | text-decoration: none;
1571 | font-size: 1.7rem;
1572 | line-height: 2rem;
1573 | color: #555;
1574 | }
1575 |
1576 | .news-block-tall .story-image {
1577 | height: 20.115rem;
1578 | margin-bottom: 1rem;
1579 | width: 100%;
1580 | }
1581 | }
1582 |
1583 | /*
1584 | ============================================================================
1585 | Footer section
1586 | ============================================================================
1587 | */
1588 |
1589 | .social {
1590 | background-color: #131313;
1591 | padding: 3rem;
1592 | height: 16rem;
1593 | margin-bottom: -1.3rem;
1594 | padding-bottom: 0;
1595 | }
1596 |
1597 | .icons {
1598 | width: 100%;
1599 | text-align: center;
1600 | }
1601 |
1602 | .social i {
1603 | background-color: #333;
1604 | color: #fff;
1605 | padding: 1.5rem;
1606 | margin: 0 0.3%;
1607 | border-radius: 50%;
1608 | width: 4.5rem;
1609 | height: 4.5rem;
1610 | cursor: pointer;
1611 | border: 1px solid #333;
1612 | font-size: 1.5rem;
1613 | }
1614 |
1615 | #youtube {
1616 | padding-left: 1.4rem;
1617 | }
1618 |
1619 | #instagram {
1620 | padding-right: 2rem;
1621 | }
1622 |
1623 | #wifi,
1624 | #envelope {
1625 | padding-left: 1.2rem;
1626 | }
1627 |
1628 | .social i:hover {
1629 | background-color: #131313;
1630 | }
1631 |
1632 | .social-text-wraper {
1633 | padding-top: 3rem;
1634 | color: #aaa;
1635 | font-size: 1.2rem;
1636 | width: 100%;
1637 | text-align: center;
1638 | }
1639 |
1640 | .social-text-wraper span {
1641 | font-size: 1.4rem;
1642 | margin: 0 0.5rem;
1643 | cursor: pointer;
1644 | }
1645 |
1646 | .social-text-wraper span:hover {
1647 | color: #fff;
1648 | }
1649 |
1650 | .final {
1651 | width: 100%;
1652 | height: 9.7rem;
1653 | background-color: #000;
1654 | color: #aaa;
1655 | font-size: 1.4rem;
1656 | margin: 0;
1657 | padding: 4rem;
1658 | text-align: center;
1659 | }
1660 |
1661 | .final span img {
1662 | display: inline-block;
1663 | height: 0.9rem;
1664 | margin-right: 0.1px;
1665 | vertical-align: baseline;
1666 | }
1667 |
1668 | b {
1669 | color: red;
1670 | }
1671 |
1672 | /*
1673 | ============================================================================
1674 | Articles-grid section
1675 | ============================================================================
1676 | */
1677 |
1678 | .for-grid {
1679 | margin: -12px;
1680 | display: flex;
1681 | flex-wrap: wrap;
1682 | }
1683 |
1684 | .block-arti {
1685 | flex: 1 0 30.7rem;
1686 | z-index: -1;
1687 | margin: 12px;
1688 | }
1689 |
1690 | .popular-article {
1691 | height: 28rem;
1692 | display: flex;
1693 | align-items: flex-end;
1694 | margin-bottom: 2px;
1695 | }
1696 |
1697 | .imgONE {
1698 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Untitled-1-1-368x276.jpg) no-repeat center;
1699 | background-size: cover;
1700 | }
1701 |
1702 | .imgTWO {
1703 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/header-image-pixel-4-368x276.png) no-repeat center;
1704 | background-size: cover;
1705 | }
1706 |
1707 | .imgTHREE {
1708 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Stadia-Controller-368x276.jpg) no-repeat center;
1709 | background-size: cover;
1710 | }
1711 |
1712 | .imgFOUR {
1713 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/09/Annotation-2019-09-19-121214-368x276.png) no-repeat center;
1714 | background-size: cover;
1715 | }
1716 |
1717 | .imgFIVE {
1718 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Untitled-design121-368x276.png) no-repeat center;
1719 | background-size: cover;
1720 | }
1721 |
1722 | .imgSIX {
1723 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/facebook-libra-in-or-out-368x276.jpg) no-repeat center;
1724 | background-size: cover;
1725 | }
1726 |
1727 | .imgSEVEN {
1728 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/09/Google-Assistant-phone-line-368x276.jpg) no-repeat center;
1729 | background-size: cover;
1730 | }
1731 |
1732 | .imgEIGHT {
1733 | background: linear-gradient(165deg, rgba(0, 0, 0, 0.4) 0 40%, rgba(0, 0, 0, 0.85) 80% 100%), url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Annotation-2019-10-15-141141-368x276.png) no-repeat center;
1734 | background-size: cover;
1735 | }
1736 |
1737 | .popular-article .title-section {
1738 | margin: 1.5rem;
1739 | }
1740 |
1741 | .popular-article .art-title {
1742 | font-size: 2.2rem;
1743 | font-weight: 700;
1744 | line-height: 1.2;
1745 | }
1746 |
1747 | .popular-article .art-title:hover {
1748 | border-bottom: 1px solid #939391;
1749 | }
1750 |
1751 | .popular-article .art-details {
1752 | margin-top: 0.7rem;
1753 | }
1754 |
1755 | .latest-article {
1756 | display: flex;
1757 | background-color: rgba(255, 68, 34, 0.08);
1758 | }
1759 |
1760 | .latest-text {
1761 | flex: 1;
1762 | margin: 1.2rem;
1763 | font-size: 1.5rem;
1764 | }
1765 |
1766 | .articles-grid .for-grid .latest-text a {
1767 | color: #f42;
1768 | text-decoration: none;
1769 | font-size: 1.2rem;
1770 | line-height: 1.9rem;
1771 | }
1772 |
1773 | .latest-text .latest-title {
1774 | font-weight: 600;
1775 | font-family: "Work Sans", "Arial", sans-serif;
1776 | font-size: 1.5rem;
1777 | }
1778 |
1779 | .latest-image {
1780 | height: 10rem;
1781 | width: 10rem;
1782 | }
1783 |
1784 | .img1 {
1785 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Twitter-Safety-514x270.jpg) no-repeat center;
1786 | background-size: cover;
1787 | }
1788 |
1789 | .img2 {
1790 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Pixelbook-Go-1-of-5.jpg) no-repeat center;
1791 | background-size: cover;
1792 | }
1793 |
1794 | .img3 {
1795 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/instagram-access-hed.png) no-repeat center;
1796 | background-size: cover;
1797 | }
1798 |
1799 | .img4 {
1800 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/09/mixingboard.jpg) no-repeat center;
1801 | background-size: cover;
1802 | }
1803 |
1804 | .img5 {
1805 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Untitled-design119.png) no-repeat center;
1806 | background-size: cover;
1807 | }
1808 |
1809 | .img6 {
1810 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/08/bitcoin_today-header_bitcoin_today.jpg) no-repeat center;
1811 | background-size: cover;
1812 | }
1813 |
1814 | .img7 {
1815 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/09/Pam-Angela-The-Office.jpg) no-repeat center;
1816 | background-size: cover;
1817 | }
1818 |
1819 | .img8 {
1820 | background: url(https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/10/Fortnite-ch-2.jpg) no-repeat center;
1821 | background-size: cover;
1822 | }
1823 |
1824 | .block-arti ul {
1825 | padding-left: 1rem;
1826 | color: #f42;
1827 | }
1828 |
1829 | .for-grid .block-arti li {
1830 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1831 | padding: 1rem;
1832 | padding-left: 0;
1833 | }
1834 |
1835 | .articles-grid .for-grid .block-arti li a {
1836 | text-decoration: none;
1837 | color: #000;
1838 | opacity: 0.7;
1839 | font-size: 1.4rem;
1840 | line-height: 2rem;
1841 | }
1842 |
1843 | .articles-grid .for-grid .block-arti li a:hover {
1844 | opacity: 1;
1845 | }
1846 |
1847 | /* -----------------------MEDIA: mobile screen width: <768px;------------- */
1848 |
1849 | @media screen and (max-width: 767px) {
1850 | .block-arti {
1851 | flex: 1 1 50rem;
1852 | }
1853 | }
1854 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | TNW
9 |
19 |
21 |
48 |
61 |
68 |
72 |
73 |
74 | In less than three weeks, Hard Work Summit is taking over Amsterdam. Don't miss it →
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
Monday — October 7, 2019
87 |
88 |
89 |
98 |
99 |
100 |
124 |
126 |
127 |
Latest news ›
128 |
129 |
130 |
131 |
133 |
134 |
137 |
138 |
139 | Ben Dickson
141 | 3
142 | hours ago
143 |
144 |
145 |
146 |
147 |
148 |
149 |
151 |
152 |
155 |
156 |
157 | Calvin Carter
159 | 4
160 | hours ago
161 |
162 |
163 |
164 |
165 |
166 |
167 |
169 |
170 |
173 |
174 |
175 | Mix
177 | 4
178 | hours ago
179 |
180 |
181 |
182 |
183 |
184 |
185 |
187 |
188 |
191 |
192 |
193 | Ivan Mehta
195 | 4
196 | hours ago
197 |
198 |
199 |
200 |
201 |
202 |
203 |
205 |
206 |
209 |
210 |
211 | Matthew Beedham
213 | 4
214 | hours ago
215 |
216 |
217 |
218 |
219 |
220 |
221 |
223 |
224 |
227 |
228 |
229 | David Canellis
231 | 4
232 | hours ago
233 |
234 |
235 |
236 |
237 |
238 |
239 |
241 |
242 |
245 |
246 |
247 | TNW Deals
249 | 4
250 | hours ago
251 |
252 |
253 |
254 |
255 |
256 |
257 |
259 |
260 |
263 |
264 |
265 | Cara Curtis
267 | 5
268 | hours ago
269 |
270 |
271 |
272 |
273 |
274 |
275 |
277 |
278 |
Microsoft Surface event 2019 ›
279 |
280 |
281 |
282 |
284 |
285 |
288 |
289 |
290 | Napier Lopez
291 |
293 | 6
294 | days ago
295 |
296 |
297 |
298 |
299 |
300 |
301 |
303 |
304 |
307 |
308 |
309 | Ivan Mehta
310 |
312 | 7
313 | days ago
314 |
315 |
316 |
317 |
318 |
319 |
320 |
322 |
323 |
326 |
327 |
328 | Rachel Kaser
329 |
331 | 7
332 | days ago
333 |
334 |
335 |
336 |
337 |
338 |
339 |
341 |
342 |
345 |
346 |
347 | Ivan Mehta
348 |
350 | 7
351 | days ago
352 |
353 |
354 |
355 |
356 |
357 |
358 |
360 |
361 |
362 |
Latest funding rounds on Index.co ›
363 |
364 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
381 |
385 |
386 |
390 |
393 |
394 |
395 |
396 |
397 |
398 |
399 |
402 |
406 |
407 |
411 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
423 |
427 |
428 |
434 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
446 |
450 |
451 |
455 |
459 |
460 |
461 |
462 |
464 |
465 |
466 | Apps ›
467 |
477 |
485 |
492 |
493 |
494 | Gear ›
495 |
505 |
513 |
520 |
521 |
522 | Tech ›
523 |
533 |
541 |
548 |
549 |
550 | Creative ›
551 |
561 |
569 |
576 |
577 |
578 | Podium ›
579 |
589 |
597 |
604 |
605 |
606 | Insights ›
607 |
617 |
625 |
632 |
633 |
634 | Launch ›
635 |
645 |
653 |
660 |
661 |
662 | Distract ›
663 |
673 |
681 |
688 |
689 |
690 | .
691 |
692 |
693 |
695 |
696 |
Latest deals ›
697 |
698 |
699 |
700 |
702 |
703 |
704 |
93% OFF
705 |
706 |
707 |
710 |
711 |
712 | $2030
714 |
716 | $34.99
717 |
718 |
719 |
720 |
721 |
722 |
723 |
725 |
726 |
93% OFF
727 |
728 |
729 |
732 |
733 |
734 | $2030
736 |
738 | $34.99
739 |
740 |
741 |
742 |
743 |
744 |
745 |
747 |
748 |
93% OFF
749 |
750 |
751 |
754 |
755 |
756 | $2030
758 |
760 | $34.99
761 |
762 |
763 |
764 |
765 |
766 |
767 |
769 |
770 |
93% OFF
771 |
772 |
773 |
776 |
777 |
778 | $2030
780 |
782 | $34.99
783 |
784 |
785 |
786 |
787 |
788 |
789 |
791 |
792 |
93% OFF
793 |
794 |
795 |
798 |
799 |
800 | $2030
802 |
804 | $34.99
805 |
806 |
807 |
808 |
809 |
810 |
811 |
813 |
814 |
93% OFF
815 |
816 |
817 |
820 |
821 |
822 | $2030
824 |
826 | $34.99
827 |
828 |
829 |
830 |
831 |
832 |
833 |
835 |
836 |
93% OFF
837 |
838 |
839 |
842 |
843 |
844 | $2030
846 |
848 | $34.99
849 |
850 |
851 |
852 |
853 |
854 |
855 |
857 |
858 |
93% OFF
859 |
860 |
861 |
864 |
865 |
866 | $2030
868 |
870 | $34.99
871 |
872 |
873 |
874 |
875 |
876 |
877 |
879 |
907 |
908 |
909 |
910 |
911 |
--------------------------------------------------------------------------------
21 | 
377 | 
398 | 
419 | 
442 |