-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro.html
132 lines (104 loc) · 4.99 KB
/
intro.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="animate/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
<link rel="stylesheet" href="css/share.css">
<link rel="stylesheet" href="css/intro.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<title>intro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">
<img src="assets/img/black-logo.svg" alt="..." class="hide-black" />
<img src="assets/img/white-logo.svg" alt="..." class="hide-white" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#services">الرئيسية</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">التوظيف</a></li>
<li class="nav-item"><a class="nav-link" href="#about">اتصل بنا</a></li>
<li class="nav-item"><a class="nav-link en" href="#team">EN</a></li>
<div class="lineEn"></div>
<li class="nav-item"><a class="nav-link ar" href="#team">عربي</a></li>
<!--<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>-->
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header>
<video src="video/homepage.mp4" class="vdback" autoplay loop muted></video>
<div class="audio-control">
<img src="assets/img/black-mute.svg" alt="">
</div>
<div class="container text-header">
<div class="header-btn d-flex justify-content-center">
<div class="header-btn-img">
<div class="btn-back-up d-flex justify-content-center">
<p>جرب شفرة مورس</p>
<img src="assets/img/up-arrow.svg" alt="">
</div>
</div>
</div>
<div class="slide animated ">
<div class="btn-back-down text-center justify-content-center">
<img src="assets/img/down-arrow.svg" alt="">
</div>
<div class="slide-body">
<form>
<div class="row">
<div class="morse-text col-lg-6">
<div class="d-flex center-controls">
<label>نص...</label>
<div class="control">
<img src="assets/img/play.svg" alt="">
<img src="assets/img/zoom.svg" alt="">
</div>
</div>
<textarea name="text" id="" rows="6"></textarea>
</div>
<div class="morse-code col-lg-6">
<div class="d-flex center-controls">
<label>شفرة مورس</label>
<div class="control">
<img src="assets/img/play.svg" alt="">
<img src="assets/img/zoom.svg" alt="">
</div>
</div>
<textarea name="code" id="" rows="6" disabled></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</header>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(".btn-back-up").click(function(){
$(".slide").removeClass("fadeOutDown");
$(".slide").addClass("fadeInUp");
$(".slide").css({"display": "block"});
});
$(".btn-back-down img").click(function(){
$(".slide").removeClass("fadeInUp");
$(".slide").addClass("fadeOutDown");
});
</script>
</body>
</html>