Skip to content

Commit

Permalink
improve Signup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@dipak2005
dipak2005 committed Nov 2, 2024
1 parent 8b0295f commit 8dff7e4
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 24 deletions.
14 changes: 14 additions & 0 deletions assets/css/register.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,18 @@
.error {
color: red;
font-size: 0.9em;
}
.btn-transparent{
width: 100px;
padding: 10px;
border: none;
border-radius: 20px;
font-size: medium;
font-weight: 900;
background-color: white;
color: #4d84e2;
}
.btn-transparent:hover{
background-color: #1e90ff;
color: white;
}
52 changes: 35 additions & 17 deletions loginPage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@
margin: 0;
padding: 0;
box-sizing: border-box;

}

body,
input {
font-family: "Poppins", sans-serif;
font-family: 'Arial', sans-serif;
}

.container {
position: relative;
width: 100%;
background-color: #54c5c9;
background: linear-gradient(to right, white,rgb(73, 143, 248));
min-height: 100vh;
overflow: hidden;
}
Expand Down Expand Up @@ -62,7 +63,7 @@ form.sign-in-form {

.title {
font-size: 2.2rem;
color: #444;
color:white;
margin-bottom: 10px;
}

Expand All @@ -82,7 +83,8 @@ form.sign-in-form {
.input-field i {
text-align: center;
line-height: 55px;
color: #acacac;
color: #4d84e2;
padding: 10px;
transition: 0.5s;
font-size: 1.1rem;
}
Expand All @@ -98,13 +100,14 @@ form.sign-in-form {
}

.input-field input::placeholder {
color: #aaa;
color:#4d84e2;
font-weight: 500;
}

.social-text {
padding: 0.7rem 0;
font-size: 1rem;
color: white;
}

.social-media {
Expand All @@ -118,7 +121,7 @@ form.sign-in-form {
display: inline-flex;
justify-content: center;
align-items: center;
border: 2px solid #333;
border: 2px solid white;
border-radius: 50%;
padding: 15px;
margin: 5px;
Expand All @@ -134,28 +137,30 @@ form.sign-in-form {

.social-icon {
font-size: 22px;
color: inherit;
color: blue;
transition: none;
}


.btn {
width: 150px;
background-color: #000000;
background-color: white;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
color:#1e90ff;
text-transform: uppercase;
font-weight: 600;
font-weight: 900;
font-size: medium;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}

.btn:hover {
background-color: #4d84e2;
background-color: #1e90ff;
color: white;
}

.panels-container {
Expand All @@ -176,7 +181,7 @@ form.sign-in-form {
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #000000 0%, #000000 100%);
background: linear-gradient(-45deg, #68acf0 0%, blue 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
Expand Down Expand Up @@ -414,7 +419,7 @@ form.sign-in-form {
top: 20px;
left: 20px;
background: #ffffff;
color: #000000;
color:#1e90ff;
padding: 10px;
border-radius: 10px;
cursor: pointer;
Expand All @@ -423,15 +428,15 @@ form.sign-in-form {
}

.homeBtn:hover {
background: #232323;
background: #1e90ff;
}

.homeBtn:hover i {
color: white;
}

.homeBtn:active {
background: #191919;
background: blue;
}

.circle {
Expand All @@ -453,12 +458,25 @@ form.sign-in-form {
}

.forgot-password a {
color: black;
color: white;
text-decoration: underline;
transition: color 0.3s;

}

.btn-transparent{
width: 100px;
padding: 10px;
border: none;
border-radius: 20px;
font-size: medium;
font-weight: 900;
background-color: white;
color: #4d84e2;
}
.btn-transparent:hover{
background-color: #1e90ff;
color: white;
}
.forgot-password a:hover {
color: blue;
}
Expand Down
8 changes: 4 additions & 4 deletions loginPage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,7 +465,7 @@ <h2 class="title">Sign in</h2>


<div class="forgot-password">
<a href="#" onclick="forgotPassword()">Forgot Password?</a>
<a href="#" onclick="forgotPassword()" >Forgot Password?</a>
</div>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
Expand Down Expand Up @@ -519,7 +519,7 @@ <h2 class="title">Sign up</h2>
<div class="social-icons">
<div class="social-icon-frame">
<a href="https://www.google.com" target="_blank" class="social-icon">
<i class="fab fa-google"></i>
<i class="fab fa-google" ></i>
</a>
</div>
<div class="social-icon-frame">
Expand Down Expand Up @@ -599,15 +599,15 @@ <h3>New here ?</h3>
<a href="index.html" class="homeBtn">
<i class="fas fa-home"></i>
</a>
<button class="btn transparent" id="sign-up-btn">Sign up</button>
<button class="btn-transparent" id="sign-up-btn">Sign up</button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<div class="panel right-panel">
<div class="content">
<h3>One of us ?</h3>
<p>Welcome to our community</p>
<button class="btn transparent" id="sign-in-btn">Sign in</button>
<button class="btn-transparent" id="sign-in-btn">Sign in</button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
Expand Down
6 changes: 3 additions & 3 deletions registerpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ <h2 class="title">Sign up</h2>
<div id="strength-medium"></div>
<div id="strength-strong"></div>
</div>
<input type="submit" class="btn" value="Sign up" />
<input type="submit" class="btn" value="Sign up" style="background-color: aqua;"/>
</form>
</div>
</div>
Expand Down Expand Up @@ -134,7 +134,7 @@ <h3>Already Have a Account ?</h3>
Discover new experiences with BuddyTrail! <br>Signing in to your Account.
</p>
<a href="./loginPage.html">
<button class="btn transparent" id="sign-up-btn">
<button class="btn-transparent" id="sign-up-btn">
Login
</button>
</a>
Expand All @@ -148,7 +148,7 @@ <h3>One of us ?</h3>
Welcome back to our community
</p>
<a href="./loginPage.html">
<button class="btn transparent" id="sign-in-btn">
<button class="btn-transparent" id="sign-in-btn" >
Sign in
</button>
</a>
Expand Down

0 comments on commit 8dff7e4

Please sign in to comment.