Skip to content

Instantly share code, notes, and snippets.

@olabamipetaiwo

olabamipetaiwo/index.html

Last active September 21, 2020 12:23
Show Gist options
  • Save olabamipetaiwo/12aad6886469038f80968dc0905ea459 to your computer and use it in GitHub Desktop.
Save olabamipetaiwo/12aad6886469038f80968dc0905ea459 to your computer and use it in GitHub Desktop.
Download ZIP
LearnStack Sign up page built with HTML,CSS,Javascript
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<title>LearnWorld</title>
</head>
<body>
<!-- Website Preloader -->
<div class="loading">
</div>
<!-- Website Preloader -->
<!-- Website Navigation Bar -->
<nav>
<a class="logo" href="index.html">
LearnWorld
<span>Logo goes here</span>
</a>
</nav>
<!-- Website Navigation Bar -->
<!-- Main Website -->
<main class="main">
<section class="content">
<h1>Register with us and get started</h1>
<ul class="indicators">
<li class="1 active">Main Info</li>
<li class="2">Type</li>
<li class="3">Login</li>
</ul>
<section class="content__box">
<!-- First Panel -->
<div class="tab-1">
<h1>Basic Information</h1>
<div class="alert__box">
</div>
<form id="signupform" method="POST" data-parsley-validate="" >
<div class="form__group">
<label>Email</label>
<input type="email"
name="email"
id="email"
autocomplete="on"
data-parsley-trigger="blur"
placeholder="Email" required/>
</div>
<div class="form__group">
<label>Password</label>
<input type="password"
name="password"
id="password"
autocomplete="on"
required
placeholder="Password"
data-parsley-trigger="blur"
data-parsley-minlength="4" />
<!-- <span class="passwordError"></span> -->
</div>
<div class="form__group">
<label>Confirm Password</label>
<input type="password"
name="cpassword"
id="cpassword"
autocomplete="on"
required
data-parsley-trigger="blur"
data-parsley-equalto="#password"
placeholder="Password" />
<!-- <span class="passwordError"></span> -->
</div>
<div class="form__group">
<div class="form__row">
<input type="checkbox"
id="terms"
required
name="terms"
value="terms">
<label>Click here to indicate that you have read and agree to the terms presented in the Terms and Conditions agreement</label>
</div>
</div>
<div class="control">
<button class="button login" type="button">Login</button>
<input type="submit" id="nextBtn" class="button end" value="Next">
</div>
</form>
</div>
<!-- Second Panel -->
<div class="tab-2">
<h1>You are registering as a</h1>
<form class="role">
<div class="role-radio left">
<input type="radio" name="role" value="tutor" id="tutor" />
<label for="tutor">
<figure>
<img src="./icon-2.png" alt="">
</figure>
<span>Tutor</span>
</label>
</div>
<div class="role-radio">
<input type="radio" name="role" value="customer" id="customer" checked />
<label for="customer">
<figure>
<img src="./icon-3.png" alt="">
</figure>
<span>Customer</span>
</label>
</div>
</form>
<div class="control">
<button class="button" type="button" id="prevBtn">Previous</button>
<button class="button" type="button" id="register">Register</button>
</div>
</div>
<!-- Third Panel -->
<div class="tab-3">
<div class="info">
<h1>
Congratulations for your succesful registration on our website as a <span id="chosenRole"></span>
</h1>
<p>If you are not redirected to your login page in 5 seconds,please click the button below</p>
<button class="button login" type="button">Login Here</button>
</div>
</div>
</section>
</section>
</main>
<!-- Main Website -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="./parsley.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment