Свадебный сайт-приглашение своими руками (бесплатно и без опыта)
Свадебный сайт — это современный способ пригласить гостей без бумажных открыток.
Открываешь ссылку — и сразу видишь красивую страницу с датой, местом и атмосферой праздника.
И самое приятное — его можно сделать самостоятельно на HTML, даже если ты никогда не писал код.
📌 Оглавление
- Что такое свадебный сайт
- Как он устроен
- Как менять текст и данные
- Как добавить изображение
- Как открыть сайт на компьютере
- Как выложить сайт в интернет
- Готовый шаблон
💡 Как устроен свадебный сайт
Сайт — это всего один файл index.html.
Внутри него:
- заголовки (имена пары)
- текст приглашения
- дата и место
- изображение
Ты можешь менять всё: текст, цвета, фото и даже стиль.
✏️ Что можно менять в коде
Очень важно: тебе не нужно понимать HTML.
Просто запомни:
- текст между <h1> — это заголовок
- текст между <p> — обычное описание
- ссылка на фото — это src
Например:
<h1>Иван и Мария</h1>
👉 Ты просто заменяешь имена на свои.
🖼️ Как добавить изображение
Картинка делает сайт намного красивее.
Можно добавить фото пары или красивый фон.
Это делается так:
<img src="wedding.jpg" alt="Свадьба" width="300">
📌 Что можно менять:
- src — имя файла картинки
- width — размер изображения
- alt — описание (не видно на сайте)
📊 Инфографика: как работает сайт
🧾 HTML файл
↓
🖼️ Добавляешь фото
↓
💻 Открываешь в браузере
↓
🌐 Загружаешь на хостинг
↓
🔗 Получаешь ссылку
🌐 Как открыть сайт у себя
1. Создаёшь файл index.html
2. Кладёшь рядом фото (например wedding.jpg)
3. Дважды кликаешь файл
4. Сайт открывается в браузере
🚀 Как выложить сайт бесплатно
Можно использовать бесплатные сервисы:
- GitHub Pages
- Netlify
- Cloudflare Pages
Принцип простой:
загрузил файл → получил ссылку → отправил гостям
🎯 ГОТОВЫЙ ШАБЛОН СВАДЕБНОГО САЙТА (с изображением)
Просто скопируй код ниже в файл index.html.
Рядом положи фото с названием wedding.jpg.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Свадебное приглашение</title>
<style>
body {
font-family: Arial;
background: linear-gradient(135deg, #ffe6f0, #fff);
text-align: center;
padding: 40px;
}
.card {
background: white;
padding: 25px;
border-radius: 20px;
display: inline-block;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
max-width: 400px;
}
h1 {
color: #c2185b;
}
img {
width: 100%;
border-radius: 15px;
margin-top: 15px;
}
.btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background: #c2185b;
color: white;
text-decoration: none;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="card">
<h1>💍 Иван и Мария</h1>
<p>Мы приглашаем вас на нашу свадьбу</p>
<p>📅 20 июня 2026</p>
<p>📍 Москва, ресторан "Счастье"</p>
<img src="wedding.jpg" alt="Свадьба">
<a class="btn" href="#">Я приду</a>
</div>
</body>
</html>
💡 Что можно улучшить дальше
- добавить карту Google
- сделать таймер до свадьбы
- добавить музыку
- анимации появления
🎉 Итог
Свадебный сайт — это не сложно.
Это просто HTML + немного фантазии.
Главное — не бояться менять код. Всё, что ты видишь, можно адаптировать под себя за пару минут.
Комментарии (0)
Оставить комментарий