-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (162 loc) · 6.05 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
151
152
153
154
155
156
157
158
159
160
161
162
<!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" />
<link rel="stylesheet" href="style.css" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Merienda:wght@700&family=Nunito:ital,wght@1,700&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Archivo&display=swap"
rel="stylesheet"
/>
<title>Portfolio website</title>
</head>
<body>
<nav class="main-navbar">
<div class="container">
<div id="nav_contents" class="contents">
<div class="brand">
<a href="#"><h1>Portfolio</h1></a>
</div>
<div class="menu">
<img
src="https://github.com/DwinaTech/public-images/blob/main/menu-bars.png?raw=true"
alt="menu-bars"
/>
<img
src="https://github.com/DwinaTech/public-images/blob/main/cross-menu-icon.png?raw=true"
alt="menu-cross"
/>
</div>
<ul>
<li id="home_link"><a href="#">Home</a></li>
<li id="about_link"><a href="#about">About</a></li>
<li id="services_link"><a href="#services">Services</a></li>
<li id="projects_link"><a href="#projects">Projects</a></li>
<li id="contact_link"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<a href="#" class="move-top">
<img src="https://www.vhv.rs/dpng/d/406-4063205_up-arrow-button-svg-png-icon-free-download.png" alt="move top icon">
</a>
<section class="banner">
<div class="container">
<div class="contents">
<h2>Hello,</h2>
<p>I am { Your name }.</p>
<p>I am a { Your occupation }.</p>
</div>
</div>
</section>
<section id="about">
<div class="container">
<h2>Who I am?</h2>
<div class="contents">
<img src="./images/Mo-2.jpeg" alt="person image" />
<p>
"On the other hand, we denounce with righteous indignation and
dislike men who are so beguiled and demoralized by the charms of
pleasure of the moment, so blinded by desire, that they cannot
foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of
will, which is the same as saying through shrinking from toil and
pain. These cases are perfectly simple and easy to distinguish. In a
free hour, when our power of choice is untrammelled and when nothing
prevents our being able to do what we like best, every pleasure is
to be welcomed and every pain avoided. But in certain circumstances
and owing to the claims of duty or the obligations of business it
will frequently occur that pleasures have to be repudiated and
annoyances accepted. The wise man therefore always holds in these
matters to this principle of selection: he rejects pleasures to
secure other greater pleasures, or else he endures pains to avoid
worse pains."
</p>
</div>
</div>
</section>
<section id="services">
<div class="container">
<h2>Services I do</h2>
<div class="contents"></div>
</div>
</section>
<section id="projects">
<div class="container">
<h2>My Projects</h2>
<div class="contents"></div>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact me!</h2>
<div class="contents">
<div class="info">
<div class="card">
<h3>Email</h4>
<p>email.name@provider.com</p>
</div>
<div class="card">
<h3>Tel</h4>
<p>0141 000 0000</p>
</div>
<div class="card">
<h3>Mobile</h4>
<p>07000000000</p>
</div>
</div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d71661.14940449045!2d-4.30249780610432!3d55.85553666636955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x488815562056ceeb%3A0x71e683b805ef511e!2sGlasgow!5e0!3m2!1sen!2suk!4v1614371544023!5m2!1sen!2suk"
loading="lazy"
></iframe>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="contents">
<h4>Follow me on</h4>
<div class="social-icons">
<a href="https://www.facebook.com/DwinaTech" target="blank">
<img
src="https://github.com/DwinaTech/public-images/blob/main/facebook-con.png?raw=true"
alt="Facebook Icon"
/>
</a>
<a
href="https://www.youtube.com/channel/UCSS0kFyF7KWjE19Rj9PgNQA"
target="blank"
>
<img
src="https://github.com/DwinaTech/public-images/blob/main/youtube-icon.png?raw=true"
alt="YouTube Icon"
/>
</a>
<a href="https://twitter.com/diwna201" target="blank">
<img
src="https://github.com/DwinaTech/public-images/blob/main/twitter-icon.png?raw=true"
alt="Twitter Icon"
/>
</a>
<a href="https://github.com/DwinaTech" target="blank">
<img
src="https://github.com/DwinaTech/public-images/blob/main/icons8-github-150.png?raw=true"
alt="Github Icon"
/>
</a>
</div>
<p>All © Copy Rights are Reserved to Portfolio Website</p>
</div>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>