-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (192 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Khaled Al-Nabaheen</title>
<link rel="icon" href="img/shortcut.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/all.min.css" />
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<main class="all-page">
<header>
<nav class="navbar">
<img src="img/logo.png" alt="navbar logo" />
<ul>
<li><a href="#home-section" class="active">Home</a></li>
<li><a href="#about-me">About me</a></li>
<li><a href="#program">Program</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#contact-me">Contact me</a></li>
</ul>
</nav>
<section class="home-section" id="home-section">
<div class="overlay">
<div class="home-info">
<h1>welcome to my profile</h1>
<p>My name is <span>Khaled Al-Nabaheen</span></p>
<div class="contact-info">
<a
href="https://www.facebook.com/profile.php?id=100087556942877"
target="_blank"
><div class="contact-info-tool">
<i class="fa-brands fa-facebook-f"></i></div
></a>
<a href="https://wa.me/+972597462802" target="_blank"
><div class="contact-info-tool">
<i class="fa-brands fa-whatsapp"></i></div
></a>
<a href="mailto:khalednabaheen8@gmail.com" target="_blank"
><div class="contact-info-tool">
<i class="fa-regular fa-envelope"></i></div
></a>
</div>
</div>
</div>
</section>
</header>
<section class="about-me" id="about-me">
<img src="img/me.jpg" alt="Khaled Al-Nabaheen" />
<article class="about-me-content">
<p>
I am an ambitious young man, I recently graduated from college, and
I always strive to reach my goals. I am distinguished by my
professionalism in applying the foundations of programming science
in practical application, as I trained and develop many skills and
tools to match the development of the labor market; Among the best
tools the developed are fast typing on the keyboard, graphic design,
and research skills when facing problems at work. I also took a
training course to develop listening and speaking skills in English.
In addition, I have prepared a very good portfolio.
</p>
</article>
</section>
<section class="program" id="program">
<h1>Motives for joining the program</h1>
<img src="img/geeks.png" alt="Gaza sky geeks" />
<article class="program-article">
<p>
I love programming, and specialized in this field, and excelled in
it. The study was limited to limited skills in front-end
development. I want to develop myself in the field, and also be
prepared to complete my journey as a full-stack developer in the
future. I tried to learn and research by myself, but I had
difficulty in learning, so I needed a guide to help me in my
learning journey. I heard about the Code Academy program 6 months
ago, and I was waiting for the opportunity to join the program,
develop my skills, and find a mentor to help me. I worked on
freelancing platforms in the field, and I want to develop myself in
line with the labor market. Also, I knew that one of the conditions
of the program was that the applicant should have excellent English
language skills and a strong knowledge of Javascript, so I developed
myself in the last period to be suitable for the program.
</p>
</article>
</section>
<section class="portfolio" id="portfolio">
<h1>Portfolio</h1>
<div class="portfolio1">
<a
href="https://khaledaref13.github.io/tag-name-generator-khaled-al-nabaheen-js/"
target="_blank"
>
<div class="portfolio-box">
<div class="portfolio-img">
<img
src="img/tag-name-generator.png"
alt="tag-name-generator"
/>
</div>
<p>Tag Name Generator</p>
</div>
</a>
</div>
<div class="portfolio2">
<a href="https://degital-agency-website.netlify.app/" target="_blank">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="img/digital.png" alt="digital-agency" />
</div>
<p>Digital Agency</p>
</div>
</a>
</div>
<div class="portfolio3">
<a href="https://edushare-website.netlify.app/" target="_blank">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="img/edushare.png" alt="edushare-website" />
</div>
<p>Edushare Website</p>
</div>
</a>
</div>
</section>
<section class="links" id="links">
<h1>Links</h1>
<div class="link one">
<a
href="https://github.com/KhaledAref13/portfolio-khaled-al-nabaheen-html-css"
target="_blank"
>
<div class="our-link">
<div class="circle">
<i class="fa-brands fa-github"></i>
</div>
<p>Portfolio Repository</p>
</div>
</a>
</div>
<div class="link two">
<a href="https://www.freecodecamp.org/KhaledAref13" target="_blank">
<div class="our-link">
<div class="circle">
<i class="fa-brands fa-free-code-camp"></i>
</div>
<p>freeCodeCamp</p>
</div>
</a>
</div>
<div class="link three">
<a href="https://www.codewars.com/users/KhaledAref13" target="_blank">
<div class="our-link">
<div class="circle">
<i class="fa-solid fa-code"></i>
</div>
<p>Codewars</p>
</div>
</a>
</div>
</section>
<section class="contact-me" id="contact-me">
<h1>Contact Me</h1>
<form action="#">
<input
type="email"
name="email"
placeholder="Enter Your Email"
required
/>
<textarea
name="message"
placeholder="Enter Your Message"
required
></textarea>
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>Made by ❤ © Khaled Al-Nabaheen 2022-2023</p>
</footer>
</main>
</body>
</html>