diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..e43b0f988 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/README.md b/README.md index 88e3430a5..0c3e064f6 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,16 @@ -# Course Material and FAQ for "Build Responsive Real-World Websites with HTML and CSS" +# FrontendWorks: Build Responsive Websites with HTML and CSS. -This repo contains starter files and final code for all sections and projects contained in the course. +## What is it? +A repo containing my progress for a course on Jonas Schmedtmann. +Final folder includes the goal or end product. +Start folder includes my work and progress. I don't always complete the web page as instructed. I add my own twist to the content, structure and style. -Use starter code to start each section, and **final code to compare it with your own code whenever something doesn't work**! +## Where is the Link +FrontendWorks: Build Responsive Websites with HTML and CSS -👇 **_Please read the following Frequently Asked Questions (FAQ) carefully before starting the course_** 👇 -## FAQ +Questions, concerns, emotional outbursts? Reach out! +- Twitter: @iamserda +- LinkedIn: iamserda -### Q1: How do I download the files? - -**A:** If you're new to GitHub and just want to download the entire code, hit the green button saying "Code", and then choose the "Download ZIP" option. If you can't see the button (on mobile), use [this link](https://github.com/jonasschmedtmann/html-css-course/archive/master.zip) instead. - -### Q2: I'm stuck! Where do I get help? - -**A:** Have you actually tried to fix the problem on your own? Have you compared your code to the final code? If you failed fixing your problem, please **post a detailed description of the problem to the Q&A area of that video over at Udemy**, along with a [codepen](https://codepen.io/pen/) containing your code. You will get help there. - -### Q3: What VSCode theme are you using? What about extensions and settings? - -**A:** I use [One Monokai](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai) in this course. [Here is the complete VS Code setup for this course](vscode-setup.md). - -### Q4: Can I see the final version of the Omnifood project? - -**A:** Sure! Here you go: [Omnifood](https://www.omnifood.dev). - -### Q5: Where can I find the coding challenge solutions? - -**A:** They are all on codepen, in [this collection](https://codepen.io/collection/7b5e288cb64df1ecc5da8d7a0e78c007?grid_type=list). - -### Q6: Where is the resources page you keep mentioning? - -**A:** It's on my website at . You can subscribe for updates 😉 - -### Q7: Videos don't load, can you fix it? - -**A:** Unfortunately, there is nothing I can do about it. The course is hosted on Udemy, and sometimes they have technical issues like this. Please just come back a bit later or [contact their support team](https://support.udemy.com/hc/en-us). - -### Q8: Videos are blurred / have low quality, can you fix it? - -**A:** Please open video settings and change the quality from 'Auto' to another value, for example 720p. If that doesn't help, please [contact the Udemy support team](https://support.udemy.com/hc/en-us). - -### Q9: I want to put these projects in my portfolio. Is that allowed? - -**A:** Absolutely! Just make sure you actually built them yourself by following the course, and that you understand what you did. What is **not allowed** is that you create your own course/videos/articles based on this course's content! - -### Q10: I love your courses and want to get updates on new courses. How? - -**A:** First, you can subscribe to my email list [at my website](http://codingheroes.io/resources). Plus, I make important announcements on twitter [@jonasschmedtman](https://twitter.com/jonasschmedtman), so you should definitely follow me there 🔥 - -### Q11: How do I get my certificate of completion? - -**A:** A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the "Your progress" indicator in the top right-hand corner of the course page. If you want to change your name on the certificate, please [contact the Udemy support team](https://support.udemy.com/hc/en-us). - -### Q12: Can you add subtitles in my language? - -**A:** No. I provide professional English captions, but Udemy is responsible for subtitles in all other languages (automatic translations). So please [contact the Udemy support team](https://support.udemy.com/hc/en-us) to request your own language. - -### Q13: Do you accept pull requests? - -**A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. However, please feel free to add an issue if you found one. +Made with ❤️ in Inwood, NYC. Circa 2021. @iamserda diff --git a/starter/.vscode/settings.json b/starter/.vscode/settings.json new file mode 100644 index 000000000..6995d218a --- /dev/null +++ b/starter/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "search.useGlobalIgnoreFiles": true, + "git.ignoredRepositories": [ + ".DS_Store", + "*/.DS_Store", + ".vscode" + ], + "gitProjectManager.ignoredFolders": [ + + + ] +} \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/blog/index.html b/starter/02-HTML-Fundamentals/blog/index.html new file mode 100755 index 000000000..0fc455937 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog/index.html @@ -0,0 +1,20 @@ + + + + + + + + Blog + + + + +

