Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c1ee4c4

Browse files
Update playing with CSS variables and JS project
1 parent 73d319e commit c1ee4c4

File tree

4 files changed

+51
-5
lines changed

4 files changed

+51
-5
lines changed

β€Ž03 - CSS Variables/css/style.css

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
--spacing: 0px;
99
--blur: 0px;
1010
--color: #461301;
11+
--bg-color: #46130181;
12+
--img-bg-color: #4613018c;
13+
--loader-bg-color: #80675b;
14+
--selection-color: #f5f5f5;
15+
--font-family: "Patrick Hand", cursive;
1116
}
1217

1318
html {
@@ -21,9 +26,10 @@ body {
2126
text-align: center;
2227
align-items: center;
2328
justify-content: center;
24-
font: 600 3rem "Patrick Hand", cursive;
25-
background: url(../img/nature.jpeg) right top/cover no-repeat #46130181;
29+
font: 600 3rem var(--font-family);
30+
background: url(../img/nature.jpeg) right top/cover no-repeat var(--bg-color);
2631
background-blend-mode: darken;
32+
-webkit-tap-highlight-color: transparent;
2733
}
2834

2935
.container {
@@ -37,7 +43,7 @@ img {
3743
object-fit: cover;
3844
user-select: none;
3945
padding: var(--spacing);
40-
background-color: #4613018c;
46+
background-color: var(--img-bg-color);
4147
border: 1.8rem solid var(--color);
4248
filter: blur(var(--blur)) contrast(110%);
4349
}
@@ -52,10 +58,29 @@ input[type="range"] {
5258
}
5359

5460
::selection {
55-
color: #f5f5f5;
61+
color: var(--selection-color);
5662
background-color: var(--color);
5763
}
5864

65+
/* loader start */
66+
#loadingDiv {
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
z-index: 100;
71+
width: 100vw;
72+
height: 100vh;
73+
position: absolute;
74+
background-color: var(--loader-bg-color);
75+
}
76+
77+
.loader {
78+
width: 6.5rem;
79+
height: 6.5rem;
80+
background: center / contain no-repeat url(../img/loader.gif);
81+
}
82+
/* loader end */
83+
5984
@media screen and (max-width: 900px) {
6085
html {
6186
font-size: 8px;

β€Ž03 - CSS Variables/img/loader.gif

25.5 KB

β€Ž03 - CSS Variables/index.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@
2323
<link rel="stylesheet" href="css/style.css" />
2424
</head>
2525
<body>
26+
<!-- loader start -->
27+
<div id="loadingDiv">
28+
<div class="loader"></div>
29+
</div>
30+
<!-- loader end -->
31+
2632
<div class="container">
2733
<label for="spacing">Spacing:</label>
2834
<input
@@ -50,7 +56,10 @@
5056
<img src="img/nature.jpeg" alt="nature photo" />
5157
</div>
5258

53-
<!-- javascript -->
59+
<!-- jquery -->
60+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
61+
62+
<!-- script js -->
5463
<script src="js/app.js"></script>
5564
</body>
5665
</html>

β€Ž03 - CSS Variables/js/app.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,15 @@ function changeValue() {
1212

1313
inputs.forEach((input) => input.addEventListener("change", changeValue));
1414
inputs.forEach((input) => input.addEventListener("mouseover", changeValue));
15+
16+
// loader start
17+
$(window).on("load", () => {
18+
setTimeout(removeLoader, 2000);
19+
});
20+
21+
function removeLoader() {
22+
$("#loadingDiv").fadeOut(500, () => {
23+
$("#loadingDiv").remove();
24+
});
25+
}
26+
// loader end

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /