diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..23c6b3d0e --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

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..6e5aa89bb --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,156 @@ + + + + + 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 + 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/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css new file mode 100644 index 000000000..18aecb4b6 --- /dev/null +++ b/starter/02-HTML-Fundamentals/style.css @@ -0,0 +1,238 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; +} + +.container { + width: 900px; + /* margin: 0 auto;*/ + margin-left: auto; + margin-right: auto; + position: relative; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +nav { + font-size: 18px; + /* text-align: center; */ +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + /* padding-top: 50px; + padding-bottom: 50px; */ + padding: 50px 0; + width: 500px; +} + +/* SMALLER ELEMENTS */ +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 { + display: inline; + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + display: inline; + font-size: 20px; + margin-bottom: 10px; + /* display: inline; */ +} + +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; +} */ + +.related { + list-style: none; +} + +/* .first-li { + font-weight: bold; +} */ + +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: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.post-img { + width: 100%; + height: auto; +} + +.navigation { + text-align: center; +} + +.navigation a:link { + margin: 20px; + background-color: #f7f7f7; + padding: 10px; + display: inline-block; + margin: 20px; +} + +.like { + width: 50px; + height: 50px; + padding: 10px; + position: absolute; + top: 20px; + right: 40px; + border-radius: 10px; +} + +/*Pseudo Elements with :: Pseudo Class with :*/ + +h1::first-letter { + font-style: normal; + margin-right: 10px; +} + +a::first-line { + background-color: orangered; +} + +h3 + p::first-line { + color: white; + background-color: black; + font-size: 10px; +} + +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: black; + position: absolute; + top: -20px; + right: -10px; + display: inline-block; + padding: 8px; + font-weight: bold; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..b997cea9b 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,7 @@ + The Basic Language of the Web: HTML @@ -14,133 +15,141 @@

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..96eb2502c --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,287 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +.main-header h1 { + float: left; +} + +nav { + font-size: 18px; + float: right; + /* text-align: center; */ +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + /* padding-top: 50px; + padding-bottom: 50px; */ + padding: 50px 0; + width: 500px; +} + +/* SMALLER ELEMENTS */ +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-bottom: 20px; + list-style: none; +} + +li { + font-size: 20px; + margin-bottom: 10px; + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0; +} + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} +.related { + list-style: none; +} +/* +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: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.post-img { + 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; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::before { + 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; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ + +/*FLOATS*/ + +.author-img { + float: left; +} + +.author { + float: left; + margin: 20px 20px; +} + +.clearfix::after { + /*after ile last-child , before ile container içerisine first child olarak eklenir*/ + clear: both; + content: ""; + display: block; +} + +article { + float: left; + width: 870px; +} + +aside { + float: right; + width: 300px; + margin: 0; + padding: 20px 30px; + box-sizing: border-box; +} + +footer { + clear: both; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..1bce84950 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -37,22 +37,46 @@ font-family: sans-serif; background-color: #ddd; font-size: 40px; - margin: 40px; - - /* CSS GRID */ + /* grid-template-columns: 1fr 1fr 1fr; */ + /* grid-template-columns: repeat(3, 1fr); */ + grid-template-columns: repeat(3, 1fr); + /* grid-template-rows: 250px 100px 200px 50px; */ + /* grid-template-rows: 1fr 2fr; */ + grid-template-rows: repeat(4, 1fr); + /* gap: 10px; */ + column-gap: 20px; + row-gap: 20px; + height: 500px; + width: 700px; + display: none; } .container--2 { - /* STARTER */ font-family: sans-serif; background-color: black; font-size: 40px; - margin: 100px; - - width: 1000px; + margin: 40px; + width: 700px; height: 600px; + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + + align-content: center; + justify-content: end; - /* CSS GRID */ + align-items: center; + justify-items: start; + } + + .el--3 { + align-self: end; + justify-self: end; + } + + .el--6 { + justify-self: start; + align-self: flex-start; } diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..185d919b7 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -6,8 +6,17 @@ Flexbox diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..e6c832e9f 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -9,12 +9,12 @@

@@ -25,25 +25,26 @@

📘 The Code Magazine

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

The Basic Language of the Web: HTML

- -

+ Posted by Laura Jones on Monday, June 21st 2027 +

- Posted by Laura Jones on Monday, June 21st 2027 -

The Basic Language of the Web: HTML

Why should you learn HTML?

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

- diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..fad06166c 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -14,7 +14,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -82,6 +82,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 40px; } p { @@ -92,13 +93,13 @@ p { ul, ol { - margin-left: 50px; + padding: 10px; margin-bottom: 20px; } li { font-size: 20px; - margin-bottom: 10px; + margin-bottom: 20px; /* display: inline; */ } @@ -265,3 +266,83 @@ footer p { nav p { font-size: 18px; } */ + +#author { + margin-bottom: 0; +} + +.author-box { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 10px; +} + +nav a:link { + margin-top: 0; +} + +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +aside .related-post { + display: flex; + display: flex; + align-items: center; + gap: 10px; +} + +.related-info a:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + display: block; + margin-bottom: 5px; +} + +.related-info p { + margin-bottom: 0; + font-weight: normal; + font-size: 14px; + font-style: italic; +} + +/* .row { + display: flex; + gap: 75px; + align-items: flex-start; +} + +.row article { + flex-basis: 825px; + flex-shrink: 0; +} + +.row aside { + flex: 1; +} */ + +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; +} + +.main-header { + /* grid-column: 1/-1; */ + /* grid-column: 1/3; */ + grid-column: 1 / span 2; + justify-content: center; + justify-items: center; +} + +aside { + align-self: flex-start; +} + +aside li { + margin: 20px 20px; +} diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..f9dbf2334 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,75 @@

Our bestselling chairs

The Laid Back

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

@@ -106,15 +215,71 @@

The Laid Back

The Worker Bee

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

@@ -131,15 +296,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..e39ad5023 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -13,10 +13,17 @@ FONT SIZE SYSTEM (px) } /* ------------------------ */ -/* GENERAL STYLES */ +/* GENERAL STYLES + color:#343a40 ; + main-color:#087f5b + +*/ + /* ------------------------ */ body { - font-family: sans-serif; + font-family: "Inter", sans-serif; /*google font üzerinde Inter yükleyemezse default sans-serif fontlarıyla ekrana getirir*/ + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +33,13 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 80px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -48,7 +57,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,30 +65,64 @@ header { } h1 { - margin-bottom: 24px; + /*Büyük beşlıklarda font küçültülüp letter spacing azaltılabilir*/ + margin-bottom: 32px; + font-size: 46px; + line-height: 1.1; + letter-spacing: -1px; + /* text-shadow: 20px 20px 2px rgba(0, 0, 0, 0.07); */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } img { width: 100%; + border-radius: 12px; +} + +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + display: inline-block; + border-radius: 100px; +} +/*btn pseudo class order is link, visited, hover, active*/ +.btn:hover, +.btn:active { + background-color: #099268; } /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 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: 25px; + border-radius: 12px; } .testimonial-box { @@ -89,16 +132,34 @@ 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; } /* CHAIRS */ +.chair { + box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} + .chair-box { - padding: 24px; + padding: 32px; } h3 { @@ -107,14 +168,14 @@ h3 { .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 +183,31 @@ h3 { } .chair-icon { + stroke: #087f5b; + /* fill: blue; */ + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + font-size: 20px; + align-items: center; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; } 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..5586d6c60 --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,232 @@ + + + + + + + Accordion Component + + + +

Where are these chairs assembled?

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, + veniam. Atque omnis quae odio animi maiores corporis commodi + placeat, nisi voluptatibus perspiciatis blanditiis cupiditate, + beatae sit optio recusandae quod. Ducimus. +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +

How long do I return my chair?

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +

Do you ship to countries outside the EU?

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores similique facilis ut. +

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

+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum + adipisci assumenda ad quae ea! Dolor eum asperiores molestiae + veritatis? Tempora eligendi nobis doloremque possimus est totam + deserunt ea facere quo? +
+
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..6453eb824 --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,99 @@ + + + + + + + Carousel Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Chair	The Laid Back	The Worker Bee	The Chair 421
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/app-layout.html b/starter/06-Components/app-layout.html new file mode 100644 index 000000000..98515ddc6 --- /dev/null +++ b/starter/06-Components/app-layout.html @@ -0,0 +1,161 @@ + + + + + + App Layout + + + + +

Nav

+ +

+ Email 1 + Email 2 + Email 3 + Email 4 + Email 5 + Email 6 + Email 7 + Email 8 + Email 9 + Email 10 + Email 11 +

Email view

Additional Info

+ + diff --git a/starter/06-Components/app-layout2.html b/starter/06-Components/app-layout2.html new file mode 100644 index 000000000..e11a41bc5 --- /dev/null +++ b/starter/06-Components/app-layout2.html @@ -0,0 +1,126 @@ + + + + + + App Layout + + + + + + + + + + + + +

Email 1

Email 2

Email 3

Email 4

Email 5

Email 6

Email 7

Email 8

Email 9

Email 10

Email view

+ + + diff --git a/starter/06-Components/component.html b/starter/06-Components/component.html new file mode 100644 index 000000000..cd840adc3 --- /dev/null +++ b/starter/06-Components/component.html @@ -0,0 +1,34 @@ + + + + + + + Carousel Component + + + + diff --git a/starter/06-Components/hero.html b/starter/06-Components/hero.html new file mode 100644 index 000000000..afcc1df8f --- /dev/null +++ b/starter/06-Components/hero.html @@ -0,0 +1,136 @@ + + + + + + + + + Hero Component + + + +

+ +

Some random heading

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro rerum + consequuntur officiis nostrum neque, eius praesentium doloremque + tempore odio. Exercitationem esse perspiciatis impedit fuga soluta. + Animi minima consectetur sit possimus voluptates nihil eveniet + voluptate. Porro similique cumque ad dolor tempora. +

+ + diff --git a/starter/06-Components/pagination.html b/starter/06-Components/pagination.html new file mode 100644 index 000000000..9edfd4129 --- /dev/null +++ b/starter/06-Components/pagination.html @@ -0,0 +1,150 @@ + + + + + + + Carousel Component + + + +

+ + 1 + 2 + 3 + 4 + 5 + 6 + ... + 12 + +

+ +