master
Jan-Paul Bultmann 4 years ago
commit 356bb27510

@ -0,0 +1,85 @@
.page {
display: flex;
flex-direction: column;
height: 100vh;
}
.showreel {
position: fixed;
z-index: -1;
object-fit: cover;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
opacity: 0;
}
.loaded .showreel {
opacity: 1;
transition: opacity 2s ease-in-out;
}
.logo {
fill: #000;
}
.loaded .logo {
fill: #fff;
transition: fill 1s ease-in-out
}
.nav-menu {
margin-right: 25%;
display: flex;
flex-direction: row;
justify-content: flex-end ;
align-items: center;
flex: 1 1 auto;
}
.nav-menu-list {
display: flex;
flex-direction: column;
align-items: flex-end;
list-style-type: none;
margin-block-start: unset; margin-block-end: unset; margin-inline-start: unset; margin-inline-end: unset; padding-inline-start: unset; }
.nav-menu-item {
font-family: GloberBook, sans-serif;
font-size: 2vh;
text-transform: uppercase;
letter-spacing: 0.07vh;
font-size: 5vh;
margin: 0.5vh;
}
.nav-menu-item a {
text-decoration: none;
}
.nav-menu-item:hover a, .nav-menu-item a:focus {
outline: 0;
color: #FFF;
background-color: #000;
}
.nav-menu-item .menu-name {
color: #000;
background-color: #FFF;
padding: 0 0.3vh 0 0.3vh;
}
.nav-menu-item:hover .menu-name, .nav-menu-item a:focus .menu-name {
color: #FFF;
background-color: #000;
}
.nav-menu-item .menu-flavor {
color: transparent;
padding: 0 0 0 0.3vh;
}
.nav-menu-item:hover .menu-flavor, .nav-menu-item a:focus .menu-flavor {
color: #FFF;
}

