Untitled

avatar
unknown
plain_text
a year ago
12 kB
12
Indexable
my-site/
  index.html
  styles.css
  script.js
  images/
    hero.jpg    (будь-яке фото, можна видалити/замінити)
    <!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Поля — мій маленький сайт</title>
  <meta name="description" content="Особисте портфоліо: про мене, проєкти, контакти." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="topbar">
    <a class="logo" href="#home">Поля</a>
    <nav class="nav">
      <a href="#about">Про мене</a>
      <a href="#projects">Проєкти</a>
      <a href="#contact">Контакти</a>
    </nav>
    <button id="themeToggle" aria-label="Перемкнути тему">🌓</button>
  </header>

  <main id="home">
    <section class="hero">
      <div class="hero-text">
        <h1>Привіт, я Поля 👋</h1>
        <p>Пишу код і мрію робити гарні речі, що працюють швидко.</p>
        <a class="btn" href="#projects">Дивитись роботи</a>
      </div>
      <div class="hero-img">
        <img src="images/hero.jpg" alt="Геройське зображення" />
      </div>
    </section>

    <section id="about" class="section">
      <h2>Про мене</h2>
      <p>
        Люблю чистий код, теплий чай і світанки. Працюю з HTML, CSS, JavaScript, іноді Python.
        Цей сайт — стартова точка; редагуй текст під себе.
      </p>
      <ul class="facts">
        <li>⚡ Швидко вчуся новому</li>
        <li>🎯 Орієнтуюся на результат</li>
        <li>💡 Обожнюю прості рішення</li>
      </ul>
    </section>

    <section id="projects" class="section">
      <h2>Проєкти</h2>
      <div class="grid">
        <article class="card">
          <h3>Шифратор</h3>
          <p>Маленька утиліта на Python з шифром Цезаря.</p>
          <a class="link" href="#" aria-disabled="true">Код скоро буде</a>
        </article>
        <article class="card">
          <h3>Лендінг кав’ярні</h3>
          <p>Адаптивна сторінка з меню й мапою.</p>
          <a class="link" href="#" aria-disabled="true">Демо скоро буде</a>
        </article>
        <article class="card">
          <h3>Галерея</h3>
          <p>Галерея з клавішною навігацією на JS.</p>
          <a class="link" href="#" aria-disabled="true">Переглянути</a>
        </article>
      </div>
    </section>

    <section id="contact" class="section">
      <h2>Контакти</h2>
      <form id="contactForm">
        <label>
          Ім’я
          <input name="name" required />
        </label>
        <label>
          Email
          <input type="email" name="email" required />
        </label>
        <label>
          Повідомлення
          <textarea name="message" rows="4" required></textarea>
        </label>
        <button type="submit" class="btn">Надіслати</button>
        <p id="formStatus" class="status" role="status" aria-live="polite"></p>
      </form>
      <p class="muted">*Без сервера лист не піде — зараз форма просто покаже «надіслано». Для реальної відправки підключимо Formspree або свій бекенд.</p>
    </section>
  </main>

  <footer class="footer">
    <small>© <span id="year"></span> Поля. З любов’ю до простоти.</small>
  </footer>

  <script src="script.js"></script>
</body>
</html>
<!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Поля — мій маленький сайт</title>
  <meta name="description" content="Особисте портфоліо: про мене, проєкти, контакти." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="topbar">
    <a class="logo" href="#home">Поля</a>
    <nav class="nav">
      <a href="#about">Про мене</a>
      <a href="#projects">Проєкти</a>
      <a href="#contact">Контакти</a>
    </nav>
    <button id="themeToggle" aria-label="Перемкнути тему">🌓</button>
  </header>

  <main id="home">
    <section class="hero">
      <div class="hero-text">
        <h1>Привіт, я Поля 👋</h1>
        <p>Пишу код і мрію робити гарні речі, що працюють швидко.</p>
        <a class="btn" href="#projects">Дивитись роботи</a>
      </div>
      <div class="hero-img">
        <img src="images/hero.jpg" alt="Геройське зображення" />
      </div>
    </section>

    <section id="about" class="section">
      <h2>Про мене</h2>
      <p>
        Люблю чистий код, теплий чай і світанки. Працюю з HTML, CSS, JavaScript, іноді Python.
        Цей сайт — стартова точка; редагуй текст під себе.
      </p>
      <ul class="facts">
        <li>⚡ Швидко вчуся новому</li>
        <li>🎯 Орієнтуюся на результат</li>
        <li>💡 Обожнюю прості рішення</li>
      </ul>
    </section>

    <section id="projects" class="section">
      <h2>Проєкти</h2>
      <div class="grid">
        <article class="card">
          <h3>Шифратор</h3>
          <p>Маленька утиліта на Python з шифром Цезаря.</p>
          <a class="link" href="#" aria-disabled="true">Код скоро буде</a>
        </article>
        <article class="card">
          <h3>Лендінг кав’ярні</h3>
          <p>Адаптивна сторінка з меню й мапою.</p>
          <a class="link" href="#" aria-disabled="true">Демо скоро буде</a>
        </article>
        <article class="card">
          <h3>Галерея</h3>
          <p>Галерея з клавішною навігацією на JS.</p>
          <a class="link" href="#" aria-disabled="true">Переглянути</a>
        </article>
      </div>
    </section>

    <section id="contact" class="section">
      <h2>Контакти</h2>
      <form id="contactForm">
        <label>
          Ім’я
          <input name="name" required />
        </label>
        <label>
          Email
          <input type="email" name="email" required />
        </label>
        <label>
          Повідомлення
          <textarea name="message" rows="4" required></textarea>
        </label>
        <button type="submit" class="btn">Надіслати</button>
        <p id="formStatus" class="status" role="status" aria-live="polite"></p>
      </form>
      <p class="muted">*Без сервера лист не піде — зараз форма просто покаже «надіслано». Для реальної відправки підключимо Formspree або свій бекенд.</p>
    </section>
  </main>

  <footer class="footer">
    <small>© <span id="year"></span> Поля. З любов’ю до простоти.</small>
  </footer>

  <script src="script.js"></script>
