Отпетый users registration form html. Создание HTML форм

With the revolution in the concept of web page design and maintaining, to develop a closer relationship with one visiting your page is important. The viewer may be in need of using it other times, on the other hand you get active visitors for your web page. Here the concept of sign in form and registration form pups up. Firstly, after having a look over the importance, we will approach with better way to insert some Beautiful HTML CSS Sign Up and Registration Form over your web page.

While surfing over internet, you come across the ready to use sign up forms. These forms ask the details of user like name, address, email Id, Photo, gender, job including biography. The sign up forms includes username and password as basic elements. Some of these components may vary as per the form you select but basic idea is to verify the identity of your user and develop better link with them.

Among many HTML, CSS forms over internet we have listed down some best one in terms of their compatibility, flexibility and space occupied. These will be of great help for you.

This full page, responsive CodePen is the creation of Dany Santos. The login forms only contain email and password whereas sign in form contains email, username and password. In addition these components only appear once you choose whether to log in or sign up. With the background animation this one looks attractive.

Similar to the first one this is also the CodePen by Eric whereas the component of forms is also similar. But, here the component appears in the same page so you don’t have to initially select to view the components. But admit the fact that with the plain background this one is less attractive but is flexible and light weighted.

This is simple looking registration form including plenty of examples. It is easily compatible with windows and androids as well. Moreover, designers himself have separated the forms in different categories like mini, labels in top, validity and so on. This is interactive and user friendly form example by tutorialzine.
Download and Demo

Jose Carnerioover made this simple and light weighted form by Jose over CodePen featuring to collect large number of information. It includes gender, date of birth and payment option including credit card number beside the basic one i.e. email and password. So this is best designed for online shopping and marketing.
Code and Demo

This compatible user friendly code for sign in and sign up form is the design of Josh Sorosky. It has a simple look and coded with HTML, CSS and JavaScript. Sign up Screen Animation only contain the basic things like username and password including email for sign up form.
Code and Demo

This attractive and beautiful log in and registration form is the creation of Grandvincvcent Marion. With the beautiful background picture and just basic component on forms this is actually popular with thousands of views. This is well flexible allowing easy modification and is a attractive one.

Material design log in sin up form is simple and extremely light weighted form by Brawada over CodePen. This composes of HTML, CSS and JavaScript codes and looks simple and beautiful. It just includes the basic component of forms and uses less space of your web page.
Download and Code

This is interactive, beautiful code by Kyle Lavery. Its simplicity makes it popular with, many thousand of view. Furthermore material Design Signup Interaction contains just basic component of forms but you can easily add up newer one as this is highly flexible. This is simple registration form over CodePen.
Code and Demo

Martin Machycek is popular developer in CodePen. He designed this very simple and good looking sign up and login form through HTML, CSS and JavaScript. In addition it is compatible and light weighted which is the best aspect of this form. It just included email and Password so better useful for simple WebPages then commercial one.
View Code and Demo

Sign in and Sign up – Single Form

This is interactive light weighted sign in and sign up forms by Dany Santos over CodePen. It is simple with just email and password so not well designed for commercial purpose. Because of its less weight and simple nature it has collected few thousand of view making it the attractive one.

This is interactive sign up form by Matthew Largent. Not only email and password but it also includes other personal information like age interest and biography. So this is useful for commercial sites and job searching sites. Moreover it has only HTML and CSS code, however is the useful one.
Code and Demo

This is the attractive sign up form by Kov Jonas. Moreover it provides with easy linkage with social media used by viewers. Furthermore this facility makes a frequent link u with viewers and furthermore even helps in advertisement of pages over social media. With the beautiful background image in addition to flexibility, it is well preferred.
View Code and Demo

This is extremely simple and light login form coded with HTML5 and CSS3. This is design of Aigars Silkans. It only included username and password so best designed for informative personal blogs and small websites. Fact that this has maximum number of views unlike some other CodePen is convincing.
Live Demo and Code

This beautiful sign up form is the creation of Momciloo Popov. Along with the simple components of a form it furthermore has an image side by that moves with the touch. It included all HTML, CSS and JavaScript codes.

Last but not the least, Sign up Daily UI is best login form for mobile phone by Gabrielle wee over CodePen. Moreover, it looks attractive with the background image and animation can easily replace that image. It just includes name, email and password.

