Форма регистрации с картинкой / Формы / Сниппеты Bootstrap

Версия: v1.0.0

Категория: Формы

Bootstrap: 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Vue, React, Laravel, Angular, WHMCS

Язык: Английский

Вес файла: 1.3 Kb

Уникальный ID: 4966

Количество символов:

Посмотрели: 3182 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-4966-20

Скачали бесплатно: 109 раз

Прокомментировали: 0 раз

Рейтинг: 3.0 / 5 - 23 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, сниппет, формы, Форма регистрации, форма с картинкой, bootstrap 4, Form

Поделился: BootstrapТема

Добавлено: 2021-11-29 в 10:35

Метка: 1638171320

⇄ ⇅

.bform h1,
.bform h2,
.bform h3,
.bform h4,
.bform h5,
.bform h6 {
 color: #3e4555;
}

.bform .subtitle {
 color: #8d97ad;
 line-height: 24px;
}

.bform a {
 text-decoration: none;
}

.bform .btn-danger-gradiant {
 background: #ff4d7e;
 background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
 background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
 background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
 background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
 background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
}

.bform .btn-danger-gradiant:hover {
 background: #ff6a5b;
 background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
 background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
 background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
 background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
 background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}

.bform .btn-md {
 padding: 15px 45px;
 font-size: 16px;
}

.bform .bg-facebook {
 background-color: #3b5a9a;
}

.bform .bg-twitter {
 background-color: #56adf2;
}

.bform .text-danger {
 color: #ff4d7e !important;
}

.bform .right-image {
 background-position: center bottom;
 background-size: cover;
 background-repeat: no-repeat;
 position: absolute;
 right: 0;
 bottom: 0;
 top: 0;
}

@media (max-width: 1023px) {
 .bform .contact-form {
 padding-left: 0;
 padding-right: 0;
 }
}

@media (max-width: 767px) {
 .bform .contact-form {
 padding-left: 15px;
 padding-right: 15px;
 }
}

@media (max-width: 1023px) {
 .bform .right-image {
 position: relative;
 bottom: -95px;
 }
}
</style>

<div class="bform py-5">
 
 <div class="row">
 <div class="container">
 <div class="col-lg-6 align-justify-center pr-4 pl-0 contact-form">
 <div class="">
 <h2 class="mb-3 font-weight-light">Get Register For Free</h2>
 <h6 class="subtitle font-weight-normal">Lorem ipsum dolor sit amet, adipiscing.</h6>
 <form class="mt-3">
 <div class="row">
 <div class="col-lg-12">
 <div class="form-group">
 <input class="form-control" type="text" placeholder="full name">
 </div>
 </div>
 <div class="col-lg-12">
 <div class="form-group">
 <input class="form-control" type="email" placeholder="email address">
 </div>
 </div>
 <div class="col-lg-6">
 <div class="form-group">
 <input class="form-control" type="password" placeholder="password">
 </div>
 </div>
 <div class="col-lg-6">
 <div class="form-group">
 <input class="form-control" type="password" placeholder="confirm password">
 </div>
 </div>
 <div class="col-lg-12">
 <button type="submit" class="btn btn-md btn-block btn-danger-gradiant text-white border-0"><span> Create Account</span></button>
 
 </div>
 </div>
 </form>
 <div class="row">
 <div class="col-lg-12 text-center mt-4">
 <h6 class="font-weight-normal">Signup with Social Accounts</h6>
 <div class="row">
 <div class="col-lg-6 col-md-6">
 <a href="#" class="btn btn-block bg-facebook text-white mt-3">Facebook</a>
 </div>
 <div class="col-lg-6 col-md-6">
 <a href="#" class="btn btn-block bg-twitter text-white mt-3">Twitter</a>
 </div>
 </div>
 </div>
 <div class="col-lg-12 text-center mt-4">
 Already have an account? <a href="#" class="text-danger">Sign In</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-6 right-image pl-3" style="background-image:url(https://bootstraptema.ru/images/demo/600x600/demo1.jpeg);">
 </div>
 </div>
</div>

BootstrapTema

Форма регистрации с картинкой

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0