Всем Привет! Сегодня Вы узнаете, как создать страницу входа (Login) используя HTML и CSS. Вы сможете посмотреть видео демонстрацию (Демо), скопировать код или скачать архив с готовым кодом.
-min.png)
Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
ПРЕДВАРИТЕЛЬНЫЙ HTML КОД:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<link rel='stylesheet' href='index.css'>
</head>
<body>
<body>
</body>
</body>
</html>
ПРЕДВАРИТЕЛЬНЫЙ CSS КОД:
* {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
section {
}
.form-box {
}
h2 {
}
.inputbox {
}
.inputbox label {
}
/* animations: start */
input:focus~label,
input:valid~label {
top: -5px;
}
/* animation:end */
.inputbox input {
}
.inputbox ion-icon {
}
.forget {
}
.forget label input {
}
.forget a {
}
.forget a:hover {
}
button {
}
.register {
}
.register p a {
}
.register p a:hover {
}
@media screen and (max-width: 480px) {
.form-box {
width: 100%;
border-radius: 0px;
}
}
0 Комментарии