Привет Кодер! Добро пожаловать в блог Codewithrandom. В этой статье мы создадим адаптивную страницу входа в HTML с кодом CSS. У нас есть 2 поля ввода на странице входа: адрес электронной почты и пароль, и у нас есть ссылка Забыли пароль под полем ввода пароля.
Итак, давайте напишем HTML-код для нашей формы входа и создадим структуру baisc для формы входа.
Html-код для адаптивной страницы входа
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form</title>
<script
src="https://kit.fontawesome.com/66aa7c98b3.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./Login Form.css" />
</head>
<body>
<div class="container">
<form class="form-1">
<h1>Login</h1>
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
<label for="password">Password</label>
<input type="password" name="password" id="password" required />
<span>Forgot Password</span>
<button>Login</button>
<!-- .........///sign-up///.......... -->
<p>Or SignUp Using</p>
<div class="icons">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://mail.google.com/" target="blank"
><i class="fab fa-google"></i
></a>
</div>
</form>
</div>
</body>
</html>
В этом HTML-коде мы создаем HTML-шаблон Baisc для нашей страницы входа и нашего Css-файла ссылок. Кроме того, мы используем шрифт Awesome CDN для значков социальных сетей, потому что мы используем значок социальных сетей в форме входа.
И после тега body мы создаем div, а в div создаем форму и используем тип ввода email и пароль.
Затем используйте какой-нибудь текст, например, забыли пароль, текст для входа с помощью кнопки и используйте значок социальных сетей.
Здесь вы можете увидеть вывод только с HTML-кодом.
Вывод HTML:-
Давайте напишем код CSS.
Код CSS для адаптивной страницы входа: -
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
margin: 0 auto;
position: relative;
background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
}
.container .form-1 {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 40%;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3);
}
.form-1 h1 {
text-align: center;
margin-top: 0.7rem;
margin-bottom: 1.5rem;
}
input[type="email"],
input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid;
background: none;
margin: 0.9rem 2rem;
font-size: 1rem;
}
label {
margin: 0 2rem;
}
span {
margin: 0 2rem;
color: blue;
cursor: pointer;
}
button {
margin: 2rem;
margin-bottom: 1.5rem;
padding: 0.5rem;
cursor: pointer;
border-radius: 1rem;
border: none;
font-size: 1.1rem;
font-weight: bolder;
color: #fff;
background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
}
/* ........///Sign-Up///......... */
p {
text-align: center;
font-weight: bolder;
}
.icons {
display: flex;
justify-content: center;
margin-bottom: 3rem;
margin-top: 0.5rem;
}
.icons a {
text-decoration: none;
font-size: 1rem;
margin: 0.2rem;
}
.icons .fa-facebook-f {
border-radius: 50%;
background: #5d75ab;
color: #fff;
padding: 1rem;
}
.icons .fa-twitter {
border-radius: 50%;
background: #1da1f2;
color: white;
padding: 1rem;
}
.icons .fa-google {
border-radius: 50%;
background: #ee5645;
color: #fff;
padding: 1rem;
}
/* ....///Media query///..... */
@media (max-width: 501px) {
html {
font-size: 15px;
}
.container .form-1 {
width: 300px;
}
}
@media (min-width: 501px) and (max-width: 768px) {
html {
font-size: 14px;
}
.container .form-1 {
width: 450px;
}
}
@media (min-width: 765px) and (max-width: 1200px) {
html {
font-size: 18px;
}
.container .form-1 {
width: 540px;
height: 550px;
}
}
@media (orientation: landscape) and (max-height: 500px) {
.container {
height: 100vmax;
}
}
Мы использовали некоторые фундаментальные идеи CSS для оформления страницы входа. Мы настроим отступы и поля на «ноль», а контур на «нет» с помощью универсального тега селектора. После этого мы стилизуем контейнер, установив его высоту на «100vh» и его фон на «линейный градиент», используя свойство фона. Чтобы добавить стиль к форме на нашей странице входа, все, что нам нужно сделать, это использовать селектор класса.
Это весь код Css для нашей формы страницы входа со значком социальной сети. Мы используем базовый код Css для оформления формы страницы входа. Мы стилизуем форму, а затем используем стили электронной почты и пароля для ввода вместе.
Затем стилизуем нашу иконку соцсети, используя классы font awesome. Затем используйте медиа-запрос для адаптивной формы страницы входа. Мы используем от 3 до 4 медиа-запросов, чтобы сделать отзывчивую форму страницы входа.
Окончательный вывод адаптивной страницы входа с использованием Html и Css: -
Здесь вы можете увидеть окончательный результат нашей формы Страница входа, здесь вы можете увидеть на странице входа окно с 3D-тенью, и это все для этого проекта. Надеюсь, вам понравится этот проект, мы создадим свой собственный и используем этот проект в любом проекте как часть проекта, например, раздел отзывов и контактную форму. Если вам нужен еще какой-либо интерфейс, связанный с проектом. Посетите нашу домашнюю страницу, и вы получите более 100 проектов.
если у вас есть какие-либо недоразумения, прокомментируйте ниже или вы можете связаться с нами, заполнив нашу контактную форму в домашнем разделе.
Code By — Санкет Бодаке
автор — Codewithrandom
Какой редактор кода вы используете для кодирования адаптивной страницы входа?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Является ли этот проект адаптивным или нет?
Да! этот проект страницы входа является адаптивным.
Используете ли вы какие-либо внешние ссылки для создания этого проекта?
Да, мы используем иконку CDN с красивым шрифтом на странице входа.
