jonasschmedtmann · Dathasai1234 · Jul 2, 2022 · Jul 3, 2022 · Jul 3, 2022 · Jul 4, 2022
diff --git a/datha.html b/datha.html
@@ -0,0 +1,46 @@
+<article class="product">
+  <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+  <!-- <div class="container"> -->
+  <img
+    src="https://i.imgur.com/ZrTU3VK.jpeg"
+    alt="Chuck Taylor All Star Shoe"
+    height="250"
+    width="250"
+    class="product-img"
+  />
+  <div class="product-info">
+    <div class="product-price">
+      <p class="price"><strong>$65.00</strong></p>
+      <p class="shipping">Free shipping</p>
+    </div>
+    <p class="sale">Sale</p>
+
+    <p class="product-description">
+      Ready to dress up or down, these classic canvas Chucks are an everyday
+      wardrobe staple.
+    </p>
+    <a href="https://converse.com" target="_blank" class="more-info"
+      >More information &rarr;</a
+    >
+
+    <div class="product-colors">
+      <div class="color"></div>
+      <div class="color color-blue"></div>
+      <div class="color color-red"></div>
+      <div class="color color-yellow"></div>
+      <div class="color color-green"></div>
+      <div class="color color-brown"></div>
+    </div>
+  </div>
+
+  <div class="product-details">
+    <h3 class="details-title">Product details</h3>
+    <ul class="details-list">
+      <li>Lightweight, durable canvas sneaker</li>
+      <li>Lightly padded footbed for added comfort</li>
+      <li>Iconic Chuck Taylor ankle patch.</li>
+    </ul>
+  </div>
+  <!-- </div> -->
+  <button class="add-cart">Add to cart</button>
+</article>
diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html
@@ -0,0 +1,13 @@
+<!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" />
+    <title>BLOG</title>
+  </head>
+  <body>
+    <h2>BLOG</h2>
+    <a href="index.html">Back to home</a>
+  </body>
+</html>
diff --git a/starter/02-HTML-Fundamentals/challenges.jpg → ...r/02-HTML-Fundamentals/img/challenges.jpg b/starter/02-HTML-Fundamentals/challenges.jpg → ...r/02-HTML-Fundamentals/img/challenges.jpg
diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg → .../02-HTML-Fundamentals/img/laura-jones.jpg b/starter/02-HTML-Fundamentals/laura-jones.jpg → .../02-HTML-Fundamentals/img/laura-jones.jpg
diff --git a/starter/02-HTML-Fundamentals/post-img.jpg → ...ter/02-HTML-Fundamentals/img/post-img.jpg b/starter/02-HTML-Fundamentals/post-img.jpg → ...ter/02-HTML-Fundamentals/img/post-img.jpg
diff --git a/starter/02-HTML-Fundamentals/related-1.jpg → ...er/02-HTML-Fundamentals/img/related-1.jpg b/starter/02-HTML-Fundamentals/related-1.jpg → ...er/02-HTML-Fundamentals/img/related-1.jpg
diff --git a/starter/02-HTML-Fundamentals/related-2.jpg → ...er/02-HTML-Fundamentals/img/related-2.jpg b/starter/02-HTML-Fundamentals/related-2.jpg → ...er/02-HTML-Fundamentals/img/related-2.jpg
diff --git a/starter/02-HTML-Fundamentals/related-3.jpg → ...er/02-HTML-Fundamentals/img/related-3.jpg b/starter/02-HTML-Fundamentals/related-3.jpg → ...er/02-HTML-Fundamentals/img/related-3.jpg
diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>The Basic Language of the Web: HTML</title>
+  </head>
+
+  <body>
+    <!--
+    <h1>The Basic Language of the Web: HTML</h1>
+    <h2>The Basic Language of the Web: HTML</h2>
+    <h3>The Basic Language of the Web: HTML</h3>
+    <h4>The Basic Language of the Web: HTML</h4>
+    <h5>The Basic Language of the Web: HTML</h5>
+    <h6>The Basic Language of the Web: HTML</h6>
+    -->
+
+    <header>
+      <h1>📘 The Code Magazine</h1>
+
+      <nav>
+        <a href="blog.html">Blog</a>
+        <a href="#">Challenges</a>
+        <a href="#">Flexbox</a>
+        <a href="#">CSS Grid</a>
+      </nav>
+    </header>
+
+    <article>
+      <header>
+        <h2>The Basic Language of the Web: HTML</h2>
+
+        <img
+          src="img/laura-jones.jpg"
+          alt="Headshot of Laura Jones"
+          height="50"
+          width="50"
+        />
+
+        <p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
+
+        <img
+          src="img/post-img.jpg"
+          alt="HTML code on a screen"
+          width="500"
+          height="200"
+        />
+      </header>
+
+      <p>
+        All modern websites and web applications are built using three
+        <em>fundamental</em>
+        technologies: HTML, CSS and JavaScript. These are the languages of the
+        web.
+      </p>
+
+      <p>
+        In this post, let's focus on HTML. We will learn what HTML is all about,
+        and why you too should learn it.
+      </p>
+
+      <h3>What is HTML?</h3>
+      <p>
+        HTML stands for <strong>H</strong>yper<strong>T</strong>ext
+        <strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
+        language that web developers use to structure and describe the content
+        of a webpage (not a programming language).
+      </p>
+      <p>
+        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.
+      </p>
+      <p>In HTML, each element is made up of 3 parts:</p>
+
+      <ol>
+        <li>The opening tag</li>
+        <li>The closing tag</li>
+        <li>The actual element</li>
+      </ol>
+
+      <p>
+        You can learn more at
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/HTML"
+          target="_blank"
+          >MDN Web Docs</a
+        >.
+      </p>
+
+      <h3>Why should you learn HTML?</h3>
+
+      <p>
+        There are countless reasons for learning the fundamental language of the
+        web. Here are 5 of them:
+      </p>
+
+      <ul>
+        <li>To be able to use the fundamental web dev language</li>
+        <li>
+          To hand-craft beautiful websites instead of relying on tools like
+          Worpress or Wix
+        </li>
+        <li>To build web applications</li>
+        <li>To impress friends</li>
+        <li>To have fun 😃</li>
+      </ul>
+
+      <p>Hopefully you learned something new here. See you next time!</p>
+    </article>
+
+    <aside>
+      <h4>Related posts</h4>
+
+      <ul>
+        <li>
+          <img
+            src="img/related-1.jpg"
+            alt="Person programming"
+            width="75"
+            width="75"
+          />
+          <a href="#">How to Learn Web Development</a>
+          <p>By Jonas Schmedtmann</p>
+        </li>
+        <li>
+          <img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
+          <a href="#">The Unknown Powers of CSS</a>
+          <p>By Jim Dillon</p>
+        </li>
+        <li>
+          <img
+            src="img/related-3.jpg"
+            alt="JavaScript code on a screen"
+            width="75"
+            height="75"
+          />
+          <a href="#">Why JavaScript is Awesome</a>
+          <p>By Matilda</p>
+        </li>
+      </ul>
+    </aside>
+
+    <footer>Copyright &copy; 2027 by The Code Magazine.</footer>
+  </body>
+</html>