The subscribe form works but the place holder text isn't visible and when you try to type you cannot see what you're typing either. Works in Chrome and Internet Explorer but not in Firefox.
I've included an image of what it looks like in chrome and in firefox
.nform .input-group .input {
margin-bottom: 15px;
height: 30px;
}
.nform .form-control {
max-width: auto;
margin: 1px;
padding: 21px;
font-weight: 300;
color: #6a6a6a;
}
.form .input-group {
margin-bottom: 15px;
}
.footer-distributed form {
display: inline-block;
}
.footer-distributed form input,
.footer-distributed form textarea {
display: block;
border-radius: 3px;
box-sizing: border-box;
background-color: #fafafa;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
resize: none;
font: inherit;
font-size: 14px;
font-weight: normal;
color: #969696;
width: 280px;
padding: 18px;
}
.footer-distributed::-webkit-input-placeholder {
color: #5c666b;
}
.footer-distributed::-moz-placeholder {
color: #00aaff;
opacity: 1;
}
.footer-distributed:-ms-input-placeholder {
color: #00aaff;
}
.footer-distributed form input {
height: 20px;
margin-bottom: 15px;
}
.footer-distributed form textarea {
height: 75px;
margin-bottom: 20px;
}
.footer-distributed form button {
border-radius: 3px;
background-color: #00bbff;
color: #ffffff;
border: 0;
padding: 6px 40px;
font-weight: 500;
font-size: 18px;
float: right;
letter-spacing: 1px;
height: 42px;
}
.footer-distributed form button:hover {
border-radius: 3px;
background-color: #ffffff;
color: #00bbff;
border: 1px solid #00bfff;
padding: 6px 40px;
font-weight: 500;
float: right;
letter-spacing: 1px;
height: 42px;
}
<div class="col-md-6 col-sm-6 col-xs-12">
<div class=" subscribe-foot section-wrapper">
<p class="subscribe-nowfoot">
text
<br>text
</p>
<div class="col-md-8 col-sm-8 col-xs-12 col-sm-push-2">
<form class="nform">
<div class="input-group">
<input type="email" class="form-control border-radius" placeholder="Email address">
<span class="input-group-btn">
<button class="btn btn-form border-radius " type="button">Sign up</button>
</span>
</div>
</form>
</div>
</div>
</div>
Related
For a personal project, I need to create the following search form.
I have almost succeeded, but I have a little with the grey background where the location icon is located since only half of the background color appear.
Here is my code:
#search-content {
display: flex;
flex-direction: row;
flex-flow: row wrap;
padding: 16px 0px 0px 16px;
}
#search-form {
height: 42px;
border: 1px solid #F2F2F2;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-location{
height: 42px;
border-radius: 5px;
background-color: #F2F2F2;
}
#search-input {
color: black;
font-family: Raleway;
font-size: 14px;
border-width: 0;
height: 30px;
background: transparent;
}
#search-input:focus{
outline: none;
}
#search-input::placeholder{
color: black;
font-family: Raleway;
font-size: 14px;
font-weight: bold;
}
#search-button {
height: 42px;
width: 80px;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #0065FC;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
#search-button:hover, #search-button:active{
background-color: #0065fcb7;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/
css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js"
crossorigin="anonymous"></script>
<div id="search-content">
<form id="search-form">
<i id="search-location" class="fa-solid fa-location-dot"></i>
<input id="search-input" type="text" placeholder="Marseille, France"/>
<button id="search-button" type="submit"> Search </button>
</form>
</div>
I thank in advance anyone who will take the time to help me.
You can add some padding to the #search-location and control the border-radius corners individually so you have the 90degree corners on the inside
#search-content {
display: flex;
flex-direction: row;
flex-flow: row wrap;
padding: 16px 0px 0px 16px;
}
#search-form {
height: 42px;
border: 1px solid #F2F2F2;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-location {
height: 42px;
padding: 15px;
border-radius: 5px 0px 5px 0px;
background-color: #F2F2F2;
}
#search-input {
color: black;
font-family: Raleway;
font-size: 14px;
border-width: 0;
height: 30px;
background: transparent;
}
#search-input:focus {
outline: none;
}
#search-input::placeholder {
color: black;
font-family: Raleway;
font-size: 14px;
font-weight: bold;
}
#search-button {
height: 42px;
width: 80px;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #0065FC;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
#search-button:hover,
#search-button:active {
background-color: #0065fcb7;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/
css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>
<div id="search-content">
<form id="search-form">
<i id="search-location" class="fa-solid fa-location-dot"></i>
<input id="search-input" type="text" placeholder="Marseille, France" />
<button id="search-button" type="submit"> Search </button>
</form>
</div>
I want to add a logo from font-awesome on the left of the home link in the nav bar. But when I added it the design of the entire page is ruined. I wanted all the links in the navbar in a single line but as soon as added that icon position of all the elements in ruined. Please someone suggest an edit such that the icon remains there as well as the design and responsiveness changes.
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: #091118;
}
nav{
position: relative;
margin: 0;
padding: 0;
font-size: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
border-radius: 15px;
background-color: #04111ffa;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
line-height: 50px;
z-index: 5;
text-align: center;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
span.fas {
max-width: 50px;
}
<nav>
<span class="fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Docs
<div class="animation start-home"></div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: #091118;
}
nav{
position: relative;
margin: 0;
padding: 0;
font-size: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
border-radius: 15px;
background-color: #04111ffa;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
line-height: 50px;
z-index: 5;
text-align: center;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
span.fas {
width: 100%;
display: block;
color: #fff;
font-size: 20px;
text-align: center;
}
<nav>
<span class="fas fa-bars">bars</span>
Home
About
Contact
Privacy Policy
Docs
<div class="animation start-home"></div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
I created a dropdown menu and set the position: absolute; and my login card move to the left of the title instead I want it to be in the middle of the title. is there any way I can do it?
Thank you and sorry for my bad English
HTML:
<li>
<div class="drop">
<span><i class="fas fa-caret-down"></i> Thành Viên</span>
<div class="drop_menu">
<div id="login_title">
<h2>LOGIN</h2>
<div class="under_login"></div>
</div>
<div class="dropdown_login ">
<form method="post" class="form">
<label for="user-email" style="padding-top:13px">
Email
</label>
<input id="user-email" class="form-content" type="email" name="email" autocomplete="on" required />
<div class="form-border"></div>
<label for="user-password" style="padding-top:22px"> Password
</label>
<input id="user-password" class="form-content" type="password" name="password" required />
<div class="form-border"></div>
<a href="#">
<legend id="forgot-pass">Forgot password?</legend>
</a>
<input id="submit-btn" type="submit" name="submit" value="LOGIN" />
Don't have account yet?
</form>
</div>
</div>
</div>
</li>
CSS:
.nav_bar {
width: 100%;
height: 80px;
background: url(../pic/bg_menu.png);
border: 0.5px solid rgb(179, 41, 41);
box-shadow: 0 4px 2px -2px rgb(99, 99, 99);
text-align: center;
}
.nav_bar div.menu_br {
position: absolute;
margin-left: 50px;
text-align: center;
float: left;
}
.menu_br img {
margin-top: 2.5px;
max-width: 78%;
}
.nav_bar ul {
margin-top: 20px;
position: relative;
}
.nav_bar ul li {
list-style-type: none;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
font-size: 25px;
font-family: 'Nunito', sans-serif;
color: white;
display: inline-block;
}
.nav_bar ul li:hover {
text-decoration: underline;
}
#need_br {
border-right: 0.5px solid rgb(102, 102, 102);
}
.drop_menu {
position: absolute;
display: none;
background: #fbfbfb;
border-radius: 8px;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
margin-right: 300px;
height: 410px;
width: 329px;
z-index: 1;
}
.dropdown_menu_show {
display: block;
}
.dropdown_login {
color: black;
padding: 12px 44px;
}
#login_title {
font-family: "Raleway Thin", sans-serif;
color: #000;
letter-spacing: 4px;
padding-bottom: 23px;
padding-top: 23px;
text-align: center;
}
.under_login {
background: -webkit-linear-gradient(right, #f77b7b, #c0382e);
height: 2px;
width: 89px;
margin: auto;
}
#signup {
color: #bd2d2d;
font-family: "Raleway", sans-serif;
font-size: 10pt;
margin-top: 16px;
text-align: center;
}
label {
font-family: "Raleway", sans-serif;
font-size: 11pt;
}
#forgot-pass {
color: #bd2d2d;
font-family: "Raleway", sans-serif;
font-size: 10pt;
margin-top: 3px;
text-align: right;
}
#submit-btn {
background: -webkit-linear-gradient(right, #f77b7b, #bd2d2d);
border: none;
border-radius: 21px;
box-shadow: 0px 1px 8px #c62424;
cursor: pointer;
color: white;
font-family: "Raleway SemiBold", sans-serif;
height: 42.3px;
margin: 0 auto;
margin-top: 50px;
transition: 0.25s;
width: 153px;
}
#submit-btn:hover {
box-shadow: 0px 1px 18px #c62424;
}
.form {
align-items: left;
display: flex;
flex-direction: column;
}
.form-border {
background: -webkit-linear-gradient(right, #f77b7b, #c02e2e);
height: 1px;
width: 100%;
}
.form-content {
background: #fbfbfb;
border: none;
outline: none;
padding-top: 14px;
}
The dropdown needs to have
position: relative;
and then you can move it to the left using
right: 500px; or whatever amount you want.
drop_menu {
position: absolute;
display: none;
background: #fbfbfb;
border-radius: 8px;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 410px;
width: 329px;
z-index: 1;
}
use this css for dropdown
I'm trying fix the Log-In & registration form. When you click on "Register" on my menu, you can see that the labels are perfectly formatted in the form but the input box are offset. I tried to fix it with float:left but it didn't work out too well. If somebody could help me with that, that would be awesome.
var popup = document.getElementById('id01');
var popupreg = document.getElementById('id02');
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
if (event.target == popupreg) {
popupreg.style.display = "none";
}
}
body {
margin: 0 auto;
background: #fff;
}
div.container {
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.main-menu {
width: 200px;
margin: 0 auto;
right: 26px;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 35%;
}
.floating-sidebar li {
text-decoration: none;
outline: none;
line-height: 2em;
display: block;
border-radius: auto;
position: relative;
top: 10px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.floating-sidebar li a {
background-color: #fff;
color: #444950;
display: block;
padding: 7px;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18;
font-weight: bold;
border-radius: 9px;
}
.floating-sidebar li a:hover {
background-color: #eee;
color: #00B200;
}
.floating-sidebar li a.active {
background-color: #eee;
color: #00B200;
}
.floating-sidebar:hover li a.register-link {
color: #b5e7a0;
background: #fff;
}
.floating-sidebar li a.active:hover {
background-color: #00B200;
color: #fff;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
}
input::placeholder {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}
.sortby-box {
padding-top: 124px;
padding-left: 44;
margin: 0 auto;
position: fixed;
}
.select-opt {
padding: 4px;
width: 120px;
border-radius: 8px;
outline: none;
border: 1px solid #00B200;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.select-opt option {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.popup,
.popupreg {
display: none;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
padding-top: 60px;
}
.popup-content,
.popupreg-content {
float: left;
position: fixed;
background-color: rgb(245, 245, 245);
width: 600px;
height: 400px;
border-radius: 39px;
left: 666px;
top: 210px;
border: 2px solid rgb(109, 196, 109);
}
.popup,
.popupreg label {
font-family: Arial, Helvetica, sans-serif;
}
.popup [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popupreg [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popup input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popupreg input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popup [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popupreg [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popup .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.popupreg .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.cancel {
text-align: right;
position: relative;
cursor: pointer;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.username-section,
.reg-section {
padding: 32px;
margin-left: 75px;
margin-top: 20px;
}
span.psswrd {
float: right;
padding-top: 16px;
}
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<header>
<div class="container">
Hello
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<div class="main-menu">
<ul class="floating-sidebar">
<li>Log In</li>
<li>Register</li>
<li>About</li>
<li>Language</li>
</ul>
</div>
</sidebar>
<div class="sortby-box">
<select class="select-opt">
<option>Newest</option>
<option>Popularity</option>
<option>Recommended</option>
</select>
</div>
<div class="topnav">
<input style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
<div id="id01" class="popup">
<form class="popup-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="username-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Log In">
</div>
</form>
</div>
<div id="id02" class="popupreg">
<form class="popupreg-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="reg-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="usrname">Mail</label>
<input type="text" id="mail" name="mail" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Register">
</div>
</form>
</div>
<script src="index.js"></script>
<footer>
</footer>
A simple fix would be to give the label elements a display: inline-block; and give them a defined width such as width: 100px;.
I quickly created a JSFiddle to illustrate.
Hope this helped.
I have coded a login form but it has responsitivity issues with it's submit button and along I want the padding inside the form to decrease also. I do know media queries but I don't want to use those so if you people can propose a solution without using media queries as :
/* VMS Forms ((START)) */
.vms-form-container {
margin: 0 auto;
}
.vms-form-container a {
text-decoration: none;
}
.vms-form-footer a:hover {
color: white;
}
.vms-form-footer a:visited {
color: white;
}
.vms-form {
text-align: center;
border: 1px solid #a68888;
padding: 9% 17% 8% 17%;
font-family: Arial;
}
.vms-form-footer {
text-align: center;
padding: 7% 17% 7% 17%;
background-color: rgb(37, 80, 87);
color: white;
}
.vms-form-inner {
margin-top: 37px;
}
.vms-form-inner input {
display: block;
margin:0 auto;
padding: 7px;
width: 73%;
margin-bottom: 15px;
border: 1px solid #d6cfcf;
}
.vms-form-inner input:focus {
border: 1px solid rgb(221,129,126);
}
.vms-form-inner .vms-form-submit {
background-color: rgb(199, 109, 106);
display: block;
padding: 7px 121px 7px 121px;
color: white;
border-radius: 2px;
}
.vms-form-inner .vms-form-submit span {
position: absolute;
margin-top: -25px;
margin-left: 130px;
display: block;
background-color: rgb(184, 98, 95);
padding: 5px 11px 5px 11px;
border-radius: 2px;
}
.vms-form-inner a {
text-align: right;
display: block;
width: 342px;
font-size: 12px;
}
.vms-form-title {
font-size: 175%;
color: #483535;
letter-spacing: 2.5px;
margin-bottom: 10px;
}
.vms-form-title-bold {
font-weight: bold;
}
.vms-form-title-bottom-border {
width: 80px;
height: 1px;
margin: 0px auto;
border-bottom: 2px solid #483535;
}
/* VMS Forms ((END)) */
<div class="container" style="padding-top: 60px;padding-bottom: 60px;">
<!-- VMS Form -->
<div class="vms-form-container col-sm-8">
<div class="vms-form">
<div class="vms-form-title">
VENUE <span class="vms-form-title-bold">LOGIN</span>
</div>
<div class="vms-form-title-bottom-border"></div>
<div class="vms-form-inner">
<form>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<br>
<button type="submit">
<div class="vms-form-submit">LOGIN <span>✔</span></div>
</button>
> Forgot Password ? Reset
</form>
</div>
</div>
<div class="vms-form-footer">
<a href="#!">
<img src="../images/vms/icon-vms-form-footer.png">
> or create an account
</a>
</div>
</div>
</div>
EXPECTED OUTPUT IN ALL SCREENS :
Try it by giving the login button a width attribute just like with the inputs.
Also style the button directly instead of putting a styled div inside.
.vms-form-container {
margin: 0 auto;
}
.vms-form-container a {
text-decoration: none;
}
.vms-form-footer a:hover {
color: white;
}
.vms-form-footer a:visited {
color: white;
}
.vms-form {
text-align: center;
border: 1px solid #a68888;
padding: 9% 17% 8% 17%;
font-family: Arial;
}
.vms-form-footer {
text-align: center;
padding: 7% 17% 7% 17%;
background-color: rgb(37, 80, 87);
color: white;
}
.vms-form-inner {
margin-top: 37px;
}
.vms-form-inner input {
display: block;
margin: 0 auto;
padding: 7px;
width: 73%;
margin-bottom: 15px;
border: 1px solid #d6cfcf;
box-sizing: border-box;
}
.vms-form-inner input:focus {
border: 1px solid rgb(221, 129, 126);
}
.vms-form-inner .vms-form-submit {
background-color: rgb(199, 109, 106);
display: inline-block;
padding: 7px;
width: 73%;
color: white;
border-radius: 2px;
border: none;
position: relative;
}
.vms-form-inner .vms-form-submit span {
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
width: 14px;
display: block;
background-color: rgb(184, 98, 95);
padding: 5px 11px 5px 11px;
border-radius: 2px;
}
.vms-form-inner a {
text-align: right;
display: block;
width: 342px;
font-size: 12px;
}
.vms-form-title {
font-size: 175%;
color: #483535;
letter-spacing: 2.5px;
margin-bottom: 10px;
}
.vms-form-title-bold {
font-weight: bold;
}
.vms-form-title-bottom-border {
width: 80px;
height: 1px;
margin: 0px auto;
border-bottom: 2px solid #483535;
}
<!-- VMS Form -->
<div class="vms-form-container col-sm-8">
<div class="vms-form">
<div class="vms-form-title">
VENUE <span class="vms-form-title-bold">LOGIN</span>
</div>
<div class="vms-form-title-bottom-border"></div>
<div class="vms-form-inner">
<form>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<br>
<button type="submit" class="vms-form-submit">
LOGIN
<span>✔</span></div>
</button>
> Forgot Password ? Reset
</form>
</div>
</div>
<div class="vms-form-footer">
<a href="#!">
<img src="../images/vms/icon-vms-form-footer.png">
> or create an account
</a>
</div>
</div>