Форма регистрации в модальном окне

by Andrey Dobrovoi

HTML

<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;amp;subset=cyrillic"></script>
<div class="topbar">
        <h1 class="site-title"><a href="#">

        <!-- Logo begin -->
            { * dbmast.ru * }
        <!-- Logo end -->

        </a></h1>

        <nav class="top-navigation" role="navigation">
            <ul class="inline-list padded-list">
                    <li><a href="#" class="icon ion-university">Уроки</a></li>
                    <li><a href="#" class="icon ion-map">Карта</a></li>
                    <li><a href="#" class="icon ion-chatbubbles">Чат</a></li>
                    <li><a href="#" class="icon ion-paper-airplane">Новости</a></li>
                    <li><a href="#" class="icon ion-edit">Блог</a></li>
                    <li><a href="#login" class="icon ion-android-exit button button-red button-login toggle-hide">Войти</a></li>
            </ul>
        </nav>
    </div>

<!-- Login -->
<div id="modal-bg" class="login-modal-bg toggle-hide"></div>
<div id="login" class="login-container">
    <div class="col half">
        <h3>Войти с помощью Email</h3>
        <form>
            <div class="input-group">
                <input id="email" type="email" placeholder="Email">
                <label class="icon-label" for="email"><i class="icon ion-email"></i></label>
            </div>

            <div class="input-group">
                <input id="password" type="password" placeholder="Пароль">
                <label class="icon-label" for="password"><i class="icon ion-key"></i></label>
            </div>

            <input type="submit" value="Войти" class="button button-red full-width">

            <p class="small"><a href="#">Забыли пароль?</a>
            <br><a href="#">Зарегистрируйтесь с помощью своего Email</a></p>
        </form>
    </div>
    <div class="col half highlighted-bg">
        <button...

CSS

*,
::after,
::before {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  border: 0;
}
html {
  box-sizing: border-box;
  line-height: 1.4;
}

body {
  color: #678EB2;
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
}

a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

main a {
  box-shadow: inset 0 -2px #F2B139;
  color: #229FBF;
}
main a:hover {
  box-shadow: inset 0 -30em #F2B139;
  color: #fff;
}

h1,
h2,
h3 {
  text-align: center;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 3.6em;
  line-height: 1.4;
  margin-top: 0.46667em;
  margin-bottom: 0.46667em;
}

h2 {
  font-size: 1.8em;
  line-height: 1.4;
  margin-top: 0.85556em;
  margin-bottom: 0.85556em;
}

h3 {
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1.4;
  margin-top: 1.3em;
  margin-bottom: 1.3em;
}

img {
  max-width: 100%;
}

p {
  margin: 1.4rem 0;
}

small,
.small {
  font-size: 0.8em;
  line-height: 1.4;
  margin-top: 2.3em;
  margin-bottom: 2.3em;
}

input {
  background: none;
  border: 1px solid #229FBF;
  font: inherit;
  padding: 0.7rem;
  width: 100%;
  max-width: 100%;
}
input:focus {
  box-shadow: inset 0 0 6px #229FBF;
  outline: 0;
}

::-moz-selection {
  background: #229FBF;
  color: #fff;
}

::selection {
  background: #229FBF;
  color: #fff;
}

::-moz-selection {
  background: #229FBF;
  color: #fff;
}

::-webkit-input-placeholder {
  color: #229FBF;
}

::-moz-placeholder {
  color: #229FBF;
}

.button {
  background: #6da768;
  border-radius: 3px;
  border: 0;
  box-shadow: 0 4px #528552;
  color: #fff;
  display: inline-block;
  padding: calc(0.7rem - 1px) 1.4rem;    
  font-size: 16px;
  cursor: pointer;
}
.button:focus {
  outline: 0;
}
.button-red {
  background: #E03E4F;
  border: 1px solid #E03E4F;
  box-shadow: 0 4px #BF2F45;
}
.button-red:hover, .button-red:focus {
  background: #f34459;
  box-shadow: 0 4px #dd324d;
  outline:...

JavaScript

var buttonsHide = document.querySelectorAll('.toggle-hide'),
    buttonsArray = [].slice.call(buttonsHide),
    modal = document.getElementById('login'),
    modalBg = document.getElementById('modal-bg');

function toggleModal(){
    modal.classList.toggle('unhide');
    modalBg.classList.toggle('unhide');
}

buttonsArray.forEach(function (el){
    el.addEventListener('click', function(ev){
        ev.preventDefault();
        toggleModal();
    });
});