https://github.com/elrouss/cssbayan

Гармошка мемов с интерактивным интерфейсом, выполненная на чистом HTML5 и CSS3 (RS School)
https://github.com/elrouss/cssbayan

bayan bem css3 elrouss html5 rs-school

Last synced: about 1 month ago
JSON representation

Гармошка мемов с интерактивным интерфейсом, выполненная на чистом HTML5 и CSS3 (RS School)

• Host: GitHub
• URL: https://github.com/elrouss/cssbayan
• Owner: elrouss
• Created: 2023-03-12T21:27:28.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-08T12:41:32.000Z (about 3 years ago)
• Last Synced: 2025-06-06T03:41:13.450Z (12 months ago)
• Topics: bayan, bem, css3, elrouss, html5, rs-school
• Language: CSS
• Homepage:
• Size: 2.25 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Учебное задание: "CSS Bayan"

[![Главный экран сайта с текстами мемов и открытой картинкой к одному из них](https://user-images.githubusercontent.com/108838349/224547764-cf44407c-b757-4e71-aaad-c4c8cc43573b.gif)](https://elrouss.github.io/cssBayan/cssBayan/index.html)

## 1. Описание

Задание выполнено в рамках курса [«JavaScript/Front-end» (Stage №1)](https://rs.school/js/) от RS School. Задачей стояло создание по образцу адаптивной верстки с функционалом, написанным на чистом *CSS3*. По условию задания запрещено использование *JavaScript* и *Node Package Manager (npm)*, *CSS-фреймворков* и *CSS-препроцессоров*, а также единицы измерения *px* (исключение - для медиа-запросов), псевдоэлементов и позиционирования, отличного от статичного. Оценка выставлялась однокурсниками (cross-review).

**Ссылка на задание:** https://github.com/DrDiman/CSS-Bayan-task

**Ссылка на проект:** https://elrouss.github.io/cssBayan/cssBayan/index.html

## 2. Стех технологий

![Иконка CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![Иконка HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

## 3. Установка и запуск приложения в локальном репозитории

1. `git clone https://github.com/elrouss/cssBayan.git` - клонировать репозиторий (с использованием HTTPS) на свое устройство

## 4. Процесс создания

Работа выполнена в **2 этапа**:

1. Верстка

2. Cross-review

## 5. Функционал

- Адаптивный интерфейс (320px, 820px, 1920px)

- Разворачивание списка при наведении курсора

- Эффект взаимодействия при клике/тапе

- Сохранение состояния развернутого списка после клика/тапа

## 6. Статус проекта

Проект завершен