Skip to content

Commit

Permalink
login html & css added
Browse files Browse the repository at this point in the history
  • Loading branch information
Rajput-xv committed Sep 1, 2023
1 parent 357a40f commit 54fb0da
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 65 deletions.
Empty file added cart.html
Empty file.
3 changes: 2 additions & 1 deletion index.css
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

.login {
--bs-btn-hover-color: #000 ;
--bs-btn-hover-color: white !important;
--bs-btn-hover-bg: black !important;
}

Expand Down Expand Up @@ -78,3 +78,4 @@
padding: 10px;
background: transparent !important;
}

78 changes: 40 additions & 38 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
<span class="navbar-toggler-icon"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">Product</a></li>
<li><a class="dropdown-item" href="#">Features</a></li>
<li><a class="dropdown-item" href="./index.html">Home</a></li>
<li><a class="dropdown-item" href="#product">Product</a></li>
<li><a class="dropdown-item" href="#footer-about">Features</a></li>
<li><a class="dropdown-item" href="#">Pricing</a></li>
<li><a class="dropdown-item" href="#">Support</a></li>
<li><a class="dropdown-item" href="#">About</a></li>
<!-- <li><a class="dropdown-item" href="#">Support</a></li> -->
<li><a class="dropdown-item" href="#footer-about">About</a></li>
</ul>

</button>
Expand All @@ -44,27 +44,26 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>
</div>
<div class="offcanvas-body ">
<ul class="navbar-nav flex-grow-1 justify-content-between">
<li class="nav-item"><a class="nav-link" href="#">
<li class="nav-item"><a class="nav-link" href="./index.html">
<img src="./icons8-technology-64.svg" alt="E-smart logo" />

</a></li>
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="./index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#product">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#footer-about">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">
<!-- <li class="nav-item"><a class="nav-link" href="#">Support</a></li> -->
<li class="nav-item"><a class="nav-link" href="#footer-about">About</a></li>
<li class="nav-item"><a class="nav-link" href="./cart.html">
<svg xmlns="http://www.w3.org/2000/svg" id="Isolation_Mode" data-name="Isolation Mode" viewBox="0 0 24 24" width="24" height="30" fill="white"><circle cx="7" cy="22" r="2"/><circle cx="17" cy="22" r="2"/><path d="M5.654,5,5.391,2.938A3.328,3.328,0,0,0,2.087,0H0V3H2.087a.331.331,0,0,1,.326.3l1.5,11.759A3.327,3.327,0,0,0,7.217,18H20.4L23.974,5ZM18.112,15H7.217a.329.329,0,0,1-.325-.3L6.037,8h14Z"/></svg>
</a></li>
<form class="col-12 col-lg-auto col-md-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg" placeholder="Search..." aria-label="Search">
<form class="col-12 col-lg-auto col-md-auto mb-3 mb-lg-0 me-lg-3 " role="search">
<input type="search" class="form-control form-control-dark text-bg mt-1 mx-5 " placeholder="Search..." aria-label="Search">
</form>

<div class="text-end d-lg-flex align-items-center" >
<!-- <a href="./login.html" ><button type="button" class="btn login btn-outline-light me-2 col d-none d-lg-block btn-sm "> Login</button></a> -->
<button type="button" class="btn login btn-outline-light me-2 col d-none d-lg-block btn-sm " ><a href="./login.html" > Login </a> </button>
<button type="button" class="btn sign-up btn-warning col d-none d-lg-block btn-sm " style="width: 100px;"><a href="./login.html" > Sign-up </a> </button>
<button type="button" class="btn login btn-outline-light me-2 col d-none d-lg-block btn-sm px-4" > <a href="./login.html" > Login </a> </button>
<!-- <button type="button" class="btn sign-up btn-warning col d-none d-lg-block btn-sm " style="width: 100px;"><a href="./login.html" > Sign-up </a> </button> -->
</div>
</ul>
</div>
Expand All @@ -77,7 +76,7 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>



<div class="carousel-container " style="background-color: tomato;" >
<div class="carousel-container " id="heading" style="background-color: tomato;" >
<div id="myCarousel" class="carousel slide mb-6 " data-bs-ride="carousel">
<div class="carousel-indicators " >
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
Expand Down Expand Up @@ -129,7 +128,7 @@ <h2>One more for good measure.</h2>



