-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (130 loc) · 6.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0874620dbd.js" crossorigin="anonymous"></script>
<title>Fath ellah YOUSFI</title>
</head>
<body>
<div class="all">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>Portfolio</strong><span class="my_name"> Fath Ellah Yousfi</span></a>
<nav id="nav">
<a href="index.html">Home</a>
<a href="activities.html">My Activities</a>
<a href="about.html">About</a>
<a href="#footer">contact</a>
</nav>
<!--this is menu berger-->
<div id="menuToggle" class="navigation">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="index.html"><li>Home</li></a>
<a href="activities.html"><li>My Activities</li></a>
<a href="about.html"><li>About</li></a>
<a href="#footer"><li>Contact</li></a>
</ul>
</div>
</header>
<!-- body content Banner -->
<section id="banner">
<header>
<h1>Welcome to My Personal Website</h1>
</header>
<div class="inner">
<header>
<h1>Welcome to My World</h1>
</header>
<div class="flex ">
<a href="activities.html#wins">
<div class="card">
<span class="icon fa-icons"></span>
<h3>Hobbies ♪</h3>
<p>Things I do just for Fun ♫</p>
</div>
</a>
<a href="activities.html#fails">
<div class="card">
<span class="icon fa-meteor"></span>
<h3>Skills ↑ Vs fails ☺</h3>
<p>My skills↑ Vs My Fails↓</p>
</div>
</a>
<a href="about.html">
<div class="card">
<span class="icon fa-code"></span>
<h3>Coding♥Life</h3>
<p>Getting into Programming ¿</p>
</div>
</a>
</div>
<footer>
<a class="button" href="activities.html"> Get Started →</a>
</footer>
</div>
</section>
<!-- Three -->
<section id="three" class="wrapper align-center">
<div class="inner">
<div class="flex">
<article>
<div class="image round">
<img src="images/fail.jpg" alt="Pic 01">
</div>
<header>
<h2>FAILS<br> I Had In Life</h2>
</header>
<p>Life can be full of surprizes, But for it was full of FAILS. <br> Life Never stopped nocking me down. <br> But I always get back on my feets ☺</p>
<footer>
<a class="button" href="activities.html#fails">more fails →</a>
</footer>
</article>
<article>
<div class="image round">
<img src="images/win.jpg" alt="Pic 02">
</div>
<header>
<h2>WINS<br> I could barely Have</h2>
</header>
<p>YES, although I have never felt happy, I have seen few wins in my Life. <br> And I consider my childhood the best thing I have ever had. <br> because those days were too simple and Stress FREE.</p>
<footer>
<a class="button" href="/activities.html#wins">more wins →</a>
</footer>
</article>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h3>Get in touch</h3>
<form action="" method="POST">
<div class="field half first">
<label for="name">Name</label>
<input name="name" id="name" type="text" placeholder=" Name">
</div>
<div class="field half">
<label for="email">Email</label>
<input name="email" id="email" type="email" placeholder=" Email">
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6" placeholder="Message"></textarea>
</div>
<ul class="actions">
<button class="mail-btn" type="submit">send</button>
</ul>
</form>
</div>
</footer>
<div class="copyright" style="text-align: center;background-color: rgba(224, 224, 224, 0.94);padding: 15px;z-index:9999">
©2020 Fey LTD. <a href="#footer" style="cursor: pointer; color: blue;">contact me</a><a onclick="alert('this page is under construction')" style="cursor: pointer; color: blue;">Terms & Conditions</a>
</div>
</body>
</html>