-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (246 loc) · 15.6 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Souhail NAJI</title>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<header>
<div class="text-center ">
<h1 class="jolly-lodger-regular title_name">SOUHAIL</h1>
</div>
<nav class="navbar navbar-expand-lg border border-3 border-end-0 border-start-0 border-dark p-0 m-0">
<div class="container-fluid p-4 p-lg-0 m-0 ">
<a class="navbar-brand d-block d-lg-none" href="#"><img class="rounded-circle w_10"
src="./assets/images/bat.gif" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse p-0 m-0 roboto-regular navbar-font" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-4">
<li class="nav-item me-4">
<a href="html/404.html" class="nav-link black-font-color position-relative hover_underline" id="about">About</a>
</li>
<li class="nav-item me-4">
<a href="html/404.html" class="nav-link black-font-color position-relative hover_underline" id="skills">Skills</a>
</li>
<li class="nav-item me-4">
<a href="html/404.html" class="nav-link black-font-color position-relative hover_underline" id="services">Services
</a>
</li>
<li class="nav-item">
<a href="html/404.html" class="nav-link black-font-color position-relative hover_underline" id="projects">Projects
</a>
</li>
</ul>
<div class="d-flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item align-content-center">
<a class="nav-link black-font-color mx-5 position-relative hover_underline" href="#">
Contact</a>
</li>
<li class="nav-item ">
<a
class="nav-link custom-button-1 white-font-color px-5 py-4 border border-2 border-end-0 border-bottom-0 border-top-0 border-dark" href="html/404.html">Shop</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<main>
<div class="hero border border-3 border-end-0 border-start-0 border-top-0 border-dark ">
<div class="row m-0 p-0">
<div class="col-12 col-xl-6 bg-clove container">
<div class="p-5 mx-5 mt-5 mb-2">
<p class="roboto-regular fs-4 lh-base mb-5">
<span class="display-5 roboto-regular">Hello!</span>I’m Souhail, a Full-Stack Developer with
extensive
experience in creating dynamic and efficient web applications.
I have a strong command of technologies like Angular, Java,
Spring Boot, and PHP, enabling me to handle both front-end
and back-end development seamlessly. Let's connect or collaborate
on your next innovative project
</p>
<a href="html/404.html" class="custom-button-2">See more</a>
</div>
</div>
<div
class="col-12 col-xl-6 bg-yallow text-center d-flex justify-content-center align-content-center align-items-center">
<img class="w-50 pt-4" src="./assets/images/design-null.png" alt="">
</div>
</div>
</div>
<section class="border border-3 border-end-0 border-start-0 border-top-0 border-dark">
<div class="container my-5 ">
<h2 class="display-2 text-center roboto-regular" data-aos="fade-up">My skills</h2>
<p data-aos="fade-up" class="roboto-regular fs-4 text-center mx-5">
I am proficient in a wide range of technologies and tools,
including
Angular,
Java, Spring Boot,
PHP, Symfony, Vue.js, and Python. I also excel in UI design using Figma and AdobeXD, Photoshop,
and Blender, and have strong experience in web deployment and version control with Git and Gitlab.
</p>
<div class="row">
<img data-aos="fade-up" src="./assets/images/python.svg" class="py-3 px-4 col-2" alt="python">
<img data-aos="fade-up" src="./assets/images/angular.svg" class="py-4 px-3 col-2" alt="angular">
<img data-aos="fade-up" src="./assets/images/mysql.svg" class="py-3 px-4 col-2" alt="mysql">
<img data-aos="fade-up" src="./assets/images/php.svg" class="py-3 px-4 col-2" alt="php">
<img data-aos="fade-up" src="./assets/images/symfony.svg" class="py-3 px-4 col-2" alt="symfony">
<img data-aos="fade-up" src="./assets/images/springboot.svg" class="py-3 px-4 col-2" alt="springboot">
<img data-aos="fade-up" src="./assets/images/bootstrap.svg" class="py-3 px-4 col-2" alt="">
<img data-aos="fade-up" src="./assets/images/html5.svg" class="py-3 px-4 col-2 " alt="">
<img data-aos="fade-up" src="./assets/images/tailwindcss.svg" class="py-3 px-4 col-2 " alt="">
<img data-aos="fade-up" src="./assets/images/javascript.svg" class="py-3 px-4 col-2 " alt="">
<img data-aos="fade-up" src="./assets/images/jquery.svg" class="py-3 px-4 col-2 " alt="">
<img data-aos="fade-up" src="./assets/images/linux.svg" class="py-3 px-4 col-2 " alt="">
<!-- <img src="./assets/images/gitlab.svg" class="px-3 col-2 " alt="">-->
<!-- <img src="./assets/images/wordpress.svg" class="skills-svg " alt="">-->
<!-- <img src="./assets/images/vuedotjs.svg" class="skills-svg " alt="">-->
</div>
</div>
</section>
<section class="border border-3 border-end-0 border-start-0 border-top-0 border-dark">
<div class="container my-5">
<h2 class="display-2 text-center roboto-regular" data-aos="fade-up">My Services</h2>
<div class="row justify-content-center">
<div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
class="col-xl-5 my-3 px-4 py-3 col bg-yallow border border-2 border-dark rounded-2 mx-3 custom-button-3">
<img class="svg-10 my-2" src="./assets/images/computer.png" alt="computer">
<h3 class="roboto-regular">Web development</h3>
<p class="roboto-regular">As a Full-Stack Developer, I specialize in creating robust and efficient web applications. With expertise in Angular, Java, Spring Boot</p>
</div>
<div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
class="col-xl-5 my-3 px-4 py-3 col bg-blue border border-2 border-dark rounded-2 mx-3 custom-button-3">
<img class="svg-10 my-2" src="./assets/images/brush.png" alt="brush">
<h3 class="roboto-regular">Web design</h3>
<p class="roboto-regular">
I offer professional web design services that combine aesthetic appeal with user-friendly interfaces. Utilizing tools like Photoshop, Figma, and Blender
</p>
</div>
<div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
class="col-xl-5 my-3 px-4 py-3 col bg-blue-light border border-2 border-dark rounded-2 mx-3 custom-button-3">
<img class="svg-10 my-2" src="./assets/images/diamond.png" alt="diamond">
<h3 class="roboto-regular">T-shirt Design</h3>
<p class="roboto-regular">
Bring your ideas to life with my creative t-shirt design services.
</p>
</div>
</div>
</div>
</section>
<section class="border border-3 border-end-0 border-start-0 border-top-0 border-dark">
<div class="container my-5">
<h2 class="display-2 text-center roboto-regular" data-aos="fade-up">My Projects</h2>
<div class="row p-0 m-0 justify-content-center">
<div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
class="col-xl-5 my-3 px-4 py-3 col bg-yallow border border-2 border-dark rounded-2 mx-3 custom-button-3">
<img class="svg-10 my-2" src="./assets/images/symfony.svg" alt="symfony">
<h3 class="roboto-regular">Blogger with symfony</h3>
<p class="roboto-regular">Lorem ipsum dolor sit amet. Et incidunt voluptatem ex tempore repellendus qui dicta nemo sit deleniti minima.</p>
<a href="html/404.html" class="text-white roboto-regular fs-5 link-underline-light" href="#">View project</a>
</div>
<div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
class="col-xl-5 my-3 px-4 py-3 col bg-clove border border-2 border-dark rounded-2 mx-3 custom-button-3">
<img class="svg-10 my-2" src="./assets/images/python.svg" alt="symfony">
<h3 class="roboto-regular">Blogger with python</h3>
<p class="roboto-regular">Lorem ipsum dolor sit amet. Et incidunt voluptatem ex tempore repellendus qui dicta nemo sit deleniti minima.</p>
<a href="html/404.html" class="text-white roboto-regular fs-5 link-underline-light" href="#">View project</a>
</div>
<div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
class="col-xl-5 my-3 px-4 py-3 col bg-blue-light border border-2 border-dark rounded-2 mx-3 custom-button-3">
<img class="svg-10 my-2" src="./assets/images/springboot.svg" alt="symfony">
<h3 class="roboto-regular">Blogger with springboot</h3>
<p class="roboto-regular">Lorem ipsum dolor sit amet. Et incidunt voluptatem ex tempore repellendus qui dicta nemo sit deleniti minima.</p>
<a href="html/404.html" class="text-white roboto-regular fs-5 link-underline-light" href="#">View project</a>
</div>
<div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
class="col-xl-5 my-3 px-4 py-3 col bg-blue border border-2 border-dark rounded-2 mx-3 custom-button-3">
<img class="svg-10 my-2" src="./assets/images/php.svg" alt="symfony">
<h3 class="roboto-regular">Blogger with php</h3>
<p class="roboto-regular">Lorem ipsum dolor sit amet. Et incidunt voluptatem ex tempore repellendus qui dicta nemo sit deleniti minima.</p>
<a href="html/404.html" class="text-white roboto-regular fs-5 link-underline-light" href="#">View project</a>
</div>
</div>
</div>
</section>
<section class="border border-3 border-end-0 border-start-0 border-top-0 border-dark bg-clove">
<div class="py-5 d-flex justify-content-center align-items-center flex-column ">
<h2 data-aos="fade-up" class="roboto-bold display-2 text-center pt-5">Feel free to contact me,</br>
Or let’s collaborate
</h2>
<div class="box my-4">
<div class="circle"></div>
</div>
</div>
</section>
<section class="border border-3 border-end-0 border-start-0 border-top-0 border-dark bg-blue-light">
<div class="py-5 d-flex justify-content-center align-items-center flex-column px-5">
<h2 class="roboto-regular display-2 text-center pt-5" data-aos="fade-up">Contact</h2>
<form action="">
<h2 class="text-center roboto-regular display-4 py-4" data-aos="fade-up">Interested in working together? Let's talk</h2>
<div class="row">
<div data-aos="fade-up" class="mb-4 col">
<input type="text"
class="form-control border border-2 border-dark rounded-0 shadow-none py-3 roboto-regular fs-5"
placeholder="Your full name">
</div>
<div data-aos="fade-up" class="mb-4 col">
<input type="email"
class="form-control border border-2 border-dark rounded-0 shadow-none py-3 roboto-regular fs-5"
placeholder="Your email">
</div>
</div>
<div data-aos="fade-up" class="mb-4">
<input type="text"
class="form-control border border-2 border-dark shadow-none rounded-0 py-3 roboto-regular fs-5"
placeholder="Subject">
</div>
<div data-aos="fade-up" class="mb-4">
<textarea
class="form-control border border-2 border-dark rounded-0 shadow-none py-3 roboto-regular fs-5"
placeholder="Your message"></textarea>
</div>
<button data-aos="fade-up" type="submit" class="custom-button-3 w-100 roboto-regular fs-5">Send</button>
</form>
</div>
</section>
<section class="bg-dark-cos">
<div class="container d-flex justify-content-between py-5">
<ul class="roboto-regular p-0 m-0 d-flex">
<li><a href="html/404.html" class="text-white me-5 fs-5" href="">About</a></li>
<li><a href="html/404.html" class="text-white me-5 fs-5" href="">Skills</a></li>
<li><a href="html/404.html" class="text-white me-5 fs-5" href="">Services</a></li>
<li><a href="html/404.html" class="text-white me-5 fs-5" href="">Projects</a></li>
</ul>
<span class="text-white roboto-regular fs-5">All right reserved ®</span>
</div>
</section>
<footer class="bg-clove">
<div class="container text-center py-5 roboto-regular">
<h3 class="text-white">Designed by <a class="text-white" href="https://github.com/doc-souhail">Souhail
</a> ®</h3>
</div>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>