-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (127 loc) · 12.2 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
<!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">
<title>H.Moahamed | Home</title>
<link rel="shortcut icon" href="Images\TabIcon-Logo.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="Styles/Home.css">
<link rel="stylesheet" href="Styles/Elements.css">
<script src="https://kit.fontawesome.com/c54729092d.js" crossorigin="anonymous"></script>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="Scripts/Page-Transfermation.js"></script>
<script src="/Scripts/NavBar.js" defer></script>
</head>
<body>
<header></header>
<main>
<div class="The-Page-Header">
<img src="Images\Logo.png" alt ="Logo" class="Page-Header-Logo">
<h1 class="Page-Header-Title">H.Mohamed</h1>
<p class="Fast-Bio">Hello, I'm a frontend web developer and a c++ & python beginner, I'm also a tech/gaming Content Creator. You can call me Mohamed .</p>
<button class="Buttons Page-Header-Button"onclick="redirectLink('aboutme')">Learn More About me</button>
</div>
<div class="Cutter-Line"></div>
<div class="The-Page-SubHeader">
<div class="section">
<h2 class="sectionHeader">Skills:</h2>
<h4 class="skills">Web Devolopment (tsx , jsx,html css ,Nextjs):</h4>
<h4 class="skills">App Devolopment:</h4>
<h4 class="skills">Windows & linux & terminal tools:</h4>
<h4 class="skills">Microsoft Office and G Suite:</h4>
</div>
<div class="section">
<h2 class="sectionHeader">Languages</h2>
<h4 class="skills">English:</h4>
<h4 class="skills">Arabic:</h4>
<h4 class="skills">French:</h4>
</div>
</div>
<div class="Cutter-Line"></div>
<div class="My-Projects">
<h3 class="My-Projects-Title"style="text-align:center;">My Projects</h3>
<div class="My-Projects-Elements">
<div class="My-Projects-Elements-Body">
<img src="../Images/Insight-Center-Logo.png" alt="Insight-Center-Logo" class="My-Projects-Elements-Body-Images">
<h4 class="My-Project-Elements-Body-Title">The Insight Center Official Website </h4>
<p class="My-Project-Elements-Body-Text"style="margin-right: 0.5rem;
margin-left: 0.5rem;"> It's a Webpage for An Algerians Language learning Center
Cutated in Algeria/Djelfa.</p>
<button class="Buttons"onclick="redirectLink('insight')"style="margin-top: 1rem;
margin-bottom: 1rem;">Visit Insight Center Now</button>
</div>
<div class="My-Projects-Elements-Body">
<img src="../Images/Error404Image.svg" alt="Insight-Center-Logo" class="My-Projects-Elements-Body-Images">
<h4 class="My-Project-Elements-Body-Title">Advansed WebCal</h4>
<p class="My-Project-Elements-Body-Text"atyle="margin-right: 0.5rem;
margin-left: 0.5rem;"> It's an Online Very Advansed Calculator what Is under Construction By me </p>
<button class="Buttons"style="margin-top: 1rem;
margin-bottom: 1rem;"onclick="redirectLink()">Visit Advanced WebCal Now</button>
</div>
</div>
</div>
<div class="Cutter-Line"></div>
<h3 class="My-Certificates-Title"style="text-align:center;">My Certificates</h3>
<div class="My-Certificates">
<div class="My-Certificates-Elements">
<h4 class="My-Certificates-Elements-Titles">FreeCodeCamp.org Responsive WebDesing</h4>
<p class="My-Certificates-Elements-Text">It's a <a href="https://www.freecodecamp.org/">FreeCodeCamp</a> certificate about web desing in html and css witch teaches html and css from bigginer to Advanced.</p>
<button class="Buttons"onclick="redirectLink('FCCResWebDes')">See My FCC Certificate</button>
</div>
<div class="My-Certificates-Elements">
<h4 class="My-Certificates-Elements-Titles">FreeCodeCamp.org Javascript Algorithms and Data Structures</h4>
<p class="My-Certificates-Elements-Text">It's a <a href="https://www.freecodecamp.org/">FreeCodeCamp</a> certificate about teaching Javascript basics , Algorithms scripting and data structures.</p>
<button class="Buttons"onclick="redirectLink('FCCJsAlGo')">See My FCC Certificate</button>
</div>
<div class="My-Certificates-Elements">
<h4 class="My-Certificates-Elements-Titles">Code.org Hour Of Code Certificate</h4>
<p class="My-Certificates-Elements-Text">It's My Collection of <a href="https://code.org/">Code.org</a> Hour Of Code Certificates.</p>
<button class="Buttons">See My HOC Certificate'c Collection</button>
</div>
</div>
<div class="Cutter-Line"></div>
<h4 class="My-Social-Media-Title"style="text-align:center;">My Social Medias</h4>
<div class="My-Social-Media">
<div class="temp"></div>
<h4 class="My-SocialMedia-Title Title">My Social Medias</h4>
<div class="temp"></div>
<!-- Twiter -->
<div class="My-Social-Media-Body ">
<h4 class="S-M-E-Title">
<svg class="svg-inline--fa fa-twitter fa-2xl S-M-E-Img" scr="" style="transform: translateX(-1.5rem);color: #08a0e9;" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg><!-- <i class="fa-brands fa-twitter fa-2xl S-M-E-Img" scr="" style="transform:translateX(-1.5rem);color: #08a0e9;"></i> Font Awesome fontawesome.com -->Twiter</h4>
<p class="S-M-E-Text">Mainly tech/gaming updates and notification about events and uploads, but I also have some political and religion reviews.</p>
<button class="Buttons" onclick="redirectLink('twiter')">Visit My Twiter</button>
</div>
<!-- Instagram -->
<div class="My-Social-Media-Body">
<h4 class="S-M-E-Title">
<img src="../Images/insta-logo" style="transform:translateX(-1.5rem);width:3rem;height: 3rem;border-radius:1rem;">
Instagram</h4>
<p class="S-M-E-Text">See my lifestyle and tech/gaming memes and get notified of events or uploads.</p>
<button class="Buttons" onclick="redirectLink('insta')">Visit My Instagram</button>
</div>
<!-- Discord -->
<div class="My-Social-Media-Body">
<h4 class="S-M-E-Title">
<svg class="svg-inline--fa fa-discord fa-xl S-M-E-Img" style="transform: translateX(-1rem);background-color: #5865f2;border-radius: 5rem;padding: 0.65rem 0.5rem;" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path></svg><!-- <i class="fa-brands fa-discord fa-xl S-M-E-Img" style="transform:translateX(-1rem);background-color:#5865f2;border-radius:5rem;padding:0.65rem 0.5rem"></i> Font Awesome fontawesome.com -->
Facebook</h4>
<p class="S-M-E-Text">Chat, collaborate with me on facebook.</p>
<button class="Buttons" onclick="redirectLink('discord')">View my facebook account</button>
</div>
<!-- Github -->
<div class="My-Social-Media-Body">
<h4 class="S-M-E-Title">
<svg class="svg-inline--fa fa-github fa-2xl S-M-E-Img" style="transform: translateX(-1.5rem);" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg=""><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg><!-- <i class="fa-brands fa-github fa-2xl S-M-E-Img" style="transform:translateX(-1.5rem);"></i> Font Awesome fontawesome.com -->
Github</h4>
<p class="S-M-E-Text">See my Amazing Projects and github reposotiries for free to help you on your next projects</p>
<button class="Buttons" onclick="redirectLink('github')">Visit My Github Account</button>
</div>
<div class="temp"></div>
</div>
</main>
<footer></footer>
</body>
</html>