Skip to content

Commit 21746f6

Browse files
ArashZrgArashZrg
committed
github profile done
1 parent 60e4dc7 commit 21746f6

File tree

14 files changed

+350
-61
lines changed

14 files changed

+350
-61
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎000-boilerplate/index.html‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,52 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<!-- <link
7-
rel="stylesheet"
8-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9-
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10-
crossorigin="anonymous"
11-
/> -->
126
<link rel="stylesheet" href="style.css" />
137
<title>My Project</title>
148
</head>
159
<body>
16-
<h1>My Project</h1>
10+
<div class="container">
11+
<div
12+
class="panel active"
13+
style="
14+
background-image: url('https://images.unsplash.com/photo-1610212570473-6015f631ae96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
15+
"
16+
>
17+
<h3>Be the Best</h3>
18+
</div>
19+
<div
20+
class="panel"
21+
style="
22+
background-image: url('https://images.unsplash.com/photo-1606838830438-5f380a664a4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
23+
"
24+
>
25+
<h3>Be the Best</h3>
26+
</div>
27+
<div
28+
class="panel"
29+
style="
30+
background-image: url('https://images.unsplash.com/photo-1606059100151-b09b22709477?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80');
31+
"
32+
>
33+
<h3>Be the Best</h3>
34+
</div>
35+
<div
36+
class="panel"
37+
style="
38+
background-image: url('https://images.unsplash.com/photo-1603048675767-6e79ff5b8fc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
39+
"
40+
>
41+
<h3>Be the Best</h3>
42+
</div>
43+
<div
44+
class="panel"
45+
style="
46+
background-image: url('https://images.unsplash.com/photo-1595433502559-d8f05e6a1041?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
47+
"
48+
>
49+
<h3>Be the Best</h3>
50+
</div>
51+
</div>
1752
<script src="script.js"></script>
1853
</body>
1954
</html>

‎000-boilerplate/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const panels = document.querySelectorAll(".panel");
2+
3+
panels.forEach((panel) => {
4+
panel.addEventListener("click", () => {
5+
removeActiveClasses();
6+
panel.classList.add("active");
7+
});
8+
});
9+
10+
const removeActiveClasses = () => {
11+
panels.forEach((panel) => {
12+
panel.classList.remove("active");
13+
});
14+
};

‎000-boilerplate/style.css‎

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,75 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
22

33
* {
44
box-sizing: border-box;
55
}
66

77
body {
8-
font-family: "Roboto", sans-serif;
8+
font-family: "Muli", sans-serif;
99
display: flex;
10-
flex-direction: column;
1110
align-items: center;
1211
justify-content: center;
1312
height: 100vh;
1413
overflow: hidden;
1514
margin: 0;
1615
}
16+
17+
.container {
18+
display: flex;
19+
width: 90vw;
20+
}
21+
22+
@keyframes expand {
23+
from {
24+
flex: 0.5;
25+
}
26+
27+
to {
28+
flex: 5;
29+
}
30+
}
31+
32+
@keyframes shrink {
33+
from {
34+
flex: 5;
35+
}
36+
37+
to {
38+
flex: 0.5;
39+
}
40+
}
41+
42+
.panel {
43+
background-size: auto 100%;
44+
background-position: center;
45+
background-repeat: no-repeat;
46+
height: 80vh;
47+
border-radius: 50px;
48+
color: #fff;
49+
cursor: pointer;
50+
flex: 0.5;
51+
margin: 10px;
52+
position: relative;
53+
}
54+
55+
.panel h3 {
56+
font-size: 24px;
57+
position: absolute;
58+
bottom: 20px;
59+
left: 20px;
60+
margin: 0;
61+
opacity: 0;
62+
transition: opacity 0.3s ease-in 0.4s;
63+
}
64+
65+
.panel.active {
66+
animation: expand 0.7s ease-in forwards;
67+
}
68+
69+
.panel:not(.active) {
70+
animation: shrink 0.7s ease-in forwards;
71+
}
72+
73+
.panel.active h3 {
74+
opacity: 1;
75+
}

‎002-progress steps/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="style.css" />
6+
<link rel="stylesheet" href="./khar/style.css" />
77
<title>Progress Steps</title>
8+
<script defer src="script.js"></script>
89
</head>
910
<body>
1011
<div class="container">
@@ -22,6 +23,5 @@
2223
<button class="next btn active-btn">Next</button>
2324
</div>
2425
</div>
25-
<script src="script.js"></script>
2626
</body>
2727
</html>

‎002-progress steps/style.css‎ renamed to ‎002-progress steps/khar/style.css‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ body {
2323
justify-content: space-evenly;
2424
align-items: center;
2525
gap: 1.4rem;
26-
2726
}
2827

2928

@@ -44,6 +43,20 @@ body {
4443
border-color: blue;
4544
}
4645

46+
.active-line-animation {
47+
animation: line-animation linear alternate forwards 1s;
48+
}
49+
50+
@keyframes line-animation {
51+
0% {
52+
background-color: white;
53+
}
54+
55+
100% {
56+
background-color: blue;
57+
}
58+
}
59+
4760
.circle {
4861
padding-top: 0.4rem;
4962
text-align: center;
@@ -58,6 +71,21 @@ body {
5871
background-color: blue;
5972
}
6073

74+
.active-circle-animation {
75+
animation: circle-animation alternate forwards 0.5s linear;
76+
}
77+
78+
@keyframes circle-animation {
79+
0% {
80+
background-color: white;
81+
}
82+
83+
100% {
84+
background-color: blue;
85+
}
86+
}
87+
88+
6189

6290
/* Button styles */
6391
#button-container {

‎002-progress steps/script.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const circles = document.querySelectorAll(".circle");
55
const lines = document.querySelectorAll(".line");
66
const prevBtn = document.querySelector(".prev");
77
const nextBtn = document.querySelector(".next");
8-
98
let whichNumber = 0;
109

1110
// Next Event
@@ -14,11 +13,12 @@ nextBtn.addEventListener("click", (e) => {
1413
whichNumber++;
1514
prevBtn.classList.add("active-btn");
1615
circles[whichNumber].classList.add("active-circle");
16+
circles[whichNumber].classList.add("active-circle-animation");
1717
lines[whichNumber - 1].classList.add("active-line");
18+
lines[whichNumber - 1].classList.add("active-line-animation");
1819
}
1920
if (whichNumber == 3) {
2021
nextBtn.classList.remove("active-btn");
21-
return;
2222
}
2323
});
2424

@@ -27,7 +27,9 @@ prevBtn.addEventListener("click", (e) => {
2727
if (whichNumber > 0) {
2828
nextBtn.classList.add("active-btn");
2929
circles[whichNumber].classList.remove("active-circle");
30+
circles[whichNumber].classList.remove("active-circle-animation");
3031
lines[whichNumber - 1].classList.remove("active-line");
32+
lines[whichNumber - 1].classList.remove("active-line-animation");
3133
whichNumber--;
3234
}
3335
if (whichNumber == 0) {

‎004-hidden search widget/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎004-hidden search widget/index.html‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,24 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link
7-
rel="stylesheet"
8-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9-
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10-
crossorigin="anonymous"
11-
/>
6+
<title>magnifier</title>
127
<link rel="stylesheet" href="style.css" />
8+
<script async src="script.js"></script>
139
</head>
1410
<body>
15-
<div class="search">
16-
<input type="text" class="input" placeholder="Search..." />
17-
<button class="btn"><i class="fas fa-search"></i></button>
11+
<div id="container">
12+
<input type="text" placeholder="Search..." class="input" />
13+
<img src="loupe.png" class="image" />
1814
</div>
19-
<script src="script.js"></script>
2015
</body>
2116
</html>
17+
18+
<!--
19+
<div id="search-box">
20+
<div id="input-div">
21+
<input type="text" class="inp" />
22+
</div>
23+
<div id="magnifire-div">
24+
<img class="icon" src="loupe.png" alt="" />
25+
</div>
26+
</div> -->

‎004-hidden search widget/loupe.png‎

475 Bytes
Loading

0 commit comments

Comments
 (0)