fisrt commit

bayue48 · Nov 17, 2020 · 6319d43 · 6319d43
commit 6319d43
Show file tree

Hide file tree

Showing 28 changed files with 541 additions and 0 deletions.
diff --git a/assets/Group 1159.png b/assets/Group 1159.png
diff --git a/assets/Group 1229.png b/assets/Group 1229.png
diff --git a/assets/Group 1230.png b/assets/Group 1230.png
diff --git a/assets/Group 1231.png b/assets/Group 1231.png
diff --git a/assets/Group 1232.png b/assets/Group 1232.png
diff --git a/assets/Group 1233.png b/assets/Group 1233.png
diff --git a/assets/Logo.png b/assets/Logo.png
diff --git a/assets/b5.png b/assets/b5.png
diff --git a/assets/benjamin-voros.png b/assets/benjamin-voros.png
diff --git a/assets/cart.png b/assets/cart.png
diff --git a/assets/filter.png b/assets/filter.png
diff --git a/assets/gez-xavier.png b/assets/gez-xavier.png
diff --git a/assets/glass.png b/assets/glass.png
diff --git a/assets/ian-dooley-1.png b/assets/ian-dooley-1.png
diff --git a/assets/ian-dooley.png b/assets/ian-dooley.png
diff --git a/assets/jacket.png b/assets/jacket.png
diff --git a/assets/jonathan-francisca.png b/assets/jonathan-francisca.png
diff --git a/assets/pants.png b/assets/pants.png
diff --git a/assets/shirt.png b/assets/shirt.png
diff --git a/assets/shoes.png b/assets/shoes.png
diff --git a/assets/short.png b/assets/short.png
diff --git a/confirm.html b/confirm.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Yu Shop Custommer Login</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div class="container">
+    <div class="form-header">
+      <div class="img-container">
+        <img src="./assets/Logo.png" alt="Logo">
+      </div>
+      <p class="info">Please login with your account</p>
+      <p class="confirm">You need to change your password to activate your account</p>
+      <form class="form-section">
+        <div class="form-main">
+          <input type="password" placeholder="Password" name="psw" required>
+        </div>
+        <div class="form-main">
+          <input type="password" placeholder="Confirm New Password" name="psw" required>
+        </div>
+      </form>
+      <a class="submit" href="index.html" type="submit">PRIMARY</a>
+      <p class="register">Don't have a Tokopedia account? <a href="signup.html">Register</a></p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+
+    <link href="main.css" rel="stylesheet" type="text/css" />
+
+    <title>Yu Shop</title>
+  </head>
+  <body>
+    <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
+        <div class="container" style="background:grey;">
+          <a class="navbar-brand" style="background:white;" href="#">
+            <img src="brand.png" alt="Brand">
+          </a>
+          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <div class="navbar-collapse collapse" id="navbarsExample07" style="">
+            <div class="d-flex flex-row"  style="background:cyan;">
+              <div class="input-group">
+                <input type="text" class="form-control search-form py-2 border-right-0" placeholder="Search">
+                <span class="input-group-append">
+                                <div class="input-group-text search-btn bg-white">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                      <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
+                      <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
+                    </svg>
+                                </div>
+                            </span>
+              </div>
+              <div class="filter">
+                            <a href="#" class="btn filter-btn">
+                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+                  </svg>
+                            </a>
+                        </div>
+            </div>          
+            <div class="d-flex flex-row justify-content-end align-items-center"  style="background:orange;">
+                          <div class="cart">
+                              <a class="btn cart-btn" href="#">
+                                  <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-cart2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+                  </svg>
+                              </a>
+                          </div>
+                        <div class="login">
+                            <a href="login.html" class="btn btn-full" type="submit">Login</a>
+                        </div>
+                        <div class="signup">
+                            <a href="signup.html" class="btn btn-shadow ml-4" type="submit">Signup</a>
+                        </div>
+                    </div>
+          </div>
+        </div>
+      </nav>
+
+    <section id="feature-section">
+        <div class="container">
+            <div class="row">
+                <div class="col col-lg-1 d-lg-block d-none">
+                    <img class="img-fluid rounded mt-4" src="assets/images/ian-dooley-C6BrEIucDDU-unsplash-1.png" alt="Responsive" style="height: 175px;">
+                </div>
+                <div class="col col-lg-5 col-md-6 col-sm">
+                    <div class="img-fluid rounded featured-img mt-4" style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(assets/images/benjamin-voros.png);">
+                        <h1>Trends in 2020</h1>
+                    </div>
+                </div>
+                <div class="col col-lg-5 col-md-6 col-sm">
+                    <div class="img-fluid rounded featured-img mt-4" style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(assets/images/ian-dooley.png);">
+                        <h1>Black edition</h1>
+                    </div>
+                </div>
+                <div class="col col-lg-1 d-lg-block d-none">
+                    <img class="img-fluid rounded mt-4" src="assets/images/jonathan-francisca.png" alt="Responsive" style="height: 175px;">
+                </div>
+            </div>
+        </div>
+    </section>
+
+        <div class="category ">
+            <h2>Category</h2>
+            <h4>What are you currently looking for</h4>
+        </div>
+        <center>
+            <div class="row justify-content-center info ">
+                <div class="col-xs-2 tshirt " style="background-color: brown; width: 206px; height: 220px; ">
+                    <img src="/assets/hiclipart 15.png " alt=" ">
+                    <h5>t-shirt</h5>
+                </div>
+                <div class="col-xs-2 col-half-offset pants " style="background-color: black; width: 206px; height: 220px; ">
+                    <img src="/assets/hiclipart 21.png " alt=" ">
+                    <h5>shorts</h5>
+                </div>
+                <div class="col-xs-2 col-half-offset jacket " style="background-color: blue; width: 206px; height: 220px; ">
+                    <img src="/assets/hiclipart 22.png " alt=" ">
+                    <h5>jacket</h5>
+                </div>
+                <div class="col-xs-2 col-half-offset levis " style="background-color: salmon; width: 206px; height: 220px; ">
+                    <img src="/assets/hiclipart 26.png " alt=" ">
+                    <h5>pants</h5>
+                </div>
+                <div class="col-xs-2 col-half-offset shoes " style="background-color: green; width: 206px; height: 220px; ">
+                    <img src="/assets/hiclipart 34.png " alt=" ">
+                    <h5>shoes</h5>
+                </div>
+            </div>
+        </center>
+
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Yu Shop Custommer Login</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div class="container">
+    <div class="form-header">
+      <div class="img-container">
+        <img src="./assets/Logo.png" alt="Logo">
+      </div>
+      <p class="info">Please login with your account</p>
+      <div class="btn-group">
+        <a href="#" class="btn btn-full">Customer</a>
+        <a href="#" class="btn btn-shadow">Seller</a>
+      </div>
+      <form class="form-section">
+        <div class="form-main">
+          <input type="email" placeholder="Email" name="uname" required>
+        </div>
+        <div class="form-main">
+          <input type="password" placeholder="Password" name="psw" required>
+        </div>
+      </form>
+      <a class="forgot" href="reset.html">Forgot password?</a><br>
+      <a class="submit" href="index.html" type="submit">PRIMARY</a>
+      <p class="register">Don't have a Tokopedia account? <a href="signup.html">Register</a></p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,166 @@
+* {
+    margin:0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    height: 100%;
+  }
+
+  body {
+    background: #FFFFFF;
+    height: 100%;
+    font-family: Metropolis;
+    font-style: normal;
+  }
+
+  /* Global CSS */
+  .text {
+    font-weight: bold;
+    font-size: 34px;
+    color: #222222;
+  }
+
+  .text-muted {
+    font-weight: normal;
+    font-size: 12px;
+    color: #9B9B9B;
+  }
+
+  /* Navigation Bar */
+  .navbar {
+    height: 100px;
+    background: #FFFFFF;
+    box-shadow: 0px 6px 40px rgba(173, 173, 173, 0.25);
+  }
+
+  .navbar-brand {
+    margin-right: 60px;
+  }
+
+  .input-group {
+    width: 500px;
+  }
+
+  .search-form {
+    border: 1px solid #8E8E93;
+    border-radius: 23px;
+  }
+
+  .search-btn {
+    border: 1px solid #8E8E93;
+    border-radius: 0px 23px 23px 0px;
+  }
+
+  .filter-btn {
+    background: #FFFFFF;
+    border: 1px solid #8E8E93;
+    border-radius: 12px;
+  }
+
+  .filter {
+    margin-left: 10px;
+  }
+
+  .cart {
+    margin-left: 100px;
+    margin-right: 20px;
+  }
+
+  .btn-full {
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+      background: #DB3022;
+    border-radius: 25px;
+    width: 100px;
+  }
+
+  .btn-shadow {
+    font-weight: 500;
+    font-size: 14px;
+      border: 1px solid #9B9B9B;
+    box-sizing: border-box;
+    border-radius: 24px;
+      color: gray;
+    width: 100px;
+  }
+
+  /* Carousel */
+  #carousel {
+    padding: 35px;
+  }
+
+  .img-carousel {
+      width: 100%;
+    height: 180px;
+      background-size: cover;
+  }
+
+  .img-carousel h1 {
+      font-weight: bold;
+    font-size: 38px;
+    line-height: 38px;
+    color: #FFFFFF;
+      text-align: center;
+    padding-top: 65px;
+  }
+
+  /* Category */
+  #category {
+    padding: 40px;
+  }
+
+  .box {
+      width: 205px;
+      height: 220px;
+      margin: 0px 10px 10px;
+    text-align: center;
+  }
+
+  .category-img {
+      margin-top: 30px;
+  }
+
+  .caption {
+      font-weight: bold;
+    font-size: 30px;
+    line-height: 30px;
+    color: #FFFFFF;
+    margin-top: -80px; 
+  }
+
+  /* New and Popular */
+  .card {
+      width: 200px;
+      height: 275px;
+  }
+
+  .card-body h5 {
+      font-size: 16px;
+  }
+
+  .card-body p {
+      font-size: 12px;
+      margin-bottom: 0px;
+  }
+
+  /* Media Query */
+  @media (max-width: 576px) {
+    .input-group {
+    width: 100%;
+    }
+    .cart {
+    margin-left: 0px;
+    }
+  }
+
+  @media (max-width: 1125px) {
+    .input-group {
+      width: 400px;
+    }
+    .cart {
+    margin-left: 10px;
+    }
+  }
diff --git a/reset.html b/reset.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Yu Shop Custommer Login</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div class="container">
+    <div class="form-header">
+      <div class="img-container">
+        <img src="./assets/Logo.png" alt="Logo">
+      </div>
+      <p class="info">Reset password</p>
+      <form class="form-section">
+        <div class="form-main">
+          <input type="email" placeholder="Email" name="uname" required>
+        </div>
+      </form>
+      <a class="submit" href="confirm.html" type="submit">PRIMARY</a>
+      <p class="register">Don't have a Tokopedia account? <a href="signup.html">Register</a></p>
+    </div>
+  </div>
+</body>
+</html>