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

feat:Add Register Page #26

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

feat:Add Register Page #26

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d1b54e
feat:Add Register Page
Mercysticks Nov 30, 2022
e63403c
feat:Update Register Page
Mercysticks Dec 1, 2022
b3b83a2
feat:Update Register Page
Mercysticks Dec 2, 2022
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
42 changes: 42 additions & 0 deletions components/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<section class="reg">
<div class="reg__container">
<div class="reg__img-box">
<div class="reg__logo-box">
<img src="assets\icons\Vector.svg" alt="" class="reg__logo">
<img src="assets\icons\Digit.svg" alt="" class="reg__logo-text">
</div>

<div class="reg__transparent">
<h1 class="reg__title">Tips!!!</h1>
<p class="reg__desc">We offer a complete package of high-quality digital marketing services at affordable prices. Call now for a fast quote!</p>
</div>
</div>
<div class="reg__form-container">
<h2 class="reg__form-head">Create Account</h2>
<p class="reg__form-desc">Enter your details to get start your track started with us.</p>
<form action="" class="reg__form">
<label for="name" class="reg__label">Name <input type="text" id="name" type="name" class="reg__input"></label>
<label for="email" class="reg__label">Email <input type="email" id="email" name="email" class="reg__input"></label>
<label for="phone-number" class="reg__label">Phone Number <input type="text" id="phone-number" type="phone-number" class="reg__input"></label>
<label for="address" class="reg__label">Address <input type="text" id="address" name="address" class="reg__input "></label>
<div class="reg__input-flex">
<label for="gender" class="reg__label reg__label--active">Gender <input type="text" id="gender" name="gender" class="reg__input reg__input--active"></label>
<label for="age" class="reg__label reg__label--active">Age range <input type="text" id="age" name="age" class="reg__input reg__input--active"></label>

</div>
<label for="track" class="reg__label">Track <input type="text" id="track" name="track" class="reg__input"></label>
<div class="reg__input-flex">
<label for="time" class="reg__label reg__label--active">Time dedication <input type="text" id="time" name="time" class="reg__input reg__input--active"></label>
<label for="employment" class="reg__label reg__label--active">Employment Status <input type="text" id="employment" name="employment" class="reg__input reg__input--active"></label>
</div>


<input type="submit" class="reg__submit reg__submit--active" value="Register">

<p class="reg__btn-desc">Already have an account ? <a class=reg__forget href="login.html"> Login here </a></p>
</form>

</div>
</div>

</section>
156 changes: 156 additions & 0 deletions css/style.comp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1504,3 +1504,159 @@ select {
@media (min-width: 1301px) and (max-width: 1440px) {
.login__btn-desc {
width: 400px; } }

.reg__container {
display: flex;
height: 983px;
margin: 0 auto;
align-items: center; }

.reg__img-box {
background: url("/assets/images/wes-hicks-4-EeTnaC1S4-unsplash 1.png");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 983px;
position: relative; }
@media (min-width: 300px) and (max-width: 1300px) {
.reg__img-box {
display: none; } }

.reg__logo-box {
display: flex;
margin-left: 6.2em;
gap: 1em;
padding-top: 2em;
width: 70px; }

.reg__transparent {
width: 602px;
height: 192px;
position: absolute;
top: 40.625em;
left: 6.2em;
background: black;
background: rgba(250, 250, 250, 0.4);
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.08);
border-radius: 12px;
filter: blur(0.5px); }
@media (min-width: 1301px) and (max-width: 1400px) {
.reg__transparent {
left: 3em;
width: 570px; } }

