Integrify-Finland · yevgeniyT · Jan 24, 2023 · Jan 24, 2023 · Jan 24, 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
@@ -7,4 +7,9 @@
    - registration, login functionality (2 points)
    - 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
+
+
+
+
+   -deployed link - https://inquisitive-sunflower-261c9d.netlify.app
 
diff --git a/cart.html b/cart.html
@@ -0,0 +1,78 @@
+<!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>Casavile Furniture & Accessories</title>
+    <link rel="stylesheet" href="style-cart.css">
+
+    <!-- icon link starts here  -->
+    <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" />
+
+    <!-- font link starts here  -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1>Checkout Form</h1>
+    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, obcaecati.</p>
+    <div class="chekout-form">
+        <div class="payment-information">
+          <div class="container">
+            <form>
+              <div class="payment-ditails">
+                <div class="main-form">
+                  <h2>Billing Address</h2>
+                  <label for="name">Full Name</label>
+                  <input type="text" id="name" name="name" placeholder="John Smith">
+                  <label for="email">Email</label>
+                  <input type="text" id="email" name="email" placeholder="[email protected]">
+                  <label for="address">Address</label>
+                  <input type="text" id="adress" name="address" placeholder="Street 65f">
+                  <label for="city">City</label>
+                  <input type="text" id="city" placeholder="Munchen">
+                  <label for="zip">Zip</label>
+                  <input type="text" id="zip" name="zip" placeholder="10001">
+                </div>
+
+                <div class="main-form">
+                  <h2>Payment ditails</h2>
+                  <label for="cardname">Name on Card</label>
+                  <input type="text" id="cardname" name="cardname" placeholder="John Smith">
+                  <label for="cardcnum">Credit card number</label>
+                  <input type="text" id="cardcnum" name="cardnumber" placeholder="1111-1111-1111-1111">
+                  <label for="date">Exp date</label>
+                  <input type="date" id="date" name="date" placeholder="January">
+                  <label for="cvv">CVV</label>
+                  <input type="text" id="cvv" name="cvv" placeholder="111">
+                </div>
+              </div>
+              <input type="submit" value="Clik to checkout" class="btn">
+        </form>
+        </div>
+      </div>
+      <div class="cart-information">
+        <div class="container">
+          <h3>Your order:</h3>
+          <table class="table__info">
+              <tr class="table-row">
+                 <td class="cart__item">Product 1</th>
+                 <td class="item__price">100 USD</td>
+             </tr>
+             <tr class="table-row">
+                <td class="cart__item">Product 1</td>
+                <td class="item__price">100 USD</td>
+             </tr>
+             <tr class="table-row">
+              <td class="cart__item">Total</td>
+              <td class="item__price">200 USD</td>
+             </tr>
+         </table>
+        </div>
+          </div>
+  </div>
+
+</body>
+</html>
diff --git a/img/index-img/accessories.jpg b/img/index-img/accessories.jpg
diff --git a/img/index-img/furniture.jpg b/img/index-img/furniture.jpg
diff --git a/img/index-img/logo.png b/img/index-img/logo.png
diff --git a/img/index-img/main-banner.jpg b/img/index-img/main-banner.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,283 @@
+<!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>Casavile Furniture & Accessories</title>
+    <link rel="stylesheet" href="style.css">
+
+    <!-- icon link starts here  -->
+    <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" />
+
+    <!-- font link starts here  -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+</head>
+<body>
+    <!-- nav dection starts here  -->
+    <nav id="main-nav">
+        <div class="nav-bar">
+            <div class="nav-left">
+                <ul class="list-elements">
+                    <li class="list__item"><img class="logo" src="/img/index-img/logo.png" alt="logo"></li>
+                    <li class="list__item"><a class="nav-link" href="#Furniture">Furniture</a></li>
+                    <li class="list__item"><a class="nav-link" href="#Acceccories">Accessories</a></li>
+                </ul>
+            </div>
+
+            <div class="nav-midle">
+                <i class="fa-solid fa-magnifying-glass"></i>
+                <input id="serch" class="serch" type="text">
+                <label for="serch"></label>
+            </div>
+
+            <div class="nav-right">
+                <ul class="list-elements">
+                    <li class="list__item"><a class="nav-link" href="login.html" target="_blank"><i class="fa-solid fa-user list__icon"></i> Login</a></li>
+                    <li class="list__item"><a class="nav-link" href="#main-footer"><i class="fa-solid fa-address-card list__icon"></i> Contacts</a></li>
+                    <li class="list__item"><a class="nav-link" href="cart.html" target="_blank"><i class="fa-solid fa-cart-shopping list__icon"></i> Cart</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- nav section ends here  -->
+
+    <!-- Header section starts here -->
+    <header id="header">
+        <div class="banner-noimg">
+            <h1 class="main-heading">Casavile shop</h1>
+            <p class="description">Shop for homeware</p>
+        </div>
+
+        <div class="banner-img">
+            <div class="banner-description">
+                <h2 class="banner-heading">Lorem, ipsum.</h2>
+                <p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, commodi!</p>
+            </div>
+        </div>
+    </header>
+    <!-- header section ends here  -->
+
+    <!-- main section starts here  -->
+    <main>
+        <div class="banner-noimg">
+            <h2 class="banner-heading">Lorem, ipsum.</h2>
+            <p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, commodi!</p>
+        </div>
+
+        <div class="goods-banners">
+            <div class="goods-banner">
+                <a href="#Furniture"><img src="/img/index-img/furniture.jpg" alt="accessories img"></a>
+                <h2 class="banner-heading group__dsc">Furniture</h2>
+            </div>
+            <div class="goods-banner">
+                <a href="#Acceccories"><img src="/img/index-img/accessories.jpg" alt="accessories img"></a>
+                <h2 class="banner-heading group__dsc">Accessories</h2>
+            </div>
+        </div>
+
+        <section id="Furniture" class="shop-items">
+            <h3 class="section-heading">Furniture</h3>
+            <div class="items-list">
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/furniture.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/furniture.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/furniture.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html"><img src="/img/index-img/furniture.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading" target="_blank">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/furniture.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/furniture.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+            </div>
+        </section>
+
+        <section id="Acceccories" class="shop-items">
+            <h3 class="section-heading">Acceccories</h3>
+            <div class="items-list">
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/accessories.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/accessories.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/accessories.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/accessories.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/accessories.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+                <div class="card">
+                    <a href="product.html" target="_blank"><img src="/img/index-img/accessories.jpg" alt="furniture pic" class="card-img"></a>
+                    <h4 class="card__heading">Item1</h4>
+                    <p class="card__description">Lorem ipsum dolor sit amet.</p>
+                    <div class="card__price">
+                        <p class="price__regular">122$</p>
+                        <p class="price__reduced">1555$</p>
+                    </div>
+                    <p class="card__price"></p>
+                    <button class="card__button btn">Buy</button>
+                </div>
+
+            </div>
+        </section>
+
+        <section id="subscription">
+            <div class="banner-noimg">
+                <p class="banner-heading">Lorem ipsum dolor sit amet.</p>
+                <p class="decription">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, at?</p>
+                <form id="subscribtion">
+                    <div class="row">
+                        <input type="email" id="email" name="email">
+                        <label for="email"></label>
+                        <input class="btn" type="submit" value="Subscribe">
+                    </div>
+
+                </form>
+            </div>
+        </section>
+    </main>
+    <!-- main section ends here  -->
+
+    <!-- footer starts here  -->
+    <footer id="main-footer">
+        <!-- <nav id="footer-nav"> -->
+            <!-- <div class="nav-bar-footer"> -->
+                <div class="nav-left">
+                    <ul class="list-elements">
+                        <li class="list__item"><a href="#main-nav"><i class="fa-solid fa-house list__icon"></i> Home</a></li>
+                        <li class="list__item"><a class="nav-link" href="#Furniture">Furniture</a></li>
+                        <li class="list__item"><a class="nav-link" href="Acceccories">Accessories</a></li>
+                    </ul>
+                </div>
+
+                <div class="nav-midle">
+                    <p class="copywright">Designed by Eugene &copy; Copyright 2023</p>
+                </div>
+
+                <div class="nav-right">
+                    <ul class="list-elements">
+                        <li class="list__item"><a class="nav-link" href="#"><i class="fa-brands fa-facebook list__icon"></i> FB</a></li>
+                        <li class="list__item"><a class="nav-link" href="#"><i class="fa-brands fa-youtube list__icon"></i> Youtube</a></li>
+                        <li class="list__item"><a class="nav-link" href="#"><i class="fa-brands fa-square-instagram list__icon"></i> Insta</a></li>
+                    </ul>
+                </div>
+            <!-- </div> -->
+        <!-- </nav> -->
+    </footer>
+    <!-- footer ends here -->
+</body>
+</html>