-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
143 lines (130 loc) · 7.46 KB
/
about.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
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
// $(function(){
// $("#navbar").load("navbar.html");
// });
// </script>
</head>
<body>
<!-- <nav class="uk-navbar-container uk-navbar-default" uk-navbar="dropbar: true;" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; bottom: #bottom"> -->
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-inactive: uk-navbar-transparent uk-light; top: 200">
<nav class="uk-position-top uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li><a href="home.html">Home</a></li>
<li><a href="photos.html">Photos</a></li>
<li class="uk-active"><a href="about.html">About</a></li>
</ul>
</div>
</nav>
</div>
<div class="uk-height-viewport uk-background-cover uk-overflow-hidden uk-flex uk-flex-top" style="background-image: url('images/about.jpeg');">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical uk-flex-inline">
<div class="uk-animation-slide-left-medium uk-light">
<h1 class="uk-text-center">ezra</h1>
</div>
<div class="uk-animation-slide-bottom-medium uk-light">
<h1 class="uk-text-center">bernstein</h1>
</div>
<div class="uk-animation-slide-right uk-dark">
<h1 class="uk-text-center">.com</h1>
</div>
</div>
</div>
<div class="uk-position-bottom-center uk-position-large">
<a href="#target" class="uk-icon-button" uk-icon="chevron-down" uk-scroll></a>
</div>
<div class="uk-section uk-section-large uk-section-default" id="target">
<div class="uk-container">
<div class="uk-grid-divider uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>
<div>
<h1 class="uk-heading-small uk-text-center" uk-scrollspy="cls:uk-animation-fade uk-animation-slide-left-medium; delay: 250">About Me</h1>
</div>
<div class="uk-width-expand">
<p class="uk-position-relative uk-position-center-left" uk-scrollspy="cls:uk-animation-fade uk-animation-slide-right-medium; delay: 250">Hi! My name is Ezra Bernstein, and I am a student developer interested in STEM, especially computer science, astronomy, and physics.
I enjoy music, sports, and photography as well.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-large uk-section-secondary">
<div class="uk-container">
<div class="uk-grid-divider uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-last@s uk-flex-first@m">
<p class="uk-text-right" uk-scrollspy="cls:uk-animation-fade uk-animation-slide-left-medium; delay: 250">This site was created using UIKit, and is hosted on Google Cloud Storage. I wrote the entire site myself.
All photos seen on this site were taken by me, although some are edited.
Further information about its construction can be viewed on my GitHub page (link below).
When I started, I had some experience with creating websites, but I was new to UIKit and Google hosting.</p>
</div>
<div>
<h1 class="uk-heading-small uk-position-center-left uk-position-relative" uk-scrollspy="cls:uk-animation-fade uk-animation-slide-right-medium; delay: 250">About This Site</h1>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-large uk-section-default">
<div class="uk-container">
<div class="uk-grid-divider uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>
<div>
<h1 class="uk-heading-small uk-text-center" uk-scrollspy="cls:uk-animation-fade uk-animation-slide-left-medium; delay: 250">Links to My Platforms</h1>
</div>
<div class="uk-width-expand">
<p class="uk-position-center-left uk-position-relative" uk-scrollspy="cls:uk-animation-fade uk-animation-slide-right-medium; delay: 250">Here are links to my platforms, both social and techy. Please note that the
email is an image to avoid bot spam.
</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-small uk-section-default">
<div class="uk-container">
<div class="uk-grid-match uk-child-width-expand@m" uk-grid uk-scrollspy="cls:uk-animation-fade uk-animation-slide-bottom-medium; target: .uk-card; delay: 150">
<div>
<div class="uk-card uk-card-secondary uk-card-body">
<a href="https://github.com/Ezra-Bernstein"><u><h3 class="uk-card-title">GitHub</h3></u></a>
<p>Ezra-Bernstein</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-body">
<a href="https://devpost.com/Ezra-Bernstein"><u><h3 class="uk-card-title">Devpost</h3></u></a>
<p>Ezra-Bernstein</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-body">
<a href="https://twitter.com/ezra_bernstein"><u><h3 class="uk-card-title">Twitter</h3></u></a>
<p>@ezra_bernstein</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-body">
<a href=#><u><h3 class="uk-card-title">Email</h3></u></a>
<img src="images/email.png">
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-body">
<a href="https://discordapp.com"><u><h3 class="uk-card-title">Discord</h3></u></a>
<p>Ezra#0110</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted uk-padding-large">
<h5>Ezra Bernstein Ⓒ 2020</h5>
</div>
</body>
</html>