#2 start of section 5

alilosoft · Aug 10, 2022 · 39798e3 · 39798e3
1 parent 590426c
commit 39798e3
Show file tree

Hide file tree

Showing 7 changed files with 296 additions and 0 deletions.
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/chair-1.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/chair-1.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/chair-2.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/chair-2.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/chair-3.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/chair-3.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/customers.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/customers.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/hero.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/hero.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/index.html b/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/index.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="stylesheet" href="style.css" />
+    <title>Lisbon Chair Shop</title>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <div class="header-text-box">
+          <h1>We design and build better chairs, for a better life</h1>
+          <p class="header-text">
+            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.
+          </p>
+          <a class="btn btn--big" href="#">Shop chairs</a>
+        </div>
+        <img src="hero.jpg" alt="Photo" />
+      </header>
+
+      <section>
+        <h2>What makes our chairs special</h2>
+        <div class="grid-3-cols">
+          <div>
+            <p class="features-title"><strong>Science meets design</strong></p>
+            <p class="features-text">
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
+              similique adipisci praesentium.
+            </p>
+          </div>
+
+          <div>
+            <p class="features-title">
+              <strong>Maximal comfort</strong>
+            </p>
+            <p class="features-text">
+              Reprehenderit optio placeat quasi excepturi architecto, explicabo
+              facilis perspiciatis error maxime magnam.
+            </p>
+          </div>
+
+          <div>
+            <p class="features-title">
+              <strong>Ethical and sustainable</strong>
+            </p>
+            <p class="features-text">
+              Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat
+              omnis est laudantium voluptatem voluptas!
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section class="testimonial-section">
+        <div class="grid-3-cols">
+          <img src="customers.jpg" alt="People sitting on chairs" />
+          <div class="testimonial-box">
+            <h2>"We couldn't live without these chairs anymore"</h2>
+            <blockquote class="testimonial-text">
+              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!
+            </blockquote>
+            <p class="testimonial-author">&mdash; Mary and Sarah Johnson</p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Our bestselling chairs</h2>
+        <div class="grid-3-cols">
+          <figure class="chair">
+            <img src="chair-1.jpg" alt="Chair" />
+            <div class="chair-box">
+              <h3>The Laid Back</h3>
+              <ul class="chair-details">
+                <li>
+                  <!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
+                  <span>Leisure and relaxing</span>
+                </li>
+                <li>
+                  <span>Comfortable for 4h</span>
+                </li>
+                <li>
+                  <span>Vegan leather</span>
+                </li>
+                <li>
+                  <span>Weighs 16 kg</span>
+                </li>
+              </ul>
+              <div class="chair-price">
+                <strong>250€</strong>
+                <a href="#" class="btn btn--small">Add to cart</a>
+              </div>
+            </div>
+          </figure>
+
+          <figure class="chair">
+            <img src="chair-2.jpg" alt="Chair" />
+            <div class="chair-box">
+              <h3>The Worker Bee</h3>
+              <ul class="chair-details">
+                <li>
+                  <span>Work</span>
+                </li>
+                <li>
+                  <span>Comfortable for 8h</span>
+                </li>
+                <li>
+                  <span>Vegan leather</span>
+                </li>
+                <li>
+                  <span>Weighs 22 kg</span>
+                </li>
+              </ul>
+              <div class="chair-price">
+                <strong>525€</strong>
+                <a href="#" class="btn btn--small">Add to cart</a>
+              </div>
+            </div>
+          </figure>
+
+          <figure class="chair">
+            <img src="chair-3.jpg" alt="Chair" />
+            <div class="chair-box">
+              <h3>The Chair 4/2</h3>
+              <ul class="chair-details">
+                <li>
+                  <span>Leisure and relaxing</span>
+                </li>
+                <li>
+                  <span>Comfortable all day!</span>
+                </li>
+                <li>
+                  <span>Organic cotton</span>
+                </li>
+                <li>
+                  <span>Weighs 80 kg</span>
+                </li>
+              </ul>
+              <div class="chair-price">
+                <strong>1450€</strong>
+                <a href="#" class="btn btn--small">Add to cart</a>
+              </div>
+            </div>
+          </figure>
+        </div>
+      </section>
+
+      <footer>
+        Copyright &copy; 2027 by Jonas Schmedtmann. Part of "Build Responsive
+        Real-World Websites with HTML and CSS" online course. Use for learning
+        purposes only.
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/style.css b/02-Udemy/-01-HTML-CSS-Jonas/Code/05-Design/style.css
@@ -0,0 +1,134 @@
+/*
+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
+*/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ------------------------ */
+/* GENERAL STYLES */
+/* ------------------------ */
+body {
+  font-family: sans-serif;
+}
+
+.container {
+  width: 960px;
+  margin: 0 auto;
+}
+
+header,
+section {
+  margin-bottom: 48px;
+}
+
+h2 {
+  margin-bottom: 48px;
+}
+
+.grid-3-cols {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 80px;
+}
+
+/* ------------------------ */
+/* COMPONENT STYLES */
+/* ------------------------ */
+
+/* HEADER */
+header {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 80px;
+  margin-top: 48px;
+}
+
+.header-text-box {
+  align-self: center;
+}
+
+h1 {
+  margin-bottom: 24px;
+}
+
+.header-text {
+  margin-bottom: 24px;
+}
+
+img {
+  width: 100%;
+}
+
+/* FEATURES */
+.features-icon {
+}
+
+.features-title {
+  margin-bottom: 16px;
+}
+
+.features-text {
+}
+
+/* TESTIMONIAL */
+.testimonial-section {
+}
+
+.testimonial-box {
+  grid-column: 2 / -1;
+  align-self: center;
+}
+
+.testimonial-box h2 {
+  margin-bottom: 24px;
+}
+
+.testimonial-text {
+  font-style: italic;
+  margin-bottom: 24px;
+}
+
+/* CHAIRS */
+.chair-box {
+  padding: 24px;
+}
+
+h3 {
+  margin-bottom: 24px;
+}
+
+.chair-details {
+  list-style: none;
+  margin-bottom: 24px;
+}
+
+.chair-details li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.chair-details li:last-child {
+  margin-bottom: 0;
+}
+
+.chair-icon {
+}
+
+.chair-price {
+  display: flex;
+  justify-content: space-between;
+}
+
+footer {
+  margin-bottom: 48px;
+}