-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (142 loc) · 4.38 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
<!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> Light || Dark Mode </title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
/>
<link rel="icon" href="Images/icon.png" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Dark Mode Switch -->
<div class="theme-switch-wrapper">
<span id="toggle-icon">
<span class="toggle-text">Light Mode</span>
<i class="fas fa-sun"></i>
</span>
<label class="theme-switch">
<input type="checkbox" />
<div class="slider round"></div>
</label>
</div>
<!-- Navigation -->
<nav id="nav">
<a class="navborder" href="#home"> Home</a>
<a class="navborder" href="#about"> about</a>
<a class="navborder" href="#projects"> Projects</a>
<a class="navborder" href="#contact"> Contact</a>
</nav>
<!-- Home Section -->
<section id="home">
<div class="tiitle-group">
<h1>Ahmed Roshdy</h1>
<h2>Welcome to the Website .</h2>
</div>
</section>
<!-- About Section -->
<section id="about">
<h1> illustrations</h1>
<div class="about-container">
<div class="image-container">
<h2>Web Innovation</h2>
<img
src="SVG/undraw_proud_coder_light.svg"
alt="Proud Coder"
id="image1"
/>
</div>
<div class="image-container">
<h2>Problem Solving</h2>
<img
src="SVG/undraw_feeling_proud_light.svg"
alt="Feeling Proud"
id="image2"
/>
</div>
<div class="image-container">
<h2>High Concept</h2>
<img
src="SVG/undraw_conceptual_idea_light.svg"
alt="Conceptual Idea"
id="image3"
/>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects">
<h1>Buttons</h1>
<div class="buttons">
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="primary" disabled>Disabled</button>
<button class="outline">Outline</button>
<button class="secondary outline">Alt Outline</button>
<button class="outline" disabled>Disabled</button>
</div>
<div class="text-box" id="text-box">
<p
>Lorem ipsum dolor amet consectetur adipisicing elit. Voluptatibus
magnam sit alias eos ducimus expedita quam, corporis, blanditiis vel
facilis, animi adipisci? Nemo enim quisquam maiores minima, qui omnis.
Accusamus! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorem magnam accusamus qui, ab voluptates reprehenderit rerum quo
mollitia libero asperiores doloremque dolores, nihil repellat
doloribus perspiciatis magni dolore dolorum ipsam!</p
>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="social-icons">
<a
class="icon-like"
href="https://github.com/Ahmed-Roshdy-1"
target="_blanck"
>
<i class="fab fa-github"></i>
<p>GitHub</p>
</a>
<a
class="icon-like"
href="https://www.hackerrank.com/ahmedroshdy01029?hr_r=1"
target="_blanck"
>
<i class="fab fa-hackerrank"></i>
<p>HackerRank</p>
</a>
<a
class="icon-like"
href="https://www.linkedin.com/in/ahmed-roshdy-5bb561194/"
target="_blank"
>
<i class="fab fa-linkedin-in"></i>
<p>LinkedIn</p>
</a>
<a
href="https://www.youtube.com/channel/UCdjIzOGIRg-er6iN13VaFQg"
target="_blank"
>
<i class="fab fa-youtube"></i>
<p>Youtube</p>
</a>
<a
class="icon-like"
href="mailto:a.roshdy7777@gmail.com"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa fa-envelope"></i>
<p>Email</p>
</a>
</div>
</section>
<!-- Script connection -->
<script src="js/script.js"></script>
</body>
</html>