Создание отзывчивой баннерной рекламы | День 3 | 50 дней промежуточных проектов HTML и CSS

Наша цель —

Создание отзывчивой баннерной рекламы с помощью HTML и CSS

👉🏻 Вот что мы придумаем…


🎯 Давайте планировать

👉🏻 Наша структура body

карточка

фото_карточка
карта_описать

шапка_карты
кард_тело
карточный_хвост

карточка_купона

🎯 HTML

<a href="https://dev.to/koustav/">
  <div class="card">
    <div class="card_pic">
      <img src="https://doodleipsum.com/150/flat?i=982653932eabcb86283b22f6dee0aec2" alt="advertising image">
    </div>
    <div class="card_describe">
      <div class="card_head">
          30% Off on all Courses... 🔥
      </div>
      <div class="card_body">
          50 days of Intermediate HTML and CSS Projects on dev.to
      </div>
      <div class="card_tail">
          Use Coupon Code: <span id="card_coupon">devkoustav</span>
      </div>
    </div>
  </div>
</a>
Войти в полноэкранный режим Выход из полноэкранного режима

📢 Совет 💡

Используйте <a> ... </a> по всей карточке, чтобы пользователь мог перейти на эту страницу, щелкнув в любом месте карточки. Это хорошая практика UX.


🎯 CSS

📌 класс card, который содержит объявление целиком

.card {
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 7px;
  padding: 7px;
  margin: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
  font-family: "Nunito", sans-serif;
  z-index: 1;
}
Вход в полноэкранный режим Выход из полноэкранного режима

📌 class card_pic содержит изображение объявления…

.card_pic {
  border-radius: 7px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

📌 класс card_describe содержит весь написанный контент…

.card_describe {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

📌 класс card_head содержит заголовок объявления [Здесь скидка 30%]

.card_head {
  color: red;
  font-size: 19px;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

📌 класс card_tail содержит заголовок объявления [Здесь — используйте код купона]

.card_tail {
  color: green;
  font-size: 17px;
  line-height: 25px;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

📌 id card_coupon содержит код купона…

#card_coupon {
  background-color: red;
  padding: 4px;
  color: white;
  border-style: solid;
  border-radius: 4px;
  font-family: "Josefin Sans", sans-serif;
}
Войти в полноэкранный режим Выход из полноэкранного режима

📌 Теперь мы добавим некоторые эффекты :hover, :active, чтобы карта выглядела более живой…

.card:hover {
  transform: scale(1.03);
}
.card:active { 
  color: red;
}
Вход в полноэкранный режим Выход из полноэкранного режима

📌 Чтобы избежать подчеркивания в <a>.

a:link {
  text-decoration: none;
  color: #121212;
}     /* Unvisited links */
a:visited {
  color: purple;
}     /* Visited links */
Войти в полноэкранный режим Выход из полноэкранного режима

🎯 Задача дня

👉🏻 Сделайте эти…

2.


📢 Совет дня 💡

Хотите отличную цветовую схему для своего сайта?
Используйте эти-

  1. ColorHunt
  2. Adobe Color

👉🏻 Немного кредитов
Шрифты — fonts.google.com
Изображение — Doodleipsum


Проверьте серию!
❤️ Happy Coding!
Следите за продолжением!

Оцените статью
devanswers.ru
Добавить комментарий