Integrify-Finland · Parvizkh88 · Jan 30, 2023 · Jan 30, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,18 @@
 # isa7-css-ecommerce-project
+
 ## CSS Assignment - 15 points
+
 - Instructions (you can design an ecommerce website the you like but make sure it has the following features)
-   - products page (2 points) 
-   - product details page (1 point)
-   - cart page which includes payment details (2 points)
-   - registration page, login page (2 points)
-   - deploy the project on netlify and share the deployment link in README.md; do not forget to make a PR as well (2 points)
-   - apply any relevant animation in the project (1 point)
-   - make sure the website is 100% accessibile (2 point)
-   - make sure the website is 100% responsive (2 points)
-   - Your creativity and additional functionality to the project will help you to get extra 1 point
-
+  - products page (2 points)
+  - product details page (1 point)
+  - cart page which includes payment details (2 points)
+  - registration page, login page (2 points)
+  - deploy the project on netlify and share the deployment link in README.md; do not forget to make a PR as well (2 points)
+  - apply any relevant animation in the project (1 point)
+  - make sure the website is 100% accessibile (2 point)
+  - make sure the website is 100% responsive (2 points)
+  - Your creativity and additional functionality to the project will help you to get extra 1 point
+
+### Netlify address
+
+https://glowing-maamoul-e2a04c.netlify.app/
diff --git a/images/Headphone.jpg b/images/Headphone.jpg
diff --git a/images/Philips-tv.jpg b/images/Philips-tv.jpg
diff --git a/images/Sony Headphone.jpg b/images/Sony Headphone.jpg
diff --git a/images/iPhone.jpg b/images/iPhone.jpg
diff --git a/images/iphone1.jpg b/images/iphone1.jpg
diff --git a/images/iphone2.jpg b/images/iphone2.jpg
diff --git a/images/iphone3.jpg b/images/iphone3.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav class="menu">
+        <ul class="menu__lists">
+            <li class="menu__list"><a href="" class="menu__link">Products</a></li>
+            <li class="menu__list"><a href="./pages/signup.html" target="-blank" class="menu__link">Sign up</a></li>
+            <li class="menu__list"><a href="./pages/product_detail.html" target="-blank" class="menu__link">Product
+                    Detail</a>
+            </li>
+            <li class="menu__list"><a href="./pages/cart.html" target="-blank" class="menu__link">Cart</a>
+            </li>
+        </ul>
+    </nav>
+    <header id="header">
+        <div class="banner">
+            <h1 class="banner__title">Best Electronics Here</h1>
+            <button class="btn banner__btn">See Product</button>
+        </div>
+    </header>
+    <main>
+        <!-- services section starts here -->
+        <section class="product-section">
+            <h2 class="section-title">Our Products</h2>
+            <div class="products">
+                <article class="product card">
+                    <img class="product__image" src="images/Sony Headphone.jpg" alt="headphone">
+                    <h3 class="product__title">Sony Headphone</h3>
+                    <p class="product__detail">Lorem ipsum dolor sit amet,
+                        consectetur adipisicing elit. Inventore, voluptatibus</p>
+                    <button class="btn product__btn">Shop Now</button>
+                </article>
+                <article class="product card">
+                    <img class="product__image" src="images/iPhone.jpg" alt="mobile phone">
+                    <h3 class="product__title">iPhone 13</h3>
+                    <p class="product__detail">Lorem ipsum dolor sit amet,
+                        consectetur adipisicing elit. Inventore, voluptatibus</p>
+                    <button class="btn product__btn">Shop Now</button>
+                </article>
+                <article class="product card">
+                    <img class="product__image" src="images/Philips-tv.jpg" alt="plasma Tv">
+                    <h3 class="product__title">Philips TV</h3>
+                    <p class="product__detail">Lorem ipsum dolor sit amet,
+                        consectetur adipisicing elit. Inventore, voluptatibus</p>
+                    <button class="btn product__btn">Shop Now</button>
+                </article>
+
+            </div>
+        </section>
+        <!-- services section ends here -->
+    </main>
+    <footer>
+        <div class="footer__links">
+            <div class="footer__menu">
+                <ul class="menu__lists">
+                    <li class="menu__list"><a href="" class="footer__link">Products</a></li>
+                    <li class="menu__list"><a href="./pages/signup.html" target="-blank" class="footer__link">Sign
+                            up</a></li>
+                    <li class="menu__list"><a href="./pages/product_detail.html" target="-blank"
+                            class="footer__link">Product
+                            Detail</a>
+                    </li>
+                    <li class="menu__list"><a href="./pages/cart.html" target="-blank" class="footer__link">Cart</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="footer__icons">
+                <i class="fab fa-linkedin footer__icon"></i>
+                <i class="fab fa-youtube footer__icon"></i>
+                <i class="fab fa-facebook footer__icon"></i>
+                <i class="fab fa-instagram footer__icon"></i>
+            </div>
+        </div>
+        <div class="footer__descriptions">
+            <h1 class="footer-h1">Electrons</h1>
+            <p class="footer-p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br>
+                Excepturi officiis et, repellat non labore quo.</p>
+            <p class="footer-p">&copy; Electrons 2023</p>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/pages/cart.html b/pages/cart.html
@@ -0,0 +1,140 @@
+<!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="./css/cart.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>cart</title>
+</head>
+<body>
+    <nav class="menu">
+        <ul class="menu__lists">
+            <li class="menu__list"><a href="../index.html" class="menu__link">Products</a></li>
+            <li class="menu__list"><a href="./signup.html" class="menu__link">Sign up</a></li>
+            <li class="menu__list"><a href="./product_detail.html" target="-blank" class="menu__link">Product
+                    Detail</a>
+            </li>
+            <li class="menu__list"><a href="./cart.html" target="-blank" class="menu__link">Cart</a>
+            </li>
+        </ul>
+    </nav>
+    <section class="cart">
+        <div class="cart__chekout">
+            <h1>Checkout</h1>
+            <form class='form' action="/">
+                <!-- billing detail starts here -->
+                <p class="caps">BILLING DETAILS</p>
+                <!-- first flex starts here-->
+                <div class="first-flex">
+                    <div class="name">
+                        <label for="name">Name</label>
+                        <br>
+                        <input placeholder="name" type="text" name="name" id="name">
+                    </div>
+                    <div class="email">
+                        <label for="email">Email Address</label>
+                        <br>
+                        <input placeholder='email' type="email" name="email" id="email">
+                    </div>
+                </div>
+                <!-- first flex ends here-->
+                <div class="phone">
+                    <label for="phone">Phone Number</label>
+                    <br>
+                    <input placeholder='phone number' type="number" name="phone" id="phone">
+                </div>
+                <!-- billing detail ends here -->
+                <p class="caps">SHOPPING INFO</p>
+                <!-- Shopping info starts here -->
+                <label for="address">Address</label>
+                <br>
+                <input placeholder='address' type="text" name="address" id="address">
+                <!-- second flex starts here-->
+                <div class="second-flex">
+                    <div class="zip">
+                        <label for="zip">Zip Code</label>
+                        <br>
+                        <input placeholder='zip code' type="number" name="zip" id="zip">
+                    </div>
+                    <div class="city">
+                        <label for="city">City</label>
+                        <br>
+                        <input placeholder='city' type="text" name="city" id="city">
+                    </div>
+                </div>
+                <!-- second flex ends here-->
+                <label for="">Country</label>
+                <br>
+                <input placeholder='country' type="text" name="country" id="country">
+                <P class="caps">PAYMENT METHOD</P>
+                <!-- payment methods starts here -->
+                <i class="fab fa-paypal"></i>
+                <i class="fab fa-cc-mastercard"></i>
+                <i class="fab fa-cc-visa"></i>
+                <!-- payment methods ends here -->
+                <!-- Shopping info ends here -->
+            </form>
+        </div>
+        <div class="cart__summary">
+            <h2>Summary</h2>
+            <div class="summary">
+                <div class="summary__upper">
+                    <div class="summary__products">
+                        <div class="model">
+                            <img src="../images/Sony Headphone.jpg" alt="Sony Headphone">
+                            <div class="single-product">
+                                <div class="name">Sony Headphone</div>
+                                <div class="price">$ 2999</div>
+                            </div>
+                        </div>
+                        <div class="quantity">1</div>
+                    </div>
+                    <div class="summary__products">
+                        <div class="model">
+                            <img src="../images/Philips-tv.jpg" alt="Philips TV">
+                            <div class="single-product">
+                                <div class="name">Philips TV</div>
+                                <div class="price">$ 899</div>
+                            </div>
+                        </div>
+                        <div class="quantity">2</div>
+                    </div>
+                    <div class="summary__products">
+                        <div class="model">
+                            <img src="../images/iPhone.jpg" alt="iPhone 12">
+                            <div class="single-product">
+                                <div class="name">iPhone 12</div>
+                                <div class="price">$ 599</div>
+                            </div>
+                        </div>
+                        <div class="quantity">1</div>
+                    </div>
+                </div>
+                <div class="summary__lower">
+                    <div class="cart__total">
+                        <P>TOTAL</P>
+                        <P>$ 5396</P>
+                    </div>
+                    <div class="cart__total">
+                        <P>SHIPPIG</P>
+                        <P>$ 50</P>
+                    </div>
+                    <div class="cart__total">
+                        <P>AVT(INCLUDED)</Pva>
+                        <P>$1079 </P>
+                    </div>
+                    <div class="cart__total">
+                        <P>GRAND TOTAL</P>
+                        <P>$ 5446</P>
+                    </div>
+                </div>
+                <button class="btn">Checkout</button>
+            </div>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/pages/css/cart.css b/pages/css/cart.css
@@ -0,0 +1,119 @@
+/* reset code and common starts here*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  text-decoration: none;
+}
+html {
+  scroll-behavior: smooth;
+}
+.btn {
+  background-color: #85d6de;
+  border: none;
+  padding: 5px;
+  color: black;
+}
+/* reset code and common ends here  */
+body {
+  background-color: #e5e5cb;
+}
+/* navbar starts here */
+nav {
+  background: #1a120b;
+  height: 3rem;
+}
+.menu__lists {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 1rem;
+}
+.menu__link {
+  color: white;
+}
+/* navbar ends here */
+/* cart starts here */
+.cart {
+  background-color: #d5cea3;
+  min-width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+/* cart checkout starts here */
+.cart__chekout {
+  background-color: #fff6bd;
+  width: 500px;
+  padding-left: 5rem;
+  border-radius: 4%;
+  padding-top: 1rem;
+}
+.caps {
+  color: #3a4f7a;
+  font-size: large;
+}
+.name-email {
+  display: flex;
+}
+.first-flex,
+.second-flex {
+  display: flex;
+}
+.caps {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+/* cart checkout ends here */
+/* checkout summary starts here */
+.cart__summary {
+  background-color: #fff6bd;
+  width: 20rem;
+  border-radius: 4%;
+  padding-top: 1rem;
+}
+.cart__summary h2 {
+  margin-left: 1rem;
+}
+.summary__products {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+}
+.model {
+  display: flex;
+}
+img {
+  width: 6rem;
+  margin-right: 0.5rem;
+  border-radius: 5%;
+}
+.summary__lower {
+  padding: 1rem;
+}
+.cart__total {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+.btn {
+  margin-left: 8rem;
+  margin-top: 1rem;
+}
+/* checkout summary ends here */
+/* cart ends here */
+/* media query starts here */
+@media (max-width: 768px) {
+  .first-flex,
+  .second-flex {
+    flex-direction: column;
+  }
+  .cart__chekout {
+    width: 20rem;
+  }
+}
+/* media query ends here */