Skip to content

Commit de34f81

Browse files
bemnet16bemnet16
committed
html/css/js projects for beginners
40 html/css/js projects for beginners
1 parent 8b22eb7 commit de34f81

File tree

140 files changed

+5523
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

140 files changed

+5523
-0
lines changed

‎3D background box/deset.jpg

50.5 KB
Loading

‎3D background box/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>3D Background Box</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<button>Magic</button>
11+
<div class="boxes right">
12+
<div class="box"></div>
13+
<div class="box"></div>
14+
<div class="box"></div>
15+
<div class="box"></div>
16+
<div class="box"></div>
17+
<div class="box"></div>
18+
<div class="box"></div>
19+
<div class="box"></div>
20+
<div class="box"></div>
21+
<div class="box"></div>
22+
<div class="box"></div>
23+
<div class="box"></div>
24+
<div class="box"></div>
25+
<div class="box"></div>
26+
<div class="box"></div>
27+
<div class="box"></div>
28+
</div>
29+
<script src="script.js"></script>
30+
</body>
31+
</html>

‎3D background box/script.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const boxes = document.querySelectorAll(".box");
2+
const btn = document.querySelector("button");
3+
const boxcon = document.querySelector(".boxes");
4+
5+
boxes.forEach((box, idx) => {
6+
box.style.backgroundPosition = `${-(idx % 4) * 100}px ${
7+
-getNum(idx) * 100
8+
}px`;
9+
});
10+
11+
function getNum(num) {
12+
if (num >= 0 && num <= 3) {
13+
return 0;
14+
} else if (num >= 4 && num <= 7) {
15+
return 1;
16+
} else if (num >= 8 && num <= 11) {
17+
return 2;
18+
} else if (num >= 12 && num <= 15) {
19+
return 3;
20+
}
21+
}
22+
23+
btn.addEventListener("click", () => {
24+
boxcon.classList.toggle("right");
25+
boxcon.classList.toggle("left");
26+
});

‎3D background box/style.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: #f3f3f3;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
overflow: hidden;
12+
position: relative;
13+
}
14+
15+
button {
16+
position: absolute;
17+
top: 50px;
18+
min-width: 100px;
19+
border: none;
20+
border-radius: 8px;
21+
color: #fff;
22+
background-color: purple;
23+
padding: 8px 13px;
24+
cursor: pointer;
25+
}
26+
27+
button:active {
28+
transform: translateY(-2px);
29+
background-color: rgb(176, 78, 176);
30+
}
31+
32+
.boxes {
33+
position: absolute;
34+
width: 520px;
35+
height: 520px;
36+
display: flex;
37+
flex-wrap: wrap;
38+
transition: 0.5s ease;
39+
}
40+
41+
.box {
42+
width: 100px;
43+
height: 100px;
44+
margin: 10px;
45+
background-image: url("deset.jpg");
46+
box-shadow: 2px 2px orange, 4px 4px orange, 6px 6px orange, 8px 8px orange,
47+
10px 10px orange;
48+
transition: 0.5s ease;
49+
}
50+
51+
.boxes.right {
52+
width: 400px;
53+
height: 400px;
54+
box-shadow: 2px 2px orange, 4px 4px orange, 6px 6px orange, 8px 8px orange,
55+
10px 10px orange;
56+
}
57+
58+
.boxes.right > * {
59+
transform: rotate(360deg);
60+
margin: 0;
61+
box-shadow: none;
62+
}
63+
64+
.boxes.left > * {
65+
transform: rotate(-360deg);
66+
}

‎FAQ collapse/index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>FAQ collapse</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Frequently Asked Questions</h1>
12+
<div class="faq">
13+
<div class="back">Q @</div>
14+
<p class="quest">
15+
<span>// questions goes here</span> <button>L</button>
16+
</p>
17+
<p class="ans">// the answers for the questions goes here!!</p>
18+
</div>
19+
<div class="faq">
20+
<div class="back">Q @</div>
21+
<p class="quest">
22+
<span>// questions goes here</span> <button>L</button>
23+
</p>
24+
<p class="ans">// the answers for the questions goes here!!</p>
25+
</div>
26+
<div class="faq">
27+
<div class="back">Q @</div>
28+
<p class="quest">
29+
<span>// questions goes here</span> <button>L</button>
30+
</p>
31+
<p class="ans">// the answers for the questions goes here!!</p>
32+
</div>
33+
<div class="faq">
34+
<div class="back">Q @</div>
35+
<p class="quest">
36+
<span>// questions goes here</span> <button>L</button>
37+
</p>
38+
<p class="ans">// the answers for the questions goes here!!</p>
39+
</div>
40+
<div class="faq">
41+
<div class="back">Q @</div>
42+
<p class="quest">
43+
<span>// questions goes here</span> <button>L</button>
44+
</p>
45+
<p class="ans">// the answers for the questions goes here!!</p>
46+
</div>
47+
<div class="faq">
48+
<div class="back">Q @</div>
49+
<p class="quest">
50+
<span>// questions goes here</span> <button>L</button>
51+
</p>
52+
<p class="ans">// the answers for the questions goes here!!</p>
53+
</div>
54+
</div>
55+
<script src="script.js"></script>
56+
</body>
57+
</html>

