diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..c80893731 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +starter/.DS_Store +final/.DS_Store + diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..23fd35f0e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/starter/01-Test/index.html b/starter/01-Test/index.html new file mode 100644 index 000000000..1a00ae609 --- /dev/null +++ b/starter/01-Test/index.html @@ -0,0 +1,12 @@ + + + + + + 01 Test + + +

Hello world!

+

My name is Ronan :D

+ + diff --git a/starter/02-HTML-Fundamentals/.vscode/settings.json b/starter/02-HTML-Fundamentals/.vscode/settings.json new file mode 100644 index 000000000..23fd35f0e --- /dev/null +++ b/starter/02-HTML-Fundamentals/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..a06340e46 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,10 @@ + + + + Blog + + + Home +

Blog

+ + diff --git a/starter/02-HTML-Fundamentals/challenge-2.html b/starter/02-HTML-Fundamentals/challenge-2.html new file mode 100644 index 000000000..688c3a359 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge-2.html @@ -0,0 +1,31 @@ + + + + Challenge 2 + + +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe +

$65.00

+

Free shipping

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+

More information →

+

Product details

+ + +
+ + diff --git a/starter/02-HTML-Fundamentals/challenges.jpg b/starter/02-HTML-Fundamentals/img/challenges.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to starter/02-HTML-Fundamentals/img/challenges.jpg diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/starter/02-HTML-Fundamentals/img/laura-jones.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/laura-jones.jpg rename to starter/02-HTML-Fundamentals/img/laura-jones.jpg diff --git a/starter/02-HTML-Fundamentals/post-img.jpg b/starter/02-HTML-Fundamentals/img/post-img.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/post-img.jpg rename to starter/02-HTML-Fundamentals/img/post-img.jpg diff --git a/starter/02-HTML-Fundamentals/related-1.jpg b/starter/02-HTML-Fundamentals/img/related-1.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-1.jpg rename to starter/02-HTML-Fundamentals/img/related-1.jpg diff --git a/starter/02-HTML-Fundamentals/related-2.jpg b/starter/02-HTML-Fundamentals/img/related-2.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-2.jpg rename to starter/02-HTML-Fundamentals/img/related-2.jpg diff --git a/starter/02-HTML-Fundamentals/related-3.jpg b/starter/02-HTML-Fundamentals/img/related-3.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-3.jpg rename to starter/02-HTML-Fundamentals/img/related-3.jpg diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..d55da59c3 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,138 @@ + + + + + Basic Language of the web: HTML + + + + +
+

📘 The Code Magazine

+ +
+
+
+

The Basic Language of the Web: HTML

+ Headshot of Laura Jones +

Posted by Laura Jones on Monday, June 21st 2027

+ HTML code on a screen +
+

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+

+ In this post, let's focus on HTML. We will learn what HTML is all about, + and why you too should learn it. +

+

What is HTML?

+

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers understand + HTML and render HTML code as websites. +

+

In HTML, each element is made up of 3 parts:

+
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+

+ You can learn more at the + MDN Web Docs. +

+ +

Why should you learn HTML?

+

+ There are countless reasons for learning the fundamental language of the + web. Here are 5 of them: +

+ +

Hopefully you learned something new here. See you next time!

+
+ + + + diff --git a/starter/03-CSS-Fundamentals/.vscode/settings.json b/starter/03-CSS-Fundamentals/.vscode/settings.json new file mode 100644 index 000000000..23fd35f0e --- /dev/null +++ b/starter/03-CSS-Fundamentals/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/challenges.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-2/img/challenges.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-2/img/laura-jones.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/post-img.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-2/img/post-img.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/related-1.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-2/img/related-1.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/related-2.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-2/img/related-2.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/related-3.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-2/img/related-3.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-2/index.html b/starter/03-CSS-Fundamentals/challenge-2/index.html new file mode 100644 index 000000000..962c5a3ad --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-2/index.html @@ -0,0 +1,32 @@ + + + + Challenge 3 + + + +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe +

