Бенд (сайт групи)
Як створити вебсторінку
Як створити повністю адаптивну вебсторінку, яка добре виглядатиме на всіх пристроях (настільний комп’ютер, ноутбук, планшет і смартфон):
Створити скелет вебсторінки
Використовуйте скелет вебсторінки із попереднього розділу.
Простий скелет лише з одним зображенням:
Приклад
<!DOCTYPE html>
<html lang="uk">
<meta charset="UTF-8">
<title>Група</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://w3schoolsua.github.io/w3css/4/w3.css">
<script src="https://w3schoolsua.github.io/lib/w3.js"></script>
<body>
<!-- Початок змісту -->
<div id="home" class="w3-content">
<!-- Зображення -->
<img src="img_la.jpg" alt="Група" style="width:100%">
<!-- Кінець змісту -->
</div>
</body>
</html>
Додати навігацію
Додайте навігаційну панель для переходу до розділів "Домашня сторінка", "Про нас", "Учасники" та "Контакти".
Приклад
<!-- Навігація (залишається вгорі) -->
<div class="w3-top w3-bar w3-black">
<a href="#home" class="w3-bar-item w3-button">Домашня сторінка</a>
<a href="#about" class="w3-bar-item w3-button">Про нас</a>
<a href="#members" class="w3-bar-item w3-button">Учасники</a>
<a href="#contact" class="w3-bar-item w3-button">Контакти</a>
</div>
Спробуйте самі »
Додати слайд-шоу
Змініть зображення на слайд-шоу.
Приклад
<!-- Slides -->
<img class="slides" src="../images/img_la.jpg" width="100%">
<img class="slides" src="../images/img_ny.jpg" width="100%">
<img class="slides" src="../images/img_ch.jpg" width="100%">
<script>
w3.slideshow(".slides", 1500);
</script>
Спробуйте самі »
Додати інформацію про групу
Додайте інформацію про групу.
Група
Це сайт нашого гурту. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Приклад
<!-- Про нас -->
<div id="about" class="w3-container w3-padding-32">
<h1 class="w3-center">Група</h1>
<p>Це сайт нашого гурту. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Спробуйте самі »
Додати інформацію про учасників групи
Додайте зображення та інформацію про кожного учасника групи
Учасники групи
Ігор
Олександр
Христина
Приклад
<!-- Members -->
<div id="members" class="w3-container w3-padding-32">
<div class="w3-row w3-center">
<div class="w3-third">
<img src="../images/img_bandmember.jpg" alt="Name1" style="width:60%">
</div>
<div class="w3-third">
<img src="../images/img_bandmember.jpg" alt="Name2" style="width:60%">
</div>
<div class="w3-third">
<img src="../images/img_bandmember.jpg" alt="Name3" style="width:60%">
</div>
</div>
</div>
Спробуйте самі »
Додати контактну інформацію
Додайте контактну інформацію та контактну форму.
Приклад
<div id="contact" class="w3-container w3-center w3-padding-32">
<h2 class="w3-wide">КОНТАКТИ</h2>
Chicago, US<br>
Phone: +00 151515<br>
Email: mail@mail.com<br>
<p class="w3-opacity w3-center"><i>Фанат? Залиште записку!</i></p>
<form action="/action_page.html" target="_blank">
<input class="w3-input" type="text" placeholder="Ім’я" required name="Name">
<input class="w3-input" type="text" placeholder="Email" required name="Email">
<input class="w3-input" type="text" placeholder="Повідомлення" required name="Message">
<br>
<button class="w3-button w3-black" type="submit">НАДІСЛАТИ</button>
</form>
<img src="../images/map.jpg" class="w3-image" style="width:100%">
</div>
Спробуйте самі »
Спробуйте все »
