191 lines
No EOL
9.3 KiB
HTML
191 lines
No EOL
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon">
|
|
<link rel="stylesheet" href="style.css">
|
|
<title>Awwwards Series Rebuild</title>
|
|
</head>
|
|
<body>
|
|
<main class="app">
|
|
<div class="nav">
|
|
<div class="nav-container">
|
|
<p class="nav-logo">Awwwards Rebuild by JTP</p>
|
|
<div class="nav-select">
|
|
<p>Grid</p>
|
|
<div class="nav-select-toggle">
|
|
<div class="nav-toggle"></div>
|
|
</div>
|
|
<p>Index</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="work">
|
|
<div class="wrok-container">
|
|
<div class="work-title">
|
|
<h1>All projects</h1>
|
|
</div>
|
|
<div class="work-selector">
|
|
<div class="work-grid">
|
|
<div class="work-grid-item">
|
|
<video class="work-grid-item-video" src="./assets/ochi-rebuild.webm" autoplay loop muted></video>
|
|
<div class="work-grid-item-title">
|
|
<h3>Ochi Design Rebuild</h3>
|
|
</div>
|
|
<div class="work-grid-item-info">
|
|
<h2>(01)</h2>
|
|
<ul>
|
|
<li>Vite + React</li>
|
|
<li>Tailwind</li>
|
|
<li>GSAP</li>
|
|
<li>Framer Motion</li>
|
|
</ul>
|
|
<div class="grid-btn">
|
|
<a href="" class="grid-btn-1">Demo</a>
|
|
<a href="" class="grid-btn-2">Source code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="work-grid-item --item-left">
|
|
<video class="work-grid-item-video" src="./assets/sundown-rebuild.webm" autoplay loop muted></video>
|
|
<div class="work-grid-item-title">
|
|
<h3>Sundown Studio Rebuild</h3>
|
|
</div>
|
|
<div class="work-grid-item-info">
|
|
<h2>(02)</h2>
|
|
<ul>
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
<li>JavaScript</li>
|
|
</ul>
|
|
<div class="grid-btn">
|
|
<a href="" class="grid-btn-1">Demo</a>
|
|
<a href="" class="grid-btn-2">Source code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="work-grid-item">
|
|
<video class="work-grid-item-video" src="./assets/rejouice-rebuild.webm" autoplay loop muted></video>
|
|
<div class="work-grid-item-title">
|
|
<h3>REJOUICE Rebuild</h3>
|
|
</div>
|
|
<div class="work-grid-item-info">
|
|
<h2>(03)</h2>
|
|
<ul>
|
|
<li>Vite + React</li>
|
|
<li>Tailwind</li>
|
|
<li>GSAP</li>
|
|
<li>Framer Motion</li>
|
|
</ul>
|
|
<div class="grid-btn">
|
|
<a href="" class="grid-btn-1">Demo</a>
|
|
<a href="" class="grid-btn-2">Source code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="work-grid-item --item-left">
|
|
<video class="work-grid-item-video" src="./assets/kit-rebuild.webm" autoplay loop muted></video>
|
|
<div class="work-grid-item-title">
|
|
<h3>Kit: Rebuild</h3>
|
|
</div>
|
|
<div class="work-grid-item-info">
|
|
<h2>(04)</h2>
|
|
<ul>
|
|
<li>Vite + React</li>
|
|
<li>Tailwind</li>
|
|
<li>Framer Motion</li>
|
|
</ul>
|
|
<div class="grid-btn">
|
|
<a href="" class="grid-btn-1">Demo</a>
|
|
<a href="" class="grid-btn-2">Source code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="work-index">
|
|
<div class="work-index-item">
|
|
<div class="work-index-item-title">
|
|
<div class="work-index-item-flex">
|
|
<h2>Ochi Rebuild</h2>
|
|
</div>
|
|
<h1>1</h1>
|
|
</div>
|
|
<div class="work-index-item-media">
|
|
<h2 class="work-index-item-media-arrow">→</h2>
|
|
<video class="work-index-item-video" src="./assets/ochi-rebuild-pc.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/ochi-rebuild-ipad.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/ochi-rebuild-iphone.webm" muted loop autoplay></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="work-index-item">
|
|
<div class="work-index-item-title">
|
|
<div class="work-index-item-flex">
|
|
<h2>Sundown Studio Rebuild</h2>
|
|
</div>
|
|
<h1>2</h1>
|
|
</div>
|
|
<div class="work-index-item-media">
|
|
<h2 class="work-index-item-media-arrow">→</h2>
|
|
<video class="work-index-item-video" src="./assets/sundown-rebuild-pc.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/sundown-rebuild-ipad.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/sundown-rebuild-iphone.webm" muted loop autoplay></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="work-index-item">
|
|
<div class="work-index-item-title">
|
|
<div class="work-index-item-flex">
|
|
<h2>REJOUICE Rebuild</h2>
|
|
</div>
|
|
<h1>3</h1>
|
|
</div>
|
|
<div class="work-index-item-media">
|
|
<h2 class="work-index-item-media-arrow">→</h2>
|
|
<video class="work-index-item-video" src="./assets/rejouice-rebuild-pc.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/rejouice-rebuild-ipad.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/rejouice-rebuild-iphone.webm" muted loop autoplay></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="work-index-item">
|
|
<div class="work-index-item-title">
|
|
<div class="work-index-item-flex">
|
|
<h2>Kit: Rebuild</h2>
|
|
</div>
|
|
<h1>4</h1>
|
|
</div>
|
|
<div class="work-index-item-media">
|
|
<h2 class="work-index-item-media-arrow">→</h2>
|
|
<video class="work-index-item-video" src="./assets/kit-rebuild-pc.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/kit-rebuild-ipad.webm" muted loop autoplay></video>
|
|
<video class="work-index-item-video" src="./assets/kit-rebuild-iphone.webm" muted loop autoplay></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |