-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (151 loc) · 7.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assests/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><!--Font Awsome Library-->
<title>Portfolio</title>
</head>
<body>
<header>
<nav class="w-100 navs">
<h1 class="color-white">MY PORTFOLIO</h1>
<ul class="color-white">
<li><a href="#port" class="color-white">Portfolio</a></li>
<li><a href="#ab" class="color-white">About</a></li>
<li><a href="#cont" class="color-white">Contact</a></li>
</ul>
</nav>
<nav class="nav2 w-100 navs">
<h1 class="color-white">MY PORTFOLIO</h1>
<a href="#" > <i class="fa-solid fa-list" style="color: white;"></i></a></i>
</nav>
<div class="hero w-100 bg-color-green">
<div class="img-bg border-radius-50 bg-white">
<img src="./assests/Images/img/p.png" class="border-radius-50">
</div>
<h1 class="color-white">Joudi Mahmoud Saloukha</h1>
<div class="shapes">
<div class="shape bg-white"></div>
<i class="fa-solid fa-star" style="color: white;"></i>
<div class="shape bg-white"></div>
</div>
<p class="color-white">Software Engineer , Graphic Designer , Front End Developer</p>
</div>
</header>
<main>
<section class="portfolio" id="port"><!--Experiences-->
<div class="text">
<h1>Portfolio</h1>
<div class="shapes">
<div class="shape"></div>
<i class="fa-solid fa-star" style="color: black;"></i>
<div class="shape"></div>
</div>
</div>
<div class="boxs w-100">
<div class="row">
<div class="box1 box">
<div class="circle border-radius-50 bg-white">
<img src="./assests/Images/img/html.png">
</div>
</div>
<div class="box2 box">
<div class="circle border-radius-50 bg-white">
<img src="./assests/Images/img/css.png">
</div>
</div>
<div class="box3 box">
<div class="circle border-radius-50 bg-white">
<img src="./assests/Images/img/js.png">
</div>
</div>
</div>
<div class="row">
<div class="box4 box">
<div class="circle border-radius-50 bg-white">
<img src="./assests/Images/img/bootstrap.png">
</div>
</div>
<div class="box5 box">
<div class="circle border-radius-50 bg-white">
<img src="./assests/Images/img/photoshop.png">
</div>
</div>
<div class="box6 box">
<div class="circle border-radius-50 bg-white">
<img src="./assests/Images/img/illustrator.png">
</div>
</div>
</div>
</div>
</section>
<section class="about w-100 bg-color-green" id="ab">
<div class="text1 w-100">
<h1 class="color-white">About</h1>
<div class="shapes">
<div class="shape bg-white"></div>
<i class="fa-solid fa-star" style="color: white;"></i>
<div class="shape bg-white"></div>
</div>
<div class="paragraph">
<p class="color-white">Highlt motivated and detail-orientes IT professional with Bachelor's degree in Informational Technology
and an English Certification. Also expeirenced in GraphicDesign with a strong focus on Social Media design and currently undergoing
training in Front-end development. Seeking toleverage technical skills. Creative design expertise, and ongoing in a dynamic
role whrer i can contribute to innovative projects and solution.
</p>
<p class="color-white">I have many Experince such as working as a graphic designer with Shahi Beauty Center - Dubai , UAE which includes
social media designs and branding.
Also, collaborated with marketing teams to align graphic designs with compaign goals and brand idenity.
</p>
</div>
<a href="https://drive.google.com/file/d/16-SRUDsBvelwsXD341NpVeNRttxv5zyc/view?usp=drivesdk" target="_blank" download>
<button class="bg-color-green color-white"><i class="fas fa-download" style="color: white;"></i> Dawnload CV</button>
</a> <!--Please Try This With Internet Connection-->
</section>
<section class="contact " id="cont">
<div class="text">
<h1>Contact Me</h1>
<div class="shapes">
<div class="shape"></div>
<i class="fa-solid fa-star" style="color: black;"></i>
<div class="shape"></div>
</div>
<form class="inputs w-100">
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email Address">
<input type="number" placeholder="Phone Number" >
<textarea placeholder="Message"></textarea>
<button class="btn bg-color-green color-white">Send</button>
</form>
</section>
</main>
<footer>
<section class="first-footer w-100">
<div class="f-part1">
<h1 class="color-white">Location</h1>
<p class="color-white">Syria , Lattakia , Al-jamhoria Street</p>
</div>
<div class="f-part2">
<h1 class="color-white">My Accounts</h1>
<div class="link">
<a href="https://www.facebook.com/joudi.saloukha.12?mibextid=ZbWKwL" target="_blank"><i class="fab fa-facebook-f border-radius-50" style="color: white;"></i></a>
<a href="https://www.linkedin.com/in/joudi-saloukha-52b1a1280?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="_blank"><i class="fab fa-linkedin border-radius-50" style="color: white;"></i></a>
<a href="#" target="_blank"><i class="fab fa-twitter border-radius-50"style="color: white;"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-dribbble border-radius-50" style="color: white;"></i></a>
</div>
</div>
<div class="f-part3">
<h1 class="color-white">About Freelancer</h1>
<p class="color-white">Freelancer is easy to use , MIT Lisence.
bootstrap Themes created By <a href="[email protected]">Joudi Saloukha</a>
</p>
</div>
</section>
<section class="last-footer w-100">
<p class="color-white">CopyRight <i class="fas fa-copyright" style="color: white;"></i> your website 2023</p>
</section>
</footer>
</body>
</html>