mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 17:38:10 +00:00
404 page designs
This commit is contained in:
Victor committed
1 parent
0e928603f0
commit
aadef839f8
3 files changed
+373
-2
No files matched your search
@@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="static-404.css">
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
@@ -138,6 +139,138 @@
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<h1>This Page Could Not Be Found</h1>
|
||||
<h1>Uh oh, we couldn't find this page</h1>
|
||||
<div class="subtitle">Maybe try one of our AI tools:</div>
|
||||
<div class="tools-grid">
|
||||
<a href="/style-video" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Video Style Tranfer</h2>
|
||||
<span>Apply styles to your videos</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/vst_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/ai-live-portrait" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Live Portrait</h2>
|
||||
<span>Transfer audio & motion between portraits</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/lp_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/face-animator" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Lipsync</h2>
|
||||
<span>Animate faces with audio</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/ls_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/beta/2d-video-compositor" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>2D Video Compositor</h2>
|
||||
<span>Composite videos and images with AI</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/vcomp_video_poster_2.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/beta/3d-video-compositor" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>3D Video Compositor</h2>
|
||||
<span>Build videos with AI 3D engine</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/vcomp_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/beta/webcam-acting" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Webcam Acting</h2>
|
||||
<span>Act as your character through your camera</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/ca_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/tts" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Text to Speech</h2>
|
||||
<span>Generate audio from text</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<img class="hanashi-banner" src="images/landing/select-tts.webp">
|
||||
</a>
|
||||
<a href="/voice-conversion" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Voice to Voice</h2>
|
||||
<span>Speak in another voice</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<img class="hanashi-banner" src="images/landing/select-v2v.webp">
|
||||
</a>
|
||||
<a href="/voice-designer" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Voice Designer</h2>
|
||||
<span>Create your own AI voice</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<img class="hanashi-banner" src="images/landing/select-vd.webp">
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="static-404.css">
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
@@ -138,6 +139,138 @@
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<h1>This Page Could Not Be Found</h1>
|
||||
<h1>Uh oh, we couldn't find this page</h1>
|
||||
<div class="subtitle">Maybe try one of our AI tools:</div>
|
||||
<div class="tools-grid">
|
||||
<a href="/style-video" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Video Style Tranfer</h2>
|
||||
<span>Apply styles to your videos</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/vst_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/ai-live-portrait" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Live Portrait</h2>
|
||||
<span>Transfer audio & motion between portraits</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/lp_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/face-animator" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Lipsync</h2>
|
||||
<span>Animate faces with audio</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/ls_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/beta/2d-video-compositor" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>2D Video Compositor</h2>
|
||||
<span>Composite videos and images with AI</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/vcomp_video_poster_2.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/beta/3d-video-compositor" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>3D Video Compositor</h2>
|
||||
<span>Build videos with AI 3D engine</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/vcomp_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/beta/webcam-acting" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Webcam Acting</h2>
|
||||
<span>Act as your character through your camera</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<div class="banner-art">
|
||||
<img src="images/ai-tools/ca_video_poster.jpg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="/tts" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Text to Speech</h2>
|
||||
<span>Generate audio from text</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<img class="hanashi-banner" src="images/landing/select-tts.webp">
|
||||
</a>
|
||||
<a href="/voice-conversion" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Voice to Voice</h2>
|
||||
<span>Speak in another voice</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<img class="hanashi-banner" src="images/landing/select-v2v.webp">
|
||||
</a>
|
||||
<a href="/voice-designer" class="tools-grid-item">
|
||||
<header class="item-header">
|
||||
<div>
|
||||
<h2>Voice Designer</h2>
|
||||
<span>Create your own AI voice</span>
|
||||
</div>
|
||||
<svg class="arrow-button">
|
||||
<line x1="10" y1="20" x2="30" y2="20"/>
|
||||
<polyline points="25,15 29.5,20 25,25" />
|
||||
</svg>
|
||||
</header>
|
||||
<img class="hanashi-banner" src="images/landing/select-vd.webp">
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,105 @@
|
||||
:root {
|
||||
--primary: #e66462;
|
||||
--primary-light: #ea7a78;
|
||||
}
|
||||
html, body {
|
||||
background-color: #1a1a27;
|
||||
color: #fff;
|
||||
font-family: "Source Sans 3";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: .5rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 0 2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.item-header h2 {
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.tools-grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #242433;
|
||||
border: 2px solid rgba(255, 255, 255, .04);
|
||||
border-radius: .5rem;
|
||||
box-sizing: border-box;
|
||||
height: 330px;
|
||||
padding: 2rem 1.5rem 0;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
transition: .2s all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tools-grid-item:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.arrow-button {
|
||||
display: inline-block;
|
||||
background-color: var(--primary);
|
||||
border-radius: .5rem;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
.tools-grid-item:hover .arrow-button {
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.arrow-button line, .arrow-button polyline {
|
||||
stroke: #fff;
|
||||
stroke-width: 2.5px;
|
||||
stroke-linecap: round;
|
||||
fill: none;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
.tools-grid-item:hover line, .tools-grid-item:hover polyline {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.hanashi-banner {
|
||||
transition: .2s all ease-in-out;
|
||||
}
|
||||
|
||||
.tools-grid-item:hover .hanashi-banner {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.banner-art {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-art img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
Reference in new issue
Block a user