diff --git a/README.md b/README.md deleted file mode 100644 index 7e9e4d2..0000000 --- a/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# Стажировка: Модуль 2. HTML и CSS - -## Продолжительность - -**Модуль 2:** с 27 мая по 10 июня 2024 года - -## Задания - -В рамках этого модуля было необходимо выполнить следующие задания, используя только чистый HTML и CSS: - -1. **Сверстать геометрические фигуры** - -2. **Сверстать круговую диаграмму** - -3. **Сверстать прогресс-бар** - -4. **Сверстать форму** - -5. **Сверстать лендинг 1** - -6. **Сверстать лендинг 2** - -## Общие рекомендации по оформлению коммитов - -- **Название веток:** Каждое задание должно выполняться в отдельной ветке. Названия веток должны начинаться с префикса `TASK-<Номер задачи>`. - - Пример: `TASK-1`, `TASK-2` и т.д. -- **Сообщения к коммитам:** Сообщения к коммитам должны быть на английском языке и написаны в настоящем простом времени. - - Пример: `TASK-1 fix landing page, change fonts, fix paddings` -- **Merge Requests (MR):** - - Создать MR из текущей ветки в `main`/`master`. - - Включить краткое описание изменений в MR. - - Отправить ссылку на MR в чат на ревью. diff --git a/progress-bar/index.html b/progress-bar/index.html new file mode 100644 index 0000000..c74ca9a --- /dev/null +++ b/progress-bar/index.html @@ -0,0 +1,14 @@ + + + + + + Progress-bar + + + +
+
+
+ + diff --git a/progress-bar/styles.css b/progress-bar/styles.css new file mode 100644 index 0000000..a1aad44 --- /dev/null +++ b/progress-bar/styles.css @@ -0,0 +1,32 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #000; +} + +.progress-bar { + width: 350px; + height: 40px; + padding: 10px; + background-color: #000; + border: 2px solid #fff; + box-shadow: 0 0 10px #fff; + overflow: hidden; + transition: box-shadow 0.3s; + cursor: pointer; +} + +.progress { + width: 0; + height: 100%; + background: linear-gradient(to bottom, #ffd700, #f19f05); + box-shadow: 0 0 10px #ff0; + transition: width 1s ease; +} + +.progress-bar:hover .progress { + width: 100%; +}