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

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

Картинку, CSS и JavaScript вы загружаете на Github. CSS и JavaScript перед встраиванием конвертируете через raw.githack.com

I CSS:

1) Начинаем с указания универсального селектора и отображения лендинга в виде блока:

 * {

    box-sizing: border-box;

}

2) Далее указываем в селекторе шрифт, ширину и вашу фоновую картинку:

html, body {

    font-family: 'Open Sans', sans-serif;

    height: 100%;

    margin: 0;

  background: url("тут ваше фото");

  background-size: cover;

}

3) В классе объекта указывем ширину и отступы:

.box {

    width: 100%;

    padding-right: 15px;

    padding-left: 15px;

    margin: auto;

}

4) Создаем класс лендинга с расположением, и его производных: хэдера лендинга и ссылок в лендинге и заголовков. Можете изменить цвета на свои:

.landing {

    position: relative;

    background-color: transparent;

}

.landing .header {

    display: inline;

    padding: 10px 0 0;

    position: relative;

}

.landing .header .links {

    display: inline;

    padding: 0;

    margin: 0;

    width: 100%;

    text-align: right;

}

.landing .header .links li {

    display: inline-block;

    margin-left: 5px;

    cursor: pointer;

}

.landing .header .links li:last-child {

    border: 0;

    border-radius: 20px;

    padding: 10px 18px;

    color: #FFF;

    background-color: #6c63ff;

    font-size: 18px;

}

.landing .info {

    width: 100%;

    float: left;

    margin-top: 130px;

}

.landing .info h1 {

    font-size: 44px;

    margin: 0 0 20px;

    line-height: 1.4;

    color: white;

}

.landing .info p {

    margin: 0;

    line-height: 1.6;

    font-size: 15px;

    color: aqua;

}

.landing .info button {

    border: 0;

    border-radius: 20px;

    padding: 12px 30px;

    margin-top: 30px;

    cursor: pointer;

    color: #FFF;

    background-color: #6c63ff;

}

5) В классах фиксации и контейнера указываем, что ссылки-вкладки будут отображаться блоками:

.clearfix {

  clear: both;

}

.container {

  display: block;

  color: transparent;

  margin: 0 auto;

  text-align: center;

}

6) Селекторы заголовка и ссылок - указываем отступы и цвет текста (используйте свой, если необходимо):

h2 {

  font-weight: normal;

  letter-spacing: .125rem;

  text-transform: lowercase;

  color: yellow;

}

li {

  display: inline-block;

  font-size: 1.5em;

  list-style-type: none;

  padding: 1em;

  text-transform: lowercase;

  color: yellow;

  font-size: 18px;

}

li span {

  display: block;

  font-size: 4.5rem;

}

7) Это параметры адаптивного отображения. Просто скопируйте:

@media all and (max-width: 768px) {

  h2 {

    font-size: calc(1.5rem * var(--smaller));

  }

  li {

    font-size: calc(1.125rem * var(--smaller));

  }

  li span {

    font-size: calc(3.375rem * var(--smaller));

  }

}

8) Блок скрытого текста под спойлером. Задаем позиции кнопки и ее фоновый цвет:

button:focus {

  outline: none;

}

#spoiler_button {

 border: 0;

    border-radius: 20px;

    padding: 10px 18px;

    color: #FFF;

    background-color: #6c63ff;

    font-size: 18px;

}

#spoiler_button:hover {

border: 0;

    border-radius: 20px;

    padding: 10px 18px;

    color: #FFF;

    background-color: aqua;

    font-size: 18px;

}

#spoiler_button:active {

  border: 0;

    border-radius: 20px;

    padding: 10px 18px;

    color: #FFF;

    background-color: aqua;

    font-size: 18px;

}

  .fadein, .fadeout {

  height: 0;

  -moz-transition: opacity 1s ease-in-out;

  -o-transition: opacity 1s ease-in-out;

  -webkit-transition: opacity 1s ease-in-out;

  opacity: 0;  

}

.fadein {

  height: 100%;

  opacity: 1;

}

9) Создаем идентификатор селектора для дополнительного текста (под счетчиком акции):

#additional p {

    margin: 0;

    line-height: 1.6;

    font-size: 15px;

    color: yellow;

    }

II HTML 

10)  Указываем тип страницы, заголовок вкладки и шрифт:

<html lang="en">

<head>

  <meta charset="UTF-8"></meta>

  <title>Здесь заголовок вашей вкладки</title>

  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&amp;display=swap" rel="stylesheet"></link>

 11) Встраиваем библиотеку CSS. Скачать ее можно здесь: https://raw.githubusercontent.com/Dmitrykonn/specimen/master/normalize.css 

