diff --git a/index.html b/index.html index 846cf93..12e7602 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,79 @@ - - +
+ + +
+
+
+
+ + + + +
+ +
+

Fusce maximus quis mauris non pulvinar. Sed quis tellus turpis. Morbi tristique suscipit eros, nec + auctor metus posuere eget. Cras dictum tortor lorem, vel malesuada est molestie sed. Donec lobortis + molestie quam, nec faucibus magna imperdiet ac. Nunc aliquam sit amet sapien a placerat. Aliquam + lacinia in velit quis sollicitudin. Sed posuere, odio eu porta viverra, dolor augue maximus augue, a + vulputate elit tortor sit amet felis. Proin varius, mi sed porttitor auctor, neque ligula porta + nibh, eu aliquam elit urna ac risus. Nunc aliquam lorem ac diam dapibus semper.

+
+ + +
+

Morbi feugiat lacus at augue accumsan maximus. Nulla id enim mattis est dictum vehicula. Sed eu + malesuada purus. Quisque ultrices ut neque nec elementum. Maecenas luctus, metus non tempor dapibus, + felis turpis ultricies felis, et elementum dui ipsum sed eros. Orci varius natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec porttitor nulla massa, at elementum leo + accumsan a. Vestibulum accumsan felis quis elit pellentesque, tempus ultrices libero efficitur. + Maecenas lacinia posuere convallis. Vivamus a auctor risus.

+
+ + +
+

Cras laoreet odio id vulputate posuere. Nulla tincidunt lacus magna, vel tincidunt est dignissim sed. + Sed tincidunt nisl velit, sodales maximus sem blandit lobortis. In sagittis dictum nibh, eu + fermentum eros condimentum at. Pellentesque sapien libero, porttitor sit amet est quis, sagittis + finibus nisl. Ut vel dignissim enim. Nunc sed mattis diam. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Curabitur sed faucibus orci. Sed non nibh non libero placerat luctus at in libero. + Maecenas suscipit lacus et risus semper, id porttitor est ultricies. Pellentesque habitant morbi + tristique senectus et netus et malesuada fames ac turpis egestas. Integer non dolor a orci molestie + lacinia sit amet at est. Aenean euismod velit ut dui lobortis, sed venenatis dolor tristique. + Vestibulum vitae suscipit nibh, ac blandit magna. Cras feugiat ex varius lorem convallis + ultricies.

+
+
+
+
+
+
+
+

Loading...

+
+
+
+

Loading...

+
+
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..be69083 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,10 @@ -/* - Изменить элементу цвет и ширину можно вот так: +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const element = document.querySelector('.progress .bar .progress-part'); +element.style.color = 'red'; +let i = 0; +setInterval(function() { + element.style.width = `${i++}px`; +}, 3000/400) diff --git a/styles.css b/styles.css index e69de29..ebd052b 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,214 @@ +.logo { + /*background: red;*/ + width: 100px; + height: 100px; + margin: 10px; +} + +.logos { + display: flex; + flex-direction: row; +} + +.logo6 { + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 50% 50%; + grid-gap: 5px; +} + +.logo6 .red { + background: #F1511B; + grid-column: 1; + grid-row: 1; +} + +.logo6 .green { + background: #80CC28; + grid-column: 2; + grid-row: 1; +} + +.logo6 .blue { + background: #00ADEF; + grid-column: 1; + grid-row: 2; +} + +.logo6 .yellow { + background: #FBBC09; + grid-column: 2; + grid-row: 2; +} + +.logo4 { + position: relative; +} + +.logo4 .outer { + position: absolute; + border-radius: 100%; + background: red; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; +} + +.logo4 .middle { + position: absolute; + border-radius: 100%; + background: white; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 66%; + height: 66%; + /*z-index: 1;*/ +} + +.logo4 .inner { + position: absolute; + border-radius: 100%; + background: red; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 33%; + height: 33%; + /*z-index: 2;*/ +} + +.lightbox { + position: fixed; + top: 0; + left: 0; +} + +.lightbox .dark { + background: #00000040; + position: fixed; + width: 100%; + height: 100%; + z-index: 20; +} + +.lightbox .window { + background: white; + position: fixed; + width: 640px; + border-radius: 5px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 21; + padding: 10px 20px; +} + +.lightbox .window .close { + width: 20px; + height: 20px; + padding: 0; + display: flex; + background: crimson; + border-radius: 10%; + border-width: 0; + right: 5px; + top: 5px; + position: absolute; +} + +.progress { + position: relative; + margin-top: 50px; + z-index: -5; +} + +.progress .bar { + position: relative; + background: lightgray; + width: 400px; + height: 30px; + padding: 0; + border-radius: 5px; + overflow: hidden; +} + +.progress .bar .progress-part { + position: relative; + background: red; + border-radius: 5px; + width: 190px; + height: 100%; + overflow: hidden; +} + +.progress .bar .text-black { + position: absolute; + top: 0; + left: 50%; + height: 100%; + transform: translate(-45%, 0); + padding: 5px; +} + +.progress .bar .progress-part .text-white { + position: absolute; + color: white; + top: 0; + left: 200px; + height: 100%; + transform: translate(-45%, 0); + padding: 5px; + overflow: hidden; +} + +p { + margin: 0; +} + +.accordion { + display: flex; + flex-direction: column; + height: 40px; + width: 95%; + background: lightgray; + border-width: 0; + padding: 10px; + justify-content: center; +} + +.panel { + width: 95%; + margin: 0; + padding: 0; + transition: all 0.3s ease-in-out; + max-height: 0; + overflow: hidden; + box-sizing: border-box; +} + +#expand-toggle1:checked ~ * #panel1 { + max-height: 300px; + padding: 10px; +} + +#expand-toggle2:checked ~ * #panel2 { + max-height: 300px; + padding: 10px; +} + +#expand-toggle3:checked ~ * #panel3 { + max-height: 300px; + padding: 10px; +} + +#expand-toggle1, #expand-toggle2, #expand-toggle3 { + display: none; +} + +label { + padding: 0; + font-size: 20px; +} \ No newline at end of file