-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
91 lines (91 loc) · 8.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Mehrabios Work Samples">
<meta name="keywords" content="Mehrabios , Mehrab Anbarlou , Mohammad Hossein Anbarlou , Introduction , Bio , Projects , GitHub , Portfolio , Coding , Programming , Web Development , Open Source , Front-end Developer , HTML , CSS , JavaScript , Responsive Design">
<meta name="author" content="Mehrab Anbarlou">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mehrab Anbarlou | Front-End Deverloper</title>
<link rel="stylesheet" href="./Styles/style.css">
<link rel="icon" href="./Image/Mehrabios_Profile.jpg">
</head>
<body>
<header>
<img class="red-fade-circle fade-circle" src="./Image/Red_Fade_Circ.png" alt="Red Fade Circle">
<img class="blue-fade-circle fade-circle" src="./Image/Blue_Fade_Circle.png" alt="Blue Fade Circle">
<img class="second-blue-fade-circle fade-circle" src="./Image/Blue_Fade_Circle.png" alt="Red Fade Circle">
<img class="second-red-fade-circle fade-circle" src="./Image/Red_Fade_Circ.png" alt="Red Fade Circle">
<img class="lightblue-fade-circle fade-circle" src="./Image/LightBlue_Fade_Circle.png" alt="LightBlue Fade Circle">
<div class="content">
<div class="mehrabios-avatar">
<img src="./Image/Mehrabios_Profile.jpg" alt="Mehrabios" title="Mehrabios">
</div>
<div class="title">
<h1>Hi, I am <span class="name">Mehrab Anbarlou</span>, a <span class="front-end">FrontEnd developer</span>.</h1>
</div>
<div class="paragraph">
<p>I am a Front-End developer who is eager to learn and collaborate and I am interested in sharing my projects and knowledge with others. I started programming two years ago by learning Python and after some time I became interested in Web Programming. Currently I am a Front-End developer and learning Back-End.</p>
</div>
<div class="skills-introduction">
<p class="skill"><strong>Skills:</strong></p>
<p class="skills"><strong class="badge">HTML</strong> , <strong class="badge">CSS</strong> , <strong class="badge">Sass & Scss</strong> , <strong class="badge">Bootstrap</strong> , <strong class="badge">JavaScript</strong> , <strong class="badge">React js</strong> , <strong class="badge">Next js</strong></p>
</div>
</div>
</header>
<main>
<img class="red-fade-circle fade-circle" src="./Image/Red_Fade_Circ.png" alt="Red Fade Circle">
<img class="blue-fade-circle fade-circle" src="./Image/Blue_Fade_Circle.png" alt="Blue Fade Circle">
<img class="lightblue-fade-circle fade-circle" src="./Image/LightBlue_Fade_Circle.png" alt="LightBlue Fade Circle">
<div class="projects">
<div class="content">
<div class="title">
<h2>Projects And Games:</h2>
</div>
<div class="works">
<div class="stylewave-library project">
<div class="title">
<h3>StyleWave Library</h3>
</div>
<div class="description">
<p><em>StyleWave is a free open source library for CSS and JavaScript that you can use to develop your projects. Using StyleWave can make the development of your projects faster and easier. With StyleWave, you can use a large number of ready-made styles and animations in CSS by entering the class name in HTML.</em></p>
</div>
<div class="project-links">
<h4>Project Links:</h4>
<a href="https://github.com/Mehrabios/StyleWave" target="_blank" title="StyleWave Library Github">GithHub</a>
</div>
</div>
<div class="guess-the-number-game project">
<div class="title">
<h3>Guess The Number Game</h3>
<div class="description">
<p><em>"Guess the number!" is an interactive game made with HTML, CSS and JavaScript where you guess a number and continue until you reach the chosen number. In this process, you can only guess a certain number based on the selected difficulty level. What's are you waiting for? Start guessing!</em></p>
</div>
<div class="project-links">
<h4>Project Links:</h4>
<a href="https://github.com/Mehrabios/GuessTheNumber" target="_blank" title="GuessTheNumber Game GitHub">GitHub</a>
<a href="./GuessTheNumber/index.html" target="_blank" title="GuessTheNumber Game Page">Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="content">
<div class="title">
<h2>My Social Media</h2>
</div>
<div class="social-media-link">
<a href="https://github.com/Mehrabios" target="_blank" title="GitHub"><span class="github-icon"><svg xmlns="http://www.w3.org/2000/svg" width="65" class="bi bi-github" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg></span></a>
<a href="https://t.me/Mehrabios" target="_blank" title="Telegram"><span class="telegram-icon"><svg xmlns="http://www.w3.org/2000/svg" width="65" class="bi bi-telegram" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"/></svg></span></a>
<a href="mailto:[email protected]" target="_blank" title="E-Mail"><span class="email-icon"><svg xmlns="http://www.w3.org/2000/svg" width="65" class="bi bi-envelope-at" viewBox="0 0 16 16"><path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"/><path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648m-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/></svg></span></a>
</div>
<div class="copyright-text">
<p>Copyright (c) 2023 Mohammad Hossein Anbarlou (Mehrab Anbarlou)</p>
</div>
</div>
</footer>
</body>
</html>