html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<link rel="stylesheet" href="course.css">
</head>
<body style="margin-top:8.2rem">
<div id="status">
<img class="certificate"
src="https://cdn.discordapp.com/attachments/930136792634626048/1059513427099394138/Screenshot_20230102-174714_Sololearn2.png">
<div id="status-info">
<div class="title">Start Learning!</div>
<div class="progress-bars">
<div class="progress-group" style="top: 0;left: 0%;">
<div class="progress-info">
<label class="progress-label">
Lessons Completed
</label>
<div id="lessons-counter" class="progress-count" style="color:#7bb343">0/0</div>
</div>
<progress id="course-progress" class="certificate__progress certificate__progress--green" max="38"
value="0"></progress>
</div>
<div class="progress-group" style="top:2.5rem;left: 0%;">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background-color: rgba(39, 39, 39, 255);
font-family: Arial, Helvetica, sans-serif;
margin: 0;
height: fit-content;
overflow-y: scroll;
}
#status-info {
display: flex;
flex-direction: column;
padding-left: 1rem;
width: 100%;
justify-content: space-between;
height: calc(100% - 2rem);
}
.title {
color: white;
font-size: 1rem;
font-weight: bold;
margin-bottom: 0.5rem;
margin-top: -0.2rem;
}
#status {
display: flex;
position: fixed;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onscroll = scrollFunction;
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementsByClassName('certificate')[0].classList.add('certificate-folded')
document.getElementById("status").className = 'status-folded'
let i = 0
for (let e of document.getElementsByClassName('progress-group')) {
e.classList.add('progress-group-folded')
e.style.top = "-0.5rem";
e.style.left = i === 0 ? "0" : "53%"
i++
}
for (let e of document.getElementsByClassName('progress')) {
e.classList.add('progress-folded')
}
for (let e of document.getElementsByClassName('progress-label')) {
e.classList.add('progress-label-folded')
}
for (let e of document.getElementsByClassName('progress-count')) {
e.classList.add('progress-count-folded')
}
} else {
document.getElementsByClassName('certificate')[0].classList.remove('certificate-folded')
document.getElementById("status").className = ''
let i = 0;
for (let e of document.getElementsByClassName('progress-group')) {
e.classList.remove('progress-group-folded')
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run