Skip to content

Commit 418eb34

Browse files
avocadojesusavocadojesus
committed
updated index.html with basic video player hero
1 parent 61a0ebd commit 418eb34

File tree

1 file changed

+146
-2
lines changed

1 file changed

+146
-2
lines changed

‎index.html

+146-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,152 @@
33
title: "Welcome to Code and Coffee, Long Beach"
44
---
55

6-
<h1>code + coffee / long beach</h1>
7-
<p>every saturday, from 10am to whenever, @ <a href="https://www.google.com/maps/place/236+Pine+Ave,+Long+Beach,+CA+90802/">MADE</a></p>
6+
<style>
7+
#hero {
8+
position: absolute;
9+
top:0;
10+
left:0;
11+
width:100%;
12+
height:calc(85% - 53px);
13+
background:black;
14+
z-index:0;
15+
}
16+
17+
nav.main-nav {
18+
top: 0;
19+
width: 100%;
20+
position:fixed;
21+
background:transparent;
22+
}
23+
#wrapper {
24+
margin-top:40%;
25+
}
26+
27+
#hero > .backdrop {
28+
background:rgba(0,0,0,0.5);
29+
position:absolute;
30+
z-index:2;
31+
top:0;
32+
left:0;
33+
width:100%;
34+
height:100%;
35+
}
36+
37+
#hero > video {
38+
width: 100%;
39+
height: auto;
40+
max-height: 100%;
41+
}
42+
43+
.videoContainer
44+
{
45+
position:absolute;
46+
height:100%;
47+
width:100%;
48+
overflow: hidden;
49+
}
50+
51+
.videoContainer video
52+
{
53+
min-width: 100%;
54+
min-height: 100%;
55+
}
56+
57+
#hero .header-content {
58+
position: absolute;
59+
top: calc(50% - 117px);
60+
width: 100%;
61+
text-align: center;
62+
color: white;
63+
z-index:3;
64+
}
65+
66+
#hero .header-content h1 {
67+
color:white;
68+
font-size:40px;
69+
}
70+
71+
#hero .header-content p {
72+
color:white;
73+
}
74+
75+
#hero .hero-logo {
76+
background: transparent;
77+
z-index: 1;
78+
font-size: 8px;
79+
display:inline-block;
80+
}
81+
82+
#hero .hero-logo pre {
83+
background: transparent;
84+
font-size: 2px;
85+
}
86+
87+
</style>
88+
89+
<div id='hero'>
90+
<div class='backdrop'></div>
91+
<div class='videoContainer'>
92+
<video autoplay='true' loop>
93+
<source src='https://s3-us-west-1.amazonaws.com/avojeez0-public/codeandcoffeehero.mp4' type='video/mp4'>
94+
</video>
95+
</div>
96+
<div class='header-content'>
97+
<div class='hero-logo'>
98+
<pre >
99+
x0c.
100+
.:OO.
101+
xk
102+
xk
103+
.lOk.
104+
'ox' 'oOOl.
105+
;xx:. .dkc.
106+
dNl 'XO.
107+
.Xd dW;
108+
.KO. lWo
109+
,kO:. ,oxdl:,'...
110+
.oOOxl;. .,codxkOOOd'
111+
.';ldxd' .;xOc
112+
,O0, :X;
113+
.00. cX;
114+
.00. 'xKc
115+
.o0x' .,lk0:
116+
.lkxc. .;oddddl:'
117+
xO. 'o0Oo,.
118+
'N; .kOc.
119+
xO' kd
120+
oXx. kx
121+
.ckdc',OO:
122+
'lxl.;x:
123+
.oxxxkkkkkkkOOOOOOO0000000000KKKKKKKKKKKKKKKK00'
124+
,XMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMl ':cc:,.
125+
;NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMOlOXMMMWMMWKd.
126+
cWMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMWk:....;oKMWk.
127+
lMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMK, .OMMO
128+
oMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd cMMX
129+
dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM0. kMM0
130+
dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMXd,. .'cOMW0,
131+
dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNWMMNKKNMMMXc
132+
dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMc.:oxkkxoc,.
133+
dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM;
134+
oMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM;
135+
:WMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMW'
136+
.KMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMK.
137+
xMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd
138+
,WMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN,
139+
lWMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNc
140+
cXWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWx.
141+
.......................................
142+
.:dOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOk;
143+
.lKMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNc
144+
'ckXWMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMWNO,
145+
.:xKXXXXNNNNNNNNNWWWWWWWWWWWMMMMMMMMMMMMMMMMMMMMWWWWNXK0kdc'
146+
</pre>
147+
</div>
148+
<h1>code + coffee / long beach</h1>
149+
<p>every saturday, from 10am to whenever, @ <a href="https://www.google.com/maps/place/236+Pine+Ave,+Long+Beach,+CA+90802/">MADE</a></p>
150+
</div>
151+
</div>
8152

9153
{% include post-list.html %}
10154
{% include member-list.html %}

0 commit comments

Comments
 (0)