diff --git a/mywork/02-HTML-Fundamentals/blog.html b/mywork/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..732fb75ca --- /dev/null +++ b/mywork/02-HTML-Fundamentals/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Main Page + + diff --git a/mywork/02-HTML-Fundamentals/content.txt b/mywork/02-HTML-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/mywork/02-HTML-Fundamentals/content.txt @@ -0,0 +1,34 @@ +📘 The Code Magazine + +The Basic Language of the Web: HTML + +Posted by Laura Jones on Monday, June 21st 2027 + +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: + +The opening tag +The closing tag +The actual element +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: + +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! \ No newline at end of file diff --git a/mywork/02-HTML-Fundamentals/img/challenges.jpg b/mywork/02-HTML-Fundamentals/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/mywork/02-HTML-Fundamentals/img/challenges.jpg differ diff --git a/mywork/02-HTML-Fundamentals/img/laura-jones.jpg b/mywork/02-HTML-Fundamentals/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/mywork/02-HTML-Fundamentals/img/laura-jones.jpg differ diff --git a/mywork/02-HTML-Fundamentals/img/post-img.jpg b/mywork/02-HTML-Fundamentals/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/mywork/02-HTML-Fundamentals/img/post-img.jpg differ diff --git a/mywork/02-HTML-Fundamentals/img/related-1.jpg b/mywork/02-HTML-Fundamentals/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/mywork/02-HTML-Fundamentals/img/related-1.jpg differ diff --git a/mywork/02-HTML-Fundamentals/img/related-2.jpg b/mywork/02-HTML-Fundamentals/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/mywork/02-HTML-Fundamentals/img/related-2.jpg differ diff --git a/mywork/02-HTML-Fundamentals/img/related-3.jpg b/mywork/02-HTML-Fundamentals/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/mywork/02-HTML-Fundamentals/img/related-3.jpg differ diff --git a/mywork/02-HTML-Fundamentals/index.html b/mywork/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..a5c0effa3 --- /dev/null +++ b/mywork/02-HTML-Fundamentals/index.html @@ -0,0 +1,136 @@ + + + + + The Basic Language of the Web: HTML + + + + +
+

📘 The Code Magazine

+
+ Blog + Challenges + Flexbox + CSS Grid +
+
+ +
+
+

The Basic Language of the Web: HTML

+ Headshot of Laura Jones + +

Posted by Laura Jones on Monday, June 21st 2027

+ + HTML text +
+ +

+ 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. s +

+ +

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/mywork/02-HTML-Fundamentals/shoe_page.html b/mywork/02-HTML-Fundamentals/shoe_page.html new file mode 100644 index 000000000..ee86e94fb --- /dev/null +++ b/mywork/02-HTML-Fundamentals/shoe_page.html @@ -0,0 +1,10 @@ + + + + + + + Document + + + diff --git a/mywork/03-CSS-Fundamentals/blog.html b/mywork/03-CSS-Fundamentals/blog.html new file mode 100644 index 000000000..732fb75ca --- /dev/null +++ b/mywork/03-CSS-Fundamentals/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Main Page + + diff --git a/mywork/03-CSS-Fundamentals/content.txt b/mywork/03-CSS-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/mywork/03-CSS-Fundamentals/content.txt @@ -0,0 +1,34 @@ +📘 The Code Magazine + +The Basic Language of the Web: HTML + +Posted by Laura Jones on Monday, June 21st 2027 + +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: + +The opening tag +The closing tag +The actual element +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: + +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! \ No newline at end of file diff --git a/mywork/03-CSS-Fundamentals/img/challenges.jpg b/mywork/03-CSS-Fundamentals/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/mywork/03-CSS-Fundamentals/img/challenges.jpg differ diff --git a/mywork/03-CSS-Fundamentals/img/laura-jones.jpg b/mywork/03-CSS-Fundamentals/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/mywork/03-CSS-Fundamentals/img/laura-jones.jpg differ diff --git a/mywork/03-CSS-Fundamentals/img/post-img.jpg b/mywork/03-CSS-Fundamentals/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/mywork/03-CSS-Fundamentals/img/post-img.jpg differ diff --git a/mywork/03-CSS-Fundamentals/img/related-1.jpg b/mywork/03-CSS-Fundamentals/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/mywork/03-CSS-Fundamentals/img/related-1.jpg differ diff --git a/mywork/03-CSS-Fundamentals/img/related-2.jpg b/mywork/03-CSS-Fundamentals/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/mywork/03-CSS-Fundamentals/img/related-2.jpg differ diff --git a/mywork/03-CSS-Fundamentals/img/related-3.jpg b/mywork/03-CSS-Fundamentals/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/mywork/03-CSS-Fundamentals/img/related-3.jpg differ diff --git a/mywork/03-CSS-Fundamentals/index.html b/mywork/03-CSS-Fundamentals/index.html new file mode 100644 index 000000000..477495f7c --- /dev/null +++ b/mywork/03-CSS-Fundamentals/index.html @@ -0,0 +1,149 @@ + + + + + + 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 text +
+ +

