Integrify-Finland · laxmipriyapattanayak · Jan 25, 2023 · Jan 25, 2023 · Jan 25, 2023 · Jan 25, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -8,3 +8,5 @@
    - deploy the project on netlify and share the deployment link in README.md; do not forget to make a PR as well (1 point)
    - Your creativity and additional functionality to the project will help you to get extra 1 points
 
+### netlify link
+   - https://splendorous-bubblegum-3d6d29.netlify.app/
diff --git a/cart.css b/cart.css
@@ -0,0 +1,117 @@
+*{
+    box-sizing: border-box;
+    text-decoration: none;
+}
+body {
+    background-color:#efe7f1;
+    font-family: Arial;
+    padding: 0;
+    margin: 0;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+header {
+    position:sticky;
+    top:0;
+    display:flex;
+    justify-content:space-evenly;
+    align-items: center;
+    font-size:15px;
+    background-color:#D7E9B9;
+    padding: 20px;
+}
+header a{
+    text-decoration: none;
+    color: rgb(21, 20, 20);
+}
+
+.cart-page{
+    max-width: 800px;
+    margin: 40px auto;
+}
+table{
+    width: 100%;
+    border-collapse: collapse;
+}
+.cart-info{
+    display: flex;
+    flex-wrap: wrap;
+}
+th{
+    text-align: left;
+    padding: 5px;
+    color:#fff;
+    background: #674188;
+    font-weight: normal;
+}
+td{
+    padding: 10px 5px;
+}
+td input{
+    width: 40px;
+    height: 30px;
+    padding:5px;
+}
+td a{
+    color:#674188;
+    font-size: 12px;
+}
+td img{
+    width:80px;
+    height:80px;
+    margin-right: 10px;
+}
+.total-price{
+    display:flex;
+    justify-content: flex-end;
+}
+.total-price table{
+    border-top: 3px solid #674188;
+    width: 100%;
+    max-width: 350px;
+}
+td:last-child{
+    text-align: right;
+}
+th:last-child{
+    text-align: right;
+}
+#button{
+    text-align: right;
+}
+#button button{
+    border:none;
+    border-radius: 5%;
+    padding: 10px 15px;
+    background-color: #674188;
+    color:#fff;
+    height:auto;
+}
+#button button:hover{
+    background-color: #492568;
+}
+footer {
+    display:flex;
+    justify-content: space-around;
+    background-color: #D7E9B9;
+    color: rgb(21, 20, 20);
+    padding: 20px;
+}
+.footer_media a{
+    text-align: center;
+    color:rgb(21, 20, 20);
+  }
+.footer_media a i{
+    text-align: end;
+    font-size:1.2rem;
+    padding:2px;
+  }
+  @media screen and (max-width: 500px) {
+    header {
+        flex-direction:initial;
+        gap:1rem;
+        padding :1rem;
+    }
+}
diff --git a/cart.html b/cart.html
@@ -0,0 +1,107 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
+    <link rel="stylesheet" href="cart.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <a href="index.html"><i class="fa-solid fa-house"></i></a>
+             <a href="#kids">kids</a>
+             <a href="#women">Women</a>
+             <a href="#">Men</a>
+             <!-- <input type="text" placeholder="Search..">  -->              
+              <a href="signup.html">Signup</a>
+              <a href="cart.html"><i class="fa-solid fa-cart-shopping"></i>&nbsp Cart</a>
+              <a href="login.html"><i class="fa-solid fa-user"></i>&nbsp login</a>
+        </header>
+    <div class="cart-page">
+        <table>
+            <tr>
+                <th>product</th>
+                <th>quantity</th>
+                <th>subtotal</th>
+            </tr>
+            <tr>
+                <td>
+                    <div class="cart-info">
+                        <img src="images/men2.jpg" alt="kidsitem">
+                        <div>
+                            <p>Jens</p>
+                            <small>price:500 DKK</small><br>
+                            <a href="#">Remove</a>
+                        </div>
+                    </div>
+                </td>
+                <td><input type="number" value="1"></td>
+                <td>500 dkk</td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="cart-info">
+                        <img src="images/women3.jpg" alt="kidsitem">
+                        <div>
+                            <p>T shirt</p>
+                            <small>price:200 DKK</small><br>
+                            <a href="#">Remove</a>
+                        </div>
+                    </div>
+                </td>
+                <td><input type="number" value="1"></td>
+                <td>200 dkk</td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="cart-info">
+                        <img src="images/kid1.jpg" alt="kidsitem">
+                        <div>
+                            <p>Floeal T-shirt</p>
+                            <small>price:350 DKK</small><br>
+                            <a href="#">Remove</a>
+                        </div>
+                    </div>
+                </td>
+                <td><input type="number" value="1"></td>
+                <td>350 dkk</td>
+            </tr>
+        </table>
+        <div class="total-price">
+            <table>
+                <tr>
+                    <td>Subtotal</td>
+                    <td>1050 Dkk</td>
+                </tr>
+                <tr>
+                    <td>Tax</td>
+                    <td>30 Dkk</td>
+                </tr>
+                <tr>
+                    <td>Ttotal</td>
+                    <td>1080 Dkk</td>
+                </tr>
+            </table>
+        </div>
+        <div id="button">
+            <a href="#"><button>Proceed to checkout</button> </a>
+        </div>
+    </div>
+    <footer>
+        <div>
+        Copyright © My Online Store
+        </div>
+        <div>
+        <nav class="footer_media">
+            <a href="#" target="_blank"><i class="fa-brands fa-facebook footer_icon"></i></a>
+            <a href="#" target="_blank"><i class="fa-brands fa-youtube footer_icon"></i></a>
+            <a href="#" target="_blank"><i class="fa-brands fa-twitter footer_icon"></i></a>
+        </nav>
+    </div>
+    </footer>
+    </div>
+</body>
+</html>
diff --git a/images/accessory1.jpg b/images/accessory1.jpg
diff --git a/images/accessory2.jpg b/images/accessory2.jpg
diff --git a/images/kid1.jpg b/images/kid1.jpg
diff --git a/images/kid2.jpg b/images/kid2.jpg
diff --git a/images/kid3.jpg b/images/kid3.jpg
diff --git a/images/kid4.jpg b/images/kid4.jpg
diff --git a/images/kid5.jpg b/images/kid5.jpg
diff --git a/images/kid6.jpg b/images/kid6.jpg
diff --git a/images/kid7.jpg b/images/kid7.jpg
diff --git a/images/men1.jpg b/images/men1.jpg
diff --git a/images/men2.jpg b/images/men2.jpg
diff --git a/images/men3.jpg b/images/men3.jpg
diff --git a/images/women1.jpg b/images/women1.jpg
diff --git a/images/women2.jpg b/images/women2.jpg
diff --git a/images/women3.jpg b/images/women3.jpg
diff --git a/images/women4.jpg b/images/women4.jpg
diff --git a/images/women5.jpg b/images/women5.jpg
diff --git a/images/women6.jpg b/images/women6.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,147 @@
+<!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">
+    <meta name="description" content="online shopping">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
+    <title>Online shopping</title>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <a href="index.html"><i class="fa-solid fa-house"></i></a>
+            <a href="#kids">kids</a>
+            <a href="#women">Women</a>
+            <a href="#men">Men</a>               
+            <a href="signup.html">Signup</a>
+            <a href="login.html"><i class="fa-solid fa-user"></i>&nbsp login</a>
+            <a href="cart.html"><i class="fa-solid fa-cart-shopping"></i>&nbsp Cart</a>
+        </header>
+        <section>
+        <div class="animation-image">
+            <div class="image__text">
+              <h1 style="font-size:50px">shop with smile</h1>
+            </div>
+        <div>
+        </section>
+        <main>
+            <h2 id="kids">kids product</h2>
+            <section class="main">
+            <div class="product card">
+                <img src="images\kid1.jpg" alt="Product 1">
+                <p>floral T-Shirt<br>350 DKK</p>
+                <a href="productdetails.html"><button>Add to cart</button></a>
+            </div>
+            <div class="product card">
+                <img src="images\kid2.jpg" alt="Product 1">
+                <p>Frock<br>200 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\kid3.jpg" alt="Product 1">
+                <p>Jacket<br>400 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\kid4.jpg" alt="Product 1">
+                <p>White T-shirt<br>250 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\kid5.jpg" alt="Product 1">
+                <p>Onesie<br>300 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\kid6.jpg" alt="Product 1">
+                <p>white T-shirt<br>200 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            </section>
+            <section>
+            <h2 id="women">Women</h2>
+            <section class="main">
+            <div class="product card">
+                <img src="images\women1.jpg" alt="Product 1">
+                <p>Ethnic wear<br>400 DKK</p>
+                <a href="productdetails.html"><button>Add to cart</button></a>
+            </div>
+            <div class="product card">
+                <img src="images\women2.jpg" alt="Product 1">
+                <p>Salwar<br>500 Dkk</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\women3.jpg" alt="Product 1">
+                <p>T-shirt<br> 200 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\women4.jpg" alt="Product 1">
+                <p>Sweater<br>400 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\women5.jpg" alt="Product 1">
+                <p>Jacket<br>600 DKK</p>
+                <button>Add to cart</button>
+            </div>
+            <div class="product card">
+                <img src="images\women6.jpg" alt="Product 1">
+                <p>Jacket<br>600 Dkk</p>
+                <button>Add to cart</button>
+            </div>
+            </section>
+            <section>
+                <h2 id="men">Men</h2>
+                <section class="main">
+                <div class="product card">
+                    <img src="images\men1.jpg" alt="Product 1">
+                    <p>T-Shirt<br>300 DKK</p>
+                    <a href="productdetails.html"><button>Add to cart</button></a>
+                </div>
+                <div class="product card">
+                    <img src="images\men2.jpg" alt="Product 1">
+                    <p>Jeans<br>500 DKK</p>
+                    <button>Add to cart</button>
+                </div>
+                <div class="product card">
+                    <img src="images\men3.jpg" alt="Product 1">
+                    <p>Formal wear<br>300 Dkk</p>
+                    <button>Add to cart</button>
+                </div>
+                <div class="product card">
+                    <img src="images\men1.jpg" alt="Product 1">
+                    <p>T-shirt <br>300 DKK</p>
+                    <button>Add to cart</button>
+                </div>
+                <div class="product card">
+                    <img src="images\men2.jpg" alt="Product 1">
+                    <p>Jeans<br>500 DKK</p>
+                    <button>Add to cart</button>
+                </div>
+                <div class="product card">
+                    <img src="images\men3.jpg" alt="Product 1">
+                    <p>Formal wear<br>300 Dkk</p>
+                    <button>Add to cart</button>
+                </div>
+                </section>
+        </main>
+        <footer>
+            <div>
+            Copyright © My Online Store
+            </div>
+            <div>
+            <nav class="footer_media">
+                <a href="#" target="_blank"><i class="fa-brands fa-facebook footer_icon"></i></a>
+                <a href="#" target="_blank"><i class="fa-brands fa-youtube footer_icon"></i></a>
+                <a href="#" target="_blank"><i class="fa-brands fa-twitter footer_icon"></i></a>
+            </nav>
+        </div>
+        </footer>
+    </div>
+</body>
+</html>