-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (154 loc) · 13 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
<!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">
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
<style>/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}</style>
<title>Yamen Hadla</title>
<meta name="description" content="Yamen Hadla">
<noscript>
<link rel="stylesheet" href="assets/dist/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</noscript>
</head>
<body>
<header class="top-bar">
<nav class="top-bar__navigation top-bar__navigation--header">
<a class="top-bar__navigation-item top-bar__navigation-item--container" href="index.html">
<img class="top-bar__logo" src="assets/images/yamen-logo-transparent.webp" alt="Yamen Hadla Logo">
</a>
<a class="top-bar__navigation-item top-bar__navigation-item--button" href="mailto:yamenhadla@gmail.com">contact</a>
</nav>
<!-- <a class="top-bar__social" href="https://twitter.com/yamenhadla">
<img class="top-bar__twitter" src="assets/images/icons/twitter-icon.svg" alt="twitter Logo">
</a> -->
</header>
<main class="section section--wider section--main">
<article class="article">
<h1 class="article__headline article__headline--main">
<small class="article__headline article__headline--small">designer & developer</small><br>
<span class="article__headline--tagged">yamen hadla</span>
</h1>
<p class="article__text">I love to code and enjoy myself designing.</p>
<a class="article__button" href="mailto:yamenhadla@gmail.com">contact</a>
</article>
<figure class="section__figure">
<img class="section__figure section__figure--picture" src="assets/images/yamen-hadla-visuellverstehen-flensburg.webp" alt="Yamen Hadla Personal Picture">
<figcaption class="section__picture-caption">Flensburg <a class="top-bar__links top-bar__links--caption" href="https://www.visuellverstehen.de/">visuellverstehen</a> 2020</figcaption>
</figure>
<img class="section__background" src="assets/images/code-background.webp" alt="Programming codes on a computer screen">
</main>
<section>
<figure class="section section--lighter">
<img class="section__figure section__figure--illustration" src="assets/images/web-design-illustration.svg" alt="Web Design Illustration">
<figcaption class="article article--subtract">
<h2 class="article__headline article__headline--medium article__headline--spacing">Hi, I’m Yamen Hadla<br>nice to meet you</h2>
<p class="article__text article__text--medium">Open-minded, motivated, and creative person from Syria and currently living in Germany. Fan of technology, sport, movies.</p>
<p class="article__text article__text--medium">Interested in the entire web development spectrum and work with a high ambition while paying attention to detail.</p>
<a class="article__button article__button--dark" href="mailto:yamenhadla@gmail.com">contact</a>
</figcaption>
</figure>
</section>
<section class="section section--cards">
<article class="card card--light">
<figure class="article article--card">
<img src="assets/images/designer-icon.svg" alt="Designer Icon">
<figcaption>
<h2 class="article__headline article__headline--medium article__headline--dark article__headline--spacing">Designer</h2>
<p class="article__text article__text--medium article__text--dark">I believe that simple designs could bring premium quality results.</p>
</figcaption>
</figure>
<article class="article article--card">
<h3 class="card__list-title card__list-title--light">Things I design</h3>
<ul class="card__list">
<li class="card__list article__headline article__headline--thin article__headline--dark article__headline--medium">UX/UI Design</li>
<li class="card__list article__headline article__headline--thin article__headline--dark article__headline--medium">Web Design</li>
<li class="card__list article__headline article__headline--thin article__headline--dark article__headline--medium">Mobile Design</li>
<li class="card__list article__headline article__headline--thin article__headline--dark article__headline--medium">Branding</li>
</ul>
</article>
<article class="article article--card">
<h3 class="card__list-title card__list-title--light">Design Tools</h3>
<ul class="icons">
<li class="icons__item"><img class="icons__image" src="assets/images/icons/figma.svg" alt="Figma Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/photoshop.svg" alt="Photoshop Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/creative-cloud.svg" alt="Creative Cloud Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/illustrator.svg" alt="Illustrator Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/mockflow.svg" alt="Mockflow Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/xd.svg" alt="Adobe XD Logo"></li>
</ul>
</article>
</article>
<article class="card card--dark">
<figure class="article article--card">
<img src="assets/images/developer-icon.svg" alt="Developer Icon">
<figcaption>
<h2 class="article__headline article__headline--medium article__headline--spacing article__headline--top-spacing">Developer</h2>
<p class="article__text article__text--medium article__text--dark">I like to code things and bring it to life.</p>
</figcaption>
</figure>
<article class="article article--card">
<h3 class="card__list-title">Languages I speak</h3>
<ul class="card__list">
<li class="card__list article__headline article__headline--thin article__headline--medium">HTML, CSS,</li>
<li class="card__list article__headline article__headline--thin article__headline--medium">JavaScript,</li>
<li class="card__list article__headline article__headline--thin article__headline--medium">PHP, SQL</li>
</ul>
</article>
<article class="article article--card">
<h3 class="card__list-title">Dev Tools</h3>
<ul class="icons">
<li class="icons__item"><img class="icons__image" src="assets/images/icons/html-white.svg" alt="HTML Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/css-white.svg" alt="CSS Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/js-white.svg" alt="JavaScript Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/php.svg" alt="PHP Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/github.svg" alt="Github Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/docker.svg" alt="Docker Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/git.svg" alt="git Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/npm.svg" alt="npm Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/nodejs.svg" alt="nodeJS Logo"></li>
<li class="icons__item"><img class="icons__image" src="assets/images/icons/mysql.svg" alt="MySQL Logo"></li>
</ul>
</article>
</article>
</section>
<section class="card card--contact">
<article class="article article--contact">
<h2 class="article__headline article__headline--medium">Start a project</h2>
<p class="article__text article__text--medium article__text--subtract">Interested in working together? I’ll be more than happy to help.</p>
</article>
<a class="article__button article__button--dark" href="mailto:yamenhadla@gmail.com">contact</a>
</section>
<footer class="section section--wider section--bottom">
<figure class="section__figure section__figure--bottom">
<a href="index.html">
<img class="top-bar__logo top-bar__logo--dark" src="assets/images/yamen-logo-transparent.webp" alt="Yamen Hadla Logo">
</a>
<figcaption class="section__caption article__headline article__headline--medium">Leveling up</figcaption>
</figure>
<aside>
<ul class="top-bar__navigation top-bar__navigation--bottom">
<li>
<address class="top-bar__navigation-item top-bar__navigation--lighter" href="#">
Impressum
<p class="top-bar__navigation-item top-bar__navigation--lighter">Yamen Hadla<br>
<a class="top-bar__navigation-item" href="mailto:yamenhadla@gmail.com">E-mail: yamenhadla@gmail.com</a>
</p>
</address>
</li>
<li class="top-bar__navigation-item top-bar__navigation-item--righty">
crafted by me 2020
</li>
</ul>
<p class="top-bar__conclusion">Special thanks goes to <a class="top-bar__links" href="https://www.visuellverstehen.de/">visuellverstehen</a> for making this possible</p>
</aside>
</footer>
<script>
var head = document.head;
head.innerHTML += '<link rel="stylesheet" href="assets/dist/styles.css">';
head.innerHTML += '<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">';
</script>
</body>
</html>