Looki2000/sussycraft.cubesoftware.xyz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit SUS

Browse Source
This commit is contained in:
Looki2000 2023-03-17 17:27:53 +01:00
commit 136785e5be
5 changed files with 159 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/itchio_badge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
assets/video.mp4 Normal file
View File

Binary file not shown.

44
index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>SussyCraft</title>
</head>
<body>
<video autoplay muted loop width="100%" height="100%" id="back_video">
<source src="assets/video.mp4" type="video/mp4">
</video>
<div id="container">
<img src="assets/logo.png" alt="SussyCraft" id="logo">
<h1>SussyCraft</h1>
<br>
<p>SussyCraft is a very sussy game with a very sussy name.</p>
<p>Play it now!</p>
<div id="badges_div">
<a href='https://play.google.com/store/apps/details?id=xyz.cubesoftware.sussycraft&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' id="google_play_badge_link">
<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' id="google_play_badge"/>
</a>
<a href="" id="itchio_badge_link">
<img alt="Available on itch.io" src="assets/itchio_badge.png" id="itchio_badge"/>
</a>
</div>
</div>
<footer>
<p>Google Play and the Google Play logo are trademarks of Google LLC.</p>
<p>&copy; SussyCraft by Cube Software 2023</p>
</footer>
</body>
</html>

115
style.css Normal file
View File

@ -0,0 +1,115 @@
body {
margin: 0;
background-color: #202020;
font-family: 'Roboto', sans-serif;
}
:root {
--video-blur-radius: 1vh;
}
#back_video {
position: absolute;
filter: blur(var(--video-blur-radius));
top: 0;
left: 0;
width: 100%;
height: 100vh;
object-fit: cover;
}
#container {
--side-margin: 15vw;
--inside-padding: 20px;
position: absolute;
background-color: rgb(20, 20, 20, 0.8);
color: white;
border-radius: 10px;
backdrop-filter: blur(2vh);
margin: 50px calc(var(--side-margin) - var(--inside-padding));
width: calc(100vw - 2 * var(--side-margin));
width: auto;
padding: var(--inside-padding);
/* center everything */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#container p {
margin: 5px;
}
#logo {
width: 25%;
border-radius: 25%;
}
h1 {
font-size: 3em;
margin: 5px;
text-shadow: 0 0 10px #80c0ff;
}
#badges_div {
margin: 0 10%;
display: grid;
}
/* on mobile */
@media (min-width: 600px) {
#badges_div {
grid-template-columns: auto auto;
}
}
#google_play_badge {
width: 100%;
margin-bottom: -4px;
}
#itchio_badge_link {
padding: 6.6%;
}
#itchio_badge {
width: 100%;
margin-bottom: -4px;
}
footer {
--footer-height: 50px;
color: rgb(180,180,180);
font-size: 0.8em;
margin: 0;
margin-bottom: calc(var(--video-blur-radius) * -1);
position: absolute;
bottom: calc(0px - var(--footer-height));
height: var(--footer-height);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
footer p {
/* change value after "100vw / " after adding or removing elements from footer */
width: calc(100vw / 2);
}