diff --git a/course-outline.md b/course-outline.md new file mode 100644 index 0000000..e73e4ad --- /dev/null +++ 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 new file mode 100644 index 0000000..b77a915 Binary files /dev/null and b/img/caleb-hernandez-belmonte-jh5s88Jqau8-unsplash.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6fbf77b --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + Kynazon + + + + +
+

Kynazon

 +

Shopping Cart

 +
+ + +
+
+
+ kite img +
+ +
+

Product Name

+ +

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.

+ +
+

See all specifications

+
+
+ +
+

15,99€

+

Add to Cart

 +
+
+ +
+ +
+

Top Review

+

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

+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..258d817 --- /dev/null +++ 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 */