+ 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. s +

+ +

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/mywork/03-CSS-Fundamentals/shoe_page.html b/mywork/03-CSS-Fundamentals/shoe_page.html new file mode 100644 index 000000000..ee86e94fb --- /dev/null +++ b/mywork/03-CSS-Fundamentals/shoe_page.html @@ -0,0 +1,10 @@ + + + + + + + Document + + + diff --git a/mywork/03-CSS-Fundamentals/style.css b/mywork/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..079c50914 --- /dev/null +++ b/mywork/03-CSS-Fundamentals/style.css @@ -0,0 +1,234 @@ +* { + margin: 0; + padding: 0; +} + +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; + position: relative; +} + +nav { + font-size: 18px; + text-align: center; +} + +article { + margin-bottom: 60px; +} + +.container { + width: 700px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + height: 80px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* +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; +} + +/* ul { + list-style: none; +} */ + +.no-bullet-list { + list-style: none; +} + +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + margin: 0; +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: yellow; +} + +footer { + color: green; +} */ + +nav a:link { + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { +} + +h2 { + 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: -15px; + right: -25px; +} diff --git a/mywork/04-CSS-Layouts/blog.html b/mywork/04-CSS-Layouts/blog.html new file mode 100644 index 000000000..732fb75ca --- /dev/null +++ b/mywork/04-CSS-Layouts/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Main Page + + diff --git a/mywork/04-CSS-Layouts/content.txt b/mywork/04-CSS-Layouts/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/mywork/04-CSS-Layouts/content.txt @@ -0,0 +1,34 @@ +📘 The Code Magazine + +The Basic Language of the Web: HTML + +Posted by Laura Jones on Monday, June 21st 2027 + +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: + +The opening tag +The closing tag +The actual element +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: + +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! \ No newline at end of file diff --git a/mywork/04-CSS-Layouts/css-grid.html b/mywork/04-CSS-Layouts/css-grid.html new file mode 100644 index 000000000..7f7a6b4e1 --- /dev/null +++ b/mywork/04-CSS-Layouts/css-grid.html @@ -0,0 +1,123 @@ + + + + + + + CSS Grid + + + +
+
(1) HTML
+
(2) and
+
(3) CSS
+
(4) are
+
(5) amazing
+
(6) languages
+
(7) to
+
(8) learn
+
+ +
+
(1)
+
(3)
+
(4)
+
(5)
+
(6)
+
(7)
+
+ + diff --git a/mywork/04-CSS-Layouts/flexbox.html b/mywork/04-CSS-Layouts/flexbox.html new file mode 100644 index 000000000..cb07e6bc0 --- /dev/null +++ b/mywork/04-CSS-Layouts/flexbox.html @@ -0,0 +1,87 @@ + + + + + + + Flexbox + + + +
+
HTML
+
and
+
CSS
+
are
+
amazing
+ + +
+ + diff --git a/mywork/04-CSS-Layouts/img/challenges.jpg b/mywork/04-CSS-Layouts/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/mywork/04-CSS-Layouts/img/challenges.jpg differ diff --git a/mywork/04-CSS-Layouts/img/laura-jones.jpg b/mywork/04-CSS-Layouts/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/mywork/04-CSS-Layouts/img/laura-jones.jpg differ diff --git a/mywork/04-CSS-Layouts/img/post-img.jpg b/mywork/04-CSS-Layouts/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/mywork/04-CSS-Layouts/img/post-img.jpg differ diff --git a/mywork/04-CSS-Layouts/img/related-1.jpg b/mywork/04-CSS-Layouts/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/mywork/04-CSS-Layouts/img/related-1.jpg differ diff --git a/mywork/04-CSS-Layouts/img/related-2.jpg b/mywork/04-CSS-Layouts/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/mywork/04-CSS-Layouts/img/related-2.jpg differ diff --git a/mywork/04-CSS-Layouts/img/related-3.jpg b/mywork/04-CSS-Layouts/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/mywork/04-CSS-Layouts/img/related-3.jpg differ diff --git a/mywork/04-CSS-Layouts/index.html b/mywork/04-CSS-Layouts/index.html new file mode 100644 index 000000000..47d1fcdba --- /dev/null +++ b/mywork/04-CSS-Layouts/index.html @@ -0,0 +1,170 @@ + + + + + + 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 text +
+ +

+ 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. s +

+ +

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/mywork/04-CSS-Layouts/shoe_page.html b/mywork/04-CSS-Layouts/shoe_page.html new file mode 100644 index 000000000..ee86e94fb --- /dev/null +++ b/mywork/04-CSS-Layouts/shoe_page.html @@ -0,0 +1,10 @@ + + + + + + + Document + + + diff --git a/mywork/04-CSS-Layouts/style.css b/mywork/04-CSS-Layouts/style.css new file mode 100644 index 000000000..7c26481e7 --- /dev/null +++ b/mywork/04-CSS-Layouts/style.css @@ -0,0 +1,357 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; + position: relative; +} + +nav { + font-size: 18px; + text-align: center; +} + +article { + margin-bottom: 60px; +} + +.container { + width: 1200px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + /* margin-bottom: 60px; */ + height: 100px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 40px; + box-sizing: border-box; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* +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; +} + +/* ul { + list-style: none; +} */ + +.no-bullet-list { + list-style: none; + margin-left: 0; +} + +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + margin: 0; +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: yellow; +} + +footer { + color: green; +} */ + +nav a:link { + margin-right: 30px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { +} + +h2 { + 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: -15px; + right: -25px; +} +/* +.author-img { + float: left; + margin-bottom: 10px; +} + +.author { + float: left; + padding-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +.clearfix::after { + clear: both; + content: ""; + display: block; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} +*/ + +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + display: block; + margin-bottom: 5px; +} + +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} +/* +.row { + display: flex; + align-items: flex-start; + gap: 75px; + margin-bottom: 60px; +} + +article { + flex: 1; + margin-bottom: 0; +} + +aside { + flex: 0 0 300px; +} */ + +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + grid-column: 1 / span 2; +} + +article { +} + +aside { +} + +footer { + grid-column: 1 / span 2; +} diff --git a/mywork/05-Design/chair-1.jpg b/mywork/05-Design/chair-1.jpg new file mode 100644 index 000000000..3100aa168 Binary files /dev/null and b/mywork/05-Design/chair-1.jpg differ diff --git a/mywork/05-Design/chair-2.jpg b/mywork/05-Design/chair-2.jpg new file mode 100644 index 000000000..33c8d854c Binary files /dev/null and b/mywork/05-Design/chair-2.jpg differ diff --git a/mywork/05-Design/chair-3.jpg b/mywork/05-Design/chair-3.jpg new file mode 100644 index 000000000..f57fcf10e Binary files /dev/null and b/mywork/05-Design/chair-3.jpg differ diff --git a/mywork/05-Design/customers.jpg b/mywork/05-Design/customers.jpg new file mode 100644 index 000000000..2d1d4f851 Binary files /dev/null and b/mywork/05-Design/customers.jpg differ diff --git a/mywork/05-Design/hero.jpg b/mywork/05-Design/hero.jpg new file mode 100644 index 000000000..5532819b1 Binary files /dev/null and b/mywork/05-Design/hero.jpg differ diff --git a/mywork/05-Design/index.html b/mywork/05-Design/index.html new file mode 100644 index 000000000..583c79e1d --- /dev/null +++ b/mywork/05-Design/index.html @@ -0,0 +1,384 @@ + + + + + + + + + + + Lisbon Chair Shop + + +
+
+
+

