-
Notifications
You must be signed in to change notification settings - Fork 1
/
connect.html
160 lines (151 loc) · 8.43 KB
/
connect.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
<!-- 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 Connect</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 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 col-sm-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 active 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.
There is a small line of text which would display a mini header (catchphrase).
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">
<!-- The header image was taken from https://unsplash.com/photos/oIpJ8koLx_s -->
<div class="col-12 col-lg-12 bg-image4" title="Background Image"></div>
<div class="connect-title">
<h1>There is no such thing as<br>
a silly question!</h1>
</div>
<a href="#connect-title"><i class="fas fa-angle-double-down down"></i></a>
</div>
</header>
<!-- The main section is where the main content of the page is placed, i have just placed and header and three questions
which would send users to the contact form. -->
<div class="main-section">
<div id="connect-title"></div>
<h1 class="title">A Few Ways To Reach Out!</h1>
<div class="main-content questions">
Looking to ask a question?<br>
Looking to know more about me?<br>
or even looking for an idea to be developed?
</div>
</div>
<!-- Created the form using columns to perfectly align the labels with the text boxes.
This would then have a submit button at the end of the form.
The button is currently not active or linked to anything due to the fact it is only for display for now. -->
<div class="connect-form">
<div class="center-form">
<h2 id="contactlabel">Contact Form</h2>
<!-- utilised W3School to assist with the remember how the structure of the form https://www.w3schools.com/html/html_forms.asp -->
<form action="#" name="connect-form">
<div class="form-group row">
<div class="col-md-3 col-sm-2 col-form-label labelatt">
<label for="user-fullname">Full Name:</label>
</div>
<div class="col-md-9 col-sm-10">
<input type="text" class="form-control" id="user-fullname" required>
</div>
</div>
<div class="form-group row">
<div class="col-md-3 col-sm-2 col-form-label labelatt">
<label for="user-email">Email Address:</label>
</div>
<div class="col-md-9 col-sm-10">
<input type="email" class="form-control" id="user-email" required>
</div>
</div>
<div class="form-group row">
<div class="col-md-3 col-sm-2 col-form-label labelatt">
<label for="user-number">Number:</label>
</div>
<div class="col-md-9 col-sm-10">
<input type="tel" class="form-control" id="user-number">
</div>
</div>
<div class="form-group row">
<div class="col-md-3 col-sm-2 col-form-label labelatt">
<label for="user-message">Message:</label>
</div>
<div class="col-md-9 col-sm-10">
<textarea class="form-control" id="user-message" rows="3" required></textarea>
</div>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</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>