Попробуем повторить такую форму:
Создадим 2 файла: index.html и style.css
Cоздадим базовую разметку 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>
</head>
<body>
</body>
</html>
Результат:
Подключим css файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Создадим html разметку, в которой будет храниться наша форма.
Для начала создадим контейнер, в котором будут храниться наши input и button
<body>
<div></div>
</body>
В созданном диве создадим 4 input
<body>
<div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
Создадим textarea
<div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<textarea name="" id=""></textarea>
</div>
<textarea> в HTML используется для создания многострочного текстового поля, в котором пользователь может вводить текст. В отличие от обычного поля ввода <input type="text">, которое позволяет вводить текст в одной строке, <textarea> позволяет вводить текст в несколько строк, и его можно настроить по ширине и высоте.
Создадим button
<body>
<div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<textarea name="" id=""></textarea>
<button>Submit</button>
</div>
</body>
Результат:
Пропишим каждому input и textarea свой placeholder
<div>
<input placeholder="Your name" type="text">
<input placeholder="Your Email Address" type="text">
<input placeholder="Yout Phone Number" type="text">
<input placeholder="Your Web Site starts with http://" type="text">
<textarea placeholder="Type your Message Here..." name="" id=""></textarea>
<button>Submit</button>
</div>
</body>
Результат:
Зададим каждому элементу свой class, чтобы мы могли обращаться к нему в css
<body>
<div class="container">
<input class="input" placeholder="Your name" type="text">
<input class="input" placeholder="Your Email Address" type="text">
<input class="input" placeholder="Yout Phone Number" type="text">
<input class="input" placeholder="Your Web Site starts with http://" type="text">
<textarea class="textarea" placeholder="Type your Message Here..." name="" id=""></textarea>
<button class="btn">Submit</button>
</div>
</body>
Создадим заголовочный текст
<body>
<div class="container">
<div>Quick Contact</div>
<div>Contact us today, and get reply with in 24 hours</div>
<input class="input" placeholder="Your name" type="text">
<input class="input" placeholder="Your Email Address" type="text">
<input class="input" placeholder="Yout Phone Number" type="text">
<input class="input" placeholder="Your Web Site starts with http://" type="text">
<textarea class="textarea" placeholder="Type your Message Here..." name="" id=""></textarea>
<button class="btn">Submit</button>
</div>
</body>
Результат
Зададим им классы
<body>
<div class="container">
<div class="title">Quick Contact</div>
<div class="desc">Contact us today, and get reply with in 24 hours</div>
<input class="input" placeholder="Your name" type="text">
<input class="input" placeholder="Your Email Address" type="text">
<input class="input" placeholder="Yout Phone Number" type="text">
<input class="input" placeholder="Your Web Site starts with http://" type="text">
<textarea class="textarea" placeholder="Type your Message Here..." name="" id=""></textarea>
<button class="btn">Submit</button>
</div>
</body>
Переходим в css
Начнём с button. Сделаем её голубого цвета, с белым шрифтом, уберём border и зададим внутренние отступы
.btn {
background-color: #57CBF7;
padding: 10px;
color: white;
border: 0;
}
Результат:
Сделаем, чтобы все элементы класса container были не в строчку, а в колонку.
.container {
display: flex;
flex-direction: column;
}
Результат
Сделаю заголовку другой цвет текста и задам размер текста 30px
.title {
color: #D7A182;
font-size: 30px;
}
Результат
Тексту, что ниже заголовка задам толщину
.desc {
font-weight: bold;
}
Результат
Каждому input задам внешние отступы: 10px сверху-снизу и 0px справа-слева
.input {
margin: 10px 0px;
}
Результат
Задам внутренние отступы
.input {
margin: 10px 0px;
padding: 10px;
}
Результат
Задам border серого цвета и скруглю рамки на 2px
.input {
margin: 10px 0px;
padding: 10px;
border: 1px solid gray;
border-radius: 2px;
}
Результат:
Тоже самое сделаю и для textarea
.input, .textarea {
margin: 10px 0px;
padding: 10px;
border: 1px solid gray;
border-radius: 2px;
}
Результат: