курси програмування для дітей безкоштовно

11 Листівка на CSS

Вітаю! Сьогодні наше творіння : листівка на CSS до свята. Наближається день Святого Валентина, тому у прикладі буде листівка саме для цього свята, але ви можете вітати з Днем Народження або будь-яким іншим. Це буде картка, яка при наведенні мишки повертається і показує побажання. Ось так вийшло у мене :

1:  Для початку відкрийте проєкт-заготовку https://codepen.io/AnikaAmiga/pen/LYagOaq і знайдіть внизу справа кнопку Fork. Натисніть її. Переконайтеся, що копія проєкту створилася: під назвою ви побачите своє ім’я замість Anika  (замість автора проєкта-заготовки).

2: Розбираємося зі структурою html-коду. Div – це тег коробочка, в середині якого можуть бути інші теги. Стилі, які ми надамо тегу div, можуть зробити структуру нашого сайту геть різною. В цьому проєкті стилі вже прописані. Але нам важливо правильно створити html-код, щоб сторінка працювала.

div class=”card” – div для листівки
div class=”card-inner” – div для внутрішньої частини листівки, який допомагає їй обертатися (знаходиться в середині card)
div class=”card-front” – div для передньої частини листівки (знаходиться в середині card-inner)
div class=”card-back” – div для другої частини з вітаннями (знаходиться в середині card-inner)
Ось пояснення за допомогою картинки з коробочками. Кожна коробка ілюструю окремий div:

А так це буде виглядати, якщо зібрати код до купи:

Зеленим написаний коментар-підказка. Програма його не бачить.

2: Перевірте себе :

<div class="card">
  <div class="card-inner">
    <div class="card-front">
      <!-- Тут перша сторінка -->
    </div>
    <div class="card-back">
      <!-- Тут друга сторінка -->
    </div>
  </div>
</div>

3: Час зробити першу сторінку. Додайте привітання і фото (не додавайте багато на першу сторінку, всі ваші ідеї залиште для другої). Подивіться на коментарі та спробуйте здогадатися, куди вставляти цей код. Замініть картинку (в посиланні помилка спеціально, щоб картинку замінили)

 <h1>З днем Святого Валентина </h1>
      <img src="hhttps://gifsec.com/wp-content/uploads/2022/09/happy-valentine-gif-1.gif" height="350">

4: Чудово, але хто ж дарує сірі сумні листівки ? Давайте змінимо кольори й зробимо їх більш веселими. Знайдіть кольори у CSS коді та замініть їх на ті, які подобаються вам. Використайте color picker для обирання кольору. Погугліть це слово і гугл сам запропонує вам колір. Скопіюйте його номер разом з решіткою (наприклад, #38e846)

5: Переходимо до другої сторінки. Додайте туди привітання, картинки, можливо відео. Друга сторінка може бути довшою за першу, вона буде розтягуватись. Подивіться на коментар і знайдіть місце, куди треба додати новий код.

6: Ще раз роздивіться: як виглядає ваша листівка на CSS? Чи гармонійно поєднані кольори? Чи видно за ними текст?

7 (Додаткове): Додайте картинку у формі сердечка. Для цього додайте в середину тегу картинки class=”heart”. Подивіться на стилі, знайдіть стилі, які відповідають за цей клас.

домашка з програмування

Level Up

1: Роздивіться приклади на сторінці https://w3schoolsua.github.io/html/html_css.html . Додайте стилі для кольорів тексту та заголовків у файл CSS.

2: Додайте смайликів звідси на вашу листівку. Натисніть на смайлик або смайлики, які хочете обрати. У верхньому віконці з’явиться те, що ви обрали. Натисніть кнопку “Копіювати” і вставте на свою сторінку.

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *