-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (137 loc) · 4.49 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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aref Bagheri | Portfolio</title>
<!-- Google fonts (Poppins) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,700;1,600;1,800&display=swap"
rel="stylesheet"
/>
<!-- Font Awsome (You should have Internet access to see icons) -->
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<!-- Alertify CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.css"
integrity="sha512-MpdEaY2YQ3EokN6lCD6bnWMl5Gwk7RjBbpKLovlrH6X+DRokrPRAF3zQJl1hZUiLXfo2e9MrOt+udOnHCAmi5w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<a href="#about">About</a>
<a href="#social">Social</a>
<a href="#contact">Contact</a>
<button class="mode-toggler">MODE</button>
</nav>
<!-- ShowCase -->
<section id="show-case">
<h1 class="website-title">
Now
<span class="special-bg"> Aref Bagheri</span>
is here
</h1>
<h2 class="showcase-desc">scroll to know more about me</h2>
</section>
<!-- About -->
<section id="about">
<article class="about-container">
<header class="about-header">
<h4 class="special-bg">
<i class="far fa-address-card"></i>
About Aref Bagheri
</h4>
</header>
<p class="about-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim officia
error maxime eligendi ullam quasi, at veniam repudiandae in corrupti
neque, ut incidunt blanditiis obcaecati, sapiente laborum dolorem
voluptas dignissimos ipsam. Alias cumque dolorum recusandae quas eum
eos nulla porro placeat at. Consequatur eius necessitatibus iusto.
Beatae reprehenderit ipsum fugiat?
</p>
</article>
</section>
<!-- Social -->
<section id="social">
<!-- Telegram link -->
<a href="#">
<img
src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg"
class="icons"
alt="telegram"
/>
</a>
<!-- Instagram link -->
<a href="#">
<img
src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg"
class="icons"
alt="instagram"
/>
</a>
<!-- whatsapp link -->
<a href="#">
<img
src="https://img.icons8.com/color/48/000000/whatsapp--v1.png"
class="icons"
alt="whatsapp
"
/>
</a>
</section>
<!-- Contact -->
<section id="contact">
<h5 class="special-bg">Contact us</h5>
<form action="" method="post">
<label for="name">Your Full name</label>
<input type="text" name="name" placeholder="Name" class="client-name" />
<label for="email">Your email</label>
<input
type="email"
name="email"
placeholder="E-mail"
class="client-email"
/>
<label for="msg">Your message</label>
<textarea
name=""
id=""
cols="25"
rows="5"
placeholder="type here..."
class="client-msg"
></textarea>
<input type="submit" value="Submit" />
</form>
</section>
<!-- Footer -->
<footer id="footer">
<h6>All rights reserved © 2019 - 2023 for Aref Bagheri</h6>
</footer>
<div class="arrow-up">↑</div>
<!-- AlertifyJS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"
integrity="sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- Main JS -->
<script src="./js/app.js"></script>
</body>
</html>