meliurwen
7 years ago
parent
4b17b606c8
commit
5f8d88fb5a
Binary file not shown.
@ -0,0 +1,127 @@ |
||||
@font-face { |
||||
font-family: 'Brotherhood-Script'; |
||||
src: url('../fonts/Brotherhood_Script.ttf'); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Wishing-Well'; |
||||
src: url('../fonts/Wishing_Well.otf'); |
||||
} |
||||
|
||||
body { |
||||
margin: 0; |
||||
padding: 0; |
||||
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */ |
||||
background: #333; |
||||
background-attachment: fixed; |
||||
background-size: cover; |
||||
} |
||||
|
||||
|
||||
/* The only rule that matters */ |
||||
|
||||
#video-background { |
||||
/* making the video fullscreen */ |
||||
position: fixed; |
||||
right: 0; |
||||
bottom: 0; |
||||
min-width: 100%; |
||||
min-height: 100%; |
||||
width: auto; |
||||
height: auto; |
||||
z-index: -100; |
||||
overflow: hidden; |
||||
/*Blur Effect on the background video*/ |
||||
-webkit-filter: blur(5px); |
||||
-moz-filter: blur(5px); |
||||
-o-filter: blur(5px); |
||||
-ms-filter: blur(5px); |
||||
filter: blur(5px); |
||||
} |
||||
|
||||
|
||||
/* These just style the content */ |
||||
|
||||
article { |
||||
/* just a fancy border */ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
/* border: 10px solid rgba(255, 255, 255, 0.5); |
||||
margin: 10px; |
||||
*/ |
||||
} |
||||
|
||||
h1 { |
||||
position: absolute; |
||||
top: 15%; |
||||
width: 100%; |
||||
letter-spacing: 3px; |
||||
color: #fff; |
||||
text-align: center; |
||||
font-family: 'Brotherhood-Script', 'Jenna Sue', 'Latin Modern Mono'; |
||||
font-weight: normal; |
||||
font-size: 150px; |
||||
} |
||||
|
||||
h1 span { |
||||
/* font-family: sans-serif; |
||||
letter-spacing: 0; |
||||
font-weight: 300; |
||||
font-size: 16px; |
||||
line-height: 24px; |
||||
*/ |
||||
font-family: 'Wishing-Well', 'Daniel', 'Purisa'; |
||||
letter-spacing: 0; |
||||
font-weight: 300; |
||||
font-size: 32px; |
||||
line-height: 24px; |
||||
} |
||||
|
||||
h1 span a { |
||||
color: #fff; |
||||
} |
||||
|
||||
#tape { |
||||
font-family: 'Purisa', 'Latin Modern Mono', 'Arial'; |
||||
font-size: 11px; |
||||
line-height: 100%; |
||||
color: #fff; |
||||
opacity: 0; |
||||
transition: 1s; |
||||
} |
||||
|
||||
#tapeImage { |
||||
opacity: 0; |
||||
transition: 1s; |
||||
} |
||||
|
||||
#dummyTape:hover #tape { |
||||
opacity: 1; |
||||
} |
||||
|
||||
#dummyTape:hover #tapeImage { |
||||
opacity: 1; |
||||
} |
||||
|
||||
#songName { |
||||
font-family: 'Purisa', 'Latin Modern Mono', 'Arial'; |
||||
font-size: 11px; |
||||
line-height: 100%; |
||||
color: #fff; |
||||
opacity: 0; |
||||
transition: 1s; |
||||
} |
||||
|
||||
#songName, |
||||
#tape a { |
||||
text-decoration: none; |
||||
color: white; |
||||
opacity: 0; |
||||
} |
||||
|
||||
#dummy:hover #songName { |
||||
opacity: 1; |
||||
} |
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,57 @@ |
||||
<html> |
||||
|
||||
<head> |
||||
<!-- Basics --> |
||||
<meta charset="utf-8"> |
||||
<meta name="robots" content="index,follow"> |
||||
|
||||
<title>Meliurwen's Personal Page</title> |
||||
<link rel="stylesheet" type="text/css" href="css/theme.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<!-- Content --> |
||||
<article> |
||||
<h1>Meliurwen N.<br /> <span id="subtitle">Available on <a href="https://github.com/meliurwen" target="_blank">Github</a>, coding for fun and uni projects.</span></h1> |
||||
</article> |
||||
|
||||
<!-- Player Audio --> |
||||
<div style="display:table;position: absolute; right: 0; bottom: 0;margin:10px;" id="dummy"> |
||||
<div id="songName" style="display:table-cell;vertical-align:middle">Clau M.& Nect<br />House of Dreams</div> |
||||
<img style="float:right" src="img/play.png" name="Bottom-1" width="30" height="30" border="0" onclick="playSound(this, 'audio/Clau _M_Nect_-_House_Of_Dreams.mp3');diffImage(this);" /> |
||||
</div> |
||||
|
||||
<!-- Tape Credits --> |
||||
<div style="display:table;position: absolute; left: 0; bottom: 0;margin:10px;" id="dummyTape"> |
||||
<a href="https://vimeo.com/193542635"><img id="tapeImage" target="_blank" style="float:left" src="img/tape.png" name="Bottom-1" width="30" height="30" border="0"></a> |
||||
<div id="tape" style=";display:table-cell;vertical-align:middle"><a id="tape" href="https://vimeo.com/193542635" target="_blank">Beeple<br>BEAMMM (loop)</a></div> |
||||
</div> |
||||
|
||||
<!-- Video is muted & autoplays --> |
||||
<video autoplay loop id="video-background" muted plays-inline poster="img/beammm_thumbnail.jpg"> |
||||
<source src="video/beammm_loop.mp4"> |
||||
</video> |
||||
<script> |
||||
function playSound(el, soundfile) { |
||||
if (el.mp3) { |
||||
if (el.mp3.paused) el.mp3.play(); |
||||
else el.mp3.pause(); |
||||
} else { |
||||
el.mp3 = new Audio(soundfile); |
||||
el.mp3.play(); |
||||
} |
||||
} |
||||
|
||||
function diffImage(img) { |
||||
if (img.src.match(/pause/)) { |
||||
console.log('play'); |
||||
img.src = "img/play.png"; |
||||
} else { |
||||
console.log('pause'); |
||||
img.src = "img/pause.png"; |
||||
} |
||||
} |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
Binary file not shown.
Loading…
Reference in new issue