$65.00

+

Free shipping

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+

More information →

+

Product details

+ + +
+ + diff --git a/starter/03-CSS-Fundamentals/challenge-2/styles.css b/starter/03-CSS-Fundamentals/challenge-2/styles.css new file mode 100644 index 000000000..3d2f9dae8 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-2/styles.css @@ -0,0 +1,59 @@ +body { + font-family: sans-serif; + font-size: 14px; +} + +article { + border: 5px solid black; +} + +h2 { + text-align: center; + background-color: #eee; +} + +.price { + font-size: 20px; +} + +.shipping { + text-transform: uppercase; + color: #aaa; + font-size: 12px; + font-weight: bold; +} + +.more-info:link, .more-info:visited { + color: black; +} + +.more-info:hover, .more-info:active { + text-decoration: none; +} + +/* Product Details */ + +.details-title { + text-transform: uppercase; + font-size: 16px; +} + +.details-list { + list-style-type:square; +} + +/* Button */ + +.add-to-cart { + border: none; + background-color: black; + color: white; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; +} + +.add-to-cart:hover { + background-color: white; + color: black; +} diff --git a/starter/03-CSS-Fundamentals/challenge-3/.vscode/settings.json b/starter/03-CSS-Fundamentals/challenge-3/.vscode/settings.json new file mode 100644 index 000000000..23fd35f0e --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-3/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/challenges.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-3/img/challenges.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-3/img/laura-jones.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/post-img.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-3/img/post-img.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/related-1.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-3/img/related-1.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/related-2.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-3/img/related-2.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/related-3.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-3/img/related-3.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-3/index.html b/starter/03-CSS-Fundamentals/challenge-3/index.html new file mode 100644 index 000000000..178ea693c --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-3/index.html @@ -0,0 +1,34 @@ + + + + Challenge 3 + + + +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe +

$65.00

+

Free shipping

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+

+ More information → +

+

Product details

+ + +
+ + diff --git a/starter/03-CSS-Fundamentals/challenge-3/styles.css b/starter/03-CSS-Fundamentals/challenge-3/styles.css new file mode 100644 index 000000000..4bc386df7 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-3/styles.css @@ -0,0 +1,86 @@ +* { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + font-size: 14px; +} + +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; +} + +.product-title { + text-align: center; + font-size: 22px; + background-color: #eee; + text-transform: uppercase; + padding: 15px 0; +} + +p { + margin-bottom: 10px; +} + +.price { + font-size: 20px; + margin-bottom: 5px; +} + +.shipping { + text-transform: uppercase; + color: #aaa; + font-size: 12px; + font-weight: bold; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* Product Details */ + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-top: 30px; + margin-bottom: 15px; +} + +.details-list { + list-style-type: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} +/* Button */ + +.add-to-cart { + border: none; + background-color: black; + color: white; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; +} + +.add-to-cart:hover { + border-top: 4px solid black; + background-color: white; + color: black; +} diff --git a/starter/03-CSS-Fundamentals/challenge-4/.vscode/settings.json b/starter/03-CSS-Fundamentals/challenge-4/.vscode/settings.json new file mode 100644 index 000000000..23fd35f0e --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-4/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/challenges.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-4/img/challenges.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-4/img/laura-jones.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/post-img.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-4/img/post-img.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/related-1.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-4/img/related-1.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/related-2.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-4/img/related-2.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/related-3.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/starter/03-CSS-Fundamentals/challenge-4/img/related-3.jpg differ diff --git a/starter/03-CSS-Fundamentals/challenge-4/index.html b/starter/03-CSS-Fundamentals/challenge-4/index.html new file mode 100644 index 000000000..84cd4f192 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-4/index.html @@ -0,0 +1,41 @@ + + + + Challenge 3 + + + +
+

sale

+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe +

$65.00

+

Free shipping

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+ More information → +
+
+
+
+
+
+
+
+

Product details

+ + +
+ + diff --git a/starter/03-CSS-Fundamentals/challenge-4/styles.css b/starter/03-CSS-Fundamentals/challenge-4/styles.css new file mode 100644 index 000000000..0df5cef2b --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge-4/styles.css @@ -0,0 +1,137 @@ +* { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + font-size: 14px; +} + +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + position: relative; +} + +.sale { + background-color: red; + color: white; + font-size: 10px; + font-weight: bold; + text-transform: uppercase; + padding: 10px 20px; + display: inline-block; + /* width: 40px; + text-align: center; */ + position: absolute; + top: -17px; + left: -39px; + letter-spacing: 2px; +} + +.product-title { + text-align: center; + font-size: 22px; + background-color: #eee; + text-transform: uppercase; + padding: 15px 0; +} + +p { + margin-bottom: 10px; +} + +.price { + font-size: 20px; + margin-bottom: 5px; +} + +.shipping { + text-transform: uppercase; + color: #aaa; + font-size: 12px; + font-weight: bold; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; + display: inline-block; + margin-bottom: 30px; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.color { + width: 20px; + height: 20px; + display: inline-block; + margin: 0 5px; +} + +.color:first-child { + margin-left: 0; + background-color: rgb(66, 66, 66); +} + +.color-blue { + background-color: rgb(42, 133, 237); +} + +.color-red { + background-color: rgb(226, 82, 15); +} + +.color-yellow { + background-color: rgba(251, 251, 9, 0.947); +} + +.color-green { + background-color: rgb(23, 161, 53); +} + +.color-brown { + background-color: burlywood; + margin-right: 0; +} +/* Product Details */ + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-top: 30px; + margin-bottom: 15px; +} + +.details-list { + list-style-type: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} +/* Button */ + +.add-to-cart { + border: none; + background-color: black; + color: white; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; +} + +.add-to-cart:hover { + border-top: 4px solid black; + background-color: white; + color: black; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..9f021416c 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,6 +3,7 @@ The Basic Language of the Web: HTML + @@ -14,133 +15,148 @@

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> - -
-

📘 The Code Magazine

- - -
- -
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

Posted by Laura Jones on Monday, June 21st 2027

- - HTML code on a screen +
+
+

📘 The Code Magazine

+ +
-

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all about, - and why you too should learn it. -

- -

What is HTML?

-

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

-

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers understand - HTML and render HTML code as websites. -

-

In HTML, each element is made up of 3 parts:

- -
    -
  1. The opening tag
    2. -
  2. The closing tag
    3. -
  3. The actual element
    4. -
- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of the - web. Here are 5 of them: -

- -
    -
  • To be able to use the fundamental web dev language
    • -
  • - To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
    • -
  • To build web applications
    • -
  • To impress friends
    • -
  • To have fun 😃
    • -
- -

Hopefully you learned something new here. See you next time!

-
- - - - + + + +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

+

In HTML, each element is made up of 3 parts:

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ + + +

Hopefully you learned something new here. See you next time!

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/styles.css b/starter/03-CSS-Fundamentals/styles.css new file mode 100644 index 000000000..6150bfe89 --- /dev/null +++ b/starter/03-CSS-Fundamentals/styles.css @@ -0,0 +1,234 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ + +.container { + width: 800px; + margin: 0 auto; + position: relative; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + height: 80px; +} + +.post-header { + margin-bottom: 40px; + position: relative; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +/* SMALLER ELEMENTS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; + position: relative; +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +h3 { + font-size: 30px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-align: center; + text-transform: uppercase; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +/* h3 + p::first-line { + color: red; +} */ + +li { + font-size: 20px; + margin-bottom: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +ol, +ul { + margin-left: 50px; + margin-bottom: 20px; +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +article p:first-child { + color: red; /* doesn't work as expected as a paragraph is not the first element in the article */ +} + +article p:last-child { + color: red; /* whereas this works fine as the last element in the article is a paragraph */ +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +a { + color: red; +} + +.post-image { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + display: block; */ + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +.like-button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */