diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..62c893550 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ \ No newline at end of file diff --git a/notes.md b/notes.md new file mode 100644 index 000000000..76c668278 --- /dev/null +++ b/notes.md @@ -0,0 +1 @@ +# NOTES diff --git a/practice/01 - Overview/index.html b/practice/01 - Overview/index.html new file mode 100644 index 000000000..099a045ab --- /dev/null +++ b/practice/01 - Overview/index.html @@ -0,0 +1,14 @@ + + + + + + + First Html + + +

Hello, World!

+

My name is Ramesh, and this is my very first web page. 🤗

+ + \ No newline at end of file diff --git a/practice/02 - HTML Basics/blog.html b/practice/02 - HTML Basics/blog.html new file mode 100644 index 000000000..1631a14f9 --- /dev/null +++ b/practice/02 - HTML Basics/blog.html @@ -0,0 +1,14 @@ + + + + + + + Blog + + +

Blog

+Home + + \ No newline at end of file diff --git a/practice/02 - HTML Basics/challenge2.html b/practice/02 - HTML Basics/challenge2.html new file mode 100644 index 000000000..1fc990114 --- /dev/null +++ b/practice/02 - HTML Basics/challenge2.html @@ -0,0 +1,27 @@ + + + + + + + Challenge + + +
+

Converse Chuck Taylor All Star Low Top

+ challenge 2 +

$65.00

+

Free Shipping

+

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

+

More Information →

+

Product Details

+ + +
+ + \ No newline at end of file diff --git a/practice/02 - HTML Basics/index.html b/practice/02 - HTML Basics/index.html new file mode 100644 index 000000000..2447b1aef --- /dev/null +++ b/practice/02 - HTML Basics/index.html @@ -0,0 +1,96 @@ + + + + + The Basic Language of the Web + + + +
+

📘 The Code Magazine

+ +
+ +
+
+

The Basic Language of the Web: HTML

+ laura profile image +

Posted by Laura Jones on Monday, June 21st 2027

+ HTML Code on the 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!

+ +
+ + + + + + \ No newline at end of file diff --git a/practice/02 - HTML Basics/resource/challenges.jpg b/practice/02 - HTML Basics/resource/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/practice/02 - HTML Basics/resource/challenges.jpg differ diff --git a/practice/02 - HTML Basics/resource/content.txt b/practice/02 - HTML Basics/resource/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/practice/02 - HTML Basics/resource/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/practice/02 - HTML Basics/resource/laura-jones.jpg b/practice/02 - HTML Basics/resource/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/practice/02 - HTML Basics/resource/laura-jones.jpg differ diff --git a/practice/02 - HTML Basics/resource/post-img.jpg b/practice/02 - HTML Basics/resource/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/practice/02 - HTML Basics/resource/post-img.jpg differ diff --git a/practice/02 - HTML Basics/resource/related-1.jpg b/practice/02 - HTML Basics/resource/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/practice/02 - HTML Basics/resource/related-1.jpg differ diff --git a/practice/02 - HTML Basics/resource/related-2.jpg b/practice/02 - HTML Basics/resource/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/practice/02 - HTML Basics/resource/related-2.jpg differ diff --git a/practice/02 - HTML Basics/resource/related-3.jpg b/practice/02 - HTML Basics/resource/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/practice/02 - HTML Basics/resource/related-3.jpg differ diff --git a/practice/03 - CSS Basics/blog.html b/practice/03 - CSS Basics/blog.html new file mode 100644 index 000000000..6f2b9af3b --- /dev/null +++ b/practice/03 - CSS Basics/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/practice/03 - CSS Basics/challenge.html b/practice/03 - CSS Basics/challenge.html new file mode 100644 index 000000000..c71c69a20 --- /dev/null +++ b/practice/03 - CSS Basics/challenge.html @@ -0,0 +1,180 @@ + + + + + + + Challenge + + + +
+
+

Converse Chuck Taylor All Star Low Top

