diff --git a/.stickler.yml b/.stickler.yml new file mode 100644 index 0000000..205f198 --- /dev/null +++ b/.stickler.yml @@ -0,0 +1,3 @@ +linters: + stylelint: + csslint: diff --git a/images/cat-smashing-tv-2.svg b/images/cat-smashing-tv-2.svg new file mode 100644 index 0000000..3c911e7 --- /dev/null +++ b/images/cat-smashing-tv-2.svg @@ -0,0 +1 @@ +smaArtboard 1 copy 34 \ No newline at end of file diff --git a/images/cat-with-trampet.svg b/images/cat-with-trampet.svg new file mode 100644 index 0000000..6547107 --- /dev/null +++ b/images/cat-with-trampet.svg @@ -0,0 +1 @@ +smaArtboard 1 copy 22 \ No newline at end of file diff --git a/images/design-systems-hardcover-book.png b/images/design-systems-hardcover-book.png new file mode 100644 index 0000000..b5838c6 Binary files /dev/null and b/images/design-systems-hardcover-book.png differ diff --git a/images/diana-mounter-250px-opt.png b/images/diana-mounter-250px-opt.png new file mode 100644 index 0000000..86b7027 Binary files /dev/null and b/images/diana-mounter-250px-opt.png differ diff --git a/images/singing-barista.svg b/images/singing-barista.svg new file mode 100644 index 0000000..a870c04 --- /dev/null +++ b/images/singing-barista.svg @@ -0,0 +1,119 @@ + + + + + + Cat Singing Barista + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..00e600d --- /dev/null +++ b/index.html @@ -0,0 +1,251 @@ + + + + + Smashing Magazine + + + + + + +
+

Header Here! Show original

+
+
+
+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Don't miss the latest articles!

+
+
+
+ + +
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+
+ singing cat +
+

1492 Smashing Members

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, quos excepturi impedit at itaque aliquid!

+ +

Already have an account?Sign in

+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+
+ cat smash tv +
+

New on Smashing TV

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, quos excepturi impedit at itaque aliquid!

+ +

Already have an account?Sign in

+
+
+
+

SEE ALL LATEST ARTICLES →

+
+
+

coming up next•

+

SmashingConf Toronto 2019

+

Improving accessibility and front-end workflow, refactoring, security, interface design patterns CSS Grid techniques, performance, Git and how to write better JavaScript.

+ +
+
+
+ person of the week +

person of the week

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. In similique nostrum quasi eum, est molestias eveniet facere architecto. Dicta quis ullam itaque debitis repudiandae! Officiis omnis numquam ipsum sit reprehenderit quibusdam enim dolores ex ratione veniam, natus perspiciatis voluptates quis commodi itaque similique illum nisi, eos, labore vitae quia amet! Lorem, ipsum dolor. Lorem ipsum dolor sit amet consectetur

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+
+

MORE LINKS ON TWITTER →

+
+
+
+

FEATURED SMASHING BOOK

+

Design Systems

+

Meet Design Systems, a recent Smashing book in which Alla Kholmatova explores how to set up an effective design system to create great digital products. With common traps, gotchas and lessons learned.

+ +
+
+ book cover +
+
+
+ + + + + +
+
+

SEE ALL ARTICLES →

+
+
+
+ + + diff --git a/original.html b/original.html new file mode 100644 index 0000000..cf4ad6e --- /dev/null +++ b/original.html @@ -0,0 +1,250 @@ + + + + + Smashing Magazine + + + + + +
+

Header Here! Click here for heatmap

+
+
+
+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Peter Vitaly wrote

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, cum.

+
+
+

Don't miss the latest articles!

+
+
+
+ + +
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+
+ singing cat +
+

1492 Smashing Members

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, quos excepturi impedit at itaque aliquid!

+ +

Already have an account?Sign in

+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+

Lorem ipsum dolor sit amet.

+

by Suzanne Scacca

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde possimus dolorem adipisci, minima magnam autem facere id consequuntur accusantium quod.

+
→
+
+
+
+ cat smash tv +
+

New on Smashing TV

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, quos excepturi impedit at itaque aliquid!

+ +

Already have an account?Sign in

+
+
+
+

SEE ALL LATEST ARTICLES →

+
+
+

coming up next•

+

SmashingConf Toronto 2019

+

Improving accessibility and front-end workflow, refactoring, security, interface design patterns CSS Grid techniques, performance, Git and how to write better JavaScript.

+ +
+
+
+ person of the week +