‎FAQ collapse/script.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const faqs = document.querySelectorAll(".faq");
2+
const ans = document.querySelectorAll(".ans");
3+
const btns = document.querySelectorAll("button");
4+
const backs = document.querySelectorAll(".back");
5+
6+
btns.forEach((btn, idx) => {
7+
btn.addEventListener("click", () => {
8+
btn.innerText = btn.innerText == "L" ? "X" : "L";
9+
faqs[idx].classList.toggle("show");
10+
ans[idx].classList.toggle("show");
11+
backs[idx].classList.toggle("show");
12+
closeOthers(idx);
13+
});
14+
});
15+
16+
closeOthers = (idx) => {
17+
btns.forEach((bt, id) => {
18+
if (id !== idx) {
19+
bt.innerText = "L";
20+
faqs[id].classList.remove("show");
21+
ans[id].classList.remove("show");
22+
backs[id].classList.remove("show");
23+
}
24+
});
25+
};

‎FAQ collapse/style.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
body {
5+
display: flex;
6+
justify-content: center;
7+
height: 100vh;
8+
background-color: #eee;
9+
}
10+
11+
.container {
12+
width: 40%;
13+
text-align: center;
14+
}
15+
.container h1 {
16+
color: rgb(31, 121, 121);
17+
}
18+
.faq {
19+
width: 100%;
20+
padding: 0 20px;
21+
border: 2px solid gray;
22+
border-radius: 20px;
23+
margin: 12px 0;
24+
z-index: 2;
25+
position: relative;
26+
}
27+
28+
.back {
29+
color: rgba(34, 234, 23, 0.35);
30+
font-weight: bolder;
31+
font-size: 40px;
32+
position: absolute;
33+
top: -10px;
34+
left: 0px;
35+
z-index: -1;
36+
display: none;
37+
}
38+
.back.show {
39+
display: flex;
40+
}
41+
.faq.show {
42+
background-color: white;
43+
}
44+
45+
.faq p {
46+
display: flex;
47+
justify-content: space-between;
48+
}
49+
50+
.faq p button {
51+
border: none;
52+
background-color: transparent;
53+
font-size: 20px;
54+
height: 15px;
55+
rotate: -45deg;
56+
cursor: pointer;
57+
}
58+
.faq p button:hover {
59+
color: orangered;
60+
}
61+
62+
.faq .ans {
63+
display: none;
64+
}
65+
.faq .ans.show {
66+
display: flex;
67+
}

‎animated countdown/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="con">
11+
<span class="">3</span>
12+
<span class="">2</span>
13+
<span class="">1</span>
14+
<span class="">0</span>
15+
<div class="ready">Get Ready</div>
16+
</div>
17+
<div class="go active">
18+
<h3>Go</h3>
19+
<button>replay</button>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎animated countdown/script.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const spans = document.querySelectorAll("span");
2+
const con = document.querySelector(".con");
3+
const go = document.querySelector(".go");
4+
const replay = document.querySelector("button");
5+
let idx = 0;
6+
7+
replay.addEventListener("click", () => {
8+
con.classList.toggle("active");
9+
go.classList.toggle("active");
10+
animate();
11+
});
12+
13+
function animate() {
14+
let inter = setInterval(() => {
15+
if (spans[idx - 1]) {
16+
spans[idx - 1].classList.remove("active");
17+
}
18+
if (spans[idx]) {
19+
spans[idx++].classList.add("active");
20+
}
21+
}, 800);
22+
23+
setTimeout(() => {
24+
clearInterval(inter);
25+
idx = 0;
26+
con.classList.toggle("active");
27+
go.classList.toggle("active");
28+
}, 4100);
29+
}

0 commit comments

Comments
 (0)