KynaAcademy · miriamtocino · Oct 26, 2022
diff --git a/course-outline.md b/course-outline.md
@@ -0,0 +1,7 @@
+# Course: JS Essentials
+
+### Exercises Ideas
+
+- Add carrousel for product images
+- Add "Add to cart" button functionality
+- Show cart content when hovering over "Shopping Cart"
diff --git a/img/caleb-hernandez-belmonte-jh5s88Jqau8-unsplash.jpg b/img/caleb-hernandez-belmonte-jh5s88Jqau8-unsplash.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Kynazon</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <!-- The header contains title and shopping cart -->
+  <header>
+    <a href="/"><h1>Kynazon</h1></a>
+    <a href="/"><h3>Shopping Cart</h3></a>
+  </header>
+
+  <!-- The main tag contains product details -->
+  <main>
+    <section id="product-details">
+      <div id="product-images">
+        <img src="img/caleb-hernandez-belmonte-jh5s88Jqau8-unsplash.jpg" alt="kite img">
+      </div>
+
+      <div id="product-description">
+        <h2>Product Name</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra diam lectus, quis gravida quam vehicula sit amet. Vivamus nulla sem, commodo eget ipsum faucibus, dictum euismod lectus. Sed in eleifend justo. Integer nec rutrum nisl. Morbi eget rutrum nulla. Donec finibus eleifend porta. Etiam convallis neque odio, a porttitor diam egestas non.</p>
+
+        <div id="product-specifications">
+           <p><strong>See all specifications</strong></p> 
+        </div>
+      </div>
+
+      <div id="product-actions">
+        <p id="product-price">15,99€</p>
+        <a href="#"><h3>Add to Cart</h3></a>
+      </div>
+    </section>
+
+    <div class="divider"></div>
+
+    <section id="product-review">
+      <h2>Top Review</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra diam lectus, quis gravida quam vehicula sit amet. Vivamus nulla sem, commodo eget ipsum faucibus, dictum euismod lectus. Sed in eleifend justo. Integer nec rutrum nisl. Morbi eget rutrum nulla. Donec finibus eleifend porta. Etiam convallis neque odio, a porttitor diam egestas non.
+      </p>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,92 @@
+/* General Styles */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+/* Header Styles */
+
+header {
+  padding: 1em;
+  width: 100%;
+  background: rgb(38, 39, 38);
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #ccc;
+}
+
+header h1 {
+  color: #fff;
+}
+
+header h3 {
+  padding-top: 10px;
+  color: #fff;
+}
+
+header a {
+  text-decoration: none;
+}
+
+/* Main Styles */
+
+main {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+/* Product Details Styles */
+
+#product-details {
+  margin-top: 64px;
+  display: flex;
+}
+
+#product-images {
+  width: 240px;
+}
+
+#product-description {
+  width: 480px;
+  padding: 0 16px;
+}
+
+#product-images img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+#product-actions {
+  width: 240px;
+  padding: 8px;
+  border: solid 1px #000;
+}
+
+#product-price {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+#product-specifications {
+  margin-top: 16px;
+}
+
+/* Divider */
+
+.divider {
+  margin: 32px 0 8px;
+  border-top: solid 1px #000;
+  height: 32px;
+}
+
+/* Product Reviews Styles */