Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Бояков Михаил ФТ-201 #118

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Бояков Михаил ФТ-201 #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 74 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,79 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<script src="index.js"></script>
<div class="logos">
<div class="logo logo4">
<div class="outer"></div>
<div class="middle"></div>
<div class="inner"></div>
</div>
<div class="logo logo6">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
</div>
<div class="lightbox">
<div class="dark"></div>
<div class="window">
<input type="checkbox" id="expand-toggle1"/>
<input type="checkbox" id="expand-toggle2"/>
<input type="checkbox" id="expand-toggle3"/>
<button class="close">
<svg xmlns="http://www.w3.org/2000/svg">
<path stroke="black" stroke-width="2" d="m 4,4 6,6 6,-6 -6,6 6,6 -6,-6 -6,6 6,-6 z"/>
</svg>
</button>
<div>
<label for="expand-toggle1" id="expand-btn1" class="accordion">Section 1</label>
<div id="panel1" class="panel panel1">
<p>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.</p>
</div>

<label for="expand-toggle2" id="expand-btn2" class="accordion">Section 2</label>
<div id="panel2" class="panel panel2">
<p>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.</p>
</div>

<label for="expand-toggle3" id="expand-btn3" class="accordion">Section 3</label>
<div id="panel3" class="panel">
<p>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.</p>
</div>
</div>
</div>
</div>
<div class="progress">
<div class="bar">
<div class="text-black">
<p>Loading...</p>
</div>
<div class="progress-part">
<div class="text-white">
<p>Loading...</p>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
15 changes: 9 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
*/
const element = document.querySelector('.progress .bar .progress-part');
element.style.color = 'red';
let i = 0;
setInterval(function() {
element.style.width = `${i++}px`;
}, 3000/400)
214 changes: 214 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}