From f9a4cc8dc2419a56f7a8390f82a68b24a9f2b90e Mon Sep 17 00:00:00 2001 From: AltyngulBiktasheva Date: Tue, 2 Apr 2024 18:18:28 +0500 Subject: [PATCH 1/5] Task1 --- index.html | 18 +++++++++++-- styles.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 846cf93..e052d54 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,21 @@ - - + +
+ + + + + +
+ +
+
+
+
+ +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..9fc8644 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,75 @@ +.logo6_wrapper { + width: 100px; + height: 100px; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + margin-top: 40px; + margin-left: 40px; +} + + + +.logo { + width: 45px; + height: 45px; + margin: 1px; +} + +.red { + background-color: #F25022; +} + +.green { + background-color: #7FBA00; +} + +.blue { + background-color: #00A4EF; +} + +.yellow { + background-color: #FFB900; +} + + + +.logo4_wrapper { + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + margin-top: 100px; + margin-left: 40px; + background-color: #ffffff; + } + +.circle { + width: 50px; + height: 50px; + position: absolute; + left: 70px; + border-radius: 50%; +} + +.circle1 { + background-color: #c63131; +} + +.circle2 { + width: 35px; + height: 35px; + position: absolute; + left: 77.5px; + background-color: #ffffff; +} + +.circle3 { + width: 20px; + height: 20px; + position: absolute; + left: 85px; + background-color: #c63131; +} + From 1b54062b0473811096571a42feeb9030b880def2 Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 2 Apr 2024 18:17:19 +0500 Subject: [PATCH 2/5] Lightbox --- index.html | 27 +++++++++++++++++++++++++++ index.js | 7 ------- styles.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index e052d54..e86bfa2 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,33 @@ + ЙОООООООООООООУ +
+
+
+
+
+
+
+
+
+ WEB - это круто +
+ Я в своем познании настолько преисполнился, что я как будто бы уже + сто триллионов миллиардов лет проживаю на триллионах и + триллионах таких же планет, как эта Земля, мне этот мир абсолютно + понятен, и я здесь ищу только одного - покоя, умиротворения и + вот этой гармонии, от слияния с бесконечно вечным, от созерцания + великого фрактального подобия и от вот этого замечательного всеединства + существа, бесконечно вечного, куда ни посмотри, хоть вглубь - бесконечно + малое, хоть ввысь - бесконечное большое, понимаешь? А ты мне опять со + своим вот этим, иди суетись дальше, это твоё распределение, это + твой путь и твой горизонт познания и ощущения твоей природы... +
+ +
+
+
diff --git a/index.js b/index.js index dd50919..e69de29 100644 --- a/index.js +++ b/index.js @@ -1,7 +0,0 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file diff --git a/styles.css b/styles.css index 9fc8644..bd83568 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,58 @@ +.container2 { + display: flex; + align-items: center; + justify-content: center; + + background-color: rgba(0, 0, 0, 0.25); + + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.container2 .lightbox { + border: solid black 1px; + width: 640px; + background-color: white; +} + +.container2 .lightbox .header { + display: flex; + justify-content: right; +} + +.container2 .lightbox .header .closeCross { + width: 16px; + height: 16px; + opacity: 0.5; +} + +.container2 .lightbox .header .closeCross:hover { + opacity: 1; +} + +.container2 .lightbox .header .closeCross .border1, +.container2 .lightbox .header .closeCross .border2 { + content: ' '; + position: absolute; + min-height: 17px; + min-width: 2px; + background-color: black; +} + +.container2 .lightbox .header .closeCross .border1 { + transform: rotate(45deg); +} + +.container2 .lightbox .header .closeCross .border2 { + transform: rotate(-45deg); +} + +.container2 .lightbox .content { + text-align: center; +} .logo6_wrapper { width: 100px; height: 100px; From 00e04c21712036b37c60cdbc1a125c50749f1e9c Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 2 Apr 2024 19:20:22 +0500 Subject: [PATCH 3/5] 123 --- index.html | 7 +++++++ index.js | 18 +++++++++++++++++- styles.css | 19 +++++++++++++++++++ 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..5887254 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,13 @@ + +
+
+
Here is text
+
+ Here is text +
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..bcb4a81 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,20 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + + +const progressBar = document.querySelector('.progress-fill'); + +function updateProgressBar(value) { +progressBar.style["clip-path"] = `inset(0 ${100 - value}% 0 0)`; +} + +// Пример использования функции updateProgressBar(): +let i = 0; +var interval = setInterval(function() { + if (i < 100) { + i += 1; + updateProgressBar(i); + } + }, 50); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..ded5028 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,19 @@ +.progress-bar { + background:#ccc; + padding:10px 0; + width:100%; + text-align:center; + position:relative; +} + +.progress-fill { + width: 100%; + background:red; + color: white; + padding:10px 0; + position:absolute; + left:0; + top:0; + overflow:hidden; + clip-path: inset(0 10% 0 0); +} From 5214fc3b0b79f4195326cbb01b6ae4b9ff47ddd5 Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 2 Apr 2024 19:23:25 +0500 Subject: [PATCH 4/5] Success --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 61374b0..76d5711 100644 --- a/index.js +++ b/index.js @@ -18,7 +18,7 @@ progressBar.style["clip-path"] = `inset(0 ${100 - value}% 0 0)`; let i = 0; var interval = setInterval(function() { if (i < 100) { - i += 1; + i += 0.6; updateProgressBar(i); } }, 50); \ No newline at end of file From cf8176cf7f798dd2f00c17354cf5cffb4b0d1859 Mon Sep 17 00:00:00 2001 From: rispele <50751327+Rispele@users.noreply.github.com> Date: Mon, 24 Feb 2025 20:22:33 +0500 Subject: [PATCH 5/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d23c34..ef19119 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ В этом задании нужно будет сверстать много всяких маленьких штук. -1. В директории `designs` есть файлы разных логотипов, их названия начинаются с `logo`. Выбери из них 2 и сверстай их так, чтобы каждый из них вписывался в квадрат со стороной `100px`. Верстать в файле `index.html`, стили писать в `styles.css`. +1. В директории `designs` есть файлы разных логотипов, их названия начинаются с `logo`. 12312321Выбери из них 2 и сверстай их так, чтобы каждый из них вписывался в квадрат со стороной `100px`. Верстать в файле `index.html`, стили писать в `styles.css`. Для выполнения этого задания могут оказаться полезными свойства: