Дизайн и верстка страницы Contact Us. Часть #1
В HTML-разметке накидываем все элементы, которые у нас будут на странице, пока не заботясь о внешнем виде расположении относительно друг друга. Давайте подумаем, что должно быть на странице контактов.
- шапка
- контактная форма
- блок с контактной информацией
- иконки социальных сетей
- карта
Шапка + контактная форма
<div class="title">
<h2>Contact Us</h2>
</div>
<div class="box">
<div class="contact form">
<h3>Send a Message</h3>
<form>
<div class="formBx">
<div class="row50">
<div class="inputBox">
<span>First Name</span>
<input type="text" placeholder="John">
</div>
<div class="inputBox">
<span>Last Name</span>
<input type="text" placeholder="Doe">
</div>
</div>
<div class="row50">
<div class="inputBox">
<span>Email</span>
<input type="text" placeholder="Ex: johndoe@email.com">
</div>
<div class="inputBox">
<span>Mobile</span>
<input type="text" placeholder="+91 987 654 3210">
</div>
</div>
<div class="row100">
<div class="inputBox">
<span>Message</span>
<textarea placeholder="Write your message here..."></textarea>
</div>
</div>
<div class="row100">
<div class="inputBox">
<input type="submit" value="Send">
</div>
</div>
</div>
</form>
</div>
Блок с контактной информацией + иконки
<h3>Contact Info</h3>
<div class="infoBox">
<div>
<span><ion-icon name="location"></ion-icon></span>
<p>Cannaught Palace, New Delhi<br>India</p>
</div>
<div>
<span><ion-icon name="mail"></ion-icon></span>
<a href="mailto:loremipsum@dolar.sit">loremipsum@dolar.sit</a>
</div>
<div>
<span><ion-icon name="call"></ion-icon></span>
<a href="tel:+919876543210">+91 987 654 3210</a>
</div>
<ul class="sci">
<li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-linkedin"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
</ul>
</div>
Послушать простым языком теоретическую часть и увидеть, как делают верстку профессионалы, вы можете уже сейчас, перейдя по ссылке на мой видеокурс.
Продолжение следует..
-
Создано 22.12.2021 10:20:02
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.