83 lines
3.6 KiB
HTML
83 lines
3.6 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Мой проект</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);padding:120px 24px;text-align:center}
|
||
.hero h1{font-size:clamp(36px,6vw,56px);font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-size:17px}
|
||
.btn:hover{opacity:0.9}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:clamp(28px,4vw,36px);font-weight:700;margin-bottom:40px;text-align:center}
|
||
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px}
|
||
.card h3{font-size:22px;font-weight:700;margin-bottom:16px}
|
||
.form-section{background:var(--cyan-50)}
|
||
.form{max-width:500px;margin:0 auto;display:grid;gap:16px}
|
||
.form input,.form textarea{width:100%;padding:14px;border:1px solid var(--gray-100);border-radius:8px;font-size:17px;font-family:inherit}
|
||
.form textarea{min-height:120px;resize:vertical}
|
||
.contacts{text-align:center}
|
||
.contacts p{margin-bottom:12px}
|
||
.footer{background:var(--ink);color:var(--white);text-align:center;padding:40px 24px}
|
||
@media(max-width:640px){.container,.section{padding:48px 20px}.hero{padding:80px 20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Заголовок вашего проекта</h1>
|
||
<p>Краткое описание — пара предложений о том, что вы предлагаете и почему это важно для клиента.</p>
|
||
<a href="#form" class="btn">Оставить заявку</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2>Почему выбирают нас</h2>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<h3>🚀 Быстро</h3>
|
||
<p>Описание преимущества. Расскажите, как вы экономите время клиента.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>✨ Качественно</h3>
|
||
<p>Описание преимущества. Почему ваш продукт или услуга лучшие.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>💡 Надёжно</h3>
|
||
<p>Описание преимущества. Гарантии и обязательства перед клиентом.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section form-section" id="form">
|
||
<h2>Свяжитесь с нами</h2>
|
||
<form class="form" action="https://formsubmit.co/your@email.com" method="POST">
|
||
<input type="text" name="name" placeholder="Ваше имя" required>
|
||
<input type="tel" name="phone" placeholder="Телефон" required>
|
||
<textarea name="message" placeholder="Сообщение"></textarea>
|
||
<button type="submit" class="btn">Отправить</button>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="section contacts">
|
||
<h2>Контакты</h2>
|
||
<p>📍 Город, улица, дом</p>
|
||
<p>📞 +7 (XXX) XXX-XX-XX</p>
|
||
<p>✉️ email@example.com</p>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<p>© 2026 Мой проект. Все права защищены.</p>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|