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

Jump to bottom

enhance signup page #371

Closed
wants to merge 2 commits into from
+70 −4
Closed

enhance signup page #371

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cb8756
enhance signup page
gaurav-mehta19 Oct 20, 2024
65ea195
ui change of signup page
gaurav-mehta19 Oct 20, 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
22 changes: 12 additions & 10 deletions register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,26 +133,28 @@
<div class="container">
<div class="form_area">
<p class="title">SIGN UP</p>
<form action="">
<form class="form" action="">
<div class="form_group">
<label class="sub_title" for="name">Name</label>
<input placeholder="Enter your full name" class="form_style" type="text">
<label class="form-title" for="name">Name</label>
<input placeholder="Enter your full name" class="form_input" type="text">
</div>
<div class="form_group">
<label class="sub_title" for="email">Email</label>
<input placeholder="Enter your email" id="email" class="form_style" type="email">
<label class="form-title" for="email">Email</label>
<input placeholder="Enter your email" id="email" class="form_input" type="email">
</div>
<div class="form_group">
<label class="sub_title" for="password">Password</label>
<input placeholder="Enter your password" id="password" class="form_style"
<label class="form-title" for="password">Password</label>
<input placeholder="Enter your password" id="password" class="form_input"
type="password">
</div>
<div>
<div style="text-align: center; margin-bottom: 14px;">
<button class="btn">SIGN UP</button>
<p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
</a>
</div>
<div style="margin-bottom: 20px;">
<p style="font-size: 1em;">Have an Account? <a class="form_link" href="">Login Here!</a></p>
</div>
</div><a class="link" href="">

</a>
</form>
</div><a class="link" href="">
Expand Down
64 changes: 64 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,7 @@ nav ul li a:hover {
}



/* Sign Up Section */
.signup {
background-color: #f9f9f9;
Expand Down Expand Up @@ -1238,3 +1239,66 @@ body.dark-mode {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Light shadow */
font-size: 1.2em;
}

.title{
font-size: 2.5em;
color: #2c3e50;
font-weight: bold;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
Comment on lines +1243 to +1250
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using relative units for better responsiveness.

The .title class uses fixed em units for font size. For better responsiveness, consider using relative units like rem or viewport units.

.title {
-  font-size: 2.5em;
+  font-size: 2.5rem;
   color: #2c3e50;
   font-weight: bold;
   text-align: center;
   margin-top: 20px;
   margin-bottom: 20px;
}

This change allows the title to scale better with the root font size and viewport.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.title{
font-size: 2.5em;
color: #2c3e50;
font-weight: bold;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.title{
font-size: 2.5rem;
color: #2c3e50;
font-weight: bold;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}


.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: auto;
gap: 20px
}

.form-title {
font-size: 1.25em;
color: black;
margin-bottom: 2px;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance accessibility with proper labeling.

To improve accessibility, ensure that form inputs are properly associated with their labels. Consider adding for attributes to labels and id attributes to inputs.

.form-title {
   font-size: 1.25em;
   color: black;
   margin-bottom: 2px;
+  display: block;
}

.form_input {
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin-bottom: 10px;
+  width: 100%;
}

Also, add the following HTML structure to your form:

<label for="input-name" class="form-title">Name:</label>
<input id="input-name" type="text" class="form_input" />

This change improves the association between labels and inputs, enhancing accessibility.

Also applies to: 1274-1279


.form_group {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}

.form_input {
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}

.btn{
background-color: #00796b;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn:hover{
background-color: #005f46;
}
Comment on lines +1281 to +1293
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider grouping button styles.

The .btn and .btn:hover styles could be grouped together for better maintainability. Also, consider adding a focus state for keyboard navigation.

.btn {
   background-color: #00796b;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s;
-}
-
-.btn:hover {
+  &:hover,
+  &:focus {
     background-color: #005f46;
+  }
}

This change groups related styles and improves keyboard accessibility.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.btn{
background-color: #00796b;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover{
background-color: #005f46;
}
.btn {
background-color: #00796b;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
&:hover,
&:focus {
background-color: #005f46;
}
}


.form_link{
font-size: 1em;
color: #00796b;
text-decoration: none;
margin-top: 5px;
}

.form_link:hover{
text-decoration: underline;
}