Integrify-Finland · Samiir321 · Jan 26, 2023 · Jan 30, 2023 · Jan 31, 2023 · Jan 31, 2023
diff --git a/README.md b/README.md
@@ -7,4 +7,6 @@
    - 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
+
+   netlify link: https://tubular-puffpuff-b7bae0.netlify.app/
 
diff --git a/img/Air-Jordanone.jpg b/img/Air-Jordanone.jpg
diff --git a/img/Air-Jordanvans.jpg b/img/Air-Jordanvans.jpg
diff --git a/img/backgroud.jpg b/img/backgroud.jpg
diff --git a/img/foot.jpg b/img/foot.jpg
diff --git a/img/product img.jpg b/img/product img.jpg
diff --git a/img/sneckars.jpg b/img/sneckars.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,128 @@
+<!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>
+         <div class="navbar__lists">
+                <i class="fa-solid fa-shoe-prints navbar__icon navbar__icon"></i>
+                <ul class="navbar__list">
+                    <li><a href="/product.html">Men</a></li>
+                    <li><a href="">Women</a></li>
+                    <li><a href="">Accessories</a></li>
+                    <li><a href="/payment.html">sale</a></li>
+                </ul>
+
+            </div>
+
+            <div class="navbar__lists1">
+
+                <ul class="navbar__list1">
+                    <li><a href="">Contact Us</a></li>
+                    <li><a href="">About Us</a></li>
+                    <li><a href=""><i class="fa-regular fa-user"></i></a></li>
+                    <li><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
+                    <li><a href=""><i class="fa-solid fa-bag-shopping"></i></a></li>
+
+
+                </ul>
+
+            </div>
+
+    </nav>
+
+
+    <header id="header">
+        <div class="header__div">
+            <h2 class="header__tittle">WELCOME TO THE LAND OF SNEACKERS</h2>
+        </div>
+
+
+    </header>
+
+
+    <main>
+
+
+            <h2>OUR PRODUCTS</h2>
+            <div class="main__products">
+
+                <article class="main__product1 card">
+                    <img src="img/Air-Jordanvans.jpg" alt="shoes">
+                    <P class="main__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
+                        asperiores laboriosam ratione beatae eos aliquam cupiditate obcaecati harum suscipit eligendi.
+                    </P>
+                    <button class="main__btn">Buy Now</button>
+                </article>
+
+                <article class="main__product2 card">
+                    <img src="img/Air-Jordanvans.jpg" alt="shoes">
+                    <p class="main__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias quisquam
+                        amet dolor veniam expedita. Suscipit animi aperiam ut rerum excepturi.</p>
+                    <button class="main__btn">Buy Now</button>
+                </article>
+
+
+
+            </div>
+
+
+
+
+
+
+    </main>
+
+
+    <footer>¨
+
+            <h3 class="footer__tittle">Join Us</h3>
+            <div class="footer__input">
+                <label for="email"></label>
+                <input type="email" id="email" placeholder="Enter your Email" required> <br>
+                <label for="name"></label>
+                <input type="name" id="name" placeholder="Enter your Name" required> <br>
+                <label for="password"></label>
+                <input type="password" id="password" placeholder="Enter your Password" required> <br>
+            </div>
+
+            <span><button class="footer__btn">join</button></span>
+            <div class="footer__icon">
+              <span><a href=""><i class="fab fa-facebook"></i></a></span>
+              <span><a href=""><i class="fab fa-instagram"></i></a></span>
+            </div>
+
+
+            <div class="footer__list">
+                <ul>
+                    <li><a href=""></a>about</li>
+                    <li><a href=""></a>fefeqf</li>
+                    <li><a href=""></a>fqefdfeqf</li>
+                    <li><a href=""></a>fefefgqf</li>
+                </ul>
+            </div>
+
+
+
+
+
+
+
+
+
+
+    </footer>
+</body>
+
+</html>
diff --git a/payment.css b/payment.css
@@ -0,0 +1,139 @@
+.grid__container {
+  display: grid;
+  grid-template-areas:
+    "n"
+    "m";
+}
+
+:root {
+  --padding: 1rem;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style-type: none;
+  text-decoration: none;
+}
+html {
+  scroll-behavior: smooth;
+}
+
+/* nav starts here */
+nav {
+  background-color: #579bb1;
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  grid-area: n;
+}
+
+.navbar__icon {
+  font-size: 5rem;
+  margin-right: 3rem;
+}
+.navbar__lists {
+  display: flex;
+  font-size: 2rem;
+  text-transform: uppercase;
+}
+ul {
+  display: flex;
+}
+li {
+  padding: var(--padding);
+  cursor: pointer;
+}
+nav li:hover {
+  transform: scale(1.1);
+}
+
+.navbar__list1 {
+  display: flex;
+
+  float: right;
+  font-size: 2rem;
+}
+a {
+  color: black;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+main {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 100vh;
+  background-image: url(/img/backgroud.jpg);
+  background-position: center;
+  background-size: cover;
+
+}
+
+.payment__container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 70%;
+  height: 85%;
+  background-color: #c1c8ca;
+  border-radius: 20px;
+  box-shadow: 0px 25px 40px #1687d933;
+  font-size: 0px;
+}
+.main__product-img {
+  width: 100%;
+}
+
+.main__product-img img {
+  display: inline-block;
+  float: left;
+  margin-left: 30px;
+  width: 400px;
+  height: 500px;
+  border-radius: 5px;
+}
+.payment__section {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  padding: 100px;
+}
+
+.product__details h3 {
+  margin-bottom: 2rem;
+  text-transform: uppercase;
+  font-size: 2.5rem;
+}
+.product__details h4 {
+  font-size: 2rem;
+}
+
+.payment__btn {
+  margin-top: 2rem;
+  height: 70px;
+  width: 200px;
+  background-color: rgb(173, 153, 153);
+  border: none;
+  text-transform: uppercase;
+  border-radius: 1.5rem;
+}
+
+.payment__btn:hover {
+  transform: scale(1.1);
+}
+
+.payment__icons {
+  font-size: 2.4rem;
+  margin-top: 2rem;
+}
+
+@media screen (min-width:360px) {
+    nav {
+
+    }
+
+
+}
diff --git a/payment.html b/payment.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>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="payment.css" />
+  </head>
+  <body>
+    <div class="grid__container">
+      <nav>
+        <div class="navbar__lists">
+          <i class="fa-solid fa-shoe-prints navbar__icon navbar__icon"></i>
+          <ul class="navbar__list">
+            <li><a href=""></a>Men</li>
+            <li><a href=""></a>Women</li>
+            <li><a href=""></a>Accessories</li>
+            <li><a href="">sale</a></li>
+          </ul>
+        </div>
+
+        <div class="navbar__lists1">
+          <ul class="navbar__list1">
+            <li><a href="">Contact Us</a></li>
+            <li><a href="">About Us</a></li>
+            <li>
+              <a href=""><i class="fa-regular fa-user"></i></a>
+            </li>
+            <li>
+              <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
+            </li>
+            <li>
+              <a href=""><i class="fa-solid fa-bag-shopping"></i></a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <main>
+        <div class="payment__container">
+          <h3>Shopping Item</h3>
+          <h4>Remove</h4>
+
+          <div class="main__product-img">
+            <h3>Shopping Item</h3>
+            <h4>Remove</h4>
+
+            <img src="/img/Air-Jordanvans.jpg" alt="shoes picture" />
+          </div>
+
+          <section class="payment__section">
+            <div class="product__details">
+              <h3>Air-Jordan</h3>
+              <h4>499KR</h4>
+            </div>
+
+            <span><button class="payment__btn">Buy Now</button></span>
+            <br />
+
+            <div class="payment__icons">
+              <span><i class="fa-brands fa-paypal"></i></span>
+              <span><i class="fa-brands fa-google-pay"></i></span>
+              <span><i class="fa-brands fa-apple-pay"></i></span>
+              <span><i class="fa-brands fa-amazon-pay"></i></span>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>