Задание
Разработать сайт для салона красоты используя только базовые инструменты - HTML CSS JS / Сайт должен выглядеть стильно и современно.
Функционал программы
- Смена языка сайта
- Смена валюты при смене языка
- Форма для записи работает в обычном режиме без бэка, выбираем услугу, жмем записаться, услуга добавляется в форму. вносим оставщиеся данные и жмем на кнопку под формой.
Фрагмент программного кода
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Салон красоты - Luna </title>
<link rel="stylesheet" href="/static/css/styles.css">
<link rel="stylesheet" href="/static/css/adaptive.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="moon-slider-container">
<div class="moon-slider-track">
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon1.png" alt="Луна 1" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon2.png" alt="Луна 2" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon3.png" alt="Луна 3" /></div>
<!-- Дублируем для бесконечной прокрутки -->
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon1.png" alt="Луна 1" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon2.png" alt="Луна 2" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon3.png" alt="Луна 3" /></div>
<!-- Дублируем для бесконечной прокрутки -->
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon1.png" alt="Луна 1" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon2.png" alt="Луна 2" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon3.png" alt="Луна 3" /></div>
<!-- Дублируем для бесконечной прокрутки -->
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon1.png" alt="Луна 1" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon2.png" alt="Луна 2" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon3.png" alt="Луна 3" /></div>
<!-- Дублируем для бесконечной прокрутки -->
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon1.png" alt="Луна 1" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon2.png" alt="Луна 2" /></div>
<div class="moon-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/moon3.png" alt="Луна 3" /></div>
</div>
</div>
<main class="main">
<div class="currency" title="Изменить валюту" id="change-currency">₽</div>
<header class="header">
<div class="container">
<div class="logo">
<img src="/images/loading-150-1.gif" data-src="/static/images/luna-logo.png" alt="Logo">
</div>
<div class="burger-menu" id="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="/" class="lang" key="home">Главная</a>
</li>
<li class="menu-item">
<a href="#services" class="lang" key="catalog">КАТАЛОГ НАШИХ услуг</a>
</li>
<li>
<a href="#order" class="lang" key="order">Записаться</a>
</li>
<li>
<a href="tel:+971523898989" class="phone">+ 7 495 777 77 77</a>
</li>
<li class="menu-item language-switch">
<img src="/images/loading-150-1.gif" data-src="/static/images/ru.png" alt="Русский" data-lang="ru" class="lang-flag active">
<img src="/images/loading-150-1.gif" data-src="/static/images/gb.png" alt="English" data-lang="en" class="lang-flag">
<img src="/images/loading-150-1.gif" data-src="/static/images/fr.png" alt="French" data-lang="fr" class="lang-flag">
</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="container">
<div class="logo">
<img src="/images/loading-150-1.gif" data-src="/static/images/luna-logo.png" alt="Logo">
</div>
<div class="social-icons">
<a href="#" target="_blank" aria-label="Telegram">
<img src="/images/loading-150-1.gif" data-src="/static/icons/telegram.svg" alt="Telegram">
</a>
<a href="#" target="_blank" aria-label="WhatsApp">
<img src="/images/loading-150-1.gif" data-src="/static/icons/whatsapp.svg" alt="WhatsApp">
</a>
<a href="#" target="_blank" aria-label="VK">
<img src="/images/loading-150-1.gif" data-src="/static/icons/vk.svg" alt="VK">
</a>
</div>
<div class="footer-info">
<div class="rights lang" key="footerText"> © Салон красоты Luna. Все права защищены</div>
<div class="address lang" key="footerAddress">г. Москва, ул. Академика Королёва, д. 1</div>
<a href="#services" class="footer-btn lang" key="footerBtn">Записаться</a>
</div>
</div>
</footer>
<script src="/images/loading-150-1.gif" data-src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
<script src="/images/loading-150-1.gif" data-src="/static/js/scripts.js"></script>
<script src="/images/loading-150-1.gif" data-src="/static/js/lang.js"></script>
<script src="/images/loading-150-1.gif" data-src="/static/js/lang-currency-sync.js"></script>
</body>
</html>
Скриншот архива с проектом
Пояснения по запуску программы
Открыть проект в Visual Studio Code - открыть файл index.html - кликнуть по пустой области ПКМ - Open with Live Server - сайт запуститься. И не забудьте установить данное расширение, а также расширения для HTML CSS.
Телеграм
-