From 442ac169ccd638b4d7a1e7e8a466d10b52c4aab8 Mon Sep 17 00:00:00 2001 From: Manana_raz Date: Mon, 3 Apr 2023 17:11:51 +0500 Subject: [PATCH 1/5] added logo2 --- index.html | 16 +++++++++++----- styles.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 846cf93..b888479 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,18 @@ - - Практика позиционирования - + + Практика позиционирования + - - +
+
+
B
+
B
+
C
+
+
+ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..5b146c1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,55 @@ +.logo2_div{ + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + border: dotted; +} + +.grid2{ + display: flex; + flex-wrap: wrap; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; +} + +.rectangle{ + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-color: black; + color: white; + width: 27px; + height: 27px; + margin: 2px; /*Отступ между черными квадратами*/ +} + +.rectangle:nth-child(even) { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-color: black; + color: white; + width: 27px; + height: 27px; + margin: 2px; /*Отступ между черными квадратами*/ + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +/*Дополнительный блок для выравнивания текста в четных квадратах*/ +.rectangle:nth-child(even) div { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 100%; + height: 100%; +} \ No newline at end of file From 670080adefa2a50c87ba493a738dc98ed1a70954 Mon Sep 17 00:00:00 2001 From: Pohotlivi Ded Date: Mon, 3 Apr 2023 17:30:08 +0500 Subject: [PATCH 2/5] Do logo7 --- index.html | 8 +++++++- styles.css | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..4b7184e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,13 @@ - +
+
+
+
+
+
+ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..d0052b1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,40 @@ +.logo7_div { + position: relative; + width: 100px; + height: 100px; + border: dotted gray; +} + +.ellipse { + border-radius: 50%; + border:5px solid skyblue; + height: 40px; + width: 90px; +} + +.ellipse1 { + position: absolute; + top: 25px; +} + +.ellipse2 { + position: absolute; + transform: rotate(60deg); + top: 25px; +} + +.ellipse3 { + position: absolute; + transform: rotate(120deg); + top: 25px; +} + +.circle { + position: absolute; + top: 39px; + left: 39px; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: skyblue; +} From 2546aa91bb52229a925f26b13f166f3f8e8a13bf Mon Sep 17 00:00:00 2001 From: Manana_raz Date: Mon, 3 Apr 2023 17:37:24 +0500 Subject: [PATCH 3/5] added model25 --- index.html | 23 ++++++++++++++++++++++- index.js | 7 ------- styles.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 846cf93..6adbd1a 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,28 @@ - +
+
+ +

Здесь может быть любой контент

+
+ + +
+

Текст блока 1

+
+ + +
+

Текст блока 2

+
+ + +
+

Текст блока 3

+
+
+
\ No newline at end of file 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 e69de29..e041c2a 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,53 @@ +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background-color: #fff; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + z-index: 100; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 99; +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + cursor: pointer; +} + +.accordion { + width: 640px; + margin: 0 auto; +} +.accordion label { + display: block; + padding: 10px; + font-weight: bold; + background-color: #eee; + cursor: pointer; +} +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; +} +input:checked + label { + background-color: #ccc; +} +input:checked + label + .accordion-content { + max-height: 1000px; + transition: max-height 0.35s ease-in; +} \ No newline at end of file From 14d906dfceb12a4ec00efa5aa840ff79ffee99ce Mon Sep 17 00:00:00 2001 From: Manana_raz Date: Mon, 3 Apr 2023 17:59:46 +0500 Subject: [PATCH 4/5] adeed smth --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6adbd1a..41fb9d0 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
- +

Здесь может быть любой контент

From c1d2e8c8f21451a9fa3aee29caed67703d43a563 Mon Sep 17 00:00:00 2001 From: Pohotlivi Ded Date: Mon, 3 Apr 2023 18:07:13 +0500 Subject: [PATCH 5/5] dadasda --- index.html | 8 +++++++- index.js | 21 +++++++++++++++------ styles.css | 37 +++++++++++++++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 846cf93..cf5cc62 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,13 @@ - +
+
+
Loading...
+
+
Loading...
+
+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..89e037d 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,16 @@ -/* - Изменить элементу цвет и ширину можно вот так: +function close() { + let lightbox = document.querySelector('.overlay') + lightbox.style.display = 'none'; + let modal = document.querySelector('.modal') + modal.style.display = 'none'; +} - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +let progress = document.querySelector(".progress_inner"); +let dur = 3000; +let value = 0; +let progress_bar = setInterval(()=>{ + value += 1/3; + progress.style.width = String(value +"%"); + if (value > 100) + clearInterval(progress_bar); +},10); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..e0ec2dd 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,37 @@ +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background-color: #fff; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + z-index: 100; +} + +.progress_outer { + position: relative; + height: 50px; + background-color: lightgray; + margin: 0 auto 0 auto; +} + +.progress_inner { + position: absolute; + height: 100%; + width: 30%; + background-color: deeppink; +} + +.progress_text { + font-size: 45px; + width: 100%; + height: 100%; + text-align: center; + position: absolute; +} + +.white_text { + color: white; +} \ No newline at end of file