-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (166 loc) · 8.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--bootstrap-4 meta tag to ensure responsiveness-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--meta data for search engine optimization-->
<meta name="description" content="Abdullah Ahmad Salman - Software Engineer (Full Stack Web Developer)">
<meta name="keywords"
content="portfolio, website, full stack, web development, udacity, nanodegree">
<meta name="author" content="Abdullah A. Salman">
<!--title of the page-->
<title>Portfolio - Abdullah A. Salman</title>
<!-- favicons - generated from https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/site.webmanifest">
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#808080">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Raleway:200,500,700" rel="stylesheet">
<!--css styles (bootstrap-4 & customized)-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<!--scripts (jquery / javascript dependencies of bootstrap-4)-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--main bootstap container to contain all the contents and provide responsiveness-->
<div class="container">
<!--main header to contain the logo and title etc-->
<header>
<div class="row">
<div class="col-12 col-xl-6 col-lg-4 col-md-3 col-sm-3 mt-4">
<!--responsive logo-->
<img class="img-fluid header-logo img-hover" src="img/logo-320.png" alt="Logo - Abdullah">
</div>
<div class="col-12 col-xl-6 col-lg-8 col-md-9 col-sm-9 mt-4 header-text">
<!--title, name, about me buttons-->
<h1 class="header-title text-thin">Abdullah A. Salman</h1>
<h4>Software Engineer</h4>
<button type="button" class="btn btn-outline-secondary" data-toggle="modal"
data-target="#AboutMe">About Me
</button>
</div>
</div>
<!--horizontal rule-->
<div class="row">
<div class="col-12">
<hr>
</div>
</div>
</header>
<!--Cover image-->
<div class="row">
<div class="col-12 mx-auto my-auto">
<img class="img-fluid" src="img/cover.jpg" alt="cover picture for the website">
</div>
</div>
<!--main content of the page i.e. project listing-->
<main>
<section class="row mt-4 mb-4">
<header class="col-12 mt-2 mb-2">
<h2 class="text-muted">My Projects</h2>
</header>
<article class="col-md-4 col-sm-6">
<img class="img-fluid rounded img-thumbnail img-hover" data-toggle="modal"
data-target="#Project-01"
src="img/project-01.png" alt="My Favourite Movies Website">
<h3 class="project-title">My Favourite Movies Website</h3>
<p class="project-details">View details on
<a href="https://github.com/abdullah-22/My-Favourite-Movies-Trailer-Website" target="_blank">Github</a>
</p>
</article>
<article class="col-md-4 col-sm-6">
<img class="img-fluid rounded img-thumbnail img-hover" data-toggle="modal"
data-target="#Project-02"
src="img/project-01.png" alt="Picture of project 02">
<h3 class="project-title">Project 2</h3>
<p class="project-details">View details on
<a href="https://github.com/abdullah-22/" target="_blank">Github</a>
</p>
</article>
<article class="col-md-4 col-sm-6">
<img class="img-fluid rounded img-thumbnail img-hover" data-toggle="modal"
data-target="#Project-03"
src="img/project-01.png" alt="Picture of project 03">
<h3 class="project-title">Project 3</h3>
<p class="project-details">View details on
<a href="https://github.com/abdullah-22/" target="_blank">Github</a>
</p>
</article>
<article class="col-md-4 col-sm-6">
<img class="img-fluid rounded img-thumbnail img-hover" data-toggle="modal"
data-target="#Project-04"
src="img/project-01.png" alt="Picture of project 04">
<h3 class="project-title">Project 4</h3>
<p class="project-details">View details on
<a href="https://github.com/abdullah-22/" target="_blank">Github</a>
</p>
</article>
<article class="col-md-4 col-sm-6">
<img class="img-fluid rounded img-thumbnail img-hover" data-toggle="modal"
data-target="#Project-05"
src="img/project-01.png" alt="Picture of project 05">
<h3 class="project-title">Project 5</h3>
<p class="project-details">View details on
<a href="https://github.com/abdullah-22/" target="_blank">Github</a>
</p>
</article>
<article class="col-md-4 col-sm-6">
<img class="img-fluid rounded img-thumbnail img-hover" data-toggle="modal"
data-target="#Project-06"
src="img/project-01.png" alt="Picture of project 06">
<h3 class="project-title">Project 6</h3>
<p class="project-details">View details on
<a href="https://github.com/abdullah-22/" target="_blank">Github</a>
</p>
</article>
</section>
</main>
<!-- footer-->
<footer>
<div class="row">
<div class="col-12 footer-content">
<br>Copyright © 2018 Abdullah A. Salman --- Licensed under
<a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>
<br>• • •
<br>Some of the media (images, links, videos) used in this website may subject to copyrights of the respective owners.
<br>These are used for educational purpose only and not for any commercial use.
</div>
</div>
</footer>
</div>
<!--Modal pop out information when clicking the project pictures-->
<div class="modal fade" id="AboutMe" role="dialog">
<div class="modal-dialog">
<!-- Modal content About me-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Abdullah A. Salman</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="img-responsive img-rounded img-thumbnail" src="img/profile-picture.jpg"
alt="profile picture">
<div class="modal-text mt-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure fuga ducimus ad harum inventore minus,
corrupti ipsa beatae tempora corporis eligendi ut laboriosam tempore nemo,
quae excepturi veritatis, tenetur eaque.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>