/
home.html
185 lines (168 loc) · 6.87 KB
/
home.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!-- Make footer not be so spaced out -->
<!-- Need to write javascript class toggle for the modal. -->
<!-- The nav bar is sized differently from the rest of the pages. Idk why. -->
<!-- The title bars don't have margins on mobile/tablet. -->
<!-- overflow-y is auto so there is an unecessary scroll bar. -->
<!DOCTYPE html>
<html style="overflow-y: auto">
<head>
<meta charset="UTF-8">
<meta name="description" content="A website built with Bulma about Tony Sax">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Tony Sax">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TonySax.org - HTML with Bulma</title>
<link rel="shortcut icon" href="http://fontawesome.io/icon/snowflake-o/" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="bulma-master\css\bulma.css">
</head>
<body>
<!-- is-fullheight makes this section and its color the height of the computer screen. -->
<section id="homebackground" class="hero is-fullheight is-info">
<!-- Hero-head makes this always at the top. -->
<!-- Alternative color: rgba(70, 150, 130, 0.7) -->
<!-- Alternative color: rgba(0, 0, 0, 0.6) -->
<div class="hero-head" style="background-color: rgba(50, 115, 220, .8)">
<!-- Container makes this have 20px margins on the sides. It also gives it a max width. -->
<div class="container">
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<div class="nav-item">
TonySax.org
</div>
</div>
<!-- Hamburger Menu -->
<!-- The spans inside just make the bars for the menu icon. -->
<!-- The spans must be inside labels. -->
<label class="nav-toggle" for="nav-toggle-state">
<span></span>
<span></span>
<span></span>
</label>
<!-- This checkbox is hidden -->
<input type="checkbox" id="nav-toggle-state" />
<div class="nav-right nav-menu">
<!-- Create some margin/padding space from the left side -->
<a class="nav-item is-active" href="home.html">
Home
</a>
<a class="nav-item" href="about.html">
About
</a>
<!-- Maybe finish later.
<a class="nav-item" href="travel.html">
Travel
</a>
-->
<a class="nav-item" href="projects.html">
Projects
</a>
<a class="nav-item" href="photos16x9.html">
Photos
</a>
<!-- Here are some ideas to put in animations -->
<!-- Anything on that Dan guy's channel -->
<!-- Showing off animated progress bars from the Bulma css -->
<!--
<a class="nav-item" href="">
Animations
</a>
-->
<a class="nav-item" href="contact.html">
Contact
</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Modal to introduce user to my website. -->
<!-- Not currently being used -->
<div class="modal" id="homeModal">
<div class="modal-background"></div>
<div class="modal-content">
<article class="message">
<div class="message-header">
<p>This is a Welcome Message!</p>
</div>
<div class="message-body">
HEY! This is one of my first websites and is meant to be a demonstration of my coding skills.<br>
Unfortunately you can't close out of this window because I haven't learned javascript yet, so the rest of the site is inaccessible to you.*<br>
<br>
Come back later!<br>
<br>
* If you really want to visit the rest of the site. Try guessing the name of the pages in the url!
</div>
</article>
</div>
<button class="modal-close" data-toggle="modal" data-target="#frontModal"></button>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body is-inline-flex-mobile">
<div class="container has-text-centered">
<h1 class="title is-1" style="color: black; font-size: 10vmin">
TONYSAX.ORG
</h1>
</div>
</div>
<!-- The styling moves the card to the center. "is-paddingless" just moves stuff downwards. -->
<div class="hero-body" style="margin: 0 10vmin;">
<div class="container">
<div class="card" style="background-color: rgba(255,255,255, 0.7)">
<header class="card-header">
<p class="card-header-title">
Welcome!
</p>
<!-- No need for drop down right now.
<a class="card-header-icon">
<span class="icon">
<i class="fa fa-angle-down"></i>
</span>
</a>
-->
</header>
<div class="card-content">
<div class="content">
<p>Hey! Welcome to my website!</p>
<p>I built this website as showcase of my coding skills. Feel free to contact me and give me any advice you might have.
<br>
<!-- For making timestamps
<small>11:09 PM - 1 Jan 2017</small>
-->
</div>
</div>
<footer class="card-footer">
<!-- I don't know what to do here.
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
-->
</footer>
</div>
</div>
</div>
<!-- Try to change this so that no scrollbar is needed. -->
<!-- Do this by having the footer raise up when the mouse hovers over a box at the bottom. -->
<!-- Alternative background color: rgba(0, 0, 0, 0.3) -->
<div class="hero-foot" style="background-color: rgba(50, 115, 220, .8);">
<!-- Container class gives indentations of 20px on the sides -->
<div class="container">
<div class="tabs is-centered">
<ul style="color: lightgrey">
<li style="margin: 0px 25px 0px 25px">
Made with Bulma
</li>
<li style="margin: 0px 25px 0px 25px">
Website by Tony Sax
</li>
<li style="margin: 0px 25px 0px 25px">
The source code is licensed MIT.
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>