ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивная форма авторизации для сайта

Адаптивная форма авторизации для сайта

Адаптивная форма авторизации для сайта
Адаптивная страница входа систему чрезвычайно важна для веб-дизайна или для приложений, особенно для интернет-магазинов или тематических сайтов. Где вашему вниманию представлена отзывчивая страница, которая принадлежит по своему функционалу для гостей или пользователей. Где гость может пройти регистрацию, а пользователь зайти под своим логином.

Также нужно помнить, что привлекательная страница входа быстро привлечет внимание пользователя, направит большое количество посетителей на ваш сайт и увеличит клиентскую базу. Большинство страниц входа в систему включают такие элементы, как имя пользователя, пароль и все остальные ссылки перехода по входу под своим именем на сайт или прохождение регистраций.

Так автоматически полностью функционал выводит по центру, это если вы просматриваете с мобильного гаджет.

Форма входа для сайтов

Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

HTML

Код
<div class="avtorizovasya">
  <div class="avto-vaslas">
  <h1>login</h1>
  </div>
  <div class="vasuged-kupalas">
  <h3>Имя пользователя:</h3>
  <input type="text" placeholder="Username"/><br>
  <h3>Пароль:</h3>
  <input type="password" placeholder="Password"/>
  <br>
  <input type="button" value="Вход" class="aloplus-mudesa"/>
  <br>
  <a class="naugs-palasug">Подписаться!</a>
  <br>
  <h6 class="vsamus-pugasd">Не можете получить доступ к своей учетной записи?</h6>
  </div>
</div>
<div class="gsalus-medas">
  <div class="gasces-nomlaged">Ошибка: попробуйте еще раз?</div>
</div>

CSS

Код
body {
  background: linear-gradient(to top, #0d4079 20%, #60078c 50%, #bb1ad8 80%);
  margin: 0px;
  font-family: 'Ubuntu', sans-serif;
  background-size: 100% 110%;
}
h1, h2, h3, h4, h5, h6, a {
  margin:0; padding:0;
}
.avtorizovasya {
  margin:0 auto;
  max-width:500px;
}
.avto-vaslas {
  color:#fff;
  text-align:center;
  font-size:300%;
}

}
.vasuged-kupalas {
  border:.5px solid #fff;
  background:#4facff;
  border-radius:10px;
  box-shadow:0px 0px 10px #000;
}
.vasuged-kupalas h3 {
  text-align: left;
  margin-left: 40px;
  color: #fff;
  text-shadow: 0 1px 0 #4c4646;
}
.vasuged-kupalas {
  box-sizing:border-box;
  padding-top:15px;
  padding-bottom:10%;
  margin:5% auto;
  text-align:center;
}
.avtorizovasya input[type="text"],
.avtorizovasya input[type="password"] {
  max-width:400px;
  width: 80%;
  line-height:3em;
  font-family: 'Ubuntu', sans-serif;
  margin:1em 2em;
  border-radius:5px;
  border:2px solid #f2f2f2;
  outline:none;
  padding-left:10px;
}
.vasuged-kupalas input[type="button"] {
  height:30px;
  width:100px;
  background:#fff;
  border:1px solid #f2f2f2;
  border-radius:20px;
  color: slategrey;
  text-transform:uppercase;
  font-family: 'Ubuntu', sans-serif;
  cursor:pointer;
}
.naugs-palasug{
  color:#f2f2f2;
  margin-left:-70%;
  cursor:pointer;
  text-decoration:underline;
}
.vsamus-pugasd {
  color:#E86850;
  margin:20px 0px 20px -57%;
  text-decoration:underline;
  cursor:pointer;
}
.gasces-nomlaged {
  color:#f2f2f2;
  text-decoration:underline;
  cursor:pointer;
}

/*Media Querie*/
@media only screen and (min-width : 150px) and (max-width : 530px){
  .vasuged-kupalas h3 {
  text-align:center;
  margin:0;
  }
  .naugs-palasug, .vsamus-pugasd {
  margin:10px 0;
  }
  .aloplus-mudesa {
  margin-bottom:10px;
  }
}

JS

Код
$('.gsalus-medas').hide(0);

$('.aloplus-mudesa , .vsamus-pugasd').click(function(){
  $('.avtorizovasya').slideUp(500);
  $('.gsalus-medas').slideDown(1000);
});

$('.gasces-nomlaged').click(function(){
  $('.gsalus-medas').hide(0);
  $('.avtorizovasya').slideDown(1000);
});

Она сильно от других не отличается, разве только, что отлично смотрится на большом мониторе. Если просматривать его на мобильных экранах, то там аналогично все корректно выводит все элементы и тот функционал, который нужен.

Поэтому сегодня мы выбрали стиль с градиентами, который смориться элегантно для страницы входа, что создан с использованием HTML и CSS, где также задействован JavaScript и нужно подключить библиотеку.

Демонстрация
2020-04-19 Загрузок: 1 Просмотров: 281 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar