├── images
    ├── logo
    ├── logo.png
    ├── logo.svg
    └── дмитрий.jpg
├── README.md
├── script.js
├── styles.css
└── index.html


/images/logo:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/images/logo.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/images/дмитрий.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/RoyalRangersMoscow/main/images/дмитрий.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Визитка — Цпрские Охотники
 2 | 
 3 | Простая статическая одностраничная визитка для организации «Цпрские Охотники». Файлы:
 4 | 
 5 | - `index.html` — главная страница
 6 | - `styles.css` — стили
 7 | - `script.js` — простая логика: меню, форма (локально), vCard
 8 | 
 9 | Как запустить:
10 | 
11 | Откройте `index.html` в браузере. Для локального сервера (рекомендуется) можно использовать `python -m http.server` или расширение Live Server в VS Code.
12 | 
13 | Примечание: контакты и тексты — примеры. Замените на реальные данные при необходимости.
14 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | // Small interactive behaviors: nav toggle, form handling, vCard download
 2 | document.addEventListener('DOMContentLoaded',function(){
 3 |   // year
 4 |   document.getElementById('year').textContent = new Date().getFullYear();
 5 | 
 6 |   // nav toggle
 7 |   const toggle = document.querySelector('.nav-toggle');
 8 |   const nav = document.querySelector('.site-nav');
 9 |   toggle.addEventListener('click',()=>{nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex'});
10 | 
11 |   // form
12 |   const form = document.getElementById('contactForm');
13 |   const msg = document.getElementById('formMessage');
14 |   const clear = document.getElementById('clearForm');
15 | 
16 |   form.addEventListener('submit',function(e){
17 |     e.preventDefault();
18 |     const data = new FormData(form);
19 |     // Fake send: show success message and reset
20 |     msg.textContent = 'Спасибо! Сообщение отправлено (локальный демонстрационный режим).';
21 |     form.reset();
22 |   });
23 |   clear.addEventListener('click',()=>{form.reset();msg.textContent='';});
24 | 
25 |   // vCard
26 |   document.getElementById('downloadVcard').addEventListener('click',()=>{
27 |     const vcard = [
28 |       'BEGIN:VCARD',
29 |       'VERSION:3.0',
30 |       'FN:Цпрские Охотники',
31 |       'ORG:Цпрские Охотники',
32 |       'TEL;WORK;VOICE:+70000000000',
33 |       'EMAIL:info@cprhunters.example',
34 |       'END:VCARD'
35 |     ].join('\r\n');
36 |     const blob = new Blob([vcard],{type:'text/vcard;charset=utf-8'});
37 |     const url = URL.createObjectURL(blob);
38 |     const a = document.createElement('a');
39 |     a.href = url; a.download = 'cprskie_ohotniki.vcf'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
40 |   });
41 | });
42 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | /* Basic reset */
 2 | *{box-sizing:border-box;margin:0;padding:0}
 3 | :root{--accent:#2b6cb0;--muted:#6b7280;--bg:#f7fafc;--card:#ffffff}
 4 | body{font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;line-height:1.5;color:#0f1724;background:linear-gradient(180deg,var(--bg),#fff)}
 5 | .container{max-width:900px;margin:0 auto;padding:1rem}
 6 | .site-header{background:#fff;border-bottom:1px solid #e6e9ef}
 7 | .header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
 8 | .logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--accent);text-decoration:none;font-size:1.125rem}
 9 | .logo-img{width:44px;height:44px;object-fit:contain;border-radius:6px}
10 | .logo-text{font-size:1rem}
11 | .site-nav{display:flex;gap:.5rem}
12 | .site-nav a{color:#0f1724;text-decoration:none;padding:.5rem;border-radius:6px}
13 | .site-nav a:hover{background:#f1f5f9}
14 | .nav-toggle{display:none;background:transparent;border:0;font-size:1.25rem}
15 | .hero{padding:3rem 0;background:linear-gradient(90deg,rgba(43,108,176,0.06),rgba(43,108,176,0.02))}
16 | .hero h1{font-size:2rem;margin-bottom:.25rem}
17 | .tagline{color:var(--muted);margin-bottom:1rem}
18 | .btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem .9rem;border-radius:8px;text-decoration:none;border:0;cursor:pointer}
19 | .btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
20 | .about h2,.services h2,.gallery h2,.contact h2{margin:1rem 0}
21 | .services-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;list-style:none}
22 | .card{background:var(--card);padding:1rem;border:1px solid #eef2f6;border-radius:8px;text-align:center}
23 | .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}
24 | .gallery-img{display:block;max-width:100%;height:auto;border-radius:6px}
25 | .contact-form{display:grid;gap:.5rem;max-width:560px}
26 | .contact-form label{display:flex;flex-direction:column;gap:.25rem}
27 | .contact-form input,.contact-form textarea{padding:.5rem;border:1px solid #dbe3ee;border-radius:6px}
28 | .form-actions{display:flex;gap:.5rem;margin-top:.5rem}
29 | .form-message{color:var(--muted);margin-top:.5rem}
30 | .site-footer{border-top:1px solid #e6e9ef;margin-top:2rem;background:#fff}
31 | .footer-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem}
32 | .social a{margin-left:.5rem;color:var(--muted);text-decoration:none}
33 | @media (max-width:700px){
34 |   .site-nav{display:none;flex-direction:column;background:#fff;position:absolute;right:1rem;top:64px;padding:.5rem;border-radius:8px;box-shadow:0 6px 18px rgba(12,15,20,.08)}
35 |   .nav-toggle{display:block}
36 |   .header-inner{position:relative}
37 | }
38 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="ru">
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |   <title>Царские Охотники — Визитка</title>
  7 |   <meta name="description" content="Официальная страница Царские Охотники — контакты, направления деятельности и как с нами связаться.">
  8 |   <link rel="stylesheet" href="styles.css">
  9 | </head>
 10 | <body>
 11 |   <header class="site-header">
 12 |     <div class="container header-inner">
 13 |       <a class="logo" href="#">
 14 |         <img src="images/logo.png" alt="Логотип Царские Охотники" class="logo-img">
 15 |         <span class="logo-text">Царские Охотники</span>
 16 |       </a>
 17 |       <button class="nav-toggle" aria-label="Открыть меню">☰</button>
 18 |       <nav class="site-nav" aria-label="Главное меню">
 19 |         <a href="#about">О нас</a>
 20 |         <a href="#services">Услуги</a>
 21 |         <a href="#gallery">Галерея</a>
 22 |         <a href="#contact">Контакты</a>
 23 |       </nav>
 24 |     </div>
 25 |   </header>
 26 | 
 27 |   <main>
 28 |     <section class="hero">
 29 |       <div class="container">
 30 |   <h1>Царские Охотники</h1>
 31 |         <p class="tagline">Профессионалы в охоте и природоохранных работах</p>
 32 |         <div class="hero-cta">
 33 |           <a class="btn" href="#contact">Связаться</a>
 34 |           <button id="downloadVcard" class="btn ghost">Скачать vCard</button>
 35 |         </div>
 36 |       </div>
 37 |     </section>
 38 | 
 39 |   <section id="about" class="container about">
 40 |       <h2>О нас</h2>
 41 |   <p>«Царские Охотники» — объединение специалистов в области охоты, разведения и сохранения популяций диких животных. Мы работаем с частными клиентами и организациями, предоставляем консультации, обучение и полевую поддержку.</p>
 42 |     </section>
 43 | 
 44 |     <section id="services" class="container services">
 45 |       <h2>Услуги</h2>
 46 |       <ul class="services-list">
 47 |         <li>
 48 |           <h3>Экологические оценки</h3>
 49 |           <p>Оценка мест обитания, советы по сохранению видов и мониторинг популяций.</p>
 50 |         </li>
 51 |         <li>
 52 |           <h3>Полевые работы</h3>
 53 |           <p>Проведение выездных работ, сопровождение и мониторинг.</p>
 54 |         </li>
 55 |         <li>
 56 |           <h3>Обучение и консультации</h3>
 57 |           <p>Курсы по безопасной и ответственной охоте, оборудование и разрешения.</p>
 58 |         </li>
 59 |       </ul>
 60 |     </section>
 61 | 
 62 |     <section id="gallery" class="container gallery">
 63 |       <h2>Галерея</h2>
 64 |       <div class="grid">
 65 |         <div class="card">
 66 |           <img src="images/дмитрий.jpg" alt="Дмитрий — Царские Охотники" class="gallery-img">
 67 |         </div>
 68 |         <div class="card">Фото 2</div>
 69 |         <div class="card">Фото 3</div>
 70 |       </div>
 71 |     </section>
 72 | 
 73 |     <section id="contact" class="container contact">
 74 |       <h2>Контакты</h2>
 75 |       <p>Телефон: <a href="tel:+70000000000">+7 (000) 000-00-00</a></p>
 76 |       <p>Email: <a href="mailto:info@cprhunters.example">info@cprhunters.example</a></p>
 77 | 
 78 |       <form id="contactForm" class="contact-form" novalidate>
 79 |         <label>
 80 |           Имя
 81 |           <input type="text" name="name" required>
 82 |         </label>
 83 |         <label>
 84 |           Email
 85 |           <input type="email" name="email" required>
 86 |         </label>
 87 |         <label>
 88 |           Сообщение
 89 |           <textarea name="message" rows="4" required></textarea>
 90 |         </label>
 91 |         <div class="form-actions">
 92 |           <button type="submit" class="btn">Отправить</button>
 93 |           <button type="button" id="clearForm" class="btn ghost">Очистить</button>
 94 |         </div>
 95 |         <p id="formMessage" class="form-message" aria-live="polite"></p>
 96 |       </form>
 97 |     </section>
 98 |   </main>
 99 | 
100 |   <footer class="site-footer">
101 |     <div class="container footer-inner">
102 |   <p>© <span id="year"></span> Царские Охотники — Все права защищены</p>
103 |       <div class="social">
104 |         <a href="#" aria-label="Телеграм">Telegram</a>
105 |         <a href="#" aria-label="ВКонтакте">ВКонтакте</a>
106 |       </div>
107 |     </div>
108 |   </footer>
109 | 
110 |   <script src="script.js"></script>
111 | </body>
112 | </html>
113 | 


--------------------------------------------------------------------------------