</body>
</html>
:root{
  --bg: #0f1115;
  --fg: #e9ecf1;
  --muted: #9aa3ad;
  --card: #151923;
  --accent: #6ee7ff;
  --btn: #5ad1ff;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
:root.light{
  --bg: #ffffff;
  --fg: #1c2128;
  --muted: #55606d;
  --card: #f3f5f8;
  --accent: #1e8fff;
  --btn: #1e8fff;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

.topbar{
  position: sticky; top:0; z-index:10;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:14px 18px; background: rgba(15,17,21,.8); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
:root.light .topbar{ background: rgba(255,255,255,.8); }
.logo{ font-weight: 700; text-decoration:none; color:var(--fg) }
.nav a{ color:var(--fg); text-decoration:none; margin:0 8px; opacity:.9 }
.nav a:hover{ opacity:1; }
#themeToggle{
  border:0; background:var(--card); color:var(--fg); padding:8px 10px; border-radius:10px; cursor:pointer;
}

.hero{
  display:grid; gap:24px; grid-template-columns: 1.2fr 1fr;
  align-items:center; padding:48px 18px; max-width:1100px; margin:0 auto;
}
.hero-text h1{ font-size: clamp(28px, 5vw, 48px); margin:0 0 8px }
.hero-text p{ color: var(--muted); margin:0 0 18px }
.btn{
  display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none;
  background: var(--btn); color:#fff; font-weight:600; box-shadow: var(--shadow);
  border:0; cursor:pointer;
}
.hero-img img{ width:100%; border-radius:16px; box-shadow: var(--shadow); object-fit:cover; }

.section{ padding:40px 18px; max-width:1100px; margin:0 auto; }
.section h2{ font-size: clamp(22px, 4vw, 32px); margin:0 0 16px }

.facts{ display:grid; gap:8px; padding:0; list-style:none }
.facts li{ background: var(--card); padding:10px 12px; border-radius:10px }

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  background: var(--card); padding:16px; border-radius:16px; box-shadow: var(--shadow);
}
.card h3{ margin:0 0 8px }
.link{ color: var(--accent); text-decoration:none }

form{
  display:grid; gap:12px; max-width:520px;
}
input, textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid transparent;
  background: var(--card); color: var(--fg);
}
input:focus, textarea:focus{ outline:none; border-color: var(--accent); }
.status{ min-height: 1.25em; color: var(--accent); }

.muted{ color: var(--muted); }

.footer{
  padding:24px 18px; text-align:center; color: var(--muted);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* адаптив */
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
  .nav{ display:none; }
}
// поточний рік у футері
document.getElementById("year").textContent = new Date().getFullYear();

// перемикач теми (пам’ятає вибір у localStorage)
const root = document.documentElement;
const themeToggle = document.getElementById("themeToggle");
const saved = localStorage.getItem("theme");
if (saved === "light") root.classList.add("light");

themeToggle.addEventListener("click", () => {
  root.classList.toggle("light");
  localStorage.setItem("theme", root.classList.contains("light") ? "light" : "dark");
});

// «відправка» форми без сервера
const form = document.getElementById("contactForm");
const status = document.getElementById("formStatus");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form).entries());
  // тут можна відправити на Formspree/свій бекенд. Поки просто імітація:
  status.textContent = "Надіслано ✔ Дякую, " + (data.name || "друже") + "!";
  form.reset();
});
<!doctotype htm1>
<htm1 1ang="uk">
<head>
  <meta charset="utf-8">
  <title>Скат упал</title>
</head>
<body>
    <h1 id="greet">Болгария </h1>
    <button onclick="sayHello()">Натисни мене</button>


    <script>
        function sayHello() {
            <document class="getE1ementById("greet").textContent = "Скат упал
        }
    </script>
</body>
</htm1>
Editor is loading...
Leave a Comment