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`. Для выполнения этого задания могут оказаться полезными свойства: diff --git a/index.html b/index.html index 846cf93..02f25cc 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,56 @@ + ЙОООООООООООООУ +
+
+
+
+
+
+
+
+
+ WEB - это круто +
+ Я в своем познании настолько преисполнился, что я как будто бы уже + сто триллионов миллиардов лет проживаю на триллионах и + триллионах таких же планет, как эта Земля, мне этот мир абсолютно + понятен, и я здесь ищу только одного - покоя, умиротворения и + вот этой гармонии, от слияния с бесконечно вечным, от созерцания + великого фрактального подобия и от вот этого замечательного всеединства + существа, бесконечно вечного, куда ни посмотри, хоть вглубь - бесконечно + малое, хоть ввысь - бесконечное большое, понимаешь? А ты мне опять со + своим вот этим, иди суетись дальше, это твоё распределение, это + твой путь и твой горизонт познания и ощущения твоей природы... +
+ +
+
+ +
+
+
Here is text
+
+ Here is text +
+ +
+ + + + + +
+ +
+
+
+
+ +
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..76d5711 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,24 @@ + /* Изменить элементу цвет и ширину можно вот так: 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 += 0.6; + updateProgressBar(i); + } + }, 50); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..0f57bfc 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,150 @@ +.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; + 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; +} + + +.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); +}