mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-06-03 19:32:56 +00:00
first commit
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TD - Drear</title>
|
||||
<meta name="description" content="Website for horror movie - DREAR." />
|
||||
<meta name="keywords" content="horror, movie, drear, chmur, td, tomas dvorak" />
|
||||
<meta name="author" content="Tomas Dvorak" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
|
||||
</head>
|
||||
<body class="loading">
|
||||
<main>
|
||||
<div class="frame">
|
||||
<div class="frame__title-wrap">
|
||||
</div>
|
||||
<div class="frame__indicator"></div>
|
||||
</div>
|
||||
<div class="strip-outer">
|
||||
<div class="strip-inner">
|
||||
<div class="draggable"></div>
|
||||
<div class="strip">
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-cover">
|
||||
<h2 class="strip-cover__title">DREAR</h2>
|
||||
<span class="strip-cover__subtitle">coming in 2028</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Assemblage</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Wherewithal</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Surreptitious</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Onomatopoeia</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Nemesis</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Penumbra</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Propinquity</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Lissome</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Moiety</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Mondegreen</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Gambol</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Forbearance</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Evanescent</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Embrocation</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Bucolic</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Eloquence</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="cursor">
|
||||
<div class="cursor__inner cursor__inner--circle">
|
||||
<div class="cursor__side cursor__side--left"></div>
|
||||
<div class="cursor__side cursor__side--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/TweenMax.min.js"></script>
|
||||
<script src="js/draggabilly.pkgd.min.js"></script>
|
||||
<script src="js/demo.js"></script>
|
||||
<script>
|
||||
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user