<div class="row heading gradient-background" >
<div class="row heading gradient-background" >
<div class="col-lg-4" >
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect></svg>
<h2 class="fw-normal">Heading</h2>
Expand All @@ -156,7 +155,7 @@ <h2 class="fw-normal">Heading</h2>

<section>

<div class="album card-container gradient-background-2 " >
<div class="album card-container gradient-background-2 " id="product" >
<!-- bg-body-tertiary -->
<div class="container " >

Expand Down Expand Up @@ -307,49 +306,52 @@ <h2 class="fw-normal">Heading</h2>



<section class="gradient-background">
<section class="gradient-background " id="footer-about">

<div class="container footer ">
<footer class=" container gradient-background row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 mt-5 ">
<footer class=" container gradient-background row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 ">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<!-- <a href="./index.html" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<p class="text-body-secondary">© E-smart</p>
</a> -->
<p class="text-body-secondary mt-5">© E-smart</p>
</div>

<div class="col mb-3">

</div>



<div class="col mb-3">
<h5>Appliances</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Smartphones</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Laptops</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Televisions</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Refrigerators</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">DSLR Cameras</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Air Conditioners</a></li>
</ul>
</div>

<div class="col mb-3">
<h5>Features</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Fastest Delivery</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Easy Returns</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Gift Cards</a></li>
<li class="nav-item mb-2"><a href="#heading" class="nav-link p-0 text-body-secondary">Best Deals</a></li>
<!-- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> -->
</ul>
</div>

<div class="col mb-3">
<h5>Contact Us</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<!-- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> -->
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Help</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Privacy Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
Expand Down
12 changes: 9 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
document.querySelector(".login button").addEventListener("click",function(){
document.querySelector("a").href="login.html";
})
// document.querySelector(".login button").addEventListener("click",function(){
// document.querySelector("a").href="login.html";
// })

// document.querySelectorAll(".text-end button")[i].addEventListener("click",function(){
// location.href="http://127.0.0.1:3000/project/E-smart/login.html";
// window.location="http://127.0.0.1:3000/project/E-smart/login.html";

// });
97 changes: 89 additions & 8 deletions login.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,96 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url(./night.jpg) no-repeat;
background-size: cover;
background-position: center;
}

.card-container{
background-color: black;
.wrapper{
width: 420px;
background: transparent;
border:2px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(20px);
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
color: #fff;
border-radius: 10px;
padding: 30px 40px;
}
.wrapper h1{
font-size: 36px;
text-align: center;
}
.wrapper .input-box{
width: 100%;
height: 60px;
position: relative;
margin-top: 20px;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 40px;
font-size: 16px;
color: #fff;
padding: 20px 40px 20px 20px;
}
.input-box input::placeholder{
color: #fff;

.row{
background-color: blue;
}
.wrapper .remember-forgot{
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: 15px 5px 15px;
}
.remember-forgot label input{
accent-color: #fff;
margin-right: 3px;
}
.remember-forgot a {
color: #fff;
text-decoration: none;
}
.remember-forgot a:hover{
text-decoration: underline;
color: red;
}
.wrapper .btn{
width: 100%;
height: 45px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
color: #333;
font-weight: 700;
}
.wrapper .register-link{
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;

.col{
background-color: brown;
}
.register-link p a{
color: #fff;
text-decoration: none;
font-weight: 600;
}
.register-link p a:hover{
text-decoration: underline;
color: blue;
}
36 changes: 21 additions & 15 deletions login.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,31 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login-Signup</title>
<link rel="stylesheet" href="Login.css">
<title>login form</title>
<link rel="stylesheet" href="./login.css">
</head>
<body>

<div class="card-container ">
<div class="pack-card row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 " >

<div class="col ">
<div class="card "> One</div>
<div class="wrapper">
<form action="">
<h1>Login </h1>
<div class="input-box">
<input type="text" placeholder="Username" required>
</div>

<div class="col">
<div class="card "> Two</div>
<div class="input-box">
<input type="password" placeholder="Password" required>
</div>

</div>

</div>
<div class="remember-forgot">
<label>
<input type="checkbox">Remember me
</label>
<a href="#">Forgot password ?</a>
</div>
<button type="submit" class="btn">Login</button>

<div class="register-link">
<p>Don't have an account?<a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>
Binary file added night.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 54fb0da

Please sign in to comment.