Skip to content

Commit

Permalink
nav compt
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sharmacs8853
Sharmacs8853 committed May 5, 2022
1 parent ec121d4 commit 75b4eb3
Show file tree
Hide file tree
Showing 21 changed files with 1,407 additions and 0 deletions.
103 changes: 103 additions & 0 deletions checkout.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&family=Poppins:wght@200;400;500&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles/common_style.css">
<link rel="stylesheet" href="./styles/checkout.css">
<title>Checkout</title>
</head>

<body>
<div class="container">
<div id="left_div">
<div id="logo_div">
<center>
<img id="logo"
src="https://cdn.shopify.com/s/files/1/0052/7551/6995/files/FABBAG-LOGO_96ac9306-4c81-4ab8-8d2b-4e818eed7f76_2048x.png?v=1606482289"alt="">
<a href="">Cart</a>&nbsp;<i class="fa-solid fa-angle-right"></i>&nbsp;&nbsp;
<a href="Information.html">Information</a>&nbsp;<i class="fa-solid fa-angle-right"></i>&nbsp;&nbsp;
<a href="">Shipping</a>&nbsp;<i class="fa-solid fa-angle-right"></i>&nbsp;&nbsp;
<a href="">Payment</a>
</center>
</div>
<div id="info">
<div id="info_email">
<h3>Contact information </h3>
<span class="text"> Already have an account?<a href="">Log in </a> </span>
</div>
<script>
var userArr = JSON.parse(localStorage.getItem("userData"))
</script>
<div id="email_data">
<div><img style="height: 50px; width: 50px;" src="https://w7.pngwing.com/pngs/831/88/png-transparent-user-profile-computer-icons-user-interface-mystique-miscellaneous-user-interface-design-smile-thumbnail.png" alt=""></div>
<div class="text"><span>Jitendra sharma</span>(<span>shamracs8853@gmail.com</span>) <br> <a href="">Log Out</a></div>
</div>
<input type="email" class="in_put" id="email" placeholder="Email">
<input type="checkbox" id="checkbox"><label for="email" class="text"> Email me with news and offers</label>
<div id="info_email">
<h3>Shipping address </h3>
</div>
<select name="country" id="country" class="in_put2" aria-placeholder="Country/region">
<option value="india">India</option>
</select>
<div class="flex">
<input type="text" class="in_put2 margin" id="first_name" placeholder="First Name">
<input type="text" class="in_put2 margin" id="last_name" placeholder="Last Name">
</div>
<input type="text" id="company" class="in_put2 margin" placeholder="Company(optionnal)">
<input type="text" id="Address" class="in_put2 margin" placeholder="Address">
<input type="text" id="apartment" class="in_put2 margin" placeholder="Apartment, suite, etc (optionnal)">
<div class="flex">
<input type="text" class="in_put2 margin width" id="city" placeholder="City" style="width: 32%;">
<select name="state" id="state" class="in_put2 margin width" style="width: 32%;">
<option value="assam">Assam</option>
<option value="bihar">Bihar</option>
</select>
<input type="text" class="in_put2 margin width" id="pin" placeholder="Pin Code" style="width: 32%;" >
</div>
<input type="text" class="in_put2 margin " id="number" placeholder="Phone" >
<input type="checkbox" id="save_next_time"><label for="save" class="text margin"> Save this information for next time </label>
</div>
<div id="continue_btn_div">
<div id="return_div"><span class="text"><i class="fa-solid fa-angle-left"></i> &nbsp; Return to cart</span></div>
<div><button id="continue_btn">Continue to Shipping</button></div>
</div>
<div id="policy_div">
<a href="">Refund policy</a>&nbsp;&nbsp;
<a href="Information.html"> Privacy policy</a>&nbsp;&nbsp;
<a href=""> Terms of service</a>&nbsp;&nbsp;
</div>
</div>
<div id="right_div">
<div id="right_div_container">
<div id="box">
<div id="img_div"><img src="https://cdn.shopify.com/s/files/1/0052/7551/6995/products/Makeup-Reveal-1.gif?v=1651562695" alt=""></div>
<div id="content"><span>The AweSummer May Fab Bag</span><br><span>1 Month</span></div>
<div id="price"><span>₹1,198.00</span></div>
</div>
<div id="discount_div">
<div id="input_box"><input type="text" id="code" placeholder="Discount Code" class="in_put"></div>
<div id="apply_btn_div"><button id="apply_btn" class="in_put">Apply</button></div>
</div>
<div id="discount_div">
<div><h3 class="text" id="price">Subtotal</h3><span class="text">Shipping</span></div>
<div><h3 class="text" id="price">₹1,198.00 </h3><span class="text">Calculated at next step </span></div>
</div>
<div id="total_div">
<div id="total">Total</div>
<div id="total_price"><h1><span class="text">INR</span> ₹1,198.00 </h1></div>
</div>
</div>
</div>
</div>
</body>

