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