Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix signup and login pages design issue#582 #723

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix signup and login pages design issue#582 #723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82b3f94
Fix signup and login pages design #582
rishika105 Oct 21, 2024
1e74e3b
merge conflict
rishika105 Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added login/icee.avif
View file
Open in desktop
Binary file not shown.
241 changes: 120 additions & 121 deletions login/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,160 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ff8a00, #e52e71);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}

.container {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 650px;
width: 100%;
gap: 20px;
}

.login-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: 40px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.login-box {
background: rgba(255, 255, 255, 0.2);
padding: 40px;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform: perspective(1000px); /* Adding perspective for 3D effect */
width: 350px;
height: 450px;
}

h2 {
color: white;
margin-bottom: 20px;
width: 53%;
padding: 20px;
position: relative;
}

.login-form, .signup-form {
display: flex;
flex-direction: column;
.welcome{
text-align: center;
}

.input-group {
position: relative;
margin-bottom: 20px;
.ice-cream-image {
position: absolute;
width: 250px;
height: 368px;
border-radius: 0px 10px 10px 0px;
left: 800px;
}

.input-group input {
width: 100%;
padding: 10px 50px 10px 40px; /* Left padding increased for the icon */
border: none;
border-bottom: 2px solid white;
background: transparent;
color: white;
font-size: 16px;
.login-box h2 {
color: #FF69B4;
margin-bottom: 30px;
font-size: 28px;
}

.login-btn{
margin-top: 30px;
width: 370px;
}

.input-group label {
position: absolute;
top: 50%;
left: 40px; /* Adjusted label positioning to avoid overlap with icon */
transform: translateY(-50%);
color: white;
pointer-events: none;
transition: 0.3s;
.login-form {
display: flex;
flex-direction: column;
}

.input-group input:focus ~ label,
.input-group input:valid ~ label {
top: -9px; /* When input is focused, label moves up */
left: -9px;
font-size: 12px;
color: #ff8a00; /* Highlighted color */
}
.input-group i {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: white; /* Adjusted icon color */
.input-group {
position: relative;
margin-bottom: 20px;
}

.input-group input {
width: 100%;
padding: 12px;
border: none;
border-radius: 25px;
background-color: #F0F0F0;
font-size: 16px;
transition: all 0.3s ease;
}


.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: white;
.input-group label {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: all 0.3s ease;
}

.toggle-password:hover i {
color: #ff8a00; /* Change the color on hover */
cursor: pointer;
.input-group input:focus + label,
.input-group input:valid + label {
top: -10px;
left: 10px;
font-size: 12px;
color: #FF69B4;
background-color: white;
padding: 0 5px;
}
.login-btn, .signup-btn {
padding: 10px;
border: none;
border-radius: 30px;
background-color: #e52e71;
color: white;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;

.login-btn {
padding: 12px;
background-color: #FF69B4;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}

.login-btn:hover, .signup-btn:hover {
background-color: #ff8a00;
.login-btn:hover {
background-color: #FF1493;
transform: scale(1.05);
}

.extra-links {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 120px;
display: flex;
justify-content: space-between;
margin-top: 20px;
}

.extra-links button {
padding: 10px;
border: none;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
transition: background 0.3s;
.home-btn, .signup-btn {
background: none;
border: none;
color: #FF69B4;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}

.extra-links button:hover {
background-color: rgba(255, 255, 255, 0.3);
.home-btn:hover, .signup-btn:hover {
color: #FF1493;
}

.extra-links .home-btn i,
.extra-links .signup-btn i,
.extra-links .login-btn i {
margin-right: 8px;
}
/* Responsive design */
@media (max-width: 768px) {
.container {
flex-direction: column;
padding: 10px;
}

a{
text-decoration: none;
color: white;
}
.login-box {
width: 100%;
margin-bottom: 20px;
}

input:focus{
outline: none;
.ice-cream-image {
width: 200px;
height: auto;
}
}

.input-group input:focus {
border-bottom: 2px solid #ff8a00;
outline: none;
box-shadow: 0px 4px 10px rgba(255, 138, 0, 0.2); /* Subtle shadow on focus */
@media (max-width: 480px) {
.login-container {
flex-direction: column;
}

.ice-cream-image {
width: 150px;
height: auto;
}
}
8 changes: 6 additions & 2 deletions login/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="login-container">
<div id="login-box" class="login-box">
<h2>Welcome Back!</h2>
<h2 class="welcome">Welcome Back!</h2>
<form class="login-form">
<div class="input-group">
<input type="email" name="email" required>
Expand All @@ -25,9 +26,12 @@ <h2>Welcome Back!</h2>
<button class="home-btn"><i class="fas fa-home"></i> <a href="../index.html">Home</a></button>
<button class="signup-btn"><i class="fas fa-user-plus"></i><a href="../signup/signup.html">Signup</a></button>
</div>
</form>
</form>
</div>
<img src="icee.avif" alt="ice-cream-image" class="ice-cream-image">
</div>

</div>
<script src="login.js"></script>
</body>
</html>
4 changes: 1 addition & 3 deletions login/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,6 @@ document.addEventListener('DOMContentLoaded', () => {
});




// password toggle feature
function togglePasswordVisibility() {
const passwordInput = document.getElementById("password");
Expand All @@ -106,4 +104,4 @@ function togglePasswordVisibility() {
eyeIcon.classList.remove("fa-eye-slash");
eyeIcon.classList.add("fa-eye");
}
}
}
Binary file added login/loginImg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading