ЖСО-201. Цифровые коммуникации. Практическое задание №5. Текстовый лендинг с прайсом

Вам нужно создать лендинг, включающий в себя: фоновую картинку, фото предлагаемого товара или услуги (на прозрачном фоне), два абзаца текста, два блока опций с прайсом, четырьмя категориями условий в каждом и кнопкой-переключателем цен.

Традиционно начинаем с CSS: 

1) Это библиотека, которую нужно скачать, загрузить в репозиторий и подключить перед вашим CSS. Ее можно взять здесь: 

https://raw.githubusercontent.com/Dmitrykonn/specimen/refs/heads/master/minlib.css

или здесь:

https://raw.githack.com/Dmitrykonn/specimen/master/minlib.css

2) Указываем шрифты:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,600,700");

3) Расположение хэдера:

header #headline, header #circular-bg {

  position: absolute;

  top: 600px;

  left: 800px;

  transform: translate(-50%, -50%);

}

4) Общий селектор:

* {

  box-sizing: border-box;

  text-align: center;

  text-decoration: none;

  color: #fff;

}

5) Основное содержимое страницы. Здесь укажите фоновую картинку:

body {

  background-image: url("?");

  font-family: "Roboto", sans-serif;

  overflow: auto;

}

6) Инфоблок хэдера и его расположение:

header .info p {

  position: relative;

  margin: 0;

  line-height: 1.6;

  font-size: 15px;

  color: white;

  text-align: justify;

  top: -500px;

  left: -10px;

}

7) Цветной круг, его расположение и цвет:

header #circular-bg {

  width: 85vw;

  height: 85vw;

  background: CadetBlue;

  border-radius: 50%;

  z-index: -10;

}

8) Навигационное меню:

header nav {

  width: 1000px;

  margin: 30px auto 0 auto;

}

9) Ссылки в навигационном меню:

header nav a {

  font-size: 18px;

  margin-left: 20px;

  position: relative;

  color: white;

}

10) Заголовочная часть с названием лендинга:

header #brand {

  font-size: 100px;

  font-weight: 700;

  position: absolute;

  left: 20vw;

  top: 15%;

}

11) Фоновая врезка. В качестве картинки можно использовать ту же, что и для основного фона:

header #brand:before {

  content: "";

  position: absolute;

  width: 110%;

  height: 60px;

  background-image: url("?");

  bottom: -10px;

  left: -5%;

  border-radius: 60px;

  z-index: -1;

}

12) Расположение фото, иллюстрирующего товар в лендинге:

header img {

  position: absolute;

  width: 600px;

  top: 200px;

  left: 300px;

}

13) Часть слогана с текстом в пост-описании:

header #headline {

  font-size: 30px;

  line-height: 35px;

  text-align: left;

  left: 20%;

  top: 45%;

}

  

header #headline:before {

  content: "";

  position: absolute;

  width: 60px;

  height: 4px;

  background: #fff;

  top: 22%;

  left: -85%;

}

  

header #headline:after {

  content: "здесь текст постописания";

  position: absolute;

  top: 120%;

  left: -10%;

  font-size: 20px;

  letter-spacing: 1px;

}

14) Кнопка в основной части лендинга:

header button {

  margin-top: 120vh;

  width: 140px;

  height: 50px;

  background: #00cc99;

  border: none;

  font-weight: 600;

  border-radius: 5px;

  font-size: 15px;

}

15) Теперь модули прайса. Сначала класс контейнера:

.container {

  width: 100%;

}

16) Затем класс блоков:

.packages {

  margin: 20px;

  top: -300px;

  position: relative;

  width: 300px;

  padding-bottom: 1.5em;

  height: 100%;

  background-color: CadetBlue;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  border-radius: 20px;

  box-shadow: 0 19px 38px rgba(30, 35, 33, 1), 0 15px 12px rgba(30, 35, 33, 0.2);

  flex-wrap: wrap;

  color: #f4f4f4;

}

17) Заголовки:

h1,

h2 {

  font-size: 2.2em;

}

18) Лист, условия и их параметры:

.list li {

  font-size: 20px;

  list-style: none;

  border-bottom: 1px solid #f4f4f4;

  padding-inline-start: 0;

  border-width: 1px;

  padding: 10px;

}

.first {

  margin-top: 40px;

  border-top: 1px solid #f4f4f4;

}

.list {

  width: 80%;

}

ol, ul {

  padding: 0;

}

.top {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  top: -300px;

}

input,

label {

  display: inline-block;

  vertical-align: middle;

  margin: 10px 0;

}

19) Кнопка заказа:

.button {

  padding: 10px 30px;

  text-decoration: none;

  font-size: 1.4em;

  margin: 15px 15px;

  border-radius: 50px;

  color: #f4f4f4;

  transition: all 0.3s ease 0s;

}

.button:hover {

  transform: scale(1.2);

}

20) Цвет каждой из кнопок (используйте свой):

.button1 {

  background-color: #00cc99;

  box-shadow: 0 0 10px 0 #00cc99 inset, 0 0 20px 2px #00cc99;

}

.button2 {

  background-color: #00cc99;

  box-shadow: 0 0 10px 0 #00cc99 inset, 0 0 20px 2px #00cc99;

}

