-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
179 lines (170 loc) · 10.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
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!-- Declared the doctype as well as the language in the HTML -->
<!DOCTYPE html>
<html lang="en">
<!-- In the head, i have declared the character type as well initiating the viewport for it to be responsive.
I have linked the bootstrap and font awesome CDNs to the site so it would call from their directors.
I have an external document which is used for the styling, which meant i associated the stylesheet to the page. -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<title>Adnan Muhtadi</title>
</head>
<body>
<!-- This section is for the navigation where bootstrap was used to align the four pages within the row.
The active class would display which page the user is on at that specific time.
Each link has a hoover effect which would enable the user to see which link they could go to. -->
<nav>
<div class="row nav-section nav">
<div class="col-12 col-lg-4 col-md-5 nav-link active mainhome">
<h2 id="myname"><a href="index.html">Adnan Muhtadi</a></h2>
</div>
<div class="col-1 col-lg-2"></div>
<div class="col-12 col-lg-2 col-md-2 right">
<h2><a href="journey.html">My Journey</a></h2>
</div>
<div class="col-12 col-lg-2 col-md-2 right">
<h2><a href="portfolio.html">My Portfolio</a></h2>
</div>
<div class="col-12 col-lg-2 col-md-2 right">
<h2><a href="connect.html">Connect</a></h2>
</div>
</div>
</nav>
<!-- The header element was used to display my header image which would be the same sized from the bottom of the navigation to the bottom of the screen.
Within Index.html, i have also added another picture on top of the main header imager to show myself as well as adding a headline text within it.
I also added an anchor tag for big screen due to the fact it would allow the user to know there is further content -->
<header>
<div class="row no-gutter header-section">
<div class="col-lg-12 bg-image1" title="Background Image"></div>
<!-- The header image was taken from https://unsplash.com/photos/vpOeXr5wmR4 -->
<div class="col-12 col-lg-12 col-md-12 profile-pic1">
<img class="profile-pic2 row" src="assets/images/me.jpg" alt="Profile Picture">
<h2>Project Manager / Trainee Full Stack Developer</h2>
<h3>Personal Portfolio
<br>
<br>
<a href="#about-title"><i class="fas fa-angle-double-down down-index"></i></a>
</h3>
</div>
</div>
</header>
<!-- The main section is where the content of the page is placed, i have used bootstrap positioning
to align the descriptions on the left while having an image on the right. -->
<div class="main-section">
<div id="about-title"></div>
<h1 class="title">About Me</h1>
<div class="row">
<div class="col-lg-8 aboutme">
<p>A versatile Project Manager professional with over 5 years’ experience with enterprise-level and consumer-focused technology solutions.
Champions supportive and collaborative team environments to effectively realise business objectives
with proven success in developing and implementing internal and consumer-facing IP.</p>
</div>
<div class="col-lg-4">
<!-- The about me image was taken from https://unsplash.com/photos/GDLdU80UDko -->
<img class="aboutme-img" src="assets/images/chess.jpg" alt="Mind of Chess">
</div>
</div>
<!-- The interests was built with the bootstrap column structure.
Throughout the section, depending on the screen that the website is being viewed in,
the layout of the interests would change, that is the reason why some of the content has been put twice in the same header.
When the screen is on the 21-inch display, it would show side by side, when the screen is mobile size,
the content would be displayed on top of each other. -->
<div class="row interests">
<div class="col-lg-12">
<h1 class="title">Interests</h1>
</div>
<div class="col-12 col-lg-7 col-md-7 left-travelhidden">
<h2>Travelling</h2>
<p>Exploring the world and seeing the different natural beauties that it provides,
experience something unfamiliar and leave with new skills or knowledge.</p>
</div>
<div class="col-12 col-lg-5 col-md-5">
<!-- The travelling image was taken from https://unsplash.com/photos/Y_LWT7HbpQc -->
<img class="plane-img" src="assets/images/travelling.jpg" alt="Plane">
</div>
<div class="col-12 col-lg-7 col-md-7 travel-info">
<h2>Travelling</h2>
<p>Exploring the world and seeing the different nature beauties that it provides, experience
something unfamiliar and leave with new skills or knowledge.</p>
</div>
<div class="col-12 col-lg-7 col-md-7 programming-info">
<h2>Programming</h2>
<p>The pleasure of making things that are useful to yourself as well as for other people.
One of the most satisfying aspects of the programming is seeing code you wrote deployed in a live environment.</p>
</div>
<div class="col-12 col-lg-5 col-md-5">
<!-- The programming image was taken from https://unsplash.com/photos/iacpoKgpBAM -->
<img class="laptop-img" src="assets/images/programming.jpg" alt="laptop">
</div>
<div class="col-12 col-lg-7 col-md-7 left-fitnesshidden">
<h2>Fitness</h2>
<p>Exercising and taking part in sporting activities is one of my biggest enjoyments.</p>
</div>
<div class="col-12 col-lg-5 col-md-5">
<!-- The fitness image was taken from https://unsplash.com/photos/Cv7rucR1bhQ -->
<img class="fitness-img" src="assets/images/sports.jpg" alt="fitness">
</div>
<div class="col-12 col-lg-7 col-md-7 fitness-info">
<h2>Fitness</h2>
<p>Exercising and taking part in sporting activities is one of my biggest enjoyments.</p>
</div>
<div class="col-12 col-lg-7 col-md-7 cooking-info">
<h2>Cooking</h2>
<p>I enjoy cooking, as I indulge cooking different cuisines, as well as making something out of different ingredients and spices.</p>
</div>
<div class="col-12 col-lg-5 col-md-5">
<!-- The cooking image was taken from https://unsplash.com/photos/qeWlYA2G_n4 -->
<img class="cooking-img" src="assets/images/cooking.jpg" alt="laptop">
</div>
</div>
</div>
<!-- The footer has the bootstrap column structure which would split the footer into 3 sections, (quick links / social media / CV).
The quick links would navigate users to the other pages of the site, again, with different styling on different devices used. -->
<footer>
<div class="footer-section">
<div class="row">
<div class="col-lg-4 col-md-3 quicklinks">
<h4>Quick Links</h4>
<div class="row">
<div class="col col-lg-6 col-md-12">
<a href="index.html">Home</a>
</div>
<div class="col col-lg-6 col-md-12">
<a href="journey.html">My Journey</a>
</div>
<div class="w-100"></div>
<div class="col col-lg-6 col-md-12">
<a href="portfolio.html">My Portfolio</a>
</div>
<div class="col col-lg-6 col-md-12">
<a href="connect.html">Connect</a>
</div>
</div>
</div>
<!-- Utilising font awesome for the icons to link users to my social media links -->
<div class="col-lg-4 col-md-6 connect">
<h4>Lets Connect</h4>
<div class="social-logos">
<a href="https://www.facebook.com/adnan.muhtadi/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/adnanmuhtadi/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com/adnanmuhtadi" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.youtube.com/channel/UCt64hh9dMACG43Vuzc5DrtQ?view_as=subscriber" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="https://www.linkedin.com/in/adnan-muhtadi-3588243b/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://www.snapchat.com/l/en-gb/" target="_blank"><i class="fab fa-snapchat"></i></a>
<a href="https://www.pinterest.co.uk/adnanmuhtadi/_saved/" target="_blank"><i class="fab fa-pinterest"></i></a>
<a href="https://github.com/adnanmuhtadi" target="_blank"><i class="fab fa-github"></i></a>
</div>
</div>
<!-- Being able to view and download my CV from this section of the footer. -->
<div class="col-lg-4 col-md-3 mycv">
<h4>Take a copy of my CV!</h4>
<a href="assets/cv/adnan-muhtadi-cv.pdf" target="_blank"><i class="fas fa-file cv" aria-hidden="true"></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>