</html>
7 changes: 7 additions & 0 deletions components/head.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
let head = ()=>{
return`<span></span>
<span><h5>Available Now - THE AWESUMMER MAY FAB BAG!</h5></span>
<span><i class="fa-solid fa-xmark" id="cross"></i></span>
`
}
export {head}
12 changes: 12 additions & 0 deletions components/navbar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
let navbar = () =>{
return ` <div id="sub_logo"><a href="#">SUBSCRIBE NOW</a></div>
<div id="logo"><img id="logo_img" src="https://cdn.shopify.com/s/files/1/0052/7551/6995/files/FABBAG-LOGO_96ac9306-4c81-4ab8-8d2b-4e818eed7f76_2048x.png?v=1606482289" alt=""></div>
<div id="icons">
<span><i class="fa-solid fa-magnifying-glass"></i></span>
<span><i class="fa-regular fa-heart"></i></span>
<span><i id="user" class="fa-regular fa-circle-user"></i></span>
<span><i class="fa-solid fa-cart-shopping"></i></span>
</div>
`
};
export {navbar}
79 changes: 79 additions & 0 deletions create_ac.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&family=Poppins:wght@200;400;500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles/common_style.css">
<link rel="stylesheet" href="./styles/navbar.css">
<link rel="stylesheet" href="./styles/login.css">
<title>Create an Account</title>
</head>
<body>
<!-- header start -->
<div id="main_header">
<div id="header">

</div>
<!-- header end -->
<!-- nav start -->
<div id="navbar">
s
</div>
</div>
<!-- navbar end -->
<!-- language_menu start -->
<div id="lang_menu">

</div>
<!-- language menu End -->
<div id="login_div">
<div></div>
<div id="login_content">
<h1 id="login_heading">Create An Account</h1><br>
<div id="login_fb" class="log padding">
<div> <span>Sign in with Facebook</span></div>
<div><i class="fa-brands fa-facebook-f"></i></div>
</div>
<div id="login_google" class="log padding">
<div><span>Sign in with Google</span></div>
<div><i class="fa-brands fa-google"></i></div>
</div>
<form id="form">
<div class="input_div">
<label for="first_name">First Name <span class="red">*</span></label><br>
<input type="text" id="first_name"> <br>
</div>
<div class="input_div">
<label for="last_name">Last Name <span class="red">*</span></label><br>
<input type="text" id="last_name"> <br>
</div>
<div class="input_div">
<label for="email">Your Email Address <span class="red">*</span></label><br>
<input type="email" id="email"> <br>
</div>
<div class="input_div">
<label for="password"> Your Password <span class="red">*</span></label><br>
<input type="password" id="password"> <br>
</div>
<br>
<input type="submit" class="button" id="create_ac" value="Create an Account">
</form>
<div id="or_div">
<div></div>
<div>Or</div>
<div></div>
</div>
<input type="button" class="button" id="login" value="Sing In">
</div>
<div></div>
</div>