+ challenge 2 +

$65.00

+

Free Shipping

+

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

+ More Information → +
+
+
+
+
+
+
+
+

Product Details

+ + +
+
+ + \ No newline at end of file diff --git a/practice/03 - CSS Basics/content.txt b/practice/03 - CSS Basics/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/practice/03 - CSS Basics/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/practice/03 - CSS Basics/img/challenges.jpg b/practice/03 - CSS Basics/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/practice/03 - CSS Basics/img/challenges.jpg differ diff --git a/practice/03 - CSS Basics/img/laura-jones.jpg b/practice/03 - CSS Basics/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/practice/03 - CSS Basics/img/laura-jones.jpg differ diff --git a/practice/03 - CSS Basics/img/post-img.jpg b/practice/03 - CSS Basics/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/practice/03 - CSS Basics/img/post-img.jpg differ diff --git a/practice/03 - CSS Basics/img/related-1.jpg b/practice/03 - CSS Basics/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/practice/03 - CSS Basics/img/related-1.jpg differ diff --git a/practice/03 - CSS Basics/img/related-2.jpg b/practice/03 - CSS Basics/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/practice/03 - CSS Basics/img/related-2.jpg differ diff --git a/practice/03 - CSS Basics/img/related-3.jpg b/practice/03 - CSS Basics/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/practice/03 - CSS Basics/img/related-3.jpg differ diff --git a/practice/03 - CSS Basics/index.html b/practice/03 - CSS Basics/index.html new file mode 100644 index 000000000..ec9bd926e --- /dev/null +++ b/practice/03 - CSS Basics/index.html @@ -0,0 +1,151 @@ + + + + + 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 + +
+ +

