Skip to content

Commit 6371bc3

Browse files
parsfrontparsfront
committed
End Project
1 parent 9feae61 commit 6371bc3

19 files changed

+215
-0
lines changed

‎fonts/isans.eot

99.5 KB
Binary file not shown.

‎fonts/isans.ttf

58.6 KB
Binary file not shown.

‎fonts/isans.woff

68.6 KB
Binary file not shown.

‎fonts/isans.woff2

46.5 KB
Binary file not shown.

‎fonts/vazir-Black.eot

89.4 KB
Binary file not shown.

‎fonts/vazir-Black.ttf

89.2 KB
Binary file not shown.

‎fonts/vazir-Black.woff

51.5 KB
Binary file not shown.

‎fonts/vazir-Black.woff2

40.5 KB
Binary file not shown.

‎fonts/vazir.eot

83 KB
Binary file not shown.

‎fonts/vazir.ttf

82.9 KB
Binary file not shown.

‎fonts/vazir.woff

46.7 KB
Binary file not shown.

‎fonts/vazir.woff2

36.9 KB
Binary file not shown.

‎img/1.jpg

125 KB
Loading

‎img/2.jpg

188 KB
Loading

‎img/3.jpg

250 KB
Loading

‎index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="fa" dir="rtl">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="./styles/style.css">
8+
<title>Js Project</title>
9+
</head>
10+
11+
<body>
12+
13+
14+
<section>
15+
<div class="container">
16+
<div class="bg">
17+
<img src="./img/1.jpg" class="id-1" alt="">
18+
<img src="./img/2.jpg" class="id-2" alt="">
19+
<img src="./img/3.jpg" class="id-3" alt="">
20+
</div>
21+
<a href="#" class="text">
22+
<h1>
23+
<span data-id="1">وب سایت</span>
24+
<span data-id="2">اپلیکیشن</span>
25+
<span data-id="3">UI/UX</span>
26+
<span id="line"></span>
27+
</h1>
28+
</a>
29+
<h1 class="mobile-text">وب سایت / اپلیکیشن / UI-UX</h1>
30+
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
31+
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
32+
<button>کلیک کنید</button>
33+
</div>
34+
</section>
35+
36+
37+
<script src="./js/all.min.js"></script>
38+
<script src="./js/script.js"></script>
39+
</body>
40+
41+
</html>

‎js/all.min.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/script.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const bg = document.querySelector(".bg");
2+
const span = document.querySelectorAll(".text span");
3+
const text = document.querySelector(".text");
4+
const line = document.querySelector("#line");
5+
6+
span.forEach((item) => {
7+
item.addEventListener("mouseover", (e) => {
8+
const id = item.getAttribute("data-id");
9+
const bgEl = bg.querySelector(`.id-${id}`);
10+
11+
bg.querySelectorAll("img").forEach((img) => {
12+
img.style.display = "none";
13+
});
14+
bgEl.style.display = "block";
15+
bgEl.style.animation = "animate 1s ease forwards";
16+
17+
const card = item.getBoundingClientRect();
18+
const cardText = text.getBoundingClientRect();
19+
20+
line.style.width = card.width + "px";
21+
line.style.left = card.left - cardText.left + "px";
22+
});
23+
});

‎styles/style.css

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
@font-face {
2+
font-family: "vazir";
3+
src: url("../fonts/vazir.eot") format("eot"), url("../fonts/vazir.ttf") format("truetype"), url("../fonts/vazir.woff") format("woff"), url("../fonts/vazir.woff2") format("woff2");
4+
}
5+
6+
* {
7+
padding: 0;
8+
margin: 0;
9+
}
10+
11+
body {
12+
font-family: "vazir";
13+
overflow-x: hidden;
14+
height: 100vh;
15+
}
16+
17+
.mobile-text {
18+
display: none;
19+
}
20+
21+
section {
22+
width: 100%;
23+
height: 100vh;
24+
display: flex;
25+
align-items: center;
26+
justify-self: flex-start;
27+
}
28+
29+
.container {
30+
width: 90%;
31+
max-width: 1200px;
32+
display: flex;
33+
align-items: flex-start;
34+
justify-content: center;
35+
height: 100%;
36+
flex-direction: column;
37+
margin: 0 auto;
38+
}
39+
40+
.bg {
41+
position: absolute;
42+
top: 0;
43+
right: 0;
44+
width: 100%;
45+
height: 100%;
46+
overflow: hidden;
47+
z-index: -1;
48+
background-color: black;
49+
}
50+
51+
.bg::after {
52+
content: "";
53+
position: absolute;
54+
top: 0;
55+
right: 0;
56+
width: 100%;
57+
height: 100%;
58+
background: rgba(0, 0, 0, 0.5);
59+
}
60+
61+
.bg img {
62+
width: 100%;
63+
height: 100%;
64+
object-fit: cover;
65+
background-position: center;
66+
background-size: cover;
67+
}
68+
69+
a {
70+
text-decoration: none;
71+
color: whitesmoke;
72+
}
73+
74+
h1 {
75+
font-size: 40px;
76+
display: flex;
77+
align-items: flex-start;
78+
color: whitesmoke;
79+
position: relative;
80+
}
81+
82+
.container h1 span {
83+
margin-right: 50px;
84+
}
85+
86+
#line {
87+
position: absolute;
88+
left: 0;
89+
bottom: -15px;
90+
height: 10px;
91+
width: 150px;
92+
border: 5px solid rgb(0, 102, 255);
93+
pointer-events: none;
94+
z-index: -1;
95+
transition: all 0.5s ease;
96+
-webkit-transition: all 0.5s ease;
97+
-moz-transition: all 0.5s ease;
98+
-ms-transition: all 0.5s ease;
99+
-o-transition: all 0.5s ease;
100+
}
101+
102+
@keyframes animate {
103+
0% {
104+
opacity: 0.5;
105+
transform: scale(1);
106+
-webkit-transform: scale(1);
107+
-moz-transform: scale(1);
108+
-ms-transform: scale(1);
109+
-o-transform: scale(1);
110+
}
111+
112+
100% {
113+
opacity: 1;
114+
transform: scale(1.1);
115+
-webkit-transform: scale(1.1);
116+
-moz-transform: scale(1.1);
117+
-ms-transform: scale(1.1);
118+
-o-transform: scale(1.1);
119+
}
120+
}
121+
122+
.container p {
123+
color: #fff;
124+
font-size: 20px;
125+
margin-top: 40px;
126+
width: 500px;
127+
}
128+
129+
.container button {
130+
font-family: "vazir";
131+
font-size: 22px;
132+
padding: 10px 20px;
133+
margin-top: 20px;
134+
letter-spacing: 4px;
135+
cursor: pointer;
136+
}
137+
138+
@media screen and (max-width: 768px) {
139+
.mobile-text {
140+
display: block;
141+
}
142+
143+
.text {
144+
display: none;
145+
}
146+
}

0 commit comments

Comments
 (0)