Blog

Home
Challenges

+ + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/challenges.jpg b/starter/02-HTML-Fundamentals/challenges/challenges.jpg old mode 100644 new mode 100755 similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to starter/02-HTML-Fundamentals/challenges/challenges.jpg diff --git a/starter/02-HTML-Fundamentals/challenges/index.css b/starter/02-HTML-Fundamentals/challenges/index.css new file mode 100755 index 000000000..d1d8a2942 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenges/index.css @@ -0,0 +1,242 @@ +html { + min-height: 100vh; +} + +html, +body { + min-height: 100%; +} + +main { + height: 100%; + margin: auto; +} + +footer { + margin-top: auto; +} + +.component * { + color: black; +} + +.component { + position: relative; + background-color: white; + color: black; + border: 5px solid black; + padding: 1em 1em 2em; + width: 80%; + margin: 1em auto; +} + +.component h1 { + color: black; + margin: 0 auto 1em; + text-align: center; + font-size: 2rem; +} + +h2 { + font-size: 1em; +} + +.component button { + position: absolute; + bottom: 0; + left: 0; + border: none; + padding: 0.5em 1em; + background-color: black; + color: white; + font-size: 1rem; + font-weight: bold; +} + +.component a:link { + color: black; + padding: 0.125em 0.25em; +} + +.component a:visited { + color: grey; +} + +.component a:hover { + background-color: black; + color: white; +} + +.component a:active { + background-color: blue; + color: white; +} + +#component2 button, +#component3 button { + width: 100%; + padding: 0.5em; + font-size: 1.25rem; + border-top: 5px solid black; + clear: both; +} + +#component2 button:hover, +#component3 button:hover { + background-color: white; + color: black; +} + +.product-image { + width: 100%; + max-width: 300px; + height: auto; + padding-right: 1em; + float: left; + margin-left: auto; +} + +.product-description { + width: 40%; + float: left; + margin-right: auto; +} + +div.product3 { + display: flex; + width: 100%; + float: none; + flex-flow: row nowrap; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +.pricing p { + margin-top: 0; +} + +.component3 { + position: relative; + padding: 1em 0.75em 2em; +} + +.component3::after, +.component4::after { + content: "SALE"; + background: red; + color: white; + text-transform: uppercase; + position: absolute; + top: -20px; + left: -40px; + padding: 0.75em 2em; + font-size: 0.8rem; + font-weight: bold; + letter-spacing: 3px; +} + +.component h1 { + width: 80%; + margin: 0 auto; + padding: 0.5em; + font-size: 1.5rem; +} + +.component3 .image-color-container { + width: 30%; + min-width: 300px; + margin: 1em 0 2em; +} + +.component3 .pricing { + width: 30%; + align-self: baseline; +} + +.component3 .description { + width: 30%; + align-self: baseline; +} + +.box-container { + margin-top: 2em; + width: 100%; + max-width: 300px; + justify-content: space-evenly; +} + +.box { + width: 25px; + height: 25px; + background-color: rgb(14, 14, 14); +} + +.blue-box { + background-color: rgb(0, 89, 255) +} + +.red-box { + background-color: rgb(255, 44, 44) +} + +.yellow-box { + background-color: rgb(255, 238, 0); +} + +.green-box { + background-color: rgb(73, 153, 73); +} + +.brown-box { + background-color: rgb(107, 67, 49); +} + +.component4 { + display: grid; + grid-template-columns: 1rem 1fr 1rem; + grid-template-rows: 4rem 1fr 3rem; + padding: 0; + gap: 1rem; +} + +.component4 h1 { + grid-column: 1 / -1; +} + +.product4 { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + padding: 0; + gap: 1rem; + grid-column: 2 / 3; + grid-row: 2 / 3; +} + +.product4 .image-color { + display: block; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +.product4-image { + max-width: 100%; +} + +button.button4 { + width: 100%; + grid-column: 1 / -1; + grid-row: 6 / 7; + border-top: 5px solid black; + padding: 0.5em; + font-size: 1.25rem; +} + +button.button4:hover { + background-color: white; + color: black; +} \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/challenges/index.html b/starter/02-HTML-Fundamentals/challenges/index.html new file mode 100755 index 000000000..ecd565f07 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenges/index.html @@ -0,0 +1,149 @@ + + + + + + + + Challenges + + + + + +