We design and build better chairs, for a better life

+

+ In a small shop in the heart of Lisbon, we spend our days + relentlessly perfecting the chair. The result is a perfect blend of + beauty and comfort, that will have a lasting impact on your health. +

+ Shop chairs +
+ Photo +
+ +
+

What makes our chairs special

+
+
+ + + + +

Science meets design

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus + similique adipisci praesentium. +

+
+ +
+ + + + +

+ Maximal comfort +

+

+ Reprehenderit optio placeat quasi excepturi architecto, explicabo + facilis perspiciatis error maxime magnam. +

+
+ +
+ + + + +

+ Ethical and sustainable +

+

+ Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat + omnis est laudantium voluptatem voluptas! +

+
+
+
+ +
+
+ People sitting on chairs +
+

"We couldn't live without these chairs anymore"

+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor + repellat at, nesciunt quia cum minima ipsum culpa totam sapiente + recusandae earum debitis doloribus in quasi voluptatibus! +
+

— Mary and Sarah Johnson

+
+
+
+ +
+

Our bestselling chairs

+
+
+ Chair +
+

The Laid Back

+
    +
  • + + + + + Leisure and relaxing +
    • +
  • + + + + + Comfortable for 4h +
    • +
  • + + + + + Vegan leather +
    • +
  • + + + + + Weighs 16 kg +
    • +
+
+ 250€ + Add to cart +
+
+
+ +
+ Chair +
+

The Worker Bee

+
    +
  • + + + + Work +
    • +
  • + + + + Comfortable for 8h +
    • +
  • + + + + Vegan leather +
    • +
  • + + + + Weighs 22 kg +
    • +
+
+ 525€ + Add to cart +
+
+
+ +
+ Chair +
+

The Chair 4/2

+
    +
  • + + + + Leisure and relaxing +
    • +
  • + + + + Comfortable all day! +
    • +
  • + + + + Organic cotton +
    • +
  • + + + + Weighs 80 kg +
    • +
+
+ 1450€ + Add to cart +
+
+
+
+
+ + +
+ + diff --git a/mywork/05-Design/style.css b/mywork/05-Design/style.css new file mode 100644 index 000000000..d6cfa3d83 --- /dev/null +++ b/mywork/05-Design/style.css @@ -0,0 +1,217 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5d; +} + +.container { + width: 960px; + margin: 0 auto; +} + +header, +section { + margin-bottom: 96px; +} + +h2 { + margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; +} + +.grid-3-cols { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 80px; +} + +.btn:link, +.btn:visited { + background-color: #087f5d; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + + display: inline-block; + border-radius: 100px; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +img { + border-radius: 12px; +} + +/* ------------------------ */ +/* COMPONENT STYLES */ +/* ------------------------ */ + +/* HEADER */ +header { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 80px; + margin-top: 64px; +} + +.header-text-box { + align-self: center; +} + +h1 { + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + + /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */ +} + +.header-text { + margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; +} + +img { + width: 100%; +} + +/* FEATURES */ +.features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; +} + +.features-title { + margin-bottom: 16px; + font-size: 20px; +} + +.features-text { + font-size: 18px; + line-height: 1.7; +} + +/* TESTIMONIAL */ +.testimonial-section { + background-color: #087f5d; + color: #fff; + padding: 24px; + border-radius: 12px; +} + +.testimonial-box { + grid-column: 2 / -1; + align-self: center; +} + +.testimonial-box h2 { + margin-bottom: 24px; + font-size: 24px; +} + +.testimonial-text { + font-style: italic; + margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; +} + +/* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.chair-box { + padding: 32px; +} + +h3 { + margin-bottom: 24px; + font-size: 20px; +} + +.chair-details { + list-style: none; + margin-bottom: 48px; +} + +.chair-details li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +.chair-details li:last-child { + margin-bottom: 0; +} + +.chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; +} + +.chair-price { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 20px; +} + +footer { + margin-bottom: 48px; + font-size: 14px; +}