</body>
</html>
<script src="./scripts/create_ac.js" type="module"></script>
<script src="./scripts/language_menu.js" type="module"></script>
77 changes: 77 additions & 0 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&family=Poppins:wght@200;400;500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles/common_style.css">
<link rel="stylesheet" href="./styles/navbar.css">
<link rel="stylesheet" href="./styles/login.css">
<title>Login</title>
</head>
<body>
<!-- header start -->
<div id="main_header">
<div id="header">

</div>
<!-- header end -->
<!-- nav start -->
<div id="navbar">

</div>
</div>
<!-- navbar end -->
<!-- language_menu start -->
<div id="lang_menu">

</div>
<!-- language menu End -->
<div id="login_div">
<div></div>
<div id="login_content">
<h1 id="login_heading">Sing In</h1><br>
<div id="login_fb" class="log padding">
<div> <span>Sign in with Facebook</span></div>
<div><i class="fa-brands fa-facebook-f"></i></div>
</div>
<div id="login_google" class="log padding">
<div><span>Sign in with Google</span></div>
<div><i class="fa-brands fa-google"></i></div>
</div>

<form id="form">
<div class="input_div">
<label for="email">Email Address <span class="red">*</span></label><br>
<input type="email" id="email"> <br>
</div>
<div class="input_div">
<label for="password">password <span class="red">*</span></label><br>
<input type="password" id="password"> <br>
</div>

<div id="forgetpass_div">
<div><span class="red">*</span><span class="red">Required Fields</span></div>
<div><span>Forgot your password?</span></div>
</div>
<input type="submit" class="button" id="login" value="Sing In">
</form>

<div id="or_div">
<div></div>
<div>Or</div>
<div></div>
</div>
<input type="button" class="button" id="create_ac" value="Create an Account">
</div>
<div></div>
</div>

</body>
</html>
<script src="./scripts/login.js" type="module"></script>
<script src="./scripts/language_menu.js" type="module"></script>
73 changes: 73 additions & 0 deletions my-question.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&family=Poppins:wght@200;400;500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles/common_style.css">
<link rel="stylesheet" href="./styles/navbar.css">
<link rel="stylesheet" href="./styles/my-question.css">
<title>My Account</title>
</head>
<body>
<!-- header start -->
<div id="main_header">
<div id="header">

</div>
<!-- header end -->
<!-- nav start -->
<div id="navbar">

</div>
</div>
<!-- navbar end -->
<!-- language_menu start -->
<div id="lang_menu">

</div>
<!-- language menu End -->
<div id="my_question_div">
<div id="heading">
<h2><i> My Beauty Profile</i></h2>
</div>
<hr>
<div id="img_div">
<div id="content"><h2>1. My Skin Type is.... (Pick any 1)</h2></div>
<div id="imges">
<div>
<img src="https://custom.fabbag.com/fabbag-custom/Questionnaire/img/Q3_1_Dry%20Skin.png" alt="">
<h4>Dry</h4>
</div>
<div>
<img src="https://custom.fabbag.com/fabbag-custom/Questionnaire/img/Q3_2_Normal%20Skin.png" alt="">
<h4>Normal </h4>
</div>
<div>
<img src="https://custom.fabbag.com/fabbag-custom/Questionnaire/img/Q3_3_Combination%20Skin.png" alt="">
<h4>Combination </h4>
</div>
<div>
<img src="https://custom.fabbag.com/fabbag-custom/Questionnaire/img/Q3_4_Greasy%20Skin.png" alt="">
<h4>Greasy</h4>
</div>
<div>
<img src="https://custom.fabbag.com/fabbag-custom/Questionnaire/img/Q3_5_Sensitive%20Skin.png" alt="">
<h4>Sensitive </h4>
</div>
</div>
</div>
<div id="arrow">
<a href="my-question2.html"><i class="fa-solid fa-circle-arrow-right"></i></a>
</div>
</div>


</body>
</html>
<script src="./scripts/my-question.js" type="module"></script>
<script src="./scripts/language_menu.js" type="module"></script>
Loading

0 comments on commit 75b4eb3

Please sign in to comment.