FrontendWorks Challenges

+ +

Converse Chuck Taylor All-Star Low Top

+ +

a person wearing jeans and a pair of Chuck Taylor black with white soles and cap.

USD $65.00

Free Shipping

Ready to dress up or dress down? These classic canvas Chucks are an everyday wardrobe staple.

+ More info → +

Product details:

Lightweight, durable canvas sneaker.
Lightweight padded footbed for added comfort.
Iconic Chuck Taylor ankle patch.

+ + +

Converse Chuck Taylor CSS Float

+ +

USD $65.00

Free Shipping

Ready to dress up or dress down? These classic canvas Chucks are an everyday wardrobe staple.

+ More info → +

Product details:

Lightweight, durable canvas sneaker.
Lightweight padded footbed for added comfort.
Iconic Chuck Taylor ankle patch.

+ + +

Converse Chuck Taylor CSS Flexbox

USD $65.00

Free Shipping

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

+ More info → +

Product details:

Lightweight, durable canvas sneaker.
Lightweight padded footbed for added comfort.
Iconic Chuck Taylor ankle patch.

+ + + + + +

Converse Chuck Taylor All-Star CSS GRID

USD $65.00

Free Shipping

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

+ More info → +

Product details:

Lightweight, durable canvas sneaker.
Lightweight padded footbed for added comfort.
Iconic Chuck Taylor ankle patch.

+ +

+ + + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/content.txt b/starter/02-HTML-Fundamentals/content.txt old mode 100644 new mode 100755 diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/starter/02-HTML-Fundamentals/img/laura-jones.jpg old mode 100644 new mode 100755 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 old mode 100644 new mode 100755 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 old mode 100644 new mode 100755 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 old mode 100644 new mode 100755 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 old mode 100644 new mode 100755 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.css b/starter/02-HTML-Fundamentals/index.css new file mode 100755 index 000000000..b92045d59 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.css @@ -0,0 +1,254 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + min-height: 100vh; +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; +} + +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.25rem; +} + +body>header { + border-top: 10px solid rgb(79, 77, 255); + padding-top: 0.125em; +} + +main { + margin-top: 4em; + min-width: 540px; + max-width: 1200px; + margin-bottom: 4em; + position: relative; + /* border: 1px solid rgb(79, 77, 255); */ +} + + + +h1, +h2, +h3, +h4, +h5, +h6 { + color: rgb(79, 77, 255); + text-transform: uppercase; +} + +h2 { + font-size: 1.25em; +} + +main, +.brandname, +nav { + width: 100%; + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} + +.brandname, +nav { + margin-top: 0; + margin-bottom: 0; +} + +.brandname { + font-size: 2.5rem; + text-transform: capitalize; + text-align: center; + color: white; + background-color: rgb(79, 77, 255); +} + +p { + line-height: 1.5; +} + +nav { + margin-top: 0; + background-color: rgb(226, 226, 226); +} + +nav ul { + padding: 0.125em; + margin: 0 auto; + width: fit-content; + +} + +nav li { + list-style: none; + border-bottom: 4px solid rgb(79, 77, 255); + padding: 0.125em 0.5em; + margin-left: 0.125em; + display: inline-block; + color: rgb(79, 77, 255); +} + +nav a { + display: block; + text-decoration: none; + color: inherit; + width: 100%; + height: auto; +} + +nav li:hover { + background-color: rgb(79, 77, 255); + border-bottom: 4px solid white; + color: white; +} + +nav li:hover a { + color: white; +} + +main section { + width: 80%; + margin-right: 2em; +} + +aside { + width: 30%; + max-width: 500px; + margin-right: auto; + background-color: rgb(226, 226, 226); + padding: 0.25em; + height: fit-content; + border-top: 8px solid rgb(79, 77, 255); + border-bottom: 8px solid rgb(79, 77, 255); +} + +aside h3 { + text-align: center; +} + +footer { + background-color: rgb(79, 77, 255); + margin-top: auto; +} + +footer p { + font-size: 0.85rem; + color: white; + text-align: center; + max-width: 500px; + margin-left: auto; + margin-right: auto; + font-weight: bold; +} + +/* Layout */ +.container-row { + display: flex; + flex-flow: row nowrap; +} + +.container-col { + display: flex; + flex-flow: column nowrap; +} + +.article-meta { + margin-bottom: 1em; +} + +.author { + display: flex; + flex-flow: row nowrap; + width: 100%; + justify-content: flex-start; + font-size: 1rem; +} + +.related { + width: 100%; + margin: 0.125em auto; + +} + +.related:hover { + background-color: rgba(80, 77, 255, 0.8) +} + +.related a { + display: flex; + width: 100%; + text-decoration: none; + color: rgb(79, 77, 255); +} + +.related:hover a { + color: white; +} + +.related img { + max-width: 50px; + height: auto; + margin-right: 0.25em; +} + +.related p { + display: inline; + font-size: 0.75em; +} + +.post-title { + color: rgb(79, 77, 255); + text-align: left; + font-size: 2.25rem; + margin-top: 0; + margin-bottom: 0.25em; + position: relative; +} + +.post-title::after { + content: "TOP"; + font-size: 1.125rem; + background-color: rgb(237, 255, 78); + padding: 0.25em 0.5em; + position: absolute; + top: -10px; + right: -10px; + border: 1px solid rgb(79, 77, 255); +} + +.post-image { + display: block; + width: 100%; + max-width: 800px; + min-width: 400px; + height: auto; + box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.5); + box-shadow: 3px 3px 18px 4px rgba(26, 26, 26, 0.507), + -3px -3px 18px 4px rgb(79, 77, 255, 0.295); + border-radius: 10px; + margin: 2em auto; + object-fit: cover; +} + +.author-pic { + width: 100%; + max-width: 50px; + margin-right: 1em; +} + +button.like-button { + position: absolute; + bottom: 50px; + right: 50px; + padding: 0.5em 1em; + font-size: 1.25rem; +} \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100755 index 000000000..9a783f5f3 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,109 @@ + + + + + + + + HTML Fundamentals by Laura Jones + + + + +

📘 FrontendWorks Times 📘

+ +

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!

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

+ + +

+ + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/blog.html b/starter/03-CSS-Fundamentals/blog.html old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/content.txt b/starter/03-CSS-Fundamentals/content.txt old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/challenges.jpg b/starter/03-CSS-Fundamentals/img/challenges.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/img/laura-jones.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/post-img.jpg b/starter/03-CSS-Fundamentals/img/post-img.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/related-1.jpg b/starter/03-CSS-Fundamentals/img/related-1.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/related-2.jpg b/starter/03-CSS-Fundamentals/img/related-2.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/related-3.jpg b/starter/03-CSS-Fundamentals/img/related-3.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/blog.html b/starter/04-CSS-Layouts/blog.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/content.txt b/starter/04-CSS-Layouts/content.txt old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/challenges.jpg b/starter/04-CSS-Layouts/img/challenges.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/laura-jones.jpg b/starter/04-CSS-Layouts/img/laura-jones.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/post-img.jpg b/starter/04-CSS-Layouts/img/post-img.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/related-1.jpg b/starter/04-CSS-Layouts/img/related-1.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/related-2.jpg b/starter/04-CSS-Layouts/img/related-2.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/related-3.jpg b/starter/04-CSS-Layouts/img/related-3.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css old mode 100644 new mode 100755 diff --git a/starter/05-Design/chair-1.jpg b/starter/05-Design/chair-1.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/chair-2.jpg b/starter/05-Design/chair-2.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/chair-3.jpg b/starter/05-Design/chair-3.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/customers.jpg b/starter/05-Design/customers.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/hero.jpg b/starter/05-Design/hero.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html old mode 100644 new mode 100755 index 92b74fd48..e0a18557a --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -1,162 +1,236 @@ - - - - - - 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. + + + + + + + + Inwood Seats + + + +

