From 800ad52f1ffb86f7b555db908da4b9cfe86c75ac Mon Sep 17 00:00:00 2001 From: owen-webb Date: Sun, 28 Aug 2022 08:04:57 -0600 Subject: [PATCH 01/12] section-3: Apply base styling to blog. --- starter/03-CSS-Fundamentals/index.html | 6 +++- starter/03-CSS-Fundamentals/style.css | 41 ++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 starter/03-CSS-Fundamentals/style.css diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..0bf0270eb 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,8 @@ + + The Basic Language of the Web: HTML @@ -141,6 +143,8 @@

Related posts

- + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..c07dcaade --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,41 @@ +h1, h2, h3, h4, p, li { + font-family: sans-serif; +} + +h1 { + color: blue; + font-size: 26px; + font-style: italic; + text-transform: uppercase; +} + +h2 { + font-size: 40px; +} + +h3 { + font-size: 30px; +} + +h4 { + font-size: 20px; + text-align: center; + text-transform: uppercase; +} + +p { + font-size: 22px; + line-height: 1.5; +} + +li { + font-size: 20px; +} + +footer p { + font-size: 16px; +} + +article header p { + font-style: italic; +} From b83bad233c0a6b885bcbf9823ec195467ef425f4 Mon Sep 17 00:00:00 2001 From: owen-webb Date: Sun, 28 Aug 2022 08:14:40 -0600 Subject: [PATCH 02/12] section-3: Make styling more robust. --- starter/03-CSS-Fundamentals/index.html | 12 +++++------ starter/03-CSS-Fundamentals/style.css | 28 +++++++++++++++++++++++--- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 0bf0270eb..02c7726e5 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -39,7 +39,7 @@

The Basic Language of the Web: HTML

width="50" /> -

Posted by Laura Jones on Monday, June 21st 2027

+

Posted by Laura Jones on Monday, June 21st 2027

Why should you learn HTML?

-

Copyright © 2027 by The Code Magazine.

+
diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index c07dcaade..4f4d51c3d 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -32,10 +32,32 @@ li { font-size: 20px; } -footer p { +/* ul { + list-style: none; +} */ + +/* footer p { font-size: 16px; -} +} */ + +/* article header p { + font-style: italic; +} */ -article header p { +#author { font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related-posts { + list-style: none; } From a7803248252f8f1368b716476c5582972fcc0110 Mon Sep 17 00:00:00 2001 From: owen-webb Date: Sun, 28 Aug 2022 10:37:34 -0600 Subject: [PATCH 03/12] section-3: Conflict resolution notes. --- starter/03-CSS-Fundamentals/index.html | 3 +- starter/03-CSS-Fundamentals/style.css | 67 +++++++++++++++++++++++++- 2 files changed, 67 insertions(+), 3 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 02c7726e5..811b7f28a 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -17,7 +17,6 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -

📘 The Code Magazine

diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 13b47a206..62a770951 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -13,6 +13,7 @@ body { border-top: 10px solid #1098ad; color: #444444; font-family: sans-serif; + position: relative; } article { @@ -29,9 +30,28 @@ h1 { text-transform: uppercase; } +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + h2 { font-size: 40px; margin-bottom: 30px; + position: relative; +} + +h2::after { + background-color: #ffe70e; + color: #444444; + content: "TOP"; + display: inline-block; + font-size: 16px; + font-weight: bold; + padding: 5px 10px; + position: absolute; + right: -25px; + top: -10px; } h3 { @@ -51,6 +71,10 @@ p { margin-bottom: 50px; } +h3 + p::first-line { + /* color: red */ +} + ul, ol { margin-left: 50px; margin-bottom: 20px; @@ -123,6 +147,15 @@ nav { font-size: 18px; } +button { + bottom: 50px; + cursor: pointer; + font-size: 22px; + padding: 20px; + position: absolute; + right: 50px; +} + /* ul { list-style: none; } */ @@ -146,6 +179,7 @@ nav { .container { margin: 0 auto; + /* position: relative; */ width: 800px; } From 025dce9af5b47ba0b6ca68a2eb7f8c8bdc97c29a Mon Sep 17 00:00:00 2001 From: owen-webb Date: Mon, 29 Aug 2022 08:55:43 -0600 Subject: [PATCH 12/12] section-3: Challenge #3. --- .../challenge-1/index.html | 19 +++++- .../03-CSS-Fundamentals/challenge-1/style.css | 60 ++++++++++++++++++- 2 files changed, 75 insertions(+), 4 deletions(-) diff --git a/starter/03-CSS-Fundamentals/challenge-1/index.html b/starter/03-CSS-Fundamentals/challenge-1/index.html index 4d25a4293..ed59cc552 100644 --- a/starter/03-CSS-Fundamentals/challenge-1/index.html +++ b/starter/03-CSS-Fundamentals/challenge-1/index.html @@ -8,7 +8,10 @@

-

Converse Chuck Taylor All Star Low Top

+

+
sale
+ Converse Chuck Taylor All Star Low Top +

Converse shoes.

Converse Chuck Taylor All Star Low Top

$65.00

Free shipping

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

-

+

More information →

-

Product details

+ +
+
+
+
+
+
+
+
+ +

Product details

  • Lightweight, durable canvas sneaker
  • Lightly padded footbed for added comfort
    • diff --git a/starter/03-CSS-Fundamentals/challenge-1/style.css b/starter/03-CSS-Fundamentals/challenge-1/style.css index 2be30e533..53df1a1fd 100644 --- a/starter/03-CSS-Fundamentals/challenge-1/style.css +++ b/starter/03-CSS-Fundamentals/challenge-1/style.css @@ -40,12 +40,48 @@ li { margin-bottom: 10px; } -h2, h4 { +h2 { text-transform: uppercase; margin-bottom: 15px; margin-top: 30px; } +.black-option { + background-color: black; +} + +.blue-option { + background-color: blue; +} + +.brown-option { + background-color: brown; +} + +.color-pallete { + margin-bottom: 15px; +} + +.color-pallete div { + display: inline-block; + height: 20px; + margin-right: 8px; + width: 20px; +} + +.details-header { + text-transform: uppercase; + margin-bottom: 15px; +} + +.green-option { + background-color: green; +} + +.information-link { + margin-bottom: 20px; +} + .product { border: 4px solid black; margin: 50px auto; @@ -57,13 +93,31 @@ h2, h4 { font-size: 22px; margin: 0; padding: 15px; + position: relative; text-align: center; } +.product-header-tag { + background-color: red; + color: white; + display: inline-block; + font-size: 16px; + left: -4%; + letter-spacing: 2px; + padding: 5px 10px; + position: absolute; + text-transform: uppercase; + top: -30%; +} + .pricing-details { font-size: 24px; } +.red-option { + background-color: red; +} + .shipping-details { color: #777; font-size: 12px; @@ -71,3 +125,7 @@ h2, h4 { margin-bottom: 20px; text-transform: uppercase; } + +.yellow-option { + background-color: yellow; +} \ No newline at end of file