forked from GSG-G7/AMAI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (139 loc) · 7.58 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link href="https://fonts.googleapis.com/css?family=Literata|Oswald&display=swap" rel="stylesheet">
<title>AMAI Site</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='./CSS/style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<header>
<nav>
<span class="logo"><a>AMAI</a></span>
<ul class="list-main">
<li><a id="home">Home</a></li>
<li><a id="about">About</a></li>
<li><a id="team">Team</a></li>
<li><a id="contact-us">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="home">
<div class="home__title">
<h1 class="home__title__h1">Welcome to <span>AMAI</span></h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis neque expedita fuga facilis. </p>
</div>
<div class="home__btn">
<button class="home__btn__call">Call Us</button>
</div>
</section>
<section class="about" hidden>
<div class="about__container">
<div class="about__content">
<img src="images/about-img.jpg" alt="team-photo">
<div class="content__info">
<h3>About Amai team</h3>
<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain
was born and I will give you a complete account of the system, and expound the actual teachings
of the great explorer of the truth, the master-builder of human happiness. No one rejects,
dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not
know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in which toil and
pain can procure him some great pleasure. To take a trivial example, which of us ever
undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to
find fault with a man who chooses to enjoy a pleasure that has no annoying consequences,
or one who avoids a pain that produces no resultant pleasure?"</p>
</div>
</div>
</div>
</section>
<section class='team' hidden>
<div class="team__title">
<h2>Our Team</h2>
<p>Know more about our developers!</p>
</div>
<div class="team__members">
<div class="member">
<div class="member__img"><img alt="member-pic" src="images/member1.jpg"></div>
<h3>Alaa Taima</h3>
<h4>Web Developer</h4>
<div class="member__social">
<a href="https://github.com/AlaaTaima"><i class="fab fa-github"></i></a>
<a href="https://www.codewars.com/users/AlaaTaima"><i class="fab fa-free-code-camp"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="member">
<div class="member__img"><img alt="member-pic" src="images/member4.jpg"></div>
<h3>Asem Abu-Msameh</h3>
<h4>Web Developer</h4>
<div class="member__social">
<a href="https://github.com/asem1789"><i class="fab fa-github"></i></a>
<a href="https://www.codewars.com/users/asem1789"><i class="fab fa-free-code-camp"></i></a>
<a href="https://www.codewars.com/users/asem1789"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="member">
<div class="member__img"><img alt="member-pic" src="images/member2.jpg"></div>
<h3>Mohammed Al-Halaq</h3>
<h4>Web Developer</h4>
<div class="member__social">
<a href="https://github.com/MohammadAlhalaq"><i class="fab fa-github"></i></a>
<a href="https://www.codewars.com/users/MohammadAlhalaq"><i
class="fab fa-free-code-camp"></i></a>
<a href="https://www.linkedin.com/in/mohamad-el-hallaq-148368111/"><i
class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="member">
<div class="member__img"><img alt="member-pic" src="images/member3.jpg"></div>
<h3>Imad Shatali</h3>
<h4>Web Developer</h4>
<div class="member__social">
<a href="https://github.com/Amoodaa"><i class="fab fa-github"></i></a>
<a href="https://www.codewars.com/amoodaa"><i class="fab fa-free-code-camp"></i></a>
<a href="https://www.linkedin.com/in/imad-shatali-b69469158/"><i
class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</section>
<section id="Contact-Us" class="contact-us" hidden>
<form action="" method="POST">
<div class="forms-flex">
<input type="text" aria-label="name" name="name" placeholder="name">
</div>
<div class="forms-flex">
<input type="email" aria-label="email" name="email" placeholder="Email">
</div>
<div class="forms-flex">
<input type="text" aria-label="phone" name="phoneNp" placeholder="Phone number">
</div>
<div class="forms-flex">
<select class="contact-us__select">
<option value="" disabled selected>Select the developers</option>
<option value="All">All</option>
<option value="Asem">Asem AbuMsame7</option>
<option value="Alaa">Alaa Taima</option>
<option value="Mohammed">Mohammed Al-hallaq</option>
<option value="Imad">Imad Shatali</option>
</select>
</div>
<div class="forms-flex">
<textarea name="message" id="" cols="30" rows="5" placeholder="Write your message here:"></textarea>
</div>
<div class="forms-flex">
<input class="contact-us--btn" type="submit">
</div>
</form>
</section>
</main>
<script src='./JS/index.js'></script>
</body>
</html>