-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 4.53 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Firefall - An ordinary life with a very different story. - 2020 Film.</title> <style>@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); html, body{width: 100%; height: 100%;}body{margin: 0; font-family: 'Roboto', sans-serif; color: white; background-image: url("img/background.jpg"); background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */}.main{text-align: center; position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%);}h2{letter-spacing: 1px; font-size: 16px; font-weight: 400; line-height: 0.5em;}h1{font-size: 72px; margin: 0;}footer{position: fixed; left: 0; bottom: 2em; width: 100%; color: white; text-align: center;}a{-moz-transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out; transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out; color: #ffffff; text-decoration: underline; width: 80%;}a:hover{text-decoration: underline; cursor: pointer;}.fade-in{-webkit-animation: fade-in 2s cubic-bezier(.39, .575, .565, 1.000) both; animation: fade-in 2s cubic-bezier(.39, .575, .565, 1.000) both}.slide-in-bck-center{-webkit-animation: slide-in-bck-center 2s cubic-bezier(.25, .46, .45, .94) both; animation: slide-in-bck-center .7s cubic-bezier(.25, .46, .45, .94) both}/* ---------------------------------------------- * Generated by Animista on 2019-6-9 10:25:17 * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ @-webkit-keyframes slide-in-bck-center{0%{-webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0}100%{-webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1}}@keyframes slide-in-bck-center{0%{-webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0}100%{-webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1}}/* ---------------------------------------------- * Generated by Animista on 2019-6-9 10:26:33 * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ @-webkit-keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}@keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}.slide-in-blurred-top{-webkit-animation: slide-in-blurred-top 3s cubic-bezier(.23, 1.000, .32, 1.000) alternate forwards; animation: slide-in-blurred-top 3s cubic-bezier(.23, 1.000, .32, 1.000) alternate forwards}/* ---------------------------------------------- * Generated by Animista on 2019-6-9 10:31:57 * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ @-webkit-keyframes slide-in-blurred-top{0%{-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(.2); transform: translateY(-1000px) scaleY(2.5) scaleX(.2); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0}100%{-webkit-transform: translateY(0) scaleY(1) scaleX(1); transform: translateY(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1}}@keyframes slide-in-blurred-top{0%{-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(.2); transform: translateY(-1000px) scaleY(2.5) scaleX(.2); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0}100%{-webkit-transform: translateY(0) scaleY(1) scaleX(1); transform: translateY(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1}}</style></head><body class="slide-in-blurred-top"> <img class="fade-in" src="img/watermark.png" style="width: 80px; padding-left: 1em; padding-top: 1em;"> <div class="main"> <div class="slide-in-bck-center"> <p>a bg media production</p><h1>Firefall</h1> <h2>writer and producer - <a href="https://www.instagram.com/tobi.rose/">tobi rose</a></h2> <h2>assistant producer - <a href="https://www.instagram.com/lilyroake/">lily roake</a></h2> <h2>executive producer - <a href="https://www.bjgreen.co.uk">ben green</a></h2> </div></div><footer> <p>photo by Joshua Newton on Unsplash - website created by <a href="https://www.bjgreen.co.uk">Ben Green</a></p></footer></body></html>