157 lines
8.4 KiB
HTML
157 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Жанара — Бухгалтерские услуги</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#FFFFFF;--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(--white);color:var(--ink);padding:100px 24px;text-align:center}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:16px}
|
||
.hero p{font-size:20px;color:var(--gray-500);max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--ink);color:var(--white);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;transition:background 0.3s}
|
||
.btn:hover{background:#2a2f38}
|
||
.btn-outline{display:inline-block;background:transparent;color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:2px solid var(--ink);transition:background 0.3s}
|
||
.btn-outline:hover{background:var(--ink);color:var(--white)}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:40px;text-align:center}
|
||
.services{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;transition:transform 0.3s,box-shadow 0.3s}
|
||
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
|
||
.card-icon{font-size:48px;margin-bottom:16px}
|
||
.card h3{font-size:22px;font-weight:700;margin-bottom:12px}
|
||
.card p{color:var(--gray-500)}
|
||
.about{background:var(--cyan-50);border-radius:16px;padding:48px;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
|
||
.about-img{width:100%;height:400px;object-fit:cover;border-radius:16px}
|
||
.about-text h3{font-size:28px;font-weight:700;margin-bottom:16px}
|
||
.about-text p{color:var(--gray-500);margin-bottom:16px}
|
||
.contact-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}
|
||
.contact-item{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;padding:12px 20px;background:var(--gray-100);border-radius:8px;transition:background 0.3s}
|
||
.contact-item:hover{background:var(--cyan-50)}
|
||
.contact-icon{font-size:24px}
|
||
footer{background:var(--ink);color:var(--white);text-align:center;padding:40px 24px}
|
||
footer p{color:#9aa3b2}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media (max-width:768px){
|
||
.hero h1{font-size:36px}
|
||
.section h2{font-size:28px}
|
||
.about{grid-template-columns:1fr}
|
||
.about-img{height:300px}
|
||
.container{padding:48px 20px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Жанара — Бухгалтерские услуги</h1>
|
||
<p>Профессиональное ведение бухгалтерии для ИП и ТОО. Надёжно, точно, в срок.</p>
|
||
<a class="btn" href="#contact">Получить консультацию</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Мои услуги</h2>
|
||
<div class="services">
|
||
<div class="card reveal">
|
||
<div class="card-icon">📋</div>
|
||
<h3>Ведение бухучёта</h3>
|
||
<p>Полное сопровождение бухгалтерии: первичная документация, проводки, учёт доходов и расходов.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">📊</div>
|
||
<h3>Налоговая отчётность</h3>
|
||
<p>Подготовка и сдача всех форм отчётности в налоговые органы. Декларации, расчёты, уведомления.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">💼</div>
|
||
<h3>Консультации</h3>
|
||
<p>Индивидуальные консультации по вопросам налогообложения, оптимизации и ведения учёта.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">📑</div>
|
||
<h3>Кадровый учёт</h3>
|
||
<p>Оформление приёма и увольнения, расчёт заработной платы, отпускных и больничных.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">✅</div>
|
||
<h3>Восстановление учёта</h3>
|
||
<p>Приведение в порядок запущенного учёта, исправление ошибок, подготовка за прошлые периоды.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">🔍</div>
|
||
<h3>Аудит и проверка</h3>
|
||
<p>Проверка текущего состояния учёта, выявление рисков, рекомендации по улучшению.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="about reveal">
|
||
<img src="https://picsum.photos/seed/accountant/600/400" alt="Жанара" class="about-img">
|
||
<div class="about-text">
|
||
<h3>Обо мне</h3>
|
||
<p>Меня зовут Жанара, я профессиональный бухгалтер с опытом работы более 10 лет. Помогаю предпринимателям вести учёт без ошибок и штрафов.</p>
|
||
<p>Работаю с ИП и ТОО на разных системах налогообложения. Гарантирую конфиденциальность и своевременную сдачу отчётности.</p>
|
||
<p>Постоянно повышаю квалификацию и слежу за изменениями в законодательстве.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="contact">
|
||
<div class="container">
|
||
<h2>Связаться со мной</h2>
|
||
<p style="text-align:center;color:var(--gray-500);max-width:600px;margin:0 auto">
|
||
Оставьте заявку или напишите напрямую — я отвечу в ближайшее время.
|
||
</p>
|
||
<div class="contact-links">
|
||
<a href="https://wa.me/77771234567?text=Здравствуйте,%20нужна%20консультация%20бухгалтера" class="contact-item">
|
||
<span class="contact-icon">💬</span>
|
||
WhatsApp
|
||
</a>
|
||
<a href="tel:+77771234567" class="contact-item">
|
||
<span class="contact-icon">📞</span>
|
||
Позвонить
|
||
</a>
|
||
<a href="mailto:zhana@example.com" class="contact-item">
|
||
<span class="contact-icon">✉️</span>
|
||
Email
|
||
</a>
|
||
</div>
|
||
<div style="text-align:center;margin-top:40px">
|
||
<form action="https://formsubmit.co/your.email@example.com" method="POST" style="max-width:400px;margin:0 auto;display:grid;gap:16px">
|
||
<input type="text" name="name" placeholder="Ваше имя" required style="width:100%;padding:14px;border:1px solid var(--gray-100);border-radius:8px;font-size:17px">
|
||
<input type="tel" name="phone" placeholder="Телефон" required style="width:100%;padding:14px;border:1px solid var(--gray-100);border-radius:8px;font-size:17px">
|
||
<button type="submit" class="btn" style="width:100%;border:none;cursor:pointer">Отправить заявку</button>
|
||
</form>
|
||
<p style="font-size:14px;color:var(--gray-500);margin-top:16px">
|
||
Замените your.email@example.com на вашу почту в коде
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 Жанара — Бухгалтерские услуги. Все права защищены.</p>
|
||
</footer>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|