-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (170 loc) · 14.8 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
<!DOCTYPE html>
<!--[if IE 7 ]> <html class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en_US">
<!--<![endif]-->
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="language" content="english" />
<meta name="distribution" content="global" />
<meta name="author" content="Ahmed Mohamed Salah" />
<meta name="publisher" content="" />
<meta name="copyright" content="2018 Ahmed" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="description" content="My own website" />
<meta name="keywords" content="Ahmed, Mohamed, Salah, Personal Branding, Portfolio, Resume, CV" />
<link rel="shortcut icon" href="layout/images/icons/icon.jpg" />
<link rel="apple-touch-icon" href="layout/images/icons/apple-icon.jpg" />
<title>Welcome</title>
<!--
If you want to use the Zocial Font Icons
<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=zocial" />
If you want to use FontAwesome Font Icons
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
If you want to use Bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="layout/css/normalize.css">
<link rel="stylesheet" type="text/css" href="layout/css/style.css">
<link rel="stylesheet" type="text/css" href="layout/css/responsive.css">
</head>
<body>
<span class="nav-toggle">☰</span>
<div class="main">
<div class="side-bar" data-visible="visible">
<div class="my-image"><a href="index.html"></a></div>
<div class="nav">
<ul class="homepage-navigation-menu">
<li class="homepage-navigation-link"><a href="about.html">About Me</a></li>
<li class="homepage-navigation-link"><a href="skills.html">Skills</a></li>
<li class="homepage-navigation-link"><a href="projects.html">Projects</a></li>
<li class="homepage-navigation-link"><a href="contact.html">Conatct</a></li>
</ul>
<div class="side-bar-social">
<div class="side-bar-social-icon tooltip">
<span class="tooltiptext">Facebook</span>
<a href="http://www.facebook.com/55ahmedsalah" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="126.445 2.281 589 589">
<circle cx="420.945" cy="296.781" r="294.5" fill="#3c5a9a" />
<path d="M516.704 92.677h-65.239c-38.715 0-81.777 16.283-81.777 72.402.189 19.554 0 38.281 0 59.357H324.9v71.271h46.174v205.177h84.847V294.353h56.002l5.067-70.117h-62.531s.14-31.191 0-40.249c0-22.177 23.076-20.907 24.464-20.907 10.981 0 32.332.032 37.813 0V92.677h-.032z" fill="#fff" /></svg>
</a>
</div>
<div class="side-bar-social-icon tooltip">
<span class="tooltiptext">Twitter</span>
<a href="http://www.twitter.com/55ahmedsalah" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="126.444 2.281 589 589">
<circle cx="420.944" cy="296.781" r="294.5" fill="#2daae1" />
<path d="M609.773 179.634c-13.891 6.164-28.811 10.331-44.498 12.204 16.01-9.587 28.275-24.779 34.066-42.86a154.78 154.78 0 0 1-49.209 18.801c-14.125-15.056-34.267-24.456-56.551-24.456-42.773 0-77.462 34.675-77.462 77.473 0 6.064.683 11.98 1.996 17.66-64.389-3.236-121.474-34.079-159.684-80.945-6.672 11.446-10.491 24.754-10.491 38.953 0 26.875 13.679 50.587 34.464 64.477a77.122 77.122 0 0 1-35.097-9.686v.979c0 37.54 26.701 68.842 62.145 75.961-6.511 1.784-13.344 2.716-20.413 2.716-4.998 0-9.847-.473-14.584-1.364 9.859 30.769 38.471 53.166 72.363 53.799-26.515 20.785-59.925 33.175-96.212 33.175-6.25 0-12.427-.373-18.491-1.104 34.291 21.988 75.006 34.824 118.759 34.824 142.496 0 220.428-118.052 220.428-220.428 0-3.361-.074-6.697-.236-10.021a157.855 157.855 0 0 0 38.707-40.158z" fill="#fff" />
</svg>
</a>
</div>
<div class="side-bar-social-icon tooltip">
<span class="tooltiptext">Behance</span>
<a href="http://www.behance.net/55ahmedsal9fe1" target="_blank">
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500">
<style>
.st2 {
fill: #1769ff
}
.st3 {
fill: #fff
}
</style>
<title>behance</title>
<circle class="st2" cx="1250" cy="1250" r="1250" id="background" />
<path class="st3" d="M883.1 683.6c53.9 0 103.1 4.8 147.6 14.3s82.5 25.1 114.2 46.8c31.7 21.7 56.3 50.5 73.8 86.5s26.2 80.4 26.2 133.3c0 57.1-13 104.7-38.9 142.8-25.9 38.1-64.3 69.3-115 93.6 69.8 20.1 121.9 55.3 156.3 105.5 34.4 50.2 51.6 110.8 51.6 181.7 0 57.1-11.1 106.6-33.3 148.4s-52.1 75.9-89.7 102.3c-37.6 26.5-80.4 46-128.5 58.7-48.4 12.7-98.3 19.1-148.3 19H350V683.6h533.1zm-31.7 458.5c44.4 0 80.9-10.6 109.5-31.7 28.6-21.2 42.9-55.5 42.8-103.1 0-26.4-4.8-48.1-14.3-65s-22.2-30.2-38.1-39.7c-15.9-9.5-34.1-16.1-54.7-19.8-21.2-3.7-42.7-5.6-64.3-5.5H599.2v265l252.2-.2zm14.3 480.7c23.5.1 46.9-2.3 69.8-7.1 22.2-4.8 41.8-12.7 58.7-23.8 16.9-11.1 30.4-26.2 40.5-45.2 10-19 15.1-43.4 15.1-73 0-58.1-16.4-99.7-49.2-124.5-32.8-24.9-76.2-37.3-130.1-37.3H599.2v311l266.5-.1zm746.6-23.8c33.8 32.8 82.5 49.2 146 49.2 45.5 0 84.6-11.4 117.4-34.1 32.8-22.7 52.9-46.8 60.3-72.2h198.3c-31.7 98.4-80.4 168.7-146 211-65.6 42.3-144.9 63.5-238 63.5-64.5 0-122.7-10.3-174.5-30.9-51.8-20.6-95.7-50-131.7-88.1-36-38.1-63.8-83.5-83.3-136.4-19.5-52.9-29.3-111.1-29.3-174.5 0-61.3 10-118.4 30.1-171.3 20.1-52.9 48.7-98.6 85.7-137.2 37-38.6 81.2-69 132.5-91.2 51.3-22.2 108.2-33.3 170.6-33.3 69.8 0 130.6 13.5 182.5 40.5 51.8 27 94.4 63.2 127.7 108.7s57.4 97.3 72.2 155.5c14.8 58.2 20.1 119 15.9 182.5h-591.8c3.1 72.7 21.6 125.6 55.4 158.3zm254.7-431.5c-27-29.6-68-44.4-123-44.4-36 0-65.9 6.1-89.6 18.2-23.8 12.2-42.8 27.2-57.1 45.2-14.3 18-24.3 37-30.1 57.1-5.8 20.1-9.3 38.1-10.3 53.9h366.5c-10.7-57-29.5-100.4-56.4-130zm-348.7-426.4h457.9v127h-457.9v-127z" id="behance" />
</svg>
</a>
</div>
<div class="side-bar-social-icon tooltip">
<span class="tooltiptext">Pinterest</span>
<a href="http://www.pinterest.com/55ahmedsalah" target="_blank">
<svg id="Arrow_1_" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500.2">
<style>
.st0 {
fill: #e13138
}
.st1 {
fill: #fff
}
</style>
<ellipse class="st0" cx="250" cy="250.1" rx="250" ry="250.1" id="Shape_1_copy_3_25_" />
<path class="st1" d="M259.8 133.9c-69.9 0-105.2 49.4-105.2 90.6 0 25 9.6 47.1 30.1 55.4 3.4 1.4 6.4.1 7.4-3.6.7-2.5 3.8-9 4.5-11.6 1-3.6.6-4.9-2.1-8.1-5.9-6.9-9.6-14.1-9.6-26.7 0-42 26.2-71.9 70.8-71.9 39.5 0 61.2 24.5 61.2 56.3 0 41.8-18.8 75.8-46.7 75.8-15.4 0-26.9-11.2-23.2-26.6 4.4-18.4 13-38.2 13-51.5 0-11.9-6.4-20.4-19.8-20.4-15.7 0-28.4 14.7-28.4 36.2 0 13.7 4.5 20.5 4.5 20.5s-15.9 69.7-18.8 81.5c-5.6 23.5-.8 52.2-.4 55.1.2 1.7 2.5 2.1 3.5.8 1.4-1.8 20.2-24.7 26.6-47.5 1.8-6.4 10.4-39.8 10.4-39.8 5.1 9.6 20.1 15.8 35.9 15.8 47.3 0 79.4-40.3 79.4-97.1.1-43.1-36.9-83.2-93.1-83.2z" id="Pinterest_Icon" />
</svg>
</a>
</div>
<div class="side-bar-social-icon tooltip">
<span class="tooltiptext">LinkedIn</span>
<a href="http://www.linkedin.com/in/ahmed-mohamed-salah-020881166" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="7.025 7.025 497.951 497.95">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-974.482" y1="1306.773" x2="-622.378" y2="1658.877" gradientTransform="translate(1054.43 -1226.825)">
<stop offset="0" stop-color="#2489be" />
<stop offset="1" stop-color="#0575b3" />
</linearGradient>
<path d="M256 7.025C118.494 7.025 7.025 118.494 7.025 256S118.494 504.975 256 504.975 504.976 393.506 504.976 256C504.975 118.494 393.504 7.025 256 7.025zm-66.427 369.343h-54.665V199.761h54.665v176.607zM161.98 176.633c-17.853 0-32.326-14.591-32.326-32.587 0-17.998 14.475-32.588 32.326-32.588s32.324 14.59 32.324 32.588c.001 17.997-14.472 32.587-32.324 32.587zm232.45 199.735h-54.4v-92.704c0-25.426-9.658-39.619-29.763-39.619-21.881 0-33.312 14.782-33.312 39.619v92.704h-52.43V199.761h52.43v23.786s15.771-29.173 53.219-29.173c37.449 0 64.257 22.866 64.257 70.169l-.001 111.825z" fill="url(#a)" />
</svg>
</a>
</div>
<div class="side-bar-social-icon tooltip">
<span class="tooltiptext">GitHub</span>
<a href="http://www.github.com/55ahmedsalah" target="_blank">
<svg viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
<g fill="#015466">
<path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0" />
<path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="page-main">
<div class="header-h1-container">
<h1 class="homepage-h1-header">
Hey There
</h1>
<h1 class="homepage-h1-header">
Welcome to my Website
</h1>
<hr>
</div>
<div class="header-h2-container">
<h2 class="homepage-h2-header">
I am an Egyptian <span><a href="https://en.wikipedia.org/wiki/Front-end_web_development">Front-end Developer</a></span> and a <span><a href="https://en.wikipedia.org/wiki/Graphic_designer">Graphic Designer</a></span>
</h2>
<h2 class="homepage-h2-header">
Please, have a look around and enjoy your visit
</h2>
</div>
<div class="homepage-button-container">
<div class="site-button">
<a href="about.html">Know me More</a>
</div>
<div class="site-button">
<a href="projects.html">My Work</a>
</div>
</div>
</div>
</div>
<script src="layout/js/script.js"></script>
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<!--
jQuery 3.3.1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Bootstrap (includes jQuery)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-->
</body>
</html>