We design chairs you will love.

+ In a small shop in the heart of Inwood, we work tireless to design and bring you the perfect chair and seating + experience.The result is a perfect blend of elegance and comfort. A product designed to have a lasting impact + on your health. +

+ Shop chairs +

+ +

Our chairs are special

+ + Science meets design +

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

- Shop chairs

- -

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

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

+ + Ethical and sustainable +

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

+ -

"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

"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

+ + + + + + + + - - - - + \ No newline at end of file diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css old mode 100644 new mode 100755 index 77dfdffa3..c2a371a79 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap'); /* SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 @@ -12,74 +13,133 @@ FONT SIZE SYSTEM (px) box-sizing: border-box; } +html { + font-size: 16px; + height: 100vh; +} + /* ------------------------ */ /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: 'Roboto', sans-serif; + color: rgb(87, 87, 87); + font-size: 1.25rem; } -.container { - width: 960px; - margin: 0 auto; +h2 { + margin-bottom: 1em; +} + +h1, +h2, +.features-title { + font-family: 'Comfortaa', cursive; + font-weight: bold; + color: rgb(51, 53, 83); +} + +h1 { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + letter-spacing: -3px; + line-height: 1; +} + +h2 { + font-size: 2.5rem; + letter-spacing: -3px; +} + +p { + font-size: 1.25rem; + line-height: 1.5; +} + +img { + width: 100%; +} + +h3 { + margin-bottom: 24px; } header, section { - margin-bottom: 48px; + margin: 6rem auto; } -h2 { - margin-bottom: 48px; +.container { + width: 90%; + max-width: 1200px; + min-width: 600px; + margin: 0 auto; + min-height: 100%; } .grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); - column-gap: 80px; + column-gap: 5rem; } -/* ------------------------ */ -/* COMPONENT STYLES */ -/* ------------------------ */ - -/* HEADER */ header { display: grid; grid-template-columns: repeat(2, 1fr); - column-gap: 80px; - margin-top: 48px; + column-gap: 5rem; + margin-top: 3rem; +} + +header img { + border-radius: 1rem; } .header-text-box { align-self: center; } -h1 { - margin-bottom: 24px; -} + .header-text { - margin-bottom: 24px; + line-height: 1.5; + margin-bottom: 2.5rem; } -img { - width: 100%; -} +.features-icon {} -/* FEATURES */ -.features-icon { +.features-title { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + font-size: 1.125rem; + margin-bottom: 0.5em; + font-weight: bold; } -.features-title { - margin-bottom: 16px; +.features-title strong { + margin-left: 1em; } .features-text { + font-size: 1.1rem; } /* TESTIMONIAL */ .testimonial-section { + color: white; + background-color: rgb(51, 53, 83); + border-radius: 30px; + padding: 1em; +} + +.testimonial-section .grid-3-cols { + column-gap: 1rem; +} + +.testimonial-section img { + border-radius: 16px; } .testimonial-box { @@ -88,7 +148,10 @@ img { } .testimonial-box h2 { + letter-spacing: -1px; + font-size: 24px; margin-bottom: 24px; + color: white; } .testimonial-text { @@ -97,12 +160,30 @@ img { } /* CHAIRS */ -.chair-box { - padding: 24px; +.chair { + border-radius: 10px; + box-shadow: 0px 0px 12px -6px rgba(0, 0, 0, 0.5); + transform: translateY(0) translateX(0); + transition: all 500ms 100ms; + } -h3 { - margin-bottom: 24px; +.chair:hover { + padding-top: -1em; + box-shadow: 25px 25px 28px -12px rgba(77, 82, 145, 0.5); + transform: translateY(-18px) translateX(-8px); +} + +.chair img { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.chair-box { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + background-color: rgba(93, 97, 155, 0.2); + padding: 24px; } .chair-details { @@ -113,15 +194,16 @@ h3 { .chair-details li { display: flex; align-items: center; - gap: 12px; - margin-bottom: 24px; + gap: 0.5em; + margin-bottom: 0.5em; } .chair-details li:last-child { margin-bottom: 0; } -.chair-icon { +.chair-icons { + width: 1.25rem; } .chair-price { @@ -130,5 +212,47 @@ h3 { } footer { + background-color: rgb(51, 53, 83); margin-bottom: 48px; } + +footer p { + text-align: center; + color: white; + padding: 1rem; + font-size: 0.75rem; +} + +.btn:link, +.btn:visited { + background-color: rgb(51, 53, 83); + font-size: 1.25rem; + color: white; + + border-radius: 100px; + font-weight: bold; +} + +.btn:hover, +.btn:active { + background-color: rgb(93, 97, 155); + box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, 0.5); +} + +.btn-large { + padding: 1em 2em; +} + +.btn-small { + padding: 0.5em 1em; + text-decoration: none; +} + +header a { + text-decoration: none; +} + +.icons { + height: 2rem; + width: 2rem; +} \ No newline at end of file diff --git a/starter/06-Components/hero.jpg b/starter/06-Components/hero.jpg old mode 100644 new mode 100755 diff --git a/starter/06-Components/maria.jpg b/starter/06-Components/maria.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content/content.md old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png b/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png b/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg b/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg b/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg b/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/eating.jpg b/starter/07-Omnifood-Desktop/content/img/eating.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/favicon.png b/starter/07-Omnifood-Desktop/content/img/favicon.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/starter/07-Omnifood-Desktop/content/img/hero.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png b/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/forbes.png b/starter/07-Omnifood-Desktop/content/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png b/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png b/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/content.md b/starter/08-Omnifood-Responsive/content.md old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/css/general.css b/starter/08-Omnifood-Responsive/css/general.css old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/css/style.css b/starter/08-Omnifood-Responsive/css/style.css old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-1.png b/starter/08-Omnifood-Responsive/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-2.png b/starter/08-Omnifood-Responsive/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-3.png b/starter/08-Omnifood-Responsive/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/ben.jpg b/starter/08-Omnifood-Responsive/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-1.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-2.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-3.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-4.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-5.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-6.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/dave.jpg b/starter/08-Omnifood-Responsive/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/hannah.jpg b/starter/08-Omnifood-Responsive/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/steve.jpg b/starter/08-Omnifood-Responsive/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/eating.jpg b/starter/08-Omnifood-Responsive/img/eating.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/favicon.png b/starter/08-Omnifood-Responsive/img/favicon.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/hero.png b/starter/08-Omnifood-Responsive/img/hero.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/business-insider.png b/starter/08-Omnifood-Responsive/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/forbes.png b/starter/08-Omnifood-Responsive/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/techcrunch.png b/starter/08-Omnifood-Responsive/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png b/starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/usa-today.png b/starter/08-Omnifood-Responsive/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-1.jpg b/starter/08-Omnifood-Responsive/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-2.jpg b/starter/08-Omnifood-Responsive/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/omnifood-logo.png b/starter/08-Omnifood-Responsive/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/index.html b/starter/08-Omnifood-Responsive/index.html old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/content.md b/starter/09-Omnifood-Optimizations/content.md old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/css/general.css b/starter/09-Omnifood-Optimizations/css/general.css old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/css/queries.css b/starter/09-Omnifood-Optimizations/css/queries.css old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/css/style.css b/starter/09-Omnifood-Optimizations/css/style.css old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/app/app-screen-1.png b/starter/09-Omnifood-Optimizations/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/app/app-screen-2.png b/starter/09-Omnifood-Optimizations/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/app/app-screen-3.png b/starter/09-Omnifood-Optimizations/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/ben.jpg b/starter/09-Omnifood-Optimizations/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-1.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-2.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-3.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-4.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-5.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-6.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/dave.jpg b/starter/09-Omnifood-Optimizations/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/hannah.jpg b/starter/09-Omnifood-Optimizations/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/steve.jpg b/starter/09-Omnifood-Optimizations/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/eating.jpg b/starter/09-Omnifood-Optimizations/img/eating.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/favicon.png b/starter/09-Omnifood-Optimizations/img/favicon.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/hero.png b/starter/09-Omnifood-Optimizations/img/hero.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/business-insider.png b/starter/09-Omnifood-Optimizations/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/forbes.png b/starter/09-Omnifood-Optimizations/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/techcrunch.png b/starter/09-Omnifood-Optimizations/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/the-new-york-times.png b/starter/09-Omnifood-Optimizations/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/usa-today.png b/starter/09-Omnifood-Optimizations/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/meals/meal-1.jpg b/starter/09-Omnifood-Optimizations/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/meals/meal-2.jpg b/starter/09-Omnifood-Optimizations/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/omnifood-logo.png b/starter/09-Omnifood-Optimizations/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/index.html b/starter/09-Omnifood-Optimizations/index.html old mode 100644 new mode 100755 diff --git a/starter/index.css b/starter/index.css new file mode 100755 index 000000000..40481aa4a --- /dev/null +++ b/starter/index.css @@ -0,0 +1,68 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 18px; +} + +html, +body { + margin: 0; + padding: 0; +} + +body { + line-height: 1.5; +} + +nav ul { + padding-left: 0; +} + +nav li { + list-style: none; + border: 1px solid rgb(79, 77, 255); + padding: 0.125em 0.5em; + margin-left: 0.125em; + display: inline-block; + +} + +nav a { + display: block; + text-decoration: none; + color: inherit; + width: 100%; + height: auto; +} + +nav li:hover { + background-color: rgb(79, 77, 255); + +} + +nav li:hover a { + color: white; +} + +.related img { + width: 100%; + max-width: 100px; +} + +.post-title { + color: rgb(79, 77, 255); +} + +.post-image { + width: 100%; + max-width: 960px; + height: auto; +} + +.author-pic { + width: 100%; + max-width: 75px; + height: auto; +} \ No newline at end of file diff --git a/starter/index.html b/starter/index.html new file mode 100755 index 000000000..85588e13f --- /dev/null +++ b/starter/index.html @@ -0,0 +1,28 @@ + + + + + + + + FrontendWorks Bootcamp: Intro to HTML, CSS and Web Design. + + + + +

FrontendWorks Bootcamp

FrontendWorks Bootcamp: Intro to HTML, CSS and Web Design.

+ + + \ No newline at end of file

Blog

FrontendWorks Challenges

Converse Chuck Taylor All-Star Low Top

Product details:

Converse Chuck Taylor CSS Float

Product details:

Converse Chuck Taylor CSS Flexbox

Product details:

Converse Chuck Taylor All-Star CSS GRID

Product details:

📘 FrontendWorks Times 📘

The Basic Language of the Web: HTML

What is HTML?

Why should you learn HTML?

We design and build better chairs, for a better life

We design chairs you will love.

Our chairs are special

What makes our chairs special

"We couldn't live without these chairs anymore"

"We couldn't live without these chairs anymore"

Our bestselling chairs

The Laid Back

Our bestselling chairs

The Laid Back

The Worker Bee

The Worker Bee

The Chair 4/2

The Chair 4/2

FrontendWorks Bootcamp