-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (107 loc) · 7.12 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abumalik</title>
<link rel="stylesheet" href="style.css">
<script src="./app.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="header">
<h1 class="abumalik" data-value="THE HUB" data-value2="المركز">THE HUB</h1>
</div>
<div class="carousel">
<div class="carousel__nav">
<button class="carousel__indicator glow-effect" >
<span class="content">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z" />
</svg>
<span class="button_text">نبذة عني</span>
</span>
<svg class="glow-container">
<rect pathLength="100" stroke-linecap="round" class="glow-blur"></rect>
<rect pathLength="100" stroke-linecap="round" class="glow-line"></rect>
</svg>
</button>
<button class="carousel__indicator glow-effect" >
<span class="content">
<svg class="icon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M168 80c-13.3 0-24 10.7-24 24V408c0 8.4-1.4 16.5-4.1 24H440c13.3 0 24-10.7 24-24V104c0-13.3-10.7-24-24-24H168zM72 480c-39.8 0-72-32.2-72-72V112C0 98.7 10.7 88 24 88s24 10.7 24 24V408c0 13.3 10.7 24 24 24s24-10.7 24-24V104c0-39.8 32.2-72 72-72H440c39.8 0 72 32.2 72 72V408c0 39.8-32.2 72-72 72H72zM176 136c0-13.3 10.7-24 24-24h96c13.3 0 24 10.7 24 24v80c0 13.3-10.7 24-24 24H200c-13.3 0-24-10.7-24-24V136zm200-24h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H376c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H376c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272H408c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80H408c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24z" />
</svg>
<span class="button_text">كتابات</span>
</span>
<svg class="glow-container">
<rect pathLength="100" stroke-linecap="round" class="glow-blur"></rect>
<rect pathLength="100" stroke-linecap="round" class="glow-line"></rect>
</svg>
</button>
<button class="carousel__indicator glow-effect" >
<span class="content">
<svg class="icon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16V118.6c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
</svg>
<span class="button_text">مشاريع</span>
</span>
<svg class="glow-container">
<rect pathLength="100" stroke-linecap="round" class="glow-blur"></rect>
<rect pathLength="100" stroke-linecap="round" class="glow-line"></rect>
</svg>
</button>
<button class="carousel__indicator glow-effect" >
<span class="content">
<svg class="icon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z" />
</svg>
<span class="button_text">فيديوهات</span>
</span>
<svg class="glow-container">
<rect pathLength="100" stroke-linecap="round" class="glow-blur"></rect>
<rect pathLength="100" stroke-linecap="round" class="glow-line"></rect>
</svg>
</button>
</div>
<div class="background__effect"></div>
<div class="background-image"></div>
<div class="carousel__track-container">
<div class="content-border-effect"></div>
<div class="content-border">
<ul class="carousel__track">
<li class="carousel__slide">
<p>About section_header, here I need to put as much usefull information about me as possible</p>
</li>
<li class="carousel__slide">
<a href="https://www.youtube.com">anchor tag</a>
</li>
<li class="carousel__slide">
<p>I honestly don't know what should I put here</p>
</li>
<li class="carousel__slide">
<h1 class="section_header">لايوجد فيديوهات في الوقت الحالي</h1>
</li>
</ul>
</div>
</div>
</div>
<div class="loading-page">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M27.5 162.2L9 187.1h90.5l6.9-130.7-78.9 105.8zM396.3 45.7L267.7 32l135.7 147.2-7.1-133.5zM112.2 218.3l-11.2-22H9.9L234.8 458zm2-31.2h284l-81.5-88.5L256.3 33zm297.3 9.1L277.6 458l224.8-261.7h-90.9zM415.4 69L406 56.4l.9 17.3 6.1 113.4h90.3zM113.5 93.5l-4.6 85.6L244.7 32 116.1 45.7zm287.7 102.7h-290l42.4 82.9L256.3 480l144.9-283.8z" />
</svg>
<div class="name-container">
<div class="logo-name">Abumalik</div>
</div>
</div>
</body>
</html>