-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (110 loc) · 3.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Mark David Barranda">
<title>Mark Portfolio</title>
<link rel="shortcut icon" href="assets/images/ZSZ_5364.JPG">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alice|Open+Sans:400,300,700">
<link rel="stylesheet" href="assets/css/styles.css">
<!--[if lt IE 9]> <script src="assets/js/html5shiv.js"></script> <![endif]-->
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.page-wrapper {
flex: 1;
}
#head {
background-image: url('assets/images/pastelgreen.jpg');
background-size: cover;
background-position: center;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.img-circle {
border-radius: 50%;
max-width: 150px;
height: auto;
}
#logo {
color: white;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
#underfooter {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body class="home">
<div class="page-wrapper">
<header id="header">
<div id="head" class="parallax" parallax-speed="2">
<h1 id="logo" class="text-center">
<img class="img-circle" src="assets/images/ZSZ_5363.jpg" alt="Mark Barranda">
<span class="title">Mark David Barranda</span>
<span class="tagline">A millennial exploring the world of GIS and Data Science<br>
</h1>
</div>
<nav class="navbar navbar-default navbar-sticky">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="sidebar-left.html">About Me</a></li>
<li><a href="project.html">Portfolio</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<div class="container">
<div class="row section topspace">
<div class="col-md-12">
<p class="lead text-center text-muted">Hi! I'm a senior at <strong>UC Berkeley</strong> studying <strong>Data Science</strong> and <strong>GIS</strong>. Some of my career aspirations include Geospatial Data Analyst, Data Scientist, Analytics, Insights, ML Engineer, and all things that involve data. I'd love for you to check out some of my past projects.</p>
</div>
</div>
<div class="row section topspace">
<div class="col-md-12">
<p class="lead text-center text-muted">Meanwhile, check out this magnificent view of Jupiter and its moons from my Celestron telescope :0</p>
</div>
</div>
<div class="jupiterimage">
<p><img src="assets/images/planets.jpg" alt="Jupiter and its moons" style="max-width: 100%; height: auto;"></p>
</div>
</div>
</main>
</div>
<footer id="underfooter">
<div class="container">
<div class="row">
<div class="col-md-6 widget"></div>
<div class="col-md-6 widget">
<div class="widget-body">
<p class="text-right">
Copyright © 2024, Mark David Barranda<br>
</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="assets/js/template.js"></script>
</body>
</html>