+ 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/practice/03 - CSS Basics/style.css b/practice/03 - CSS Basics/style.css new file mode 100644 index 000000000..10f891890 --- /dev/null +++ b/practice/03 - CSS Basics/style.css @@ -0,0 +1,211 @@ +* { + /*border-top: 5px solid #1098ad;*/ + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + color: #444; + border-top: 5px solid #1098ad; + position: relative; +} + +.container { + width: 700px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /*padding: 20px; + padding-left: 40px; + padding-right: 40px;*/ + padding: 20px 40px; + margin-bottom: 60px; +} + +nav { + font-size: 18px; + text-align: center; +} + +article { + margin-bottom: 60px; +} + +.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: rgb(16, 152, 173); +} + +h1 { + font-size: 24px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 35px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +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-size: 18px; + font-style: italic; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +ul, ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /*color: red;*/ +} + +/* this is a misconception */ +article p:first-child { + color: red; +} + +/* styling link */ +a:link { + color: #1098ad; + text-decoration: none; + display: inline-block; + margin-right: 30px; + margin-top: 10px; +} + +nav a:link:last-child { + margin-right: 0; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-image { + width: 100%; + height: auto; +} + +/* LVHA */ + + +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{ + position: relative; +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; + color: #444; +} \ No newline at end of file diff --git a/practice/04 - CSS Layouts/blog.html b/practice/04 - CSS Layouts/blog.html new file mode 100644 index 000000000..3b9b6e328 --- /dev/null +++ b/practice/04 - CSS Layouts/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/practice/04 - CSS Layouts/challenge.css b/practice/04 - CSS Layouts/challenge.css new file mode 100644 index 000000000..a8523381b --- /dev/null +++ b/practice/04 - CSS Layouts/challenge.css @@ -0,0 +1,185 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +/* PRODUCT */ +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + position: relative; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.sale { + background-color: #ec2f2f; + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + padding: 7px 15px; + display: inline-block; + position: absolute; + top: -17px; + left: -38px; + + /* width: 40px; + text-align: center; */ +} + +.more-info:link, .more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, .more-info:active { + text-decoration: none; +} + +.product-colors { + display: flex; + gap: 10px; +} + +.color { + background-color: #000; + height: 22px; + width: 22px; +} + +.color-blue { + background-color: #2f6ee2; +} + +.color-red { + background-color: #ec2f2f; +} + +.color-yellow { + background-color: #f0bf1e; +} + +.color-green { + background-color: #90cc20; +} + +.color-brown { + background-color: #885214; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; + border-top: 4px solid black; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} + +.product-description { + margin-bottom: 10px; +} + +.product-img { + width: 250px; +} + +.product-info { + /* (825 - 8 - 250 - 2 * 40) / 2 */ + /* width: 243px;*/ + margin-top: 20px; + flex: 1; +} + +.product-details { + /*width: 243px;*/ + margin-top: 20px; + flex: 1; +} + +/*.clearfix::after { + content: ''; + display: block; + clear: both; +}*/ + +.container { + /*background-color: #94d82d;*/ + display: flex; + gap: 40px; +} + +.product-price { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; +} + +/* GRID Layout */ +.product { + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + grid-column: 1/-1; +} + +.add-cart { + grid-column: 1/-1; +} \ No newline at end of file diff --git a/practice/04 - CSS Layouts/challenge.html b/practice/04 - CSS Layouts/challenge.html new file mode 100644 index 000000000..42840f54e --- /dev/null +++ b/practice/04 - CSS Layouts/challenge.html @@ -0,0 +1,58 @@ + + + + + + + Challenge + + + +
+

Converse Chuck Taylor All Star Low Top

+ + + Chuck Taylor All Star Shoe + +
+
+

$65.00

+

Free shipping

+
+

Sale

+ +

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

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

Product details

+ +
+ + +
+ + \ No newline at end of file diff --git a/practice/04 - CSS Layouts/content.txt b/practice/04 - CSS Layouts/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/practice/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/practice/04 - CSS Layouts/css-grid.html b/practice/04 - CSS Layouts/css-grid.html new file mode 100644 index 000000000..c5077108b --- /dev/null +++ b/practice/04 - CSS Layouts/css-grid.html @@ -0,0 +1,131 @@ + + + + + + + + CSS Grid + + +
+
(1) HTML
+
(2) and
+
(3) CSS
+
(4) are
+
(5) amazing
+
(6) languages
+ +
(8) learn
+
+ +
+
(1)
+
(3)
+
(4)
+
(5)
+
(6)
+
(7)
+
+ + diff --git a/practice/04 - CSS Layouts/flexbox.html b/practice/04 - CSS Layouts/flexbox.html new file mode 100644 index 000000000..f13cead15 --- /dev/null +++ b/practice/04 - CSS Layouts/flexbox.html @@ -0,0 +1,98 @@ + + + + + + + Flexbox + + + +
+
HTML
+
and
+
CSS
+
are
+
amazing
+ + + +
+ + diff --git a/practice/04 - CSS Layouts/img/challenges.jpg b/practice/04 - CSS Layouts/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/practice/04 - CSS Layouts/img/challenges.jpg differ diff --git a/practice/04 - CSS Layouts/img/laura-jones.jpg b/practice/04 - CSS Layouts/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/practice/04 - CSS Layouts/img/laura-jones.jpg differ diff --git a/practice/04 - CSS Layouts/img/post-img.jpg b/practice/04 - CSS Layouts/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/practice/04 - CSS Layouts/img/post-img.jpg differ diff --git a/practice/04 - CSS Layouts/img/related-1.jpg b/practice/04 - CSS Layouts/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/practice/04 - CSS Layouts/img/related-1.jpg differ diff --git a/practice/04 - CSS Layouts/img/related-2.jpg b/practice/04 - CSS Layouts/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/practice/04 - CSS Layouts/img/related-2.jpg differ diff --git a/practice/04 - CSS Layouts/img/related-3.jpg b/practice/04 - CSS Layouts/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/practice/04 - CSS Layouts/img/related-3.jpg differ diff --git a/practice/04 - CSS Layouts/index.html b/practice/04 - CSS Layouts/index.html new file mode 100644 index 000000000..4f7ea8789 --- /dev/null +++ b/practice/04 - CSS Layouts/index.html @@ -0,0 +1,178 @@ + + + + + + + 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 + +
+ +

+ 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/practice/04 - CSS Layouts/style.css b/practice/04 - CSS Layouts/style.css new file mode 100644 index 000000000..2c5052d22 --- /dev/null +++ b/practice/04 - CSS Layouts/style.css @@ -0,0 +1,395 @@ +* { + /* 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; */ +} + +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: 50px 40px; +} + +/* 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-left: 50px; + margin-bottom: 20px; +} + +li { + 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; + margin-left: 0; +} + +body { + /* background-color: orangered; */ +} + +/* .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; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + + display: block; */ + + margin-right: 30px; + 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; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +.clearfix::after { + content: ""; + clear: both; + display: block; +} + +article { + float: left; + width: 825px; +} + +aside { + float: right; + width: 300px; +} + +footer { + clear: both; +} + */ + +/*FLEXBOX*/ +.main-header { + display: flex; + align-items: center; /* align items vertically */ + 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-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + margin-bottom: 5px; + display: block; +} + +/* FLEXBOX LAYOUT */ +/* +.row { + display: flex; + align-items: flex-start; + gap: 75px; + margin-bottom: 60px; +} + +aside { + flex: 0 0 300px; +} + +article { + flex: 1; + margin-bottom: 0; +}*/ + +/*CSS Grid Layout */ +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + grid-column: 1 / -1; +} + +article { + +} + +aside { +} + +footer { + grid-column: 1 / -1; +} \ No newline at end of file diff --git a/practice/05 - Design/chair-1.jpg b/practice/05 - Design/chair-1.jpg new file mode 100644 index 000000000..3100aa168 Binary files /dev/null and b/practice/05 - Design/chair-1.jpg differ diff --git a/practice/05 - Design/chair-2.jpg b/practice/05 - Design/chair-2.jpg new file mode 100644 index 000000000..33c8d854c Binary files /dev/null and b/practice/05 - Design/chair-2.jpg differ diff --git a/practice/05 - Design/chair-3.jpg b/practice/05 - Design/chair-3.jpg new file mode 100644 index 000000000..f57fcf10e Binary files /dev/null and b/practice/05 - Design/chair-3.jpg differ diff --git a/practice/05 - Design/customers.jpg b/practice/05 - Design/customers.jpg new file mode 100644 index 000000000..2d1d4f851 Binary files /dev/null and b/practice/05 - Design/customers.jpg differ diff --git a/practice/05 - Design/hero.jpg b/practice/05 - Design/hero.jpg new file mode 100644 index 000000000..5532819b1 Binary files /dev/null and b/practice/05 - Design/hero.jpg differ diff --git a/practice/05 - Design/index.html b/practice/05 - Design/index.html new file mode 100644 index 000000000..c3ac67ce7 --- /dev/null +++ b/practice/05 - Design/index.html @@ -0,0 +1,209 @@ + + + + + + + + + + + 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/practice/05 - Design/style.css b/practice/05 - Design/style.css new file mode 100644 index 000000000..7c8b05669 --- /dev/null +++ b/practice/05 - Design/style.css @@ -0,0 +1,219 @@ +/* +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 +GREY COLOR: #343a40 +*/ + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: 'Inter', sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; +} + +.container { + width: 960px; + margin: 0 auto; +} + +header, +section { + margin-bottom: 96px; +} + +h2 { + margin-bottom: 48px; + /*24 / 30 / 36*/ + 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: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + display: inline-block; + font-weight: 500; + border-radius: 100px; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +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; /* 44 / 52 / 62 */ + line-height: 1.1; + letter-spacing: -1px; + /*text-shadow: 0 5px 3px rgba(0, 0, 0, 0.07);*/ +} + +.header-text { + margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; +} + +img { + width: 100%; +} + +/* FEATURES */ +.features-icon { + stroke: #087f5b; + height: 32px; + 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: 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; + height: 24px; + width: 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/practice/06 - Components/01-accordion.html b/practice/06 - Components/01-accordion.html new file mode 100644 index 000000000..b41983cab --- /dev/null +++ b/practice/06 - Components/01-accordion.html @@ -0,0 +1,166 @@ + + + + + + + Accordion Component + + + + +
+
+

01

+

Where was this chair assembled?

+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis delectus dolore eaque eius impedit + ipsum + iste libero molestiae molestias necessitatibus nemo non nostrum, quaerat quibusdam quo vel velit, vitae? +

+
    +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
    • +
  • Aperiam, consequatur delectus dicta dolores enim facere magnam.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • +
  • Impedit libero nihil omnis quasi vel. +
    • +
+
+
+
+

02

+

How long do I Have to return my chair?

+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis delectus dolore eaque eius impedit + ipsum + iste libero molestiae molestias necessitatibus nemo non nostrum, quaerat quibusdam quo vel velit, vitae? +

+
    +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
    • +
  • Aperiam, consequatur delectus dicta dolores enim facere magnam.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • +
  • Impedit libero nihil omnis quasi vel. +
    • +
+
+
+
+

03

+

Do you ship to countries outside the IN?

+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis delectus dolore eaque eius impedit + ipsum + iste libero molestiae molestias necessitatibus nemo non nostrum, quaerat quibusdam quo vel velit, vitae? +

+
    +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
    • +
  • Aperiam, consequatur delectus dicta dolores enim facere magnam.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • +
  • Impedit libero nihil omnis quasi vel. +
    • +
+
+
+
+ + \ No newline at end of file diff --git a/practice/06 - Components/02-carousel.html b/practice/06 - Components/02-carousel.html new file mode 100644 index 000000000..92b3f5d19 --- /dev/null +++ b/practice/06 - Components/02-carousel.html @@ -0,0 +1,150 @@ + + + + + + + Carousel Component + + + + +
+ Maria de Almeida +
+

+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cumque laudantium molestias nemo quod recusandae + similique vel! Assumenda debitis laborum voluptate voluptatem! Consequatur est nam non saepe sit. Iure, officia?" +

+

Maria de Almeida

+

Senior Product Manager at EDP Comercial

+
+ + +
+ + + + +
+
+ + \ No newline at end of file diff --git a/practice/06 - Components/03-table.html b/practice/06 - Components/03-table.html new file mode 100644 index 000000000..6ea33b2e5 --- /dev/null +++ b/practice/06 - Components/03-table.html @@ -0,0 +1,99 @@ + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ChairThe Laid BackThe Worker BeeThe Chair 4/2
Width80 cm60 cm220 cm
Height100 cm110 cm90 cm
Depth70 cm65 cm80 cm
Weight16 kg22 kg80 kg
+ + \ No newline at end of file diff --git a/practice/06 - Components/04-pagination.html b/practice/06 - Components/04-pagination.html new file mode 100644 index 000000000..6a3d348c9 --- /dev/null +++ b/practice/06 - Components/04-pagination.html @@ -0,0 +1,107 @@ + + + + + + + Pagination Component + + + + + + + + + \ No newline at end of file diff --git a/practice/06 - Components/05-hero.html b/practice/06 - Components/05-hero.html new file mode 100644 index 000000000..a2a18dcda --- /dev/null +++ b/practice/06 - Components/05-hero.html @@ -0,0 +1,125 @@ + + + + + + + Omifood Hero Component + + + + + + +
+ +
+
+

A healthy meal delivered to your door, every single day

+

The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal + tastes and nutritional needs.

+ Start eating well +
+
+
+
+
+

Some random heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis doloremque harum magnam non quidem rerum velit + veniam voluptatum. Atque dolor ea est incidunt molestias rerum temporibus? Animi doloremque nulla totam! Lorem + ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga incidunt laborum nisi nostrum velit? Assumenda + autem corporis deleniti doloribus earum eligendi eos excepturi ipsam natus nobis, numquam, quae, quasi! +

+
+
+ + \ No newline at end of file diff --git a/practice/06 - Components/06-app-layout.html b/practice/06 - Components/06-app-layout.html new file mode 100644 index 000000000..a15ee5dce --- /dev/null +++ b/practice/06 - Components/06-app-layout.html @@ -0,0 +1,117 @@ + + + + + + + Application Layout + + + + + + + + + + + +
+
Email 1
+
Email 2
+
Email 3
+
Email 4
+
Email 5
+
Email 6
+
Email 7
+
Email 8
+
Email 9
+
Email 10
+
+
Email view
+ + + \ No newline at end of file diff --git a/practice/06 - Components/hero.jpg b/practice/06 - Components/hero.jpg new file mode 100644 index 000000000..26f1847c8 Binary files /dev/null and b/practice/06 - Components/hero.jpg differ diff --git a/practice/06 - Components/maria.jpg b/practice/06 - Components/maria.jpg new file mode 100644 index 000000000..33fe230b9 Binary files /dev/null and b/practice/06 - Components/maria.jpg differ diff --git a/practice/07 - Omnifood-Desktop/content.md b/practice/07 - Omnifood-Desktop/content.md new file mode 100644 index 000000000..7193e017f --- /dev/null +++ b/practice/07 - Omnifood-Desktop/content.md @@ -0,0 +1,128 @@ +# Omnifood + +## About Omnifood + +We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. + +## Branding + +Headline: A healthy meal delivered to your door, every single day + +Brand color: #e67e22 + +## Omnifood Website Content + +### Summary + +The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year! + +### Omnifood features + +Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. +Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. +No waste: All our partners only use reusable containers to package all your meals. +Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. + +### How Omnifood works + +[Show big app images] + +**Your daily dose of health in 3 simple steps** + +Tell us what you like (and what not): Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no matter what diet you follow! + +Approve your weekly meal plan: Once per week, approve the meal plan generated for you by Omnifood AI. You can change ingredients, swap entire meals, or even add your own recipes. + +Receive meals at convenient time: Best chefs in town will cook your selected meal every day, and we will deliver it to your door whenever works best for you. You can change delivery schedule and address daily! + +### Omnifood works with any diet + +Vegetarian +Vegan +Pescatarian +Gluten-free +Lactose-free +Keto +Paleo +Low FODMAP +Kid-friendly + +### Sample meals + +**Omnifood AI chooses from 5,000+ recipes** + +Meal 1: Japanese Gyozas + +- Category: Vegetarian +- Calories: 650 +- NutriScore (Registered): 74 +- Average rating: 4.9 +- Number reviews: 537 + +Meal 2: Avocado Salad + +- Category: Vegan and Paleo +- Calories: 400 +- NutriScore (Registered): 92 +- Average rating: 4.8 +- Number reviews: 441 + +### We offer a free sample meal + +[Create simple form for users to sign up] + +Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us! + +### We have 2 pricing plans + +Prices include all applicable taxes. Users can cancel at any time. + +Starter: $399 per month + +- 1 meal per day +- Order times are between 11am and 9pm +- Delivery is free + +Complete: $649 per month + +- 2 meal2 per day +- Order 24/7 +- Delivery is free +- Get access to latest recipes + +### Photo gallery + +[Use the 12 photos we provided] + +### Customer testimonials + +[Photos of customers included] + +Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) +The AI algorithm is crazy good, it chooses the right meals for me every time. It's amazing not to worry about food anymore! (Ben Hadley) +Omnifood is a life saver! I just started a company, so there's no time for cooking. I couldn't live without my daily meals now! (Steve Miller) +I got Omnifood for the whole family, and it frees up so much time! Plus, everything is organic and vegan and without plastic. (Hannah Smith) + +### Section with logos of featured publications [see images] + +### Contact information + +Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 +Phone: 415-201-6370 +Email: hello@omnifood.com + +Social profiles: instagram, facebook, twitter [links to them not available yet] + +### Additional links [links not available yet] + +Create account +Sign in +iOS app +Android app +About Omnifood +For Business +Cooking partners +Careers +Recipe directory +Help center +Privacy & terms diff --git a/practice/07 - Omnifood-Desktop/css/general.css b/practice/07 - Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..53910f6f5 --- /dev/null +++ b/practice/07 - Omnifood-Desktop/css/general.css @@ -0,0 +1,159 @@ +/* + -- 01 TYPOGRAPHY + + - FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + - Font Weight: + Default: 400 + Medium 500 + Semi Bold 600 + Bold 700 + + - Line Heights: + Defaults: 1 + Small: 1.05 + medium: 1.2 + Paragraph Default: 1.6 + - letter spacing + -0.5px + 0.75px + + -- 02 COLORS + + - Primary: #e67e22 + - Tints: + #fdf2e9 + #fae5d3 + - Shades: #cf711f + - Accents: + - Greys: + #555 + #333 + + -- 05 SHADOWS + + -- 06 BORDER RADIUS + + Default: 9px + + -- 07 WHITESPACE + + - SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + */ + +/**************************************/ +/* GENERAL REUSABLE COMPONENTS */ +/**************************************/ +.container { + max-width: 120rem; + margin: 0 auto; + padding: 0 3.2rem; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; +} + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn:link, +.btn:visited { + display: inline-block; + + color: #fff; + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + transition: background-color 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + /*border: 3px solid #fff;*/ + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} + +.margin-right-sm { + margin-right: 1.6rem !important; +} \ No newline at end of file diff --git a/practice/07 - Omnifood-Desktop/css/style.css b/practice/07 - Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..d5e08f330 --- /dev/null +++ b/practice/07 - Omnifood-Desktop/css/style.css @@ -0,0 +1,200 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-family: 'Rubik', sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + + +/**************************************/ +/* HEADER */ +/**************************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* Because we want to make it sticky */ + height: 9.6rem; + padding: 0 4.8rem; +} + +.logo { + height: 2.2rem; +} + +/**************************************/ +/* NAVIGATION */ +/**************************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 3.2rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/**************************************/ +/* HERO SECTION */ +/**************************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 0; +} + +.delivered-meals p span { + color: #cf711f; + font-weight: 700; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +/**************************************/ +/* SECTION HOW IT WORKS */ +/**************************************/ +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.step-img-box::before, +.step-img-box::after { + content: ''; + display: block; + + border-radius: 50%; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + + /*height: 60%;*/ + + /* 60% of parent width */ + padding-bottom: 60%; + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + z-index: -1; +} + +.step-img { + width: 35%; +} \ No newline at end of file diff --git a/practice/07 - Omnifood-Desktop/img/app/app-screen-1.png b/practice/07 - Omnifood-Desktop/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/app/app-screen-1.png differ diff --git a/practice/07 - Omnifood-Desktop/img/app/app-screen-2.png b/practice/07 - Omnifood-Desktop/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/app/app-screen-2.png differ diff --git a/practice/07 - Omnifood-Desktop/img/app/app-screen-3.png b/practice/07 - Omnifood-Desktop/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/app/app-screen-3.png differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/ben.jpg b/practice/07 - Omnifood-Desktop/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/ben.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/customer-1.jpg b/practice/07 - Omnifood-Desktop/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/customer-1.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/customer-2.jpg b/practice/07 - Omnifood-Desktop/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/customer-2.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/customer-3.jpg b/practice/07 - Omnifood-Desktop/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/customer-3.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/customer-4.jpg b/practice/07 - Omnifood-Desktop/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/customer-4.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/customer-5.jpg b/practice/07 - Omnifood-Desktop/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/customer-5.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/customer-6.jpg b/practice/07 - Omnifood-Desktop/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/customer-6.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/dave.jpg b/practice/07 - Omnifood-Desktop/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/dave.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/hannah.jpg b/practice/07 - Omnifood-Desktop/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/hannah.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/customers/steve.jpg b/practice/07 - Omnifood-Desktop/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/customers/steve.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/eating.jpg b/practice/07 - Omnifood-Desktop/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/eating.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/favicon.png b/practice/07 - Omnifood-Desktop/img/favicon.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/favicon.png differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-1.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-1.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-10.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-10.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-11.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-11.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-12.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-12.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-2.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-2.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-3.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-3.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-4.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-4.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-5.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-5.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-6.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-6.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-7.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-7.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-8.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-8.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/gallery/gallery-9.jpg b/practice/07 - Omnifood-Desktop/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/gallery/gallery-9.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/hero.png b/practice/07 - Omnifood-Desktop/img/hero.png new file mode 100644 index 000000000..7bd8ca857 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/hero.png differ diff --git a/practice/07 - Omnifood-Desktop/img/logos/business-insider.png b/practice/07 - Omnifood-Desktop/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/logos/business-insider.png differ diff --git a/practice/07 - Omnifood-Desktop/img/logos/forbes.png b/practice/07 - Omnifood-Desktop/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/logos/forbes.png differ diff --git a/practice/07 - Omnifood-Desktop/img/logos/techcrunch.png b/practice/07 - Omnifood-Desktop/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/logos/techcrunch.png differ diff --git a/practice/07 - Omnifood-Desktop/img/logos/the-new-york-times.png b/practice/07 - Omnifood-Desktop/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/logos/the-new-york-times.png differ diff --git a/practice/07 - Omnifood-Desktop/img/logos/usa-today.png b/practice/07 - Omnifood-Desktop/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/logos/usa-today.png differ diff --git a/practice/07 - Omnifood-Desktop/img/meals/meal-1.jpg b/practice/07 - Omnifood-Desktop/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/meals/meal-1.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/meals/meal-2.jpg b/practice/07 - Omnifood-Desktop/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/meals/meal-2.jpg differ diff --git a/practice/07 - Omnifood-Desktop/img/omnifood-logo.png b/practice/07 - Omnifood-Desktop/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/practice/07 - Omnifood-Desktop/img/omnifood-logo.png differ diff --git a/practice/07 - Omnifood-Desktop/index.html b/practice/07 - Omnifood-Desktop/index.html new file mode 100644 index 000000000..2a2d80139 --- /dev/null +++ b/practice/07 - Omnifood-Desktop/index.html @@ -0,0 +1,110 @@ + + + + + + + Omnifood + + + + + + + +
+ + +
+
+
+
+
+

A healthy meal delivered to your door, every single day

+

+ The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal + tastes and nutritional needs. We have delivered 250,000+ meals last year! +

+ Start Eating Well + Learn More ↓ +
+
+ customer1 + customer2 + customer3 + customer4 + customer5 + customer6 +
+

250,000+ meals delivered last year!

+
+
+
+ Woman enjoying food, meask in storage container, and food bowls on a table +
+
+
+ +
+
+ How it works +

Your daily dose of health in 3 simple steps

+
+ +
+ +
+

01

+

Tell us what you like (and what not)

+
+ Never again waste time thinking about what to eat! Omnifood AI will create a + 100% personalized weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you + need, no + matter what diet you follow! +
+
+
+ iPhone app preferences +
+ + +
+ iPhone app meal approving plan +
+
+

02

+

Approve your weekly meal plan

+
+ Once per week, approve the meal plan generated for you by Omnifood AI. You can change ingredients, swap entire + meals, or even add your own recipes. +
+
+ + +
+

03

+

Receive meals at convenient time

+
+ Best chefs in town will cook your selected meal every day, and we will deliver it to your door whenever works + best for you. You can change delivery schedule and address daily! +
+
+
+ iPhone app delivery screen +
+
+
+
+ + \ No newline at end of file