person of the week

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. In similique nostrum quasi eum, est molestias eveniet facere architecto. Dicta quis ullam itaque debitis repudiandae! Officiis omnis numquam ipsum sit reprehenderit quibusdam enim dolores ex ratione veniam, natus perspiciatis voluptates quis commodi itaque similique illum nisi, eos, labore vitae quia amet! Lorem, ipsum dolor. Lorem ipsum dolor sit amet consectetur

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+

Angelou Douglas shared

+

Fun With MutationObserver

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque debitis, minus qui quos mollitia hic molestiae deserunt placeat velit ratione dolore, reprehenderit aspernatur repellat veniam illum nostrum

+
+
+
+

MORE LINKS ON TWITTER →

+
+
+
+

FEATURED SMASHING BOOK

+

Design Systems

+

Meet Design Systems, a recent Smashing book in which Alla Kholmatova explores how to set up an effective design system to create great digital products. With common traps, gotchas and lessons learned.

+ +
+
+ book cover +
+
+
+ + + + + +
+
+

SEE ALL ARTICLES →

+
+
+
+ + + diff --git a/styles/heatmap.css b/styles/heatmap.css new file mode 100644 index 0000000..4078bca --- /dev/null +++ b/styles/heatmap.css @@ -0,0 +1,83 @@ +p, h1, h2, h3, h4, h5, a, +strong, em, +.promo-title a, .membership-promo a, .tv-promo a, +.newsletter-promo a, .conf-title a +{ + background-color: white; + color: black; +} + +body { + background-color: #aaa; +} + +.featured-article:nth-child(1) { + background-color: #444; + +} + +.featured-article:nth-child(2) { + background-color: #555; +} + +.featured-article:nth-child(3) { + background-color: #666; + +} + +.featured-article:nth-child(4) { + background-color: #777; +} + +.latest-article { + background-color: #999; +} + +.membership-promo { + background-color: #444; +} + +.tv-promo { + background-color: #666; +} + +.conf-panel { + background-color: #444; +} + +.person-of-the-week { + background-color: #666; +} + +.shared-article { + background-color: #888; +} + +.feature-panel { + background-color: #444; +} + +.guides-container article { + background-color: #666; +} + +.newsletter-promo { + background-color: #444; +} + +/* +--------------------------------------------------------- +*/ + +body > header, +body > footer { + background: White; + height: 9em; +} + +header p, +footer p { + color: black; + font-size: 3em; + text-align: center; +} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..65e07ce --- /dev/null +++ b/styles/main.css @@ -0,0 +1,388 @@ +body, header, p, div, article, h1, h2, +section, button, img, h4, ul, li, form, +input, footer{ + border: 0; + margin: 0; + padding: 0; +} + +body { + font-family: 'Raleway', sans-serif; + /* font-family: 'Rokkitt', serif; */ +} + +body > header, +body > footer { + background: rgba(55, 134, 44); + height: 9em; +} + +header p, +footer p { + color: white; + font-size: 3em; + padding-bottom: 30px; + padding-top: 30px; + text-align: center; +} + +.featured-articles-container { + position: relative; +} + +.featured-articles-teaser { + background-color: white; + left: 50%; + margin-left: -200px; + margin-top: 40px; + position: absolute; + text-align: center; + text-transform: capitalize; + top: 0; + width: 400px; +} + +.featured-articles { + display: grid; + grid-auto-rows: 45em; + grid-template-columns: repeat(2, 1fr); +} + +.featured-articles a { + color: white; + text-decoration: none; +} + +.featured-article { + color: white; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 100px; +} + +.featured-article > p, +.featured-article-title { + margin-bottom: 30px; +} + + +.featured-article p { + font-size: 1.2em; +} + +.featured-article:nth-child(1) { + background-color: rgb(185, 53, 53); + +} + +.featured-article:nth-child(2) { + background-color: rgb(201, 37, 37); +} + +.featured-article:nth-child(3) { + background-color: rgb(226, 60, 60); + +} + +.featured-article:nth-child(4) { + background-color: rgb(226, 98, 98); +} + +.latest-articles-container { + column-gap: 30px; + display: grid; + grid-auto-rows: 45em; + grid-template-columns: repeat(4, 1fr); + padding: 50px 70px 0 70px; + row-gap: 20px; +} + +.latest-article { + padding: 40px; + position: relative; +} + +.arrow { + bottom: 0; + color: rgb(201, 37, 37); + font-size: 2em; + left: 0; + padding: 20px 40px; + position: absolute; + text-align: center; +} + + + +.latest-article-title, +.curated-article-title, +.featured-article-title { + font-size: 2em; +} + +.latest-article-title a, +.curated-article-title a { + color: black; +} + +.latest-article-title { + text-decoration: underline; +} + +.curated-article-title a{ + text-decoration: none; +} + +.latest-article p, +.shared-article p { + font-size: 1.3em; +} + +.latest-article-title, +.latest-article > p, +.latest-article > div, +.shared-article > p, +.curated-article-title { + margin-bottom: 20px; +} + +.byline { + font-size: 0.8em; + font-weight: bold; +} + +.byline a { + color: black; +} + + + +.membership-promo, +.tv-promo, +.newsletter-promo { + background: rgb(201, 37, 37); + border-radius: 10px; + color: white; + grid-column: auto / span 2; + padding: 25px 35px; + text-align: center; +} + +.feature-panel { + background: rgb(226, 44, 44); + color: white; + display: grid; + grid-auto-rows: 25em; + grid-template-columns: 2fr 1fr; + padding: 30px 50px; +} + +.book-cover img { + height: auto; + position: relative; + right: -200px; + top: -80px; + width: 250px; +} + +.book-details p { + font-size: 1.3em; +} + +.feature-heading, +.book-title, +.book-details > p, +.book-details > button { + margin: 20px 0; +} + +.membership-promo img, +.tv-promo img { + height: auto; + width: 45%; +} + +.newsletter-promo img { + height: auto; + width: 30%; +} + +.membership-promo > div, +.promo-title, +.membership-promo > p, +.membership-promo > button, +.tv-promo > div, +/* .tv-promo > h1, */ +.tv-promo > p, +.tv-promo > button, +/* .newsletter-promo > h1, */ +.newsletter-promo > p, +.newsletter-promo > div, +.newsletter-promo > form { + margin-bottom: 20px; +} + +.promo-title, +.conf-title, +.book-title { + font-size: 3em; +} + +.membership-promo a, +.tv-promo a, +.newsletter-promo a { + color: white; +} + +.membership-promo p, +.tv-promo p, +.newsletter-promo p { + font-size: 1.4em; +} + +button { + border-radius: 5px; + font-size: 1.2em; + font-weight: bold; + height: 40px; + margin: 0 auto; + width: 200px; +} + +.membership-promo p:last-of-type, +.tv-promo p:last-of-type, +.newsletter-promo p:last-of-type { + font-size: 1em; +} + +.load-more { + margin: 80px auto; + text-align: center; + width: 400px; +} + +.load-more a { + border-bottom: 4px solid rgb(201, 37, 37); + color: black; + padding-bottom: 10px; + text-decoration: none; +} + +.conf-panel { + background: blue; + color: white; + padding: 50px 200px; + text-align: center; + } + +.conf-panel > p, +.conf-title, +.conf-panel > button { + margin-bottom: 40px; +} + +.conf-panel a { + color: white; +} + +.conf-panel p:first-child > span, +.conf-panel p:first-child > time { + font-weight: bold; + margin-left: 15px; + margin-right: 15px; + text-transform: uppercase; +} + +.conf-panel p:nth-of-type(2) { + font-size: 1.4em; + margin-left: auto; + margin-right: auto; + width: 60%; +} + +.conf-panel button, +.book-details button{ + background-color: white; + color: blue; + font-size: 1.5em; + height: 3.5em; + width: 400px; +} + +.curated-articles-container { + column-gap: 20px; + display: grid; + grid-auto-rows: 20em; + grid-template-columns: repeat(2, 1fr); + padding: 20px 40px; + row-gap: 20px; +} + + + +.person-of-the-week { + grid-column: 1 / -1; + padding: 50px 200px; + +} +.person-of-the-week img { + float: left; + height: auto; + margin-right: 30px; + width: 150px; +} + +.person-of-the-week p { + font-size: 1.3em; +} + +.curated-special { + font-weight: 100; + margin-bottom: 30px; + text-transform: uppercase; +} + +.shared-article { + padding: 0 10px 0 50px; +} + +.shared-article > p, +.curated-article-title { + margin-bottom: 1em; +} + +.guides-container { + column-gap: 20px; + display: grid; + grid-auto-rows: minmax(10em, max-content); + grid-template-columns: repeat(4, 1fr); + margin: 20px 50px; + row-gap: 20px; +} + +.tut-cat-title { + font-size: 2em; + margin-bottom: 20px; +} + +.guide-titles { + margin-left: 40px; + margin-top: 40px; +} + +.guide-titles li { + font-size: 1.4em; + margin-bottom: 15px; + margin-top: 15px; +} + +.newsletter-promo { + grid-column: 1 / -1; +} + +.newsletter-promo input { + border-bottom-left-radius: 5px; + border-top-left-radius: 5px; + height: 40px; +}