После этого загрузите ее в Github, конвертируйте через raw.githack.com и встройте как CSS.

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

13) Закройте </head> внутри <body> создайте классы лендинга и общей оболочки:

<div class="landing">

  <div class="box">

14) Теперь нам нужно сделать ссылки-вкладки, ведущие к абзацам текста. Для этого открываем соответствующие классы:

    <div class="header">

      <ul class="links">

15) Задаем в них названия ваших вкладок и ставим в адресе закладки по типу: #place3. Такие же закладки далее нужно будет внедрить в соответствующие места в тексте. Название вкладок и цвет их текста укажите свои:

   <li><a href="#place3" style="color: white;">Название</a></li>

        <li><a href="#place4" style="color: white;">Название</a></li>

        <li><a href="#place5" style="color: white;">Название</a></li>

        <li><a href="#place2" style="color: white;">Название</a></li>

        <li><a href="#place1" style="color: white;">Название</a></li>

16) Закрываем классы:

      </ul>

    </div>

17) Располагаем сам текст лендинга:

    <div class="info">

      <h1>Здесь ваш заголовок лендинга</h1>

      <p>Это первый абзац</p>

      <p id="place1">Это второй абзац</p>

Обратите внимание, что для внедрения закладки используется идентификатор: id="place1". Используйте такие идентификаторы и для других вкладок по ссылкам.

18) Подключаем кнопку спойлера:

      <button id="spoiler_button" name="spoiler_button" type="button">название</button>

19) А теперь сам текст спойлера:

    <div class="fadeout" id="spoiler_text">

 <p>Здесь содержимое вашего спойлера</p>

    </div>

 20) Закрываем оставшиеся классы:    

    </div>

 </div>

21) Обозначаем разделитель:

     <div class="clearfix">

    </div>

</div>

22) Теперь встраиваем контейнер счетчика. В моем примере он указан с закладкой. Может оставить ее в этом месте, можете поменять:

  <div class="container" id="place2">

  <h2 id="headline">До окончания акции осталось</h2>

  <div id="countdown">

    <ul>

      <li><span id="days"></span>дней</li>

      <li><span id="hours"></span>часов</li>

      <li><span id="minutes"></span>минут</li>

      <li><span id="seconds"></span>секунд</li>

    </ul>

  </div>

</div>

23) И добавляем блок текста внизу под счетчиком акции:

<div id="additional">

  <p>Текст в первом абзаце</p>

<br>

 <p>Текст во втором абзаце</p>

<br>

<p>Текст в третьем абзаце</p>

</div>         

III JavaScript

24) Теперь нам нужно задать динамику счетчика. Для этого создаем файл JavaScript. Указываем в нем функции отсчета времени:

  (function () {

  const second = 1000,

        minute = second * 60,

        hour = minute * 60,

        day = hour * 24;

25) Задаем дату окончания по типу месяц/день:

  let today = new Date(),

      dd = String(today.getDate()).padStart(2, "0"),

      mm = String(today.getMonth() + 1).padStart(2, "0"),

      yyyy = today.getFullYear(),

      nextYear = yyyy + 1,

      dayMonth = "05/15/",  //дата окончания

      date = dayMonth + yyyy;

  

  today = mm + "/" + dd + "/" + yyyy;

  if (today > date) {

    date = dayMonth + nextYear;

  }

  26) Функции отображения даты:

  const countDown = new Date(date).getTime(),

      x = setInterval(function() {    

        const now = new Date().getTime(),

              distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),

          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),

          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),

          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        if (distance < 0) {

          document.getElementById("headline").innerText = "Акция!";

          document.getElementById("countdown").style.display = "none";

          document.getElementById("content").style.display = "block";

          clearInterval(x);

        }

        //seconds

      }, 0)

  }());

27) Динамику раскрытия спойлера и текст в кнопке спойлера (можете заменить на свой):

    var divToggleVis = document.getElementById('spoiler_text');

var button = document.getElementById('spoiler_button');

button.onclick = function() {

    if (divToggleVis.className === 'fadeout') {

        divToggleVis.className = 'fadein';

    } else {

        divToggleVis.className = 'fadeout';

    }

    if (button.innerHTML === 'узнать') {

        button.innerHTML = 'скрыть';

    } else {

        button.innerHTML = 'узнать';

    }

};

28) Сохраняете ваш JS, загружаете его на Github, конвертируете ссылку, встраиваете ее по правилам встраивания JavaScript.

29) Закрываете оставшиеся теги:

</body>

</html>

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

Проверьте: у вас должен работать счетчик, открываться пять ссылок на закладки и раскрываться спойлер.

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