21) Кнопка-переключатель условий прайса:

.switch {

  position: relative;

  top: -5px;

  display: inline-block;

  width: 60px;

  height: 34px;

}

.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}

22) Сопутствующие ей параметры слайдера:

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #1e2321;

  -webkit-transition: 0.4s;

  box-shadow: 2px 6px 25px #1e2321;

  transform: translate(0px, 0px);

  transition: 0.6s ease transform, 0.6s box-shadow;

}

.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: 0.4s;

  transition: 0.4s;

}

input:checked + .slider {

  background-color: #50bfe6;

}

input:focus + .slider {

  box-shadow: 0 0 1px #50bfe6;

}

input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}

.slider.round {

  border-radius: 34px;

}

.slider.round:before {

  border-radius: 50%;

}

23) Контейнер упаковки прайс-блоков:

.package-container {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}

пункт без номера) Если вам потребуется выравнивать размеры картинки с товаром, то создайте в CSS ее класс, в котором укажите отступы слева и сверху и размер фото в процентах, чтобы не ресайзить саму картинку. Пример параметров в моем лендинге:

margin-top: -150px;

 margin-left: -110px;

 width: 40%;

После этого внедрите класс из CSS в HTML. В пункте 31 поставьте внутри тега <img> атрибут class="название вашего класса из css"

24) В конце создайте селектор футера с произвольным цветом.

HTML

25) Указываем основные параметры, имя вкладки и вариант отображения:

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Landing with prices</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

26) Встройте библиотеку CSS

27) Встройте ваш CSS

28) Закройте  </head>, внутри <body> откройте блок <header>

29) В нем задаем расположение круга:

  <div id="circular-bg"></div>

30) Три вкладки навигационного меню с закладками:

  <nav><a href="#place1">Вкладка1</a><a href="#place2">Вкладка2</a><a href="#place4">Вкладка3</a></nav>

31) В заголовке укажите название лендинга и ссылку на фото товара/продукта/услуги:

  <h1 id="brand">Название</h1><img src="тут ваше фото">

32) Укажите слоган:

  <h2 id="headline">

    Тут <br/><p id="place4">ваш слоган</p></h2>

33) И кнопку в прайсах:

  <button><a href="#place3" style="color: white;">Текст кнопки</a></button>

 34) Отделите основную часть от прайса и укажите два абзаца текста лендинга:

  <br>

  <br>

  <div class="info">

 <p id="place1">Первый абзац с текстом</p>

    <br>

    <p id="place2">Второй абзац с текстом</p>

    <br> 

35) Теперь блок прайса:

  <div id="small-screen"></div>   

    <div class="container">

    <div class="top">

36) Название блока выбора опций и выбор интервала - в моем примере это время:

      <h1 id="place3">Название:</h1>

      <div class="toggle-btn">

        <span style="margin: 0.8em;">2 часа</span>

        <label class="switch">

          <input type="checkbox" id="checbox" onclick="check()" ; />

          <span class="slider round"></span>

        </label>

        <span style="margin: 0.8em;">30 минут/span></div>

    </div>

37) Теперь контейнер опций с ценой. Укажите свои параметры:

    <div class="package-container">

      <div class="packages">

        <h1>Стандарт</h1>

        <h2 class="text1">&euro;79.99</h2>

        <h2 class="text2">&euro;199.99</h2>

        <ul class="list">

          <li class="first">опция 1</li>

          <li>опция 2</li>

          <li>опция 3</li>

          <li>опция 4</li>

        </ul>

        <a href="#" class="button button1">текст кнопки заказа</a>

      </div>

38) Второй контейнер:

      <div class="packages">

        <h1>Эксклюзив</h1>

        <h2 class="text1">&euro;159.99</h2>

        <h2 class="text2">&euro;299.99</h2>

        <ul class="list">

          <li class="first">опция 1</li>

          <li>опция 2</li>

          <li>опция 3</li>

          <li>опция 4</li>

        </ul>

        <a href="#" class="button button2">текст кнопки заказа</a>

      </div>

   39) Закрываем соответствующие классы и хэдер:

    </div>

  </div>

</header>

40) Встраиваем js-библиотеку. Взять ее можно здесь:

https://raw.githubusercontent.com/Dmitrykonn/locals/main/jquerymin3.js

41) Затем ваш JavaScript:

    function check() {

  var checkBox = document.getElementById("checbox");

  var text1 = document.getElementsByClassName("text1");

  var text2 = document.getElementsByClassName("text2");

  for (var i = 0; i < text1.length; i++) {

    if (checkBox.checked == true) {

      text1[i].style.display = "block";

      text2[i].style.display = "none";

    } else if (checkBox.checked == false) {

      text1[i].style.display = "none";

      text2[i].style.display = "block";

    }

  }

}

check();

42) Добавьте футер с произвольным текстом.

43) Закройте оставшиеся теги </body> и </html>

Если все верно, то ваш лендинг будет выглядеть примерно так: https://konoplevdigital.blogspot.com/p/landing-with-prices.html

Ссылки на выполненное в вашем блоге задание принимаются в комментариях к данному посту до 15:00 24 марта.