kontur-web-courses · Rispele · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git 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
@@ -6,7 +6,56 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    ЙОООООООООООООУ
+    <div id="lightboxContainer" class="container2">
+        <div class="lightbox">
+            <div class="header">
+                <div class="closeCross" onclick="lightboxContainer.remove()">
+                    <div class="border1"></div>
+                    <div class="border2"></div>
+                </div>
+            </div>
+            <div class="content">
+                WEB - это круто
+                <br/>
+                Я в своем познании настолько преисполнился, что я как будто бы уже
+                сто триллионов миллиардов лет проживаю на триллионах и
+                триллионах таких же планет, как эта Земля, мне этот мир абсолютно
+                понятен, и я здесь ищу только одного - покоя, умиротворения и
+                вот этой гармонии, от слияния с бесконечно вечным, от созерцания
+                великого фрактального подобия и от вот этого замечательного всеединства
+                существа, бесконечно вечного, куда ни посмотри, хоть вглубь - бесконечно
+                малое, хоть ввысь - бесконечное большое, понимаешь? А ты мне опять со
+                своим вот этим, иди суетись дальше, это твоё распределение, это
+                твой путь и твой горизонт познания и ощущения твоей природы...
+            </div>
+
+        </div>
+    </div>
     <!--Верстать тут-->
+
+    <div class="progress-bar">
+        <div class="progress-fill">
+            <div class="progress-fill-text">Here is text</div>
+        </div>
+        Here is text
+    </div>
     <script src="index.js"></script>
+
+    <div class="logo6_wrapper">
+        <div class="logo red"></div>
+        <div class="logo green"></div>
+        <div class="logo blue"></div>
+        <div class="logo yellow"></div>
+        <!-- <script src="index.js"></script> -->
+    </div>
+
+    <div class="logo4_wrapper">
+        <div class="circle circle1"></div>
+        <div class="circle circle2"></div>
+        <div class="circle circle3"></div>
+        <!-- <script src="index.js"></script> -->
+    </div>
+
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,24 @@
+
 /*
     Изменить элементу цвет и ширину можно вот так:
 
     const element = document.querySelector('.myElement');
     element.style.color = 'red';
     element.style.width = '300px';
-*/
+*/
+
+
+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);
diff --git 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);
+}