@ -0,0 +1,130 @@
/**
* @license
* MyFonts Webfont Build ID 3236824, 2016-06-22T13:27:46-0400
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: GloberBlack by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/black/
*
* Webfont: GloberBook by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/book/
*
* Webfont: GloberBold by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/bold/
*
* Webfont: GloberBoldItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/bold-italic/
*
* Webfont: GloberBlackItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/black-italic/
*
* Webfont: GloberBookItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/book-italic/
*
* Webfont: GloberHeavy by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/heavy/
*
* Webfont: GloberHeavyItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/heavy-italic/
*
* Webfont: GloberLight by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/light/
*
* Webfont: GloberRegular by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/regular/
*
* Webfont: GloberLightItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/light-italic/
*
* Webfont: GloberRegularItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/regular-italic/
*
* Webfont: GloberSemiBold by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/semi-bold/
*
* Webfont: GloberSemiBoldItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/semi-bold-italic/
*
* Webfont: GloberThin by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/thin/
*
* Webfont: GloberThinItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/thin-italic/
*
* Webfont: GloberxBoldItalic by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/extra-bold-italic/
*
* Webfont: GloberxBold by Fontfabric
* URL: http://www.myfonts.com/fonts/font-fabric/glober/extra-bold/
*
*
* License: http://www.myfonts.com/viewlicense?type=web&buildid=3236824
* Licensed pageviews: 20,000
* Webfonts copyright: Copyright (c) 2014 by Fontfabric LLC. All rights reserved.
*
* © 2016 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3163d8");
@font-face {font-family: 'GloberBlack';src: url('webfonts/3163D8_0_0.eot');src: url('webfonts/3163D8_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_0_0.woff2') format('woff2'),url('webfonts/3163D8_0_0.woff') format('woff'),url('webfonts/3163D8_0_0.ttf') format('truetype');}
@font-face {font-family: 'GloberBook';src: url('webfonts/3163D8_1_0.eot');src: url('webfonts/3163D8_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_1_0.woff2') format('woff2'),url('webfonts/3163D8_1_0.woff') format('woff'),url('webfonts/3163D8_1_0.ttf') format('truetype');}
@font-face {font-family: 'GloberBold';src: url('webfonts/3163D8_2_0.eot');src: url('webfonts/3163D8_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_2_0.woff2') format('woff2'),url('webfonts/3163D8_2_0.woff') format('woff'),url('webfonts/3163D8_2_0.ttf') format('truetype');}
@font-face {font-family: 'GloberBoldItalic';src: url('webfonts/3163D8_3_0.eot');src: url('webfonts/3163D8_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_3_0.woff2') format('woff2'),url('webfonts/3163D8_3_0.woff') format('woff'),url('webfonts/3163D8_3_0.ttf') format('truetype');}
@font-face {font-family: 'GloberBlackItalic';src: url('webfonts/3163D8_4_0.eot');src: url('webfonts/3163D8_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_4_0.woff2') format('woff2'),url('webfonts/3163D8_4_0.woff') format('woff'),url('webfonts/3163D8_4_0.ttf') format('truetype');}
@font-face {font-family: 'GloberBookItalic';src: url('webfonts/3163D8_5_0.eot');src: url('webfonts/3163D8_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_5_0.woff2') format('woff2'),url('webfonts/3163D8_5_0.woff') format('woff'),url('webfonts/3163D8_5_0.ttf') format('truetype');}
@font-face {font-family: 'GloberHeavy';src: url('webfonts/3163D8_6_0.eot');src: url('webfonts/3163D8_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_6_0.woff2') format('woff2'),url('webfonts/3163D8_6_0.woff') format('woff'),url('webfonts/3163D8_6_0.ttf') format('truetype');}
@font-face {font-family: 'GloberHeavyItalic';src: url('webfonts/3163D8_7_0.eot');src: url('webfonts/3163D8_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_7_0.woff2') format('woff2'),url('webfonts/3163D8_7_0.woff') format('woff'),url('webfonts/3163D8_7_0.ttf') format('truetype');}
@font-face {font-family: 'GloberLight';src: url('webfonts/3163D8_8_0.eot');src: url('webfonts/3163D8_8_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_8_0.woff2') format('woff2'),url('webfonts/3163D8_8_0.woff') format('woff'),url('webfonts/3163D8_8_0.ttf') format('truetype');}
@font-face {font-family: 'GloberRegular';src: url('webfonts/3163D8_9_0.eot');src: url('webfonts/3163D8_9_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_9_0.woff2') format('woff2'),url('webfonts/3163D8_9_0.woff') format('woff'),url('webfonts/3163D8_9_0.ttf') format('truetype');}
@font-face {font-family: 'GloberLightItalic';src: url('webfonts/3163D8_A_0.eot');src: url('webfonts/3163D8_A_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_A_0.woff2') format('woff2'),url('webfonts/3163D8_A_0.woff') format('woff'),url('webfonts/3163D8_A_0.ttf') format('truetype');}
@font-face {font-family: 'GloberRegularItalic';src: url('webfonts/3163D8_B_0.eot');src: url('webfonts/3163D8_B_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_B_0.woff2') format('woff2'),url('webfonts/3163D8_B_0.woff') format('woff'),url('webfonts/3163D8_B_0.ttf') format('truetype');}
@font-face {font-family: 'GloberSemiBold';src: url('webfonts/3163D8_C_0.eot');src: url('webfonts/3163D8_C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_C_0.woff2') format('woff2'),url('webfonts/3163D8_C_0.woff') format('woff'),url('webfonts/3163D8_C_0.ttf') format('truetype');}
@font-face {font-family: 'GloberSemiBoldItalic';src: url('webfonts/3163D8_D_0.eot');src: url('webfonts/3163D8_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_D_0.woff2') format('woff2'),url('webfonts/3163D8_D_0.woff') format('woff'),url('webfonts/3163D8_D_0.ttf') format('truetype');}
@font-face {font-family: 'GloberThin';src: url('webfonts/3163D8_E_0.eot');src: url('webfonts/3163D8_E_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_E_0.woff2') format('woff2'),url('webfonts/3163D8_E_0.woff') format('woff'),url('webfonts/3163D8_E_0.ttf') format('truetype');}
@font-face {font-family: 'GloberThinItalic';src: url('webfonts/3163D8_F_0.eot');src: url('webfonts/3163D8_F_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_F_0.woff2') format('woff2'),url('webfonts/3163D8_F_0.woff') format('woff'),url('webfonts/3163D8_F_0.ttf') format('truetype');}
@font-face {font-family: 'GloberxBoldItalic';src: url('webfonts/3163D8_10_0.eot');src: url('webfonts/3163D8_10_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_10_0.woff2') format('woff2'),url('webfonts/3163D8_10_0.woff') format('woff'),url('webfonts/3163D8_10_0.ttf') format('truetype');}
@font-face {font-family: 'GloberxBold';src: url('webfonts/3163D8_11_0.eot');src: url('webfonts/3163D8_11_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3163D8_11_0.woff2') format('woff2'),url('webfonts/3163D8_11_0.woff') format('woff'),url('webfonts/3163D8_11_0.ttf') format('truetype');}

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>bultmann. DESIGN WORKS</title>
<link href="fonts.css" rel="stylesheet">
<link href="big_lebowsky.css" rel="stylesheet">
</head>
<body class="page">
<video playsinline muted loop preload class="showreel"
oncanplaythrough="event.preventDefault(); document.body.classList.add('loaded'); if(!window.stalled){event.target.play()}; ; console.log('CANPLAY!')"
onstalled="event.preventDefault();event.target.pause(); window.stalled = true; console.log('STALLED!')">
<source src="showreel.mp4" type="video/mp4">
</video>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540.1 182.61" class="logo">
<title>bultmann logo</title>
<path class="logo bultmann" d="M532.05,86.73c-5.63,0-7.55,3.16-7.55,7.42s1.92,7.14,7.55,7.14,7.55-3,7.55-7.14-1.92-7.42-7.55-7.42m-60.35,13.6V42.11c0-6.59,5.22-10.16,11.12-10.16,6.74,0,10.17,3.7,10.17,10.43v58h12.49V40.19c0-11.68-6.59-19.23-18.4-19.23-9.75,0-14.69,5.49-16.06,8.65v-8.1H459.07v78.82Zm-69.05,0V42.11c0-6.59,5.22-10.16,11.12-10.16,6.73,0,10.16,3.7,10.16,10.43v58h12.5V40.19C436.43,28.51,429.84,21,418,21c-9.75,0-14.69,5.49-16.06,8.65v-8.1H390v78.82Zm-82.06-54.1H333V41.42c0-6.73,3-10.16,11-10.16s11,3.43,11,10.16v11.4L336,59c-11,3.7-16.06,9.47-16.06,19.22v4c0,12,6.72,19,19.77,19,9.61,0,14.14-4.94,15.51-8.79v8h12.23V41.42c0-13.46-8-21.28-23.48-21.28S320.59,28,320.59,41.42Zm11.67,32.13c0-5.22,2.2-8.24,8.93-10.44l13.73-4.25V80c0,6-3.3,10.84-12.22,10.84-7.28,0-10.44-3.57-10.44-9.47Zm-99.14,22V42.11C233.12,35.52,238.2,32,244,32c6.73,0,10.16,3.7,10.16,10.43v58h12.5V42.38c0-6.86,5.08-10.43,10.84-10.43,6.73,0,10.16,3.7,10.16,10.43v58h12.5V40.19c0-11.68-6.59-19.23-18.26-19.23-10,0-15.24,5.9-17,10-2.61-6.32-8.24-10-16.48-10-9.88,0-14.55,5.49-15.92,8.65v-8.1H220.49v78.82ZM167.33,32.22h8.24V81c0,12.22,5.63,19.91,18.67,19.91a28.56,28.56,0,0,0,10.3-1.79V87.56a20.26,20.26,0,0,1-8.38,1.92c-5.62,0-8.1-2.75-8.1-8.92V32.22h15.25V21.51H188.06V6.41h-8.78l-3.16,15.1h-8.79Zm-29.11,68.11h12.63V.5H138.22Zm-35-78.82V79.59c0,6.73-5.22,10.3-11.12,10.3-6.73,0-10.16-3.71-10.16-10.57V21.51H69.28V81.1c0,11.68,6.32,19.78,18.4,19.78,10.58,0,15.11-5.77,16.07-8.65v8.1h12V21.51ZM13.13,41.83c0-6.59,4.95-10,11-10,6.59,0,10.3,3.57,10.3,10.3V78.36c0,7.14-4,10.85-11.13,10.85H13.13ZM.5.5v99.83H26.18c12.22,0,20.73-7.83,20.73-21.28V40.73c0-12.36-6.86-19.91-18.81-19.91-9.2,0-13.87,4.95-15.1,7.42V.5H.5"></path>
<path class="logo design-works" d="M497.51,167.27c2.35,1.5,3.25,2.73,3.31,5.29v.69c0,2.73-1.39,4.43-4.81,4.43s-4.69-1.76-4.69-4.43v-2.4h-4.91v2.56c0,5,3,8.7,9.6,8.7s9.72-3.63,9.72-8.59v-1.6c0-3.69-1.87-6.14-4.91-8.17L495,160c-2.24-1.5-3.47-2.89-3.47-5.4v-.9c0-2.67,1.17-4.44,4.54-4.44s4.48,1.82,4.48,4.44v2.18h5v-2.29c0-5.07-2.88-8.7-9.44-8.7s-9.45,3.63-9.45,8.7V155c0,3.79,2.19,6.62,5.12,8.54Zm-38.82,14.31h5V145.44h-5Zm14.58-36.14-7.74,17.62,8,18.52h5.61L470.71,163l8-17.51Zm-25.09,36.14-5.5-15c3.09-1.39,4.54-4.21,4.54-7.68v-4.86c0-5.07-3.05-8.65-9.61-8.65h-9v36.14h4.91v-14H438l4.8,14Zm-14.69-31.87h4.12c3.36,0,4.7,1.76,4.7,4.38v4.8c0,2.73-1.34,4.33-4.7,4.33h-4.12ZM411.72,173.2c0,2.67-1.34,4.43-4.75,4.43s-4.7-1.81-4.7-4.43V153.82c0-2.67,1.33-4.48,4.7-4.48s4.75,1.81,4.75,4.48Zm4.91-19.54c0-5.07-3.1-8.75-9.66-8.75s-9.61,3.68-9.61,8.75v19.7c0,5,3,8.75,9.61,8.75s9.66-3.73,9.66-8.75Zm-46.07-8.22L367.67,163c-1,5.92-1.44,10.88-1.44,10.88s-.37-5-1.28-11l-2.67-17.46h-4.54l5.51,36.14h5.17l2.83-17c1.17-7.1,1.66-11.58,1.66-11.58s.53,4.48,1.7,11.58l2.83,17h5.18l5.5-36.14h-4.54l-2.67,17.46c-.85,5.87-1.28,11-1.28,11s-.48-5.12-1.44-10.88l-2.88-17.57Zm-42.12,36.14h5.28V145.44h-4.85v15.64c0,9.34.58,12.81.58,12.81s-1.12-3.63-4.21-11.53l-6.68-16.92h-5.33v36.14h4.91V165.73a87.83,87.83,0,0,0-.7-12.71s1.55,4.59,4.33,11.53Zm-46.71-8.17c0,4.86,2.56,8.55,8.43,8.55,3.58,0,5.39-1.88,6.09-3.15v2.77H301V162.2H292.3v4.33h3.79v6.67c0,2.67-1.6,4.43-4.86,4.43-3.42,0-4.59-1.81-4.59-4.43V153.82c0-2.67,1.33-4.48,4.7-4.48s4.75,1.81,4.75,4.48v2.35H301v-2.51c0-5.07-3.1-8.75-9.66-8.75s-9.61,3.68-9.61,8.75Zm-12-28h-5v36.14h5Zm-24,21.83c2.35,1.5,3.25,2.73,3.31,5.29v.69c0,2.73-1.39,4.43-4.81,4.43s-4.7-1.76-4.7-4.43v-2.4h-4.91v2.56c0,5,3.05,8.7,9.61,8.7s9.72-3.63,9.72-8.59v-1.6c0-3.69-1.87-6.14-4.91-8.17L243.24,160c-2.24-1.5-3.47-2.89-3.47-5.4v-.9c0-2.67,1.17-4.44,4.54-4.44s4.48,1.82,4.48,4.44v2.18h5v-2.29c0-5.07-2.89-8.7-9.45-8.7s-9.45,3.63-9.45,8.7V155c0,3.79,2.19,6.62,5.12,8.54Zm-19.81,10H214.41v-11.8h10v-4.27h-10V149.71h11.53v-4.27H209.5v36.14h16.44Zm-42.76,0V149.71h4.7c3.42,0,4.75,1.76,4.75,4.38v18.79c0,2.72-1.33,4.38-4.75,4.38Zm-4.91-31.82v36.14h9.61c6.57,0,9.67-3.63,9.67-8.65V154.09c0-5.07-3.1-8.65-9.67-8.65Z"></path>
</svg>
<nav class="nav-menu">
<ul class="nav-menu-list">
<li class="nav-menu-item">
<a href="">
<span class="menu-flavor">Your </span>
<span class="menu-name">Agency</span>
</a>
</li>
<li class="nav-menu-item">
<a href="">
<span class="menu-flavor">Fantastic </span>
<span class="menu-name">Projects</span>
</a>
</li>
<li class="nav-menu-item">
<a href="">
<span class="menu-flavor">Direct </span>
<span class="menu-name">Contact</span>
</a>
</li>
<li class="nav-menu-item">
<a href="">
<span class="menu-flavor">Fulfilling </span>
<span class="menu-name">Jobs</span>
</a>
</li>
</ul>
</nav>
</body>
</html>

@ -0,0 +1,13 @@
import { Application, send } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
app.use(async (context) => {
await send(context, context.request.url.pathname, {
root: `${Deno.cwd()}/`,
});
});
console.log(Deno.cwd())
await app.listen({ port: 8000 });

Binary file not shown.
Loading…
Cancel
Save