Загрузка...

Верстка макета с использование только html, css, js

Тема в разделе Веб-разработка создана пользователем Kirikel 1 июн 2024. 151 просмотр

  1. Kirikel
    Kirikel Автор темы 1 июн 2024 6 25 апр 2023
    [IMG]
    Для выполнения задачи вам понадобятся следующие материалы:
    • рабочая папка со следующей структурой: файл index.html
    • папка img для графики
    • папка css для файла стилей style.css
    • папка js для файла скриптов script.js
    • графический макет «Brain Spark»;
    Что нужно сделать
    1. HTML и CSS

    Необходимо создать разметку и стилизацию всех компонентов главной страницы «Brain Spark»:
    • шапки,
    • промо-блока,
    • блока с новостями
    • блока со статьями,
    • галереи,
    • карточек
    • блока контактов,
    • подвала.
    Страница должна соответствовать графическому макету.
    Также нужно задать состояния для интерактивных элементов, которые описаны в стайлгайде
    2. JavaScript
    2.1
    Не все тексты в разделе Новости отображаются на главной странице, однако мы предусмотрели разворачивание полного текста при нажатии на слово «дальше».
    Ваша задача — написать скрипт, который будет разворачивать текстовый блок после щелчка по кнопке «дальше».
    Условия:
    Напишите скрипт так, чтобы он работал при любом начальном наборе анонсов в разметке.
    • на странице может быть несколько анонсов: часть скрытых, часть раскрытых (показаны полностью)
    • содержание статьи скрыто стилями
    • скрытое содержание раскрывается при нажатии на кнопку «дальше»
    • при раскрытии одного блока, другие не меняются
    • при раскрытии блока кнопка «дальше» скрывается
    • скрипт работает одинаково при любом количестве скрытых блоков
    2.2 В галерее есть крупное изображение и несколько миниатюр. Когда пользователь нажимает на миниатюру, основное (крупное) изображение меняется.
    Условия:
    • для каждой миниатюры есть своё крупное изображение
    • сопоставление миниатюр и крупных изображений задано в разметке
    • выбранная миниатюра выделяется стилями
    • скрипт должен правильно работать с любым количеством миниатюр в галерее
    • пользователь выбирает изображение для просмотра кликом по миниатюре
    • последовательность выбора пользователем изображений может быть любая
    • переключение изображения в галерее происходит без перезагрузки страницы

      Пишите в телеграмм
     
Top
Загрузка...