From b75fd0271ba02c3d31a77bc3dbd76e70fefb8d20 Mon Sep 17 00:00:00 2001 From: pollyv Date: Tue, 28 May 2024 12:25:43 +0300 Subject: [PATCH 1/2] TASK-3 create progress-bar --- README.md | 32 -------------------------------- progress-bar/index.html | 14 ++++++++++++++ progress-bar/styles.css | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 32 deletions(-) delete mode 100644 README.md create mode 100644 progress-bar/index.html create mode 100644 progress-bar/styles.css 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..f35c46d --- /dev/null +++ b/progress-bar/styles.css @@ -0,0 +1,33 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #000; +} + +.progress-bar { + width: 300px; + height: 40px; + background-color: #000; + border: 2px solid #fff; + border-radius: 5px; + box-shadow: 0 0 10px #fff; + overflow: hidden; + transition: box-shadow 0.3s; + cursor: pointer; +} + +.progress { + width: 0; + height: 100%; + background-color: #ff0; + box-shadow: 0 0 10px #ff0; + border-radius: 3px 0 0 3px; + transition: width 1s ease; +} + +.progress-bar:hover .progress { + width: 100%; +} From 1c318bfd71e01325fd9e45886c406c7d950943cc Mon Sep 17 00:00:00 2001 From: pollyv Date: Fri, 31 May 2024 10:50:43 +0300 Subject: [PATCH 2/2] TASK-3 correct styles - add linear gradient - delete border --- progress-bar/styles.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/progress-bar/styles.css b/progress-bar/styles.css index f35c46d..a1aad44 100644 --- a/progress-bar/styles.css +++ b/progress-bar/styles.css @@ -8,11 +8,11 @@ body { } .progress-bar { - width: 300px; + width: 350px; height: 40px; + padding: 10px; background-color: #000; border: 2px solid #fff; - border-radius: 5px; box-shadow: 0 0 10px #fff; overflow: hidden; transition: box-shadow 0.3s; @@ -22,9 +22,8 @@ body { .progress { width: 0; height: 100%; - background-color: #ff0; + background: linear-gradient(to bottom, #ffd700, #f19f05); box-shadow: 0 0 10px #ff0; - border-radius: 3px 0 0 3px; transition: width 1s ease; }