-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
135 lines (129 loc) · 6.47 KB
/
contact.html
File metadata and controls
135 lines (129 loc) · 6.47 KB
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS, My own CSS, and Fontawesome icon links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Calum Logan - Contact</title>
</head>
<!--Standard navbar header-->
<body>
<nav class="header navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Calum Logan</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbarlinks navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mycv.html">My CV</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact me <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
<!--Standard navbar header-->
<div class="contactcontent">
<div class="container">
<!--Add background to make everything come together nicely-->
<div class="contact-info-bg">
<div class="row">
<h1 class="introtitle">You can find me on...</h1>
</div>
<!--2 rows of links-->
<div class="row">
<div class="col-4">
<!--Links consist of a text card including a button the user can click on-->
<div class="contactcard card text-white bg-primary my-5 mx">
<div class="card-header"><b>Social</b><i class="fab fa-facebook-messenger contacticonr1"></i></div>
<div class="card-body">
<div class="card-title"><a href="https://www.facebook.com" class="btn btn-outline-dark contact-button-text">Facebook</a></div>
<div class="card-text">I'll be quickest to respond to you on facebook messenger</div>
</div>
</div>
</div>
<div class="col-4">
<div class="contactcard card text-white bg-info my-5">
<div class="card-header"><b>Social</b><i class="fab fa-twitter-square contacticonr1"></i></div>
<div class="card-body">
<div class="card-title "><a href="https://www.twitter.com" class="btn btn-outline-light contact-button-text">Twitter</a></div>
<div class="card-text">I don't really use twitter for personal communication, but you can find me here</div>
</div>
</div>
</div>
<div class="col-4">
<div class="contactcard card text-white bg-danger my-5">
<div class="card-header"><b>Social</b><i class="fab fa-instagram contacticonr1"></i></div>
<div class="card-body">
<div class="card-title "><a href="https://www.instagram.com" class="btn btn-outline-success contact-button-text">Instagram</a></div>
<div class="card-text">Similar to twitter, but look at all my cool photos!</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="contactcard card text-white bg-dark my-5">
<div class="card-header"><b>Professional</b><i class="fab fa-github contacticonr2"></i></div>
<div class="card-body">
<div class="card-title "><a href="https://www.github.com" class="btn btn-outline-primary contact-button-text">Github</a></div>
<div class="card-text">You can take a look at my Github repositories here</div>
</div>
</div>
</div>
<div class="col-4">
<div class="contactcard card text-dark bg-light my-5">
<div class="card-header"><b>Professional</b><i class="fab fa-linkedin contacticonr2"></i></div>
<div class="card-body">
<div class="card-title "><a href="https://www.linkedin.com" class="btn btn-outline-info contact-button-text">LinkedIn</a></div>
<div class="card-text">If you're interested in my professional experience, you can view my LinkedIn profile</div>
</div>
</div>
</div>
<div class="col-4">
<div class="contactcard card text-white bg-success my-5">
<div class="card-header"><b>Professional</b><i class="far fa-envelope contacticonr2"></i></div>
<div class="card-body">
<div class="card-title "><a href="https://www.gmail.com" class="btn btn-outline-danger contact-button-text">Email</a></div>
<div class="card-text">If you have any other enquiries, you can send me an email at calumalogan@gmail.com</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Standard navbar footer-->
<nav class="footer navbar navbar-expand-lg navbar-dark fixed-bottom">
<div class="footext">Copyright © 2018 Calum Logan - No rights reserved, take anything you'd like.</div>
<ul class="navbarlinks navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com"><i class="fab fa-facebook-square fa-3x"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.twitter.com"><i class="fab fa-twitter-square fa-3x"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com"><i class="fab fa-instagram fa-3x"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com"><i class="fab fa-linkedin fa-3x"></i></a>
</li>
</ul>
</nav>
</body>
</html>