.reg__title {
width: 88px;
height: 40px;
margin-left: 1.2em;
margin-top: 1em;
font-weight: 700;
font-size: 2em;
line-height: 40px;
color: #F5F5F5; }

.reg__desc {
margin-left: 2em;
margin-top: 10px;
width: 528px;
font-weight: 600;
font-size: 20px;
line-height: 30px;
color: #F5F5F5; }

.reg__form-container {
padding: 100px; }
@media (min-width: 300px) and (max-width: 1300px) {
.reg__form-container {
margin: 0 auto; } }

.reg__form-head {
width: 330px;
font-weight: 700;
font-size: 30px;
line-height: 40px;
margin-top: -200px; }
@media (min-width: 300px) and (max-width: 1300px) {
.reg__form-head {
margin-top: 50px; } }

.reg__form-desc {
width: 475px;
font-weight: 500;
font-size: 24px;
line-height: 36px;
margin-top: 1em; }

.reg__form {
width: 450px;
height: 382px;
margin-top: 50px; }

.reg__label {
display: block;
margin: 0.3rem 0rem;
font-weight: 700;
font-size: 20px;
line-height: 18px;
width: 53px;
color: #111111;
padding-bottom: 1em; }

.reg__label:nth-of-type(3) {
width: 142px; }

.reg__label--active {
width: 187px; }

.reg__input, .reg__submit {
width: 475px;
height: 50px;
background-color: #F5F5F5;
border: none;
border-radius: 8px;
padding: 16px;
outline: none;
margin-top: 0.5em; }

.reg__input--active {
width: 205px; }

.reg__input-flex {
display: flex;
align-items: center;
gap: 82px; }

.reg__forget-pass {
float: right; }

.reg__forget {
text-align: right;
font-weight: 500;
font-size: 20px;
line-height: 18px;
text-decoration: none;
color: #0d41e1;
margin-top: 50px; }

.reg__submit {
width: 475px;
height: 50px;
padding: 4px 16px;
color: #FFFFFF;
background-color: #0d41e1;
font-weight: 600;
font-size: 20px;
line-height: 36px; }

.reg__submit:hover {
background-color: #3464f5;
transform: translateY(-2px);
transition: all 2s ease; }

.reg__btn-desc {
text-align: center;
width: 475px;
font-weight: 500;
font-size: 20px;
line-height: 36px;
margin-top: 30px; }
156 changes: 156 additions & 0 deletions css/style.concat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1505,3 +1505,159 @@ select {
@media (min-width: 1301px) and (max-width: 1440px) {
.login__btn-desc {
width: 400px; } }

.reg__container {
display: flex;
height: 983px;
margin: 0 auto;
align-items: center; }

.reg__img-box {
background: url("/assets/images/wes-hicks-4-EeTnaC1S4-unsplash 1.png");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 983px;
position: relative; }
@media (min-width: 300px) and (max-width: 1300px) {
.reg__img-box {
display: none; } }

.reg__logo-box {
display: flex;
margin-left: 6.2em;
gap: 1em;
padding-top: 2em;
width: 70px; }

.reg__transparent {
width: 602px;
height: 192px;
position: absolute;
top: 40.625em;
left: 6.2em;
background: black;
background: rgba(250, 250, 250, 0.4);
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.08);
border-radius: 12px;
filter: blur(0.5px); }
@media (min-width: 1301px) and (max-width: 1400px) {
.reg__transparent {
left: 3em;
width: 570px; } }

.reg__title {
width: 88px;
height: 40px;
margin-left: 1.2em;
margin-top: 1em;
font-weight: 700;
font-size: 2em;
line-height: 40px;
color: #F5F5F5; }

.reg__desc {
margin-left: 2em;
margin-top: 10px;
width: 528px;
font-weight: 600;
font-size: 20px;
line-height: 30px;
color: #F5F5F5; }

.reg__form-container {
padding: 100px; }
@media (min-width: 300px) and (max-width: 1300px) {
.reg__form-container {
margin: 0 auto; } }

.reg__form-head {
width: 330px;
font-weight: 700;
font-size: 30px;
line-height: 40px;
margin-top: -200px; }
@media (min-width: 300px) and (max-width: 1300px) {
.reg__form-head {
margin-top: 50px; } }

.reg__form-desc {
width: 475px;
font-weight: 500;
font-size: 24px;
line-height: 36px;
margin-top: 1em; }

.reg__form {
width: 450px;
height: 382px;
margin-top: 50px; }

.reg__label {
display: block;
margin: 0.3rem 0rem;
font-weight: 700;
font-size: 20px;
line-height: 18px;
width: 53px;
color: #111111;
padding-bottom: 1em; }

.reg__label:nth-of-type(3) {
width: 142px; }

.reg__label--active {
width: 187px; }

.reg__input, .reg__submit {
width: 475px;
height: 50px;
background-color: #F5F5F5;
border: none;
border-radius: 8px;
padding: 16px;
outline: none;
margin-top: 0.5em; }

.reg__input--active {
width: 205px; }

.reg__input-flex {
display: flex;
align-items: center;
gap: 82px; }

.reg__forget-pass {
float: right; }

.reg__forget {
text-align: right;
font-weight: 500;
font-size: 20px;
line-height: 18px;
text-decoration: none;
color: #0d41e1;
margin-top: 50px; }

.reg__submit {
width: 475px;
height: 50px;
padding: 4px 16px;
color: #FFFFFF;
background-color: #0d41e1;
font-weight: 600;
font-size: 20px;
line-height: 36px; }

.reg__submit:hover {
background-color: #3464f5;
transform: translateY(-2px);
transition: all 2s ease; }

.reg__btn-desc {
text-align: center;
width: 475px;
font-weight: 500;
font-size: 20px;
line-height: 36px;
margin-top: 30px; }
Loading