Conclusion
Initially we know, among many aspects of your web page, registration and sign up follows the first order. This creates the profile of each user and moreover leads to better user management systems. In the first pace, HTML is the building block of everything and CSS makes things look attractive. So, HTML and CSS sums up making a beautiful HTML CSS Sign Up and Registration Form for your web page.

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <p><b>HTML разметка </b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> </p><p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. Внешний вид формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> 23.09.18 6.8K <p>Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.</p> <h2>WordPress Login Customizer</h2> <p>Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress. </p><h2>Creative Login Form</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-381859-740x576.jpg' width="100%" loading=lazy></p> <p>Простая, но креативная форма входа, созданная с помощью HTML и CSS3. Ее также можно использовать и как форму регистрации. Это наш любимый шаблон из представленных в этом списке.</p> <p>Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.</p> <h2>Форма авторизации №1</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-381954-740x576.jpg' width="100%" loading=lazy></p><p>Простая, креативная и яркая форма входа с градиентным фоном. Вы можете использовать ее для любых целей, таких как авторизация в веб-сервисе, мобильном или десктопном приложении. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №2</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382310-740x576.jpg' width="100%" loading=lazy></p><p>Минималистичная и изысканная форма входа с кнопкой, градиентной заливкой, а также с анимацией и логотипом. Используйте ее, изменив необходимые элементы. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №3</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382397-740x576.jpg' width="100%" loading=lazy></p><p>Страница входа с фоновым изображением, тенью и эффектом наведения для кнопки входа в систему. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №4</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382542-740x576.jpg' width="100%" loading=lazy></p><p>Вы можете скачать эту веб-форму и использовать по своему усмотрению. Она является полностью адаптивной. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №5</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382632-740x576.jpg' width="100%" loading=lazy></p><p>Прекрасная и современная форма с опциями входа через Facebook или Google. Ее кнопки имеют красивые эффекты наведения, что позволяет предоставить пользователям прекрасный опыт взаимодействия. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №6</h2> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382732-740x576.jpg' width="100%" loading=lazy></p> <p>Если веб-страница аккуратная и красивая, форма входа не должна отличаться от ее дизайна. Вот форма, которая точно оправдает ваши ожидания.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №7</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382814-740x576.jpg' width="100%" loading=lazy></p><p>Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №8</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382889-740x576.jpg' width="100%" loading=lazy></p><p>Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №9</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382967-740x576.jpg' width="100%" loading=lazy></p><p>Если хотите уйти от чисто белого или одноцветного дизайна, вам стоит обратить внимание на эту форму. Она поддерживает добавления фонового изображения или наложения градиента. Также есть опция входа через Facebook или Google. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №10</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383042-740x576.jpg' width="100%" loading=lazy></p><p>Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №11</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383129-740x576.jpg' width="100%" loading=lazy></p><p>Вместо того чтобы создавать форму с нуля, вы можете использовать готовый к использованию великолепный шаблон — такой как этот. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №12</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383241-740x576.jpg' width="100%" loading=lazy></p><p>Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода — это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №13</h2> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383321-740x576.jpg' width="100%" loading=lazy></p><p>Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая — для формы. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №14</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383394-740x576.jpg' width="100%" loading=lazy></p><p>В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 — из числа минималистичных. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №15</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383506-740x576.jpg' width="100%" loading=lazy></p><p>Довольно минималистичная форма, но в ее верхней части можно добавить баннер. Благодаря этой небольшой опции можно сделать форму более привлекательной. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №16</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383583-740x576.jpg' width="100%" loading=lazy></p><p>Это форма входа с полноэкранным изображением, поверх которого размещаются поля для ввода логина и пароля, а также кнопка с эффектом наведения. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №17</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383660-740x576.jpg' width="100%" loading=lazy></p><p>Чтобы сделать форму более персонализированной, можно использовать этот шаблон. Он включает в себя изображение, расположенное сбоку. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №18</h2> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383727-740x576.jpg' width="100%" loading=lazy></p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №19</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383796-740x576.jpg' width="100%" loading=lazy></p><p>Яркая, энергичная и захватывающая — это все о данной форме входа. Она полностью адаптивная, оптимизирована под мобильные устройства и совместима со всеми основными веб-браузерами. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №20</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383865-740x576.jpg' width="100%" loading=lazy></p><p>Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Выпадающая форма авторизации</h2> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383985-740x576.jpg' width="100%" loading=lazy></p><p>Скачать </p> <h2>Floating Sign Up Form</h2> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384046-740x576.jpg' width="100%" loading=lazy></p><p>Разработано для форм подписки с использованием вкладок и меток. </p><p>Скачать </p> <h2>Простая форма авторизации</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384103-740x576.jpg' width="100%" loading=lazy></p><p>Что раньше останавливало людей, когда они хотели авторизоваться на WordPress -сайте так это слишком простой внешний вид. В этой форме сохранен популярный дизайн, но к нему добавлено цветовое оформление. </p><p>Скачать </p> <h2>Flat Login – Sign Up Form</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384165-740x576.jpg' width="100%" loading=lazy></p><p>Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации. </p><p>Скачать </p> <h2>Login With Self-Contained SCSS Form</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384224-740x576.jpg' width="100%" loading=lazy></p><p>Это форма, созданная с использованием SCSS. Расширение CSS, которое добавляет базовому языку новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое. </p><p>Скачать </p> <h2>Animated Login Form</h2> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384300-740x576.jpg' width="100%" loading=lazy></p><p>Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки. </p><p>Скачать </p> <h2>Login Form Using CSS3 And HTML5</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384367-740x576.jpg' width="100%" loading=lazy></p><p>Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и:before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных. </p><p>Скачать </p> <h2>Login With Shake Effect</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384437-740x576.jpg' width="100%" loading=lazy></p><p>Если вы ввели неправильный пароль, то будете уведомлены об этом с помощью красивого эффекта дрожания. Простое и эффективное решение. </p><p>Скачать </p> <h2>Boxy Login Form</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384496-740x576.jpg' width="100%" loading=lazy></p><p>Скачать </p> <h2>Animated Login Form</h2> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384564-740x576.jpg' width="100%" loading=lazy></p><p>Аккуратная небольшая форма входа.Когда вы нажмете кнопку “LOGIN”, расположенную слева, будет отображена форма авторизации. </p><p>Скачать </p> <h2>Material Design Form</h2> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384627-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Bootstrap Snippet Form</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384681-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Login With Flat UI</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384736-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Trendy UI Kits Form</h2> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384807-740x576.jpg' width="100%" loading=lazy></p>Скачать <p>A tutorial on how to create a switching login and registration form with HTML5 and CSS3.</p> <p>In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target . We will style it using CSS3 and an icon font. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form.</p> <p><i>Note that this is for demo purpose only, it will only work in browser supporting the:target pseudo class, and you should not use this code on a live website without providing solid fallback. </i></p> <p>In the following, we will be going through Demo 1.</p> <h3>The HTML</h3> <p>In the HTML, we will put both forms, hiding the second one with CSS. Here is the code, I’ll explain some of the interesting parts later.</p><p> <div id="container_demo" >  <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Log in</h1> <p> <label for="username" class="uname" data-icon="u" > Your email or username </label> <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p"> Your password </label> <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Keep me logged in</label> </p> <p class="login button"> <input type="submit" value="Login" /> </p> <p class="change_link">Not a member yet ? Join us </p> </form> </div> <div id="register" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1> Sign up </h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Your username</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="Sign up"/> </p> <p class="change_link">Already a member ? Go and log in </p> </form> </div> </div> </div> </p><p>We’ve added some HTML5 goodness here and used some of the new inputs. The input <i>type=password </i> automatically hides what the user is typing and replaces it with dots (depending on browser). The input <i>type=email </i> enables the browser to check if what the user entered has the format of a valid email address. We’ve also used the <i>require=required </i> attribute; browsers that support this attribute will not let the user submit the form until this field is filled, no JavaScript required.<br> The <i>autocomplete=on </i> attribute will prefill values based on earlier user input. We also used some nice placeholders for the inputs that will show some guiding value when the input is not filled.</p> <p>Now the two tricky parts. You might have noticed the two <a href> links at the top of the form. This is a little trick that will make our form behave nicely when playing with anchors, so that it won’t “jump” on long pages when we click on the switching link and trigger the:target pseudo-class.</p> <p>The second little trick is related to the use of the icon font. We will be using a data-attribute to display the icons. By setting <i>data-icon=”icon_character” </i> with the according character in the HTML we will just need one CSS attribute selector to style all the icons. Read more about this technique on 24 Ways: Displaying Icons with Fonts and Data- Attributes .</p> <h3>The CSS</h3> <p>For the clearness of the code in this tutorial, I will omit all the vendor prefixes, but you will, of course, find them in the files. Once again, I’m using some pretty advanced CSS3 tricks that might not work in all browsers. Let’s get started.</p> <h4>Styling both forms using CSS3</h4> <p>First, let’s give our two forms some general styling for the container.</p><p> #subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; } </p><p>We’ve added a nice box shadow that’s made of two shadows: an inset one to create the inner blue glow, and an outside shadow. We’ll explain the z-index in a bit.</p> <p>In the following we will style the header with some background clipping:</p><p> /**** general text styling ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** For the moment only webkit supports the background-clip:text; */ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); } </p><p>Note that at this moment only webkit browsers support <i>background-clip: text </i>, so we will create a stripped background only for webkit here, and clip it to the text to add the stripes to the H1 title. Since the <i>background-clip: text </i> property currently only works in Webkit browsers, I decided to go only with the webkit prefix. That’s the reason why I split the CSS declaration into two parts, and use a webkit prefixed gradient only. Only using the –webkit- prefix is bad practice, it’s only for demo purpose, and you should never do this on real a website! That’s also where the <i>-webkit-text-fill-color: transparent </i> comes in handy: it enables us to only have a transparent background on the webkit browsers, all the other ones will ignore it and give us the provided text color fallback.</p> <p>We also created a fading line under the title with the help of the:after pseudo-class. We use a 2px height gradient and fade the background to 0 opacity at both ends.</p> <p>Now let’s style our inputs and give them a nicer look.</p><p> /**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; } </p><p>First we style the inputs, and remove the outline. But be careful here; the outline helps the user know which input is focused, so if you remove it, you should provide some:active and:focus states for the inputs.</p><p> /* all the input except submit and checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } </p><p>Here we used the:not pseudo class, to style all inputs, except the checkbox. I provided a:focus and:active state, since I decided to remove the outline.</p> <p>And now the fun part: the icon font. Since we can’t use:before and:after pseudo classes on inputs, we’ll have to cheat a little bit: we’ll add the icon to the label, and then place it in the input. I’m using the fontomas library which puts together some nice icons. You can rearrange them to set the icon to a specific letter. Remember the <i>data-icon </i> attribute? It’s where you should put the letter. I used <i>data-icon=’u’ </i> for user, ‘e’ for email, ‘p’ for password. Once I chose the letters, I downloaded the font, and used the fontsquirrel font generator to transform it into a @font-face compatible format.</p><p> @font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** the magic icon trick ! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; } </p><p>Yeah, that’s it folks, you don’t need to have a class for each icon. We used <i>content: attr(data-icon) </i> to retrieve the letter from the data-icon attribute, so we only have to declare the font, choose a nice color and position it.</p> <p>Now let’s style the submit button for both forms.</p><p> /*styling both submit buttons */ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; } </p><p>The trick here is to use the box-shadow in order to create some extra borders. You can only use one border, but as many box-shadows as you want. We will use the length value to create a “fake” second white border, 3px wide, with no blur.</p> <p>Then we’ll style the checkbox, nothing very special here:</p><p> /* styling the checkbox "keep me logged in"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; } </p><p>We will style the bottom of the form using repeating linear gradients to create a striped background.</p><p>P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; } </p><p>Now you’ll notice that we’ve got two nice forms, but we really want only one to show at a time. So now is time for some animations!!</p> <h4>Creating the switching animation</h4> <p>The first thing to do is to hide the second form by setting the opacity to 0:</p><p> #register{ z-index: 21; opacity: 0; } </p><p>Remember that our login form had a z-index of 22? We will give the second form a z-index of 21, to put it “under” the login form.</p> <p>And now the really good part: switching the forms using the:target pseudo class. What you really have to understand about:target, is that we will use anchors to make the transition. The normal behavior of an anchor link, is to jump to the target in the page. But we don’t want to jump anywhere, we only want to switch the forms. And here comes our trick using the two links at the top of the page. Instead of directly linking to the second form, and risking getting a “jumping” effect, we actually put the two links at the top of the page and give them <i>display: none </i>. This will avoid any page jump. Credit where credit’s due: I found this trick on CSS3 create (in French).</p><p> #toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; } </p><p>So this is what happens: when we click on the <i>Join us </i> button, we trigger the #toregister. We then do the animation, by using the sibling selector ~ to find our #register element. We use an animation called <i>fadeInLeft </i>. Since we “hide” the form using zero opacity, we will use an animation that fades in, to make it appear. We’ve also changed the z-index, to make it appear on top of the other form.<br> The same happens for the other form.</p> <p>And here is the code for the animation. We are using the CSS3 animation framework from Dan Eden and adapted it for this tutorial.</p><p>Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } </p><p>The form that is “disappearing” will have another animation which will make it fade out to the left:</p><p> #toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } </p><p>You can now use other animations from Dan Eden’s animate.css: just adjust your .animate class and replace the animation names. You will also find some custom animations at the end of the animate-custom.css file.</p> <p>Well, that’s it folks. I hope you enjoyed the tutorial!</p> <p><b>Please note, that in some browsers <i>background-clip: text </i> is not supported. In Internet Explorer 9 the transitions and animations don’t work, so there will be no fancy form switching. In Internet Explorer 8 and below the:target pseudo-class is not supported, so it won’t work at all (you’ll just see the login form). </b></p> <p>Creating a membership based site seems like a daunting task at first. If you ever wanted to do this by yourself, then just gave up when you started to think how you are going to put it together using your PHP skills, then this article is for you. We are going to walk you through every aspect of creating a membership based site, with a secure members area protected by password.</p><p>The whole process consists of two big parts: user registration and user authentication. In the first part, we are going to cover creation of the registration form and storing the data in a MySQL database. In the second part, we will create the login form and use it to allow users access in the secure area.<br></p><h2>Download the code</h2><p>You can download the whole source code for the registration/login system from the link below:<br></p><p><b>Configuration & Upload </b><br> The ReadMe file contains detailed instructions.</p><p>Open the <i>source\include\membersite_config.php </i> file in a text editor and update the configuration. (Database login, your website’s name, your email address etc).</p><p>Upload the whole directory contents. Test the register.php by submitting the form.</p><h2>The registration form</h2><p>In order to create a user account, we need to gather a minimal amount of information from the user. We need his name, his email address and his desired username and password. Of course, we can ask for more information at this point, but a long form is always a turn-off. So let’s limit ourselves to just those fields.</p><p>Here is the registration form:</p><p><form id="register" action="register.php" method="post" accept-charset="UTF-8"> <fieldset > <legend>Register</legend> <input type="hidden" name="submitted" id="submitted" value="1"/> <label for="name" >Your Full Name*: </label> <input type="text" name="name" id="name" maxlength="50" /> <label for="email" >Email Address*:</label> <input type="text" name="email" id="email" maxlength="50" /> <label for="username" >UserName*:</label> <input type="text" name="username" id="username" maxlength="50" /> <label for="password" >Password*:</label> <input type="password" name="password" id="password" maxlength="50" /> <input type="submit" name="Submit" value="Submit" /> </fieldset> </form></p><p>So, we have text fields for name, email and the password. Note that we are using the for better usability.</p><h2>Form validation</h2><p>At this point it is a good idea to put some form validation code in place, so we make sure that we have all the data required to create the user account. We need to check if name and email, and password are filled in and that the email is in the proper format.</p><h2>Handling the form submission</h2><p>Now we have to handle the form data that is submitted.</p><p>Here is the sequence (see the file fg_membersite.php in the downloaded source):</p><p>function RegisterUser() { if(!isset($_POST["submitted"])) { return false; } $formvars = array(); if(!$this->ValidateRegistrationSubmission()) { return false; } $this->CollectRegistrationSubmission($formvars); if(!$this->SaveToDatabase($formvars)) { return false; } if(!$this->SendUserConfirmationEmail($formvars)) { return false; } $this->SendAdminIntimationEmail($formvars); return true; }</p><p>First, we validate the form submission. Then we collect and ‘sanitize’ the form submission data (always do this before sending email, saving to database etc). The form submission is then saved to the database table. We send an email to the user requesting confirmation. Then we intimate the admin that a user has registered.</p><h2>Saving the data in the database</h2><p>Now that we gathered all the data, we need to store it into the database.<br> Here is how we save the form submission to the database.</p><p>function SaveToDatabase(&$formvars) { if(!$this->DBLogin()) { $this->HandleError("Database login failed!"); return false; } if(!$this->Ensuretable()) { return false; } if(!$this->IsFieldUnique($formvars,"email")) { $this->HandleError("This email is already registered"); return false; } if(!$this->IsFieldUnique($formvars,"username")) { $this->HandleError("This UserName is already used. Please try another username"); return false; } if(!$this->InsertIntoDB($formvars)) { $this->HandleError("Inserting to Database failed!"); return false; } return true; }</p><p>Note that you have configured the Database login details in the membersite_config.php file. Most of the cases, you can use “localhost” for database host.<br> After logging in, we make sure that the table is existing.(If not, the script will create the required table).<br> Then we make sure that the username and email are unique. If it is not unique, we return error back to the user.</p><h3>The database table structure</h3><p>This is the table structure. The CreateTable() function in the fg_membersite.php file creates the table. Here is the code:</p><p>function CreateTable() { $qry = "Create Table $this->tablename (". "id_user INT NOT NULL AUTO_INCREMENT ,". "name VARCHAR(128) NOT NULL ,". "email VARCHAR(64) NOT NULL ,". "phone_number VARCHAR(16) NOT NULL ,". "username VARCHAR(16) NOT NULL ,". "password VARCHAR(32) NOT NULL ,". "confirmcode VARCHAR(32) ,". "PRIMARY KEY (id_user)". ")"; if(!mysql_query($qry,$this->connection)) { $this->HandleDBError("Error creating the table \nquery was\n $qry"); return false; } return true; }</p><p>The id_user field will contain the unique id of the user, and is also the primary key of the table. Notice that we allow 32 characters for the password field. We do this because, as an added security measure, we will store the password in the database encrypted using MD5. Please note that because MD5 is an one-way encryption method, we won’t be able to recover the password in case the user forgets it.</p><h3>Inserting the registration to the table</h3><p>Here is the code that we use to insert data into the database. We will have all our data available in the $formvars array.</p><p>function InsertIntoDB(&$formvars) { $confirmcode = $this->MakeConfirmationMd5($formvars["email"]); $insert_query = "insert into ".$this->tablename."(name, email, username, password, confirmcode) values ("" . $this->SanitizeForSQL($formvars["name"]) . "", "" . $this->SanitizeForSQL($formvars["email"]) . "", "" . $this->SanitizeForSQL($formvars["username"]) . "", "" . md5($formvars["password"]) . "", "" . $confirmcode . "")"; if(!mysql_query($insert_query ,$this->connection)) { $this->HandleDBError("Error inserting data to the table\nquery:$insert_query"); return false; } return true; }</p><p>Notice that we use PHP function md5() to encrypt the password before inserting it into the database.<br> Also, we make the unique confirmation code from the user’s email address.</p><h2>Sending emails</h2><p>Now that we have the registration in our database, we will send a confirmation email to the user. The user has to click a link in the confirmation email to complete the registration process.</p><p>function SendUserConfirmationEmail(&$formvars) { $mailer = new PHPMailer(); $mailer->CharSet = "utf-8"; $mailer->AddAddress($formvars["email"],$formvars["name"]); $mailer->Subject = "Your registration with ".$this->sitename; $mailer->From = $this->GetFromAddress(); $confirmcode = urlencode($this->MakeConfirmationMd5($formvars["email"])); $confirm_url = $this->GetAbsoluteURLFolder()."/confirmreg.php?code=".$confirmcode; $mailer->Body ="Hello ".$formvars["name"]."\r\n\r\n". "Thanks for your registration with ".$this->sitename."\r\n". "Please click the link below to confirm your registration.\r\n". "$confirm_url\r\n". "\r\n". "Regards,\r\n". "Webmaster\r\n". $this->sitename; if(!$mailer->Send()) { $this->HandleError("Failed sending registration confirmation email."); return false; } return true; }</p><h2>Updates</h2><p><b>9th Jan 2012 </b><br> Reset Password/Change Password features are added<br> The code is now shared at GitHub .</p><p>Welcome back <?= $fgmembersite->UserFullName(); ?>!</p><h2>License</h2><p><img src='https://i2.wp.com/gnu.org/graphics/lgplv3-147x51.png' height="51" width="147" loading=lazy><br> The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.</p><p>No related posts.</p> <p>Comments on this entry are closed.</p><ul><li><li><li><li><li></ul> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <footer> <div class="td-post-source-tags"> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://ik-ptz.ru/dictations-on-the-russian-language--class-3/otpetyi-users-registration-form-html-sozdanie-html-form.html" content="https://ik-ptz.ru/dictations-on-the-russian-language--class-3/otpetyi-users-registration-form-html-sozdanie-html-form.html" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span> <meta itemprop="name" content="Отпетый users registration form html. Создание HTML форм"> </span> <meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i2.wp.com/onaircode.com/wp-content/uploads/2017/11/Login-and-Sign-Up-Form-Concept.jpg"> <meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer> </article> <style> .ads-border { overflow: hidden; } .ads-content { width: 930px; display: block; } @media(max-width: 1140px) { .ads-content { width: 910px; } } @media(max-width: 1018px) { .ads-content { width: 970px; } } @media (max-width: 767px) { .ads-content { width: 134%; } } @media (max-width: 479px) { .ads-content { width: 100%; height: 490px; } } </style> <div class="ads-block"> <h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">СХОЖИЕ СТАТЬИ</span></h4> <div class="ads-border"> <div class="ads-content"> <div id="hozova1" style="height:90px;width:690px;" align="center"></div> </div> </div> </div> <style> #mc-container { padding: 10px; } </style> <dblock></dblock> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <aside class="widget widget_text" id="text-23"> <div class="block-title"><span>Полезное</span></div> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/physics/raschet-staticheski-neopredelennyh-sistem-svyazi-nakladyvaemye-na.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/studfiles.net/html/2706/1145/html_rnKyK1hACG.gv4C/img-4ex4ku.png" alt="Связи, накладываемые на систему" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/physics/raschet-staticheski-neopredelennyh-sistem-svyazi-nakladyvaemye-na.html" title="Связи, накладываемые на систему" rel="bookmark">Связи, накладываемые на систему</a> </li> </ul> </div> </aside> <aside class="widget widget_text" id="text-24"> <div class="block-title"><span>Реклама</span></div> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/dictations-on-the-russian-language--grade-4/sokrashchenie-algebraicheskih-drobei-pravilo-primery-sokrashchenie-drobei-iv.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/urok.1sept.ru/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8/588562/f_clip_image008.gif" alt="Сокращение алгебраических дробей: правило, примеры" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/dictations-on-the-russian-language--grade-4/sokrashchenie-algebraicheskih-drobei-pravilo-primery-sokrashchenie-drobei-iv.html" title="Сокращение алгебраических дробей: правило, примеры" rel="bookmark">Сокращение алгебраических дробей: правило, примеры</a> </li> </ul> </div> </aside> <aside class="widget widget_text" id="text-25"> <div class="textwidget"> <p style="text-align: center;"> </p> </div> </aside> <aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4"> <div class="block-title"><span>Новое</span></div> <dblock></dblock> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/algebra/proekt-bogatstva-otdannye-lyudyam-professiya-povar-prezentaciya---proekt.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/lusana.ru/files/26630/653/2.jpg" alt="Презентация - Проект «Богатства отданные людям" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/algebra/proekt-bogatstva-otdannye-lyudyam-professiya-povar-prezentaciya---proekt.html" title="Презентация - Проект «Богатства отданные людям" rel="bookmark">Презентация - Проект «Богатства отданные людям</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/social-studies/prezentaciya-po-angliiskomu-yazyku-na-temu-london-prezentaciya-na-temu-vs-o.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/fsd.videouroki.net/html/2015/04/26/98710495/img1.jpg" alt="Презентация на тему: «Всё о Лондоне»" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/social-studies/prezentaciya-po-angliiskomu-yazyku-na-temu-london-prezentaciya-na-temu-vs-o.html" title="Презентация на тему: «Всё о Лондоне»" rel="bookmark">Презентация на тему: «Всё о Лондоне»</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/algebra/skachat-prezentaciyu-na-temu-100-letnyaya-voina-stoletnyaya-voina.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/images.myshared.ru/6/591517/slide_3.jpg" alt="Столетняя война презентация к уроку на тему" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/algebra/skachat-prezentaciyu-na-temu-100-letnyaya-voina-stoletnyaya-voina.html" title="Столетняя война презентация к уроку на тему" rel="bookmark">Столетняя война презентация к уроку на тему</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/dictations-on-the-russian-language--grade-5/bakterii-drevneishaya-forma-organizmov-proekt-bakterii--drevnie.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/lahtasever.ru/wp-content/uploads/2018/0026-bakterii-i-vodorosli3.jpg" alt="Бактерии- древние организмы" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/dictations-on-the-russian-language--grade-5/bakterii-drevneishaya-forma-organizmov-proekt-bakterii--drevnie.html" title="Бактерии- древние организмы" rel="bookmark">Бактерии- древние организмы</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/presentations/napisanie-bukvy-d-konspekt-zanyatiya-po-obucheniyu-gramote-zvuk-i-bukva-bukva-d.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/static-interneturok.cdnvideo.ru/content/konspekt_image/309665/dcb6d530_e204_0133_0496_12313c0dade2.jpg" alt="Конспект занятия по обучению грамоте «Звук и буква Буква д задания для школьников" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/presentations/napisanie-bukvy-d-konspekt-zanyatiya-po-obucheniyu-gramote-zvuk-i-bukva-bukva-d.html" title="Конспект занятия по обучению грамоте «Звук и буква Буква д задания для школьников" rel="bookmark">Конспект занятия по обучению грамоте «Звук и буква Буква д задания для школьников</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/literature/uchim-bukvy-bukva-f-otkrytyi-urok-obucheniya-gramote-soglasnye-zvuki-bukvy-f-f.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/xn--i1abbnckbmcl9fb.xn--p1ai/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8/561086/img2.gif" alt="Открытый урок обучения грамоте "Согласные звуки,, буквы ф, ф" Изучаем букву ф с дошкольниками" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/literature/uchim-bukvy-bukva-f-otkrytyi-urok-obucheniya-gramote-soglasnye-zvuki-bukvy-f-f.html" title="Открытый урок обучения грамоте "Согласные звуки,, буквы ф, ф" Изучаем букву ф с дошкольниками" rel="bookmark">Открытый урок обучения грамоте "Согласные звуки,, буквы ф, ф" Изучаем букву ф с дошкольниками</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/exam-tests---2017-math/pedrazvitie---publikaciya-pedagoga-na-temu-obuchenie-gramote-obrazec-samoanaliz.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/top-bal.ru/pars_docs/refs/31/30839/30839_html_m1011550e.jpg" alt="Педразвитие - публикация педагога на тему обучение грамоте" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/exam-tests---2017-math/pedrazvitie---publikaciya-pedagoga-na-temu-obuchenie-gramote-obrazec-samoanaliz.html" title="Педразвитие - публикация педагога на тему обучение грамоте" rel="bookmark">Педразвитие - публикация педагога на тему обучение грамоте</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/exam-tests---2014-for-literature/zvuk-m-m-starshaya-gruppa-zvuki-m-m-bukva-m-plan-konspekt-zanyatiya-po.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/dohcolonoc.ru/images/Sorokina_Tatyana/13.jpg" alt="Звук м мь старшая группа" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/exam-tests---2014-for-literature/zvuk-m-m-starshaya-gruppa-zvuki-m-m-bukva-m-plan-konspekt-zanyatiya-po.html" title="Звук м мь старшая группа" rel="bookmark">Звук м мь старшая группа</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/physics/muzh-lyubovnicy-mayakovskogo-kak-osip-brik-stal-rogonoscem-istoriya.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/konspekta.net/mydocxru/baza9/29632112493.files/image004.jpg" alt="Как Осип Брик стал «рогоносцем" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/physics/muzh-lyubovnicy-mayakovskogo-kak-osip-brik-stal-rogonoscem-istoriya.html" title="Как Осип Брик стал «рогоносцем" rel="bookmark">Как Осип Брик стал «рогоносцем</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/technology/kogda-poyavilsya-pervyi-svetofor-v-mire-kto-pridumal-svetofor-pochemu-voznikla.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Traffic_light_with_a_green_sign_%28Kiev%29.jpg/240px-Traffic_light_with_a_green_sign_%28Kiev%29.jpg" alt="Когда появился первый светофор в мире" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/technology/kogda-poyavilsya-pervyi-svetofor-v-mire-kto-pridumal-svetofor-pochemu-voznikla.html" title="Когда появился первый светофор в мире" rel="bookmark">Когда появился первый светофор в мире</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/literature/konspekt-zanyatiya-po-obucheniyu-gramote-zvuki-t-t-i-bukva-t-konspekt-nod-po.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/tanyakiseleva.ru/wp-content/uploads/2017/08/uchim-bukvy-bukva-t_3.jpg" alt="Конспект НОД по подготовке к обучению работе «Буква Т и звуки и Букве «Т» я старый друг»" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/literature/konspekt-zanyatiya-po-obucheniyu-gramote-zvuki-t-t-i-bukva-t-konspekt-nod-po.html" title="Конспект НОД по подготовке к обучению работе «Буква Т и звуки и Букве «Т» я старый друг»" rel="bookmark">Конспект НОД по подготовке к обучению работе «Буква Т и звуки и Букве «Т» я старый друг»</a> </li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-3"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span3 logo-footer"> <div class="td-footer-info"> <div class="footer-logo-wrap"><a href="/"><img class="td-retina-data" src="/img/logo.png" data-retina="/img/logo.png" alt="Портал для школьника. Самоподготовка" title="Портал для школьника. Самоподготовка" / loading=lazy></a></div> <div class="footer-text-wrap"></div> <div class="footer-social-wrap td-social-style-2"></div> </div> <aside class="widget widget_text" id="text-16"> <div class="textwidget"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,twitter"></span></div> </aside> </div> <div class="td-pb-span9 footer-discription"> <a href='https://play.google.com/store/apps/details?id=org.planetsapp.pdfreader' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=ik-ptz.ru&sub2=org.planetsapp.pdfreader&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <aside class="widget widget_text" id="text-5"> <div class="textwidget"> <p> <font size="2" color="grey"> </font> </p> © Портал для школьника. Самоподготовка, 2024</div> </aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12 td-sub-footer-menu"> <div class="td-sub-footer-main"> <div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="/feedback.html">Обратная связь</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="/sitemap.xml">Карта сайта</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="/about.html">О сайте</a></li> </ul></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("span.ancored").replaceWith(function () { $this = jQuery(this); href = $this.attr("title"); text = $this.html(); return '<a href="' + href + '">' + text + '</a>'; } ) } ) </script> <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' /> <link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' /> <style type='text/css'> /*** Shortcodes Ultimate - box elements ***/ /* Common styles ---------------------------------------------------------------*/ .su-clearfix:before, .su-clearfix:after { display: table; content: " "; } .su-clearfix:after { clear: both; } /* Tabs + Tab ---------------------------------------------------------------*/ .su-tabs { margin: 0 0 1.5em 0; padding: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee; } .su-tabs-nav span { display: inline-block; margin-right: 3px; padding: 10px 15px; font-size: 13px; min-height: 40px; line-height: 20px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .su-tabs-nav span:hover { background: #f5f5f5; } .su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; } .su-tabs-nav span.su-tabs-disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: default; } .su-tabs-pane { padding: 15px; font-size: 13px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; background: #fff; color: #333; } .su-tabs-vertical:before, .su-tabs-vertical:after { content: " "; display: table; } .su-tabs-vertical:after { clear: both; } .su-tabs-vertical .su-tabs-nav { float: left; width: 30%; } .su-tabs-vertical .su-tabs-nav span { display: block; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .su-tabs-vertical .su-tabs-panes { float: left; width: 70%; } .su-tabs-vertical .su-tabs-pane { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .su-tabs-nav, .su-tabs-nav span, .su-tabs-panes, .su-tabs-pane { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-tabs-nav span { display: block; } .su-tabs-vertical .su-tabs-nav { float: none; width: auto; } .su-tabs-vertical .su-tabs-panes { float: none; width: auto; } } /* Spoiler + Accordion ---------------------------------------------------------------*/ .su-spoiler { margin-bottom: 1.5em; } .su-spoiler .su-spoiler:last-child { margin-bottom: 0; } .su-accordion { margin-bottom: 1.5em; } .su-accordion .su-spoiler { margin-bottom: 0.5em; } .su-spoiler-title { position: relative; cursor: pointer; min-height: 20px; line-height: 20px; padding: 7px 7px 7px 34px; font-weight: bold; font-size: 13px; } .su-spoiler-icon { position: absolute; left: 7px; top: 7px; display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 14px; font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; *margin-right: .3em; } .su-spoiler-content { padding: 14px; -webkit-transition: padding-top .2s; -moz-transition: padding-top .2s; -o-transition: padding-top .2s; transition: padding-top .2s; -ie-transition: padding-top .2s; } .su-spoiler.su-spoiler-closed > .su-spoiler-content { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; } .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; } .su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; } .su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; } .su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; } .su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; } .su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; } .su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; } .su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; } .su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; } .su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; } .su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; } .su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; } .su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; } .su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; } .su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; } .su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; } .su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; } .su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; } .su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; } .su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; } .su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; } .su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; } .su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; } .su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; } .su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; } .su-spoiler-style-default { } .su-spoiler-style-default > .su-spoiler-title { padding-left: 27px; padding-right: 0; } .su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; } .su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; } .su-spoiler-style-fancy { border: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; color: #333; } .su-spoiler-style-fancy > .su-spoiler-title { border-bottom: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; font-size: 0.9em; } .su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; } .su-spoiler-style-fancy > .su-spoiler-content { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .su-spoiler-style-simple { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .su-spoiler-style-simple > .su-spoiler-title { padding: 5px 10px; background: #f0f0f0; color: #333; font-size: 0.9em; } .su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; } .su-spoiler-style-simple > .su-spoiler-content { padding: 1em 10px; background: #fff; color: #333; } /* Quote ---------------------------------------------------------------*/ .su-quote-style-default { position: relative; margin-bottom: 1.5em; padding: 0.5em 3em; font-style: italic; } /*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */ .su-quote-style-default:before, .su-quote-style-default:after { position: absolute; display: block; width: 20px; height: 20px; background-image: url('../images/quote.png'); content: ''; } .su-quote-style-default:before { top: 0; left: 0; background-position: 0 0; } .su-quote-style-default:after { right: 0; bottom: 0; background-position: -20px 0; } .su-quote-style-default .su-quote-cite { display: block; text-align: right; font-style: normal; } .su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; } .su-quote-style-default .su-quote-cite a { text-decoration: underline; } /* Pullquote ---------------------------------------------------------------*/ .su-pullquote { display: block; width: 30%; padding: 0.5em 1em; } .su-pullquote-align-left { margin: 0.5em 1.5em 1em 0; padding-left: 0; float: left; border-right: 5px solid #eee; } .su-pullquote-align-right { margin: 0.5em 0 1em 1.5em; padding-right: 0; float: right; border-left: 5px solid #eee; } /* Row + Column ---------------------------------------------------------------*/ .su-row { clear: both; zoom: 1; margin-bottom: 1.5em; } .su-row:before, .su-row:after { display: table; content: ""; } .su-row:after { clear: both; } .su-column { display: block; margin: 0 4% 0 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .su-column-last { margin-right: 0; } .su-row .su-column { margin: 0 0 0 4%; } .su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; } .su-row .su-column:first-child { margin-left: 0; } .su-column-centered { margin-right: auto !important; margin-left: auto !important; float: none !important; } .su-column img, .su-column iframe, .su-column object, .su-column embed { max-width: 100%; } @media only screen { [class*="su-column"] + [class*="su-column"]:last-child { float: right; } } .su-column-size-1-1 { width: 100%; } .su-column-size-1-2 { width: 48%; } .su-column-size-1-3 { width: 30.66%; } .su-column-size-2-3 { width: 65.33%; } .su-column-size-1-4 { width: 22%; } .su-column-size-3-4 { width: 74%; } .su-column-size-1-5 { width: 16.8%; } .su-column-size-2-5 { width: 37.6%; } .su-column-size-3-5 { width: 58.4%; } .su-column-size-4-5 { width: 79.2%; } .su-column-size-1-6 { width: 13.33%; } .su-column-size-5-6 { width: 82.66%; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-column { width: 100% !important; margin: 0 0 1.5em 0 !important; float: none !important; } .su-row .su-column:last-child { margin-bottom: 0 !important; } } /* Service ---------------------------------------------------------------*/ .su-service { position: relative; margin: 0 0 1.5em 0; } .su-service-title { display: block; margin-bottom: 0.5em; color: #333; font-weight: bold; font-size: 1.1em; } .su-service-title img { position: absolute; top: 0; left: 0; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .su-service-title i { position: absolute; top: 0; left: 0; display: block !important; width: 1em; height: 1em; text-align: center; line-height: 1em; } .su-service-content { line-height: 1.4; } /* Box ---------------------------------------------------------------*/ .su-box { margin: 0 0 1.5em 0; border-width: 2px; border-style: solid; } .su-box-title { display: block; padding: 0.5em 1em; font-weight: bold; font-size: 1.1em; } .su-box-content { background-color: #fff; color: #444; padding: 1em; } .su-box-style-soft .su-box-title { background-image: url('../images/styles/style-soft.png'); background-position: 0 0; background-repeat: repeat-x; } .su-box-style-glass .su-box-title { background-image: url('../images/styles/style-glass.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-bubbles .su-box-title { background-image: url('../images/styles/style-bubbles.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-noise .su-box-title { background-image: url('../images/styles/style-noise.png'); background-position: 0 0; background-repeat: repeat-x; } /* Note ---------------------------------------------------------------*/ .su-note { margin: 0 0 1.5em 0; border-width: 0px; border-style: solid; } .su-note-inner { padding: 1em; border-width: 0px; border-style: solid; box-shadow: 3px 3px 6px #d0d0d0; } /* Expand ---------------------------------------------------------------*/ .su-expand { margin: 0 0 1.5em 0; } .su-expand-content { overflow: hidden; } .su-expand-link { margin-top: 0.5em; cursor: pointer; } .su-expand-link:hover { opacity: 0.7; filter: alpha(opacity=70); } .su-expand-link a, .su-expand-link a:hover, .su-expand-link a:active, .su-expand-link a:visited, .su-expand-link a:focus { display: inline; text-decoration: none; background: transparent; border: none; } .su-expand-link-style-default .su-expand-link a, .su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; } .su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; } .su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; } .su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; } .su-expand-link-style-button .su-expand-link a { display: inline-block; margin-top: 0.2em; padding: 0.2em 0.4em; border: 2px solid #333; } .su-expand-link-more { display: none; } .su-expand-link-less { display: block; } .su-expand-collapsed .su-expand-link-more { display: block; } .su-expand-collapsed .su-expand-link-less { display: none; } .su-expand-link i { display: inline-block; margin: 0 0.3em 0 0; vertical-align: middle; color: inherit; } .su-expand-link img { display: inline-block; width: 1em; height: 1em; margin: 0 0.3em 0 0; vertical-align: middle; } /* Lightbox content ---------------------------------------------------------------*/ .su-lightbox-content { position: relative; margin: 0 auto; } .mfp-content .su-lightbox-content, #su-generator .su-lightbox-content { display: block !important; } .su-lightbox-content-preview { width: 100%; min-height: 300px; background: #444; overflow: hidden; } .su-lightbox-content h1, .su-lightbox-content h2, .su-lightbox-content h3, .su-lightbox-content h4, .su-lightbox-content h5, .su-lightbox-content h6 { color: inherit; } /* Common margin resets for box elements ---------------------------------------------------------------*/ .su-column-inner > *:first-child, .su-accordion > *:first-child, .su-spoiler-content > *:first-child, .su-service-content > *:first-child, .su-box-content > *:first-child, .su-note-inner > *:first-child, .su-expand-content > *:first-child, .su-lightbox-content > *:first-child { margin-top: 0; } .su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child { margin-bottom: 0; } </style> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/assets/style2.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); } ); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } } ); } } )(); </script> </body> </html>