-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (111 loc) · 7.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo site</title>
<link rel="stylesheet" href="vendor/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="pages/index.css">
</head>
<body class="page">
<header class="header page__header">
<img src="images/logo.svg" alt="" class="header__logo">
<ul class="social-links">
<li class="social-links__link"><a href=""><img src="./images/github.png" alt="" class="social-links__img"></a></li>
<li class="social-links__link"><a href=""><img src="./images/twitter.png" alt="" class="social-links__img"></a></li>
<li class="social-links__link"><a href=""><img src="./images/instagram.png" alt="" class="social-links__img"></a></li>
<li class="social-links__link"><a href=""><img src="./images/facebook.png" alt="" class="social-links__img"></a></li>
</ul>
</header>
<main class="content">
<section class="hero content__hero">
<div class="hero-content">
<div class="hero-content__heading">
<p class="hero-content__profession">Фрилансер</p>
<h1 class="hero-content__title">Петр Федоров</h1>
<p class="hero-content__subtitle">Разрабатываю сайты для малого и среднего бизнеса. У меня можно заказать дизайн и верстку небольшого сайта или интернет-магазина</p>
<a class="hero__button-link" href=""><button class="hero__button">Бесплатная консультация</button></a>
</div>
<img src="images/avatar.jpg" alt="" class="hero-content__avatar">
</div>
</section>
<section class="features content__features">
<h2 class="features__title">Со мной удобно работать</h2>
<div class="cards">
<div class="cards__item">
<img src="images/offer-img.svg" alt="" class="cards__image">
<h2 class="cards__title">По договору</h2>
<p class="cards__subtitle">Предоставлю все документы для бухгалтерии: договоры, счета и акты. Работаю как ИП без НДС.</p>
</div>
<div class="cards__item">
<img src="images/deadline-img.svg" alt="" class="cards__image">
<h2 class="cards__title">Точно в срок</h2>
<p class="cards__subtitle">В договоре прописана моя ответственность за срок проекта. Если просрочу — плачу неустойку. </p>
</div>
<div class="cards__item">
<img src="images/agreement-img.svg" alt="" class="cards__image">
<h2 class="cards__title">Ценник под вас</h2>
<p class="cards__subtitle">Если у вас нетиповой проект, сделаю рассчет цены за работу и объясню, как складывается цена.</p>
</div>
<div class="cards__item">
<img src="images/steps-img.svg" alt="" class="cards__image">
<h2 class="cards__title">Премежуточные итоги</h2>
<p class="cards__subtitle">Показываю работу поэтапно, а не в последий момент перед крайним сроком.</p>
</div>
<div class="cards__item">
<img src="images/storage-img.svg" alt="" class="cards__image">
<h2 class="cards__title">Хостинг и домен</h2>
<p class="cards__subtitle">Если мы договорились о цене проекта, в неё входит всё: домен и хостинг на год + SSL сертификат.</p>
</div>
<div class="cards__item">
<img src="images/conversation-img.svg" alt="" class="cards__image">
<h2 class="cards__title">Не брошу после сдачи</h2>
<p class="cards__subtitle">Научу вас или вашего сотрудника пользоваться сайтом, запишу видео-инструкции.</p>
</div>
</div>
</section>
</main>
<footer class="contacts page__contacts">
<h2 class="contacts__title">Свяжитесь со мной</h2>
<div class="contacts-block">
<form class="contacts-form" action="" method="get">
<p class="contacts-form__title contacts-form__title_desktop">Можете просто оставить заявку, я позвоню вам сегодня</p>
<p class="contacts-form__title contacts-form__title_mobile">Можете оставить заявку, я позвоню вам сегодня</p>
<input type="text" placeholder="Ваше имя" class="contacts-form__input contacts-form__input_name">
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Ваш телефон" class="contacts-form__input contacts-form__input_phone">
<button class="contacts-form__button"><a class="contacts-form__button-link" href="">Бесплатная консультация</a></button>
</form>
<div class="contacts-info">
<div class="contacts-info__data">
<div class="contacts-info__text">
<p class="contacts-info__title">Телефон</p>
<p class="contacts-info__subtitle">+7 999 123 45 67</p>
</div>
<div class="contacts-info__text">
<p class="contacts-info__title">Почта</p>
<p class="contacts-info__subtitle">ivanov@mail.ru</p>
</div>
</div>
<div class="contacts-info__social">
<p class="contacts-info__title">Соцсети</p>
<ul class="contacts-info__links">
<li class="contacts-info__list"><a href="" class="contacts-info__link">t.me/ivanov</a></li>
<li class="contacts-info__list"><a href="" class="contacts-info__link">vk.me/ivanov</a></li>
<li class="contacts-info__list"><a href="" class="contacts-info__link">fb.me/ivanov</a></li>
</ul>
</div>
<ul class="social-links">
<li class="social-links__link"><a href=""><img src="./images/github.png" alt="" class="social-links__img"></a></li>
<li class="social-links__link"><a href=""><img src="./images/twitter.png" alt="" class="social-links__img"></a></li>
<li class="social-links__link"><a href=""><img src="./images/instagram.png" alt="" class="social-links__img"></a></li>
<li class="social-links__link"><a href=""><img src="./images/facebook.png" alt="" class="social-links__img"></a></li>
</ul>
<p class="contacts-info__privacy"><a href="" class="contacts-info__privacy-link">Политика конфиденциальности</a></p>
</div>
</div>
</footer>
</body>
</html>