diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..8dea46ad0 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,10 @@ + + + + + Blog + + +

BLOG

+ + 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..7606f750e --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,110 @@ + + + + + The Basic Language of the Web: HTML + + +

📘 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!

+ + + + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..dfc86539e 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,145 @@

The Basic Language of the Web: HTML

--> - -

📘 The Code Magazine

- - -

- -

The Basic Language of the Web: HTML

- -

Posted by Laura Jones on Monday, June 21st 2027

- -

📘 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:

- -

The opening tag
The closing tag
The actual element

- -

- 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:

+ +

The opening tag
The closing tag
The actual element

+ +

+ 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!

+ + + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..08e9ecf17 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,171 @@ +* { + font-family: sans-serif; + margin: 0; + padding: 0; +} + +body { + border-top: 10px solid #1098ad; + color: #444; +} + +h1, +h2, +h3 { + color: #1098ad; + font-weight: bold; +} + +h1 { + text-transform: uppercase; + font-style: italic; + font-size: 26px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +.container { + margin: 0 auto; + width: 800px; + position: relative; +} + +.main-header { + display: block; + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} +nav { + font-size: 18px; +} +a:link, +a:visited { + display: inline-block; + color: #1098ad; + text-decoration: none; + margin-right: 30px; + margin-top: 10px; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + color: orangered; + text-decoration: underline orangered; + background-color: black; + font-style: italic; +} + +p { + line-height: 1.5; + margin-bottom: 15px; + font-size: 22px; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +.post-img { + width: 100%; + height: auto; +} + +#author { + font-style: italic; + font-size: 18px; +} + +.post-header { + margin-bottom: 40px; + position: relative; +} + +h2::after { + content: "top"; + text-transform: uppercase; + display: inline-block; + position: absolute; + color: #444; + font-size: 16px; + padding: 5px 10px; + background-color: #ffe70e; + padding: 5px 10px; + top: -10px; + right: -25px; +} + +h3 { + font-size: 30px; + margin-top: 40px; + margin-bottom: 20px; +} + +ol, +ul { + margin-left: 50px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +article { + margin-bottom: 60px; +} + +aside { + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + background-color: #f7f7f7; + width: 500px; + padding: 50px 0; +} + +aside ul { + list-style: none; +} + +h4 { + text-align: center; + text-transform: uppercase; + font-size: 20px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +#copyright { + font-size: 16px; + line-height: 1.5; + margin-bottom: 15px; +} diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..25ecce202 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -4,7 +4,12 @@ - + + + Lisbon Chair Shop @@ -27,6 +32,21 @@

We design and build better chairs, for a better life

What makes our chairs special

+ +

Science meets design

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus @@ -35,6 +55,21 @@

What makes our chairs special

+ +

Maximal comfort

@@ -45,6 +80,21 @@

What makes our chairs special

+ +

Ethical and sustainable

@@ -80,16 +130,74 @@

Our bestselling chairs

The Laid Back

+ Leisure and relaxing
+ + Comfortable for 4h
+ + Vegan leather
+ Weighs 16 kg

@@ -106,15 +214,71 @@

The Laid Back

The Worker Bee

+ Work
+ Comfortable for 8h
+ Vegan leather
+ Weighs 22 kg

@@ -131,15 +295,71 @@

The Worker Bee

The Chair 4/2

+ Leisure and relaxing
+ Comfortable all day!
+ Organic cotton
+ Weighs 80 kg

diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..8762a034e 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -4,6 +4,9 @@ SPACING SYSTEM (px) FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +MAIN COLOR: #087f5b +GREY COLOR: #343a40 */ * { @@ -16,7 +19,9 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +31,42 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; +} + +.btn:link, .btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + display: inline-block; + font-weight: 500; + border-radius: 100px; +} + +.btn:hover, .btn.action { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + + +img { + border-radius: 12px; } .grid-3-cols { @@ -48,7 +84,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,11 +92,16 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.6; } img { @@ -69,17 +110,28 @@ img { /* 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: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -89,32 +141,51 @@ img { .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; +} + +.chair { + box-shadow: 20px 20px 30px 0px rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } /* CHAIRS */ .chair-box { - padding: 24px; + padding: 32px; } h3 { margin-bottom: 24px; + font-size: 20px; } .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { display: flex; align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 16px; } .chair-details li:last-child { @@ -122,13 +193,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + font-size: 20px; + align-items: center; } footer { margin-bottom: 48px; + font-size: 14px; + color: #495057; } diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..3ce916693 --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,213 @@ + + + + + + + + + + + + Accordion Component + + +

Where are these chairs assembled?

+ +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Accusantium dolor at sequi obcaecati cupiditate. Voluptates + repellendus cupiditate aperiam! Incidunt amet quo neque. +

Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+ Quasi accusamus corporis totam tempora suscipit ab obcaecati. +
Tempora, et atque officia at consequatur laborum!
Repudiandae praesentium illo voluptate in, atque enim.

How long do I have to return my chair?

+ +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Accusantium dolor at sequi obcaecati cupiditate. Voluptates + repellendus cupiditate aperiam! Incidunt amet quo neque. +

Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+ Quasi accusamus corporis totam tempora suscipit ab obcaecati. +
Tempora, et atque officia at consequatur laborum!
Repudiandae praesentium illo voluptate in, atque enim.

Do you ship to countries outside the EU?

+ +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Accusantium dolor at sequi obcaecati cupiditate. Voluptates + repellendus cupiditate aperiam! Incidunt amet quo neque. +

Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+ Quasi accusamus corporis totam tempora suscipit ab obcaecati. +
Tempora, et atque officia at consequatur laborum!
Repudiandae praesentium illo voluptate in, atque enim.

+ + diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..d00ebcaa2 --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,187 @@ + + + + + + + + + + + + Carousel Component + + +

+
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus + porro quisquam consequuntur numquam! Voluptas repellendus repudiandae + reiciendis rem sapiente dolores qui in facilis unde laudantium + tenetur, itaque, modi, dolore maiores!" +
+
Maria de Almeida
+
Senior Product Manager at EDP Comercial
+

+ + +

+ + + + +

+ + diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..4f6ba1284 --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,107 @@ + + + + + + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Chair	The Laid Back	The Worker Bee	The Chair 4/2
Width	80 cm	60 cm	220 cm
Height	100 cm	110 cm	90 cm
Depth	70 cm	65 cm	80 cm
Weight	16 kg	22 kg	80 kg

+ + diff --git a/starter/06-Components/04-pagination.html b/starter/06-Components/04-pagination.html new file mode 100644 index 000000000..3753e8d30 --- /dev/null +++ b/starter/06-Components/04-pagination.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + Pagination Component + + +

+ + +

+ ... +

+ + +

+ + diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..4bb54edbe --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,147 @@ + + + + + + + + + + + + Omifood Hero Section + + +

+ +

Some random heading

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quas, + minus beatae sapiente debitis voluptatum, laudantium veritatis impedit + corrupti officia recusandae fugit, voluptates iure velit! Ad suscipit + vitae nobis optio. Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Reiciendis sequi quam earum voluptas eum laboriosam at + cupiditate debitis in odio adipisci repudiandae enim ea, sint quos + similique! Debitis, facilis dolore? +

+ + diff --git a/starter/06-Components/component.html b/starter/06-Components/component.html new file mode 100644 index 000000000..44a131d4c --- /dev/null +++ b/starter/06-Components/component.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + Component + + + +