Skip to content

Commit

Permalink
verification form FundMyLaptop#2
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasRita
thomasRita committed Jul 8, 2020
1 parent 03fc9ae commit 9262906
Show file tree
Hide file tree
Showing 2 changed files with 283 additions and 0 deletions.
196 changes: 196 additions & 0 deletions src/verification-form-2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fund My Laptop</title>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&amp;display=swap"
rel="stylesheet">
<link rel="stylesheet" href="../styles/bootstrap-css/bootstrap.css">
<link rel="stylesheet" href="../styles/custom-css/verification-form-2.css">
<link rel="stylesheet" href="../styles/custom-css/blog-list.css">
<link rel="stylesheet" href="../styles/custom-css/contact-us.css">

</head>
<body>
<div class="nav-container container-fluid shadow-sm">
<nav class="navbar nav-top navbar-expand-md navbar-light container-md px-0">
<a class="navbar-brand" href="#">
<img src="../img/layer1.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto align-items-center">
<li class="nav-item">
<a class="nav-link px-4 font-weight-bold" href="#">Lend</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 font-weight-bold" href="#">Borrow</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 font-weight-bold" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link pl-md-4 font-weight-bold" href="#">
<button class="btn btn-fml-secondary px-4">
Login
</button>
</a>
</li>
</ul>
</div>
</nav>
</div><br><br>
<div class="container mb-5">
<h1 class="heading-primary text-center mb-5">Verification</h1>
<div class="wrapper mb-5">
<div class="wrapper-content align-self-center">
<div class="number">1</div>
<div class="divider-line"></div>
</div>

<div class="wrapper-content align-self-center">
<div class="number" id="active-number">2</div>
<div class="divider-line"></div>
</div>

<div class="wrapper-content align-self-center">
<div class="number">3</div>
<div class="divider-line"></div>
</div>

<div class="wrapper-content align-self-center">
<div class="number">4</div>
<div class="divider-line"></div>
</div>
</div>
<div class="text-center">
<p class="p-text">Link an Account</p>
</div>

<div class="account-info mb-5">
<p>Don't worry your information is private and will not be shared with anyone except <span
class="fund-color">Fundmylaptop</span></p>
</div>
</div>
<div class="container">
<form class="needs-validation" novalidate="">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name"
value="Mark" required="">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected="">Select your bank</option>
<option>...</option>
</select>
</div>

<div class="col-md-6 mb-3">
<label for="validationCustom02">Mobile Name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto"
required="">
<div class="valid-feedback">
Looks good!
</div>
</div>

<div class="col-md-6 mb-3">
<label for="validationCustom02">Account Number</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto"
required="">
<div class="valid-feedback">
Looks good!
</div>
</div>

<div class="col-md-6 mb-3">
<label for="validationCustom02">Surname</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto"
required="">
<div class="valid-feedback">
Looks good!
</div>
</div>

<div class="col-md-6 mb-3">
<label for="validationCustom02">BVN</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto"
required="">
<div class="valid-feedback">
Looks good!
</div>
</div>

</div>
</form>
<div class="mt-5">
<p>Any questions? <span class="call-us">Call Us Now</span></p>
</div>
<div class="save mb-5">
<a href="#" class="skip btn btn-secondary btn-lg align-self-center">Skip&gt;</a>
<a href="#" class="save-btn btn-secondary btn-lg align-self-center">Save and Continue</a>
</div>
</div>

<footer class="footer container-fluid bg-fml-primary pt-5 pb-3">
<div class="footer-li container">
<div class="row mx-0 justify-content-center justify-content-md-between text-light text-center text-md-left">
<div class="col-md-3 px-0">
<ul class="nav flex-column">
<li><img src="../img/Group 3005.png" alt=""></li>
<li>address</li>
<li>email address</li>
<li>phone</li>
</ul>

<div>
<ul class="footer-icons nav d-flex justify-content-center justify-content-md-start">
<li>
<a href="#"><img src="../img/Vector (1).png" alt=""></a>
</li>
<li><a href="#"><img src="../img/Vector (2).png" alt=""></a></li>
<li><a href="#"><img src="../img/Vector (3).png" alt=""></a></li>
</ul>
</div>
</div>

<div class="col-md-3 px-0">
<ul class="nav resources flex-column pt-4 pt-md-0">
<h4>RESOURCES</h4>
<li>Why choose FundMyLaptop</li>
<li>How P2P Lending works</li>
<li>About FundMyLaptop</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div class="container mt-4 text-light">
<div class="row mx-0 bye justify-content-md-between justify-content-center">
<p class="mb-0">2020 © Copyright All Rights Reserved</p>

<ul class="nav bye">
<li>FAQ</li>
<li>Privacy Policy</li>
<li>Terms &amp; Conditions</li>
</ul>
</div>
</div>

<script src="../js/bootstrap-js/jquery.js"></script>
<script src="../js/bootstrap-js/bootstrap.js"></script>
<script src="../js/bootstrap-js/popper.js"></script>

</footer>
</body>
</html>
87 changes: 87 additions & 0 deletions styles/custom-css/verification-form-2.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
.wrapper {
display: grid;
grid-template-columns: repeat(4, 150px);
margin: 0 auto;
width: 50%;
}


.wrapper-content {
width: 23%;
position: relative;
margin: 0 auto;
}


.number {
border-radius: 80%;
width: 40px;
height: 40px;
padding: 3px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem;
background-color: #C0C0C0;
}


#active-number {
background-color: #FB3F5C;
color: #ffffff;
}


.divider-line {
height: 1px;
border: 1px solid #C0C0C0;
position: absolute;
width: 7.5rem;
top: 33%;
left: 80%;
}


.save {
text-align: right;
text-decoration: none;
}


.skip {
height: 43px;
margin-bottom: 5px;
background-color: #E5E5E5;
color: #04172A;
font-family: DM Sans;
font-style: normal;
font-weight: 500;
}


.save-btn {
background-color: #FB3F5C;
color: #ffffff;
border: none;
}


.p-text {
margin-right: 5rem;
}


.fund-color {
color: #FB3F5C;
}


.call-us {
color: #FB3F5C;
}


.account-info {
width: 50%;
}

0 comments on commit 9262906

Please sign in to comment.