-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (130 loc) · 5.61 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
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="utf-8" />
<link rel="stylesheet" href="./css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Porfolio by Haythem Lazaar"
/>
<title>Haythem L.</title>
<link rel="icon" type="image/png" sizes="32x32" href="./icon.svg">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="loading">
<div class="loader"></div> <img alt="logo" src="./icon.svg">
</div>
<div class="page">
<nav id="menu1" class="nav-bar">
<div class="logo-bar">
<div class="logo">
<a href="index.html"><img alt="Haythem Lazaar's Logo" src="assets/img/HAYTHEML..png" /></a>
</div>
<div class="hamburger-menu">
<img id="act-btn" class="menu-button" alt="menu" src="assets/img/HAMBURGER.svg" />
</div>
</div>
</nav>
<aside class="sidenav-bar">
<div class="logo-bar">
<div class="hamburger-menu">
<img id="act-btn1" class="menu-button" alt="menu" src="assets/img/HAMBURGER.svg" />
</div>
<div class="logo">
<a href="index.html"><img alt="Haythem Lazaar's vertical Logo" src="assets/img/HAYTHEML-vertical.png" /></a>
</div>
</div>
</aside>
<div class="menu1 menu deactivated">
<h1 class="whtsup">What's UP ?</h1>
<a href="assets/pages/projects.html">
<div class="menu-options">
<h1>projects</h1>
</div>
</a>
<a href="assets/pages/about.html">
<div class="menu-options">
<h1>get to know me</h1>
</div>
</a>
<a href="assets/pages/contact.html">
<div class="menu-options">
<h1>contact</h1>
</div>
</a>
</div>
<main>
<div class="hero-section">
<div class="ball"><img alt="logo" src="./icon.svg"></div>
<img alt="background" src="assets/img/H.png" />
<h3>front-end developer</h3>
<h1 class="header-mobile">The name is <span>Haythem</span>, I seek creative & scalable ideAs</h1>
<h1 class="header-screen">The name is <span>Haythem</span><br/>I seek creative<br/>& scalable<br/>ideAs</h1>
<a class="cnt-btn" href="assets/pages/contact.html">contact</a>
</div>
<div class="projects-section">
<h1>Projects</h1>
<a href="assets/pages/project1.html"><div class="project prj1">
<h3>Landing Page</h3>
<h2>to-Copy landing page</h2>
</div></a>
<a href="assets/pages/project4.html"><div class="project prj2">
<h3>web-app</h3>
<h2>Social media chat generator</h2>
</div></a>
<a href="assets/pages/project2.html"><div class="project prj2">
<h3>web-app</h3>
<h2>Disney-plus clone</h2>
</div></a>
<a href="assets/pages/project3.html"><div class="project prj3">
<h3>web-app</h3>
<h2>Portfolio Iterations</h2>
</div></a>
</div>
<div class="about-section" >
<div class="desc">
<h1>Who am I ?</h1>
<p class="about-desc">
Ex Cadet currently majoring in Computer Science at ESPRIT.<br>
On the path of building a sustainable lifestyle that gets me up excited every morning.<br>
Looking to make ideas scale through web based solutions with great aesthetics.<br>
Understanding Recurring Customers & Conversion Rate Optimization for E-Commerce Stores. (UX)
</p>
</div>
<div class="photo">
<img class="profile-photo" alt="profile photo" src="assets/img/profile-photo.svg" />
</div>
</div>
<div class="contact-section">
<div class="cnt-line1">
<div class="home-mail">
<h3>Tunis, Tunisia.</h3>
<h3>[email protected]</h3>
</div>
<div class="void"></div>
<div class="soc-container"><a href="https://github.com/HaythemLazaar" target="_blank"><img alt="github" src="assets/img/github.svg" /></a>
</div>
</div>
<div class="cnt-line2">
<div class="resume"><a href="./resume.pdf" target="_blank"><h3>+Resume</h3></a></div>
<div class="void"></div>
<div class="soc-container"><a href="https://twitter.com/HaythemLaz" target="_blank"><img alt="twitter" src="assets/img/twitter.svg" /></a>
</div>
</div>
<div class="cnt-line3">
<div class="footer">
<p>©2021, Haythem Lazaar</p>
</div>
<div class="void"></div>
<div class="soc-container"><a href="https://www.linkedin.com/in/haythem-lazaar/" target="_blank"><img alt="linkedin" src="assets/img/linkedin.svg" /></a>
</div>
</div>
</main>
</div>
<script type="text/javascript" src="assets/scripts/script.js"></script>
</body>