new landing page

BlakeB415 · Nov 27, 2022 · 07baa39 · 07baa39
1 parent bc564da
commit 07baa39
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 185 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,17 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=League+Gothic:wght@200;300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
 
 body {
-    background: url('/img/background.jpg');
-    font-family: 'League Gothic', sans-serif;
-
-    min-height: 100vh;
-    max-height: 100vh;
-
-    height: 100vh;
-
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+    font-family: 'Inter', sans-serif;
 
     overflow-y: hidden !important;
 
@@ -23,56 +13,63 @@ body {
     margin: 40px;
 }
 
-.game-title {
-    color: white;
-    font-size: 100px;
-    font-weight: normal;
-}
+.screenshot {
+    width: 50vw;
+    transform: translateY(-45px);
 
-.playing {
-    color: white;
-    font-size: 40px;
-
-    transform: translateY(70px);
+    border-radius: 10px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
 }
 
-.buttons {
-    margin-top: 16%;
+.wordmark {
+    width: 20vh;
 }
 
-.button {
-    font-weight: normal;
-    font-size: 25px;
-    color: white;
-
-    width: 300px;
+.center {
+    display: flex;
 
-    padding: 0;
-
-    margin-bottom: 0;
-    margin-top: 5px;
-
-    transition-duration: 200ms;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
 }
 
-.button:hover {
-    color: black;
-    background: #f6cf01;
+.text {
+    margin-top: 30px;
+}
 
-    transition-duration: 200ms;
-    cursor: default;
+p {
+    font-size: 22px;
+    color: #ED9F5A;
 }
 
-.button-name {
-    margin-left: 40px;
+.min-container {
+    margin: 15px;
 }
 
-.social-link {
-    color: gray;
-    transition-duration: 200ms;
+a {
+    all: unset;
+
+    cursor: pointer;
+    text-emphasis: none;
 }
 
-.social-link:hover {
-    color: #eb9d5b;
-    transition-duration: 200ms;
+@media only screen and (max-width: 800px) {
+    .screenshot {
+        margin-top: 20vh;
+
+        width: 95vw;
+        transform: translateY(-15px) !important;
+
+        border-radius: 10px;
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    }
+
+    .wordmark {
+        width: 15vh;
+    }
+
+    p {
+        font-size: 18px;
+        color: #ED9F5A;
+    }
 }
diff --git a/css/modal.css b/css/modal.css
diff --git a/img/background.jpg b/img/background.jpg
diff --git a/img/screenshot.png b/img/screenshot.png
diff --git a/img/wordmark.png b/img/wordmark.png
diff --git a/index.html b/index.html
@@ -4,65 +4,27 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>The Vanillo Parable</title>
+	<title>Vanillo</title>
 
 	<link rel="stylesheet" href="/css/main.css">
-	<link rel="stylesheet" href="/css/modal.css">
 </head>
 <body>
-	<div id="app">
-		<p class="playing">You are playing</p>
-		<h1 class="game-title" ondblclick="window.location.href = 'https://store.steampowered.com/app/1703340/The_Stanley_Parable_Ultra_Deluxe/'">THE VANILLO PARABLE</h1>
-	</div>
-
-	<div class="buttons">
-		<div class="button" id="play-button">
-			<h1 class="button-name">Begin the game</h1>
-		</div>
-
-		<div class="button" onclick="window.location.href = 'https://twitter.com/VanilloPR'">
-			<h1 class="button-name">Vanillo on Twitter</h1>
-		</div>
-
-		<div class="button" id="credits-button">
-			<h1 class="button-name">Credits</h1>
-		</div>
-	</div>
-
-	<div id="play-modal" class="modal">
-		<div class="modal-content">
-			<span id="play-close" class="close">&times;</span>
-			<p>
-				Vanillo is a video sharing platform that first launched in 2019. We're now back, better than ever.
-				<br> You can apply to join our private alpha at <a class="social-link" href="https://apply.vanillo.tv">apply.vanillo.tv</a>
-			</p>
-		</div>
-	</div>
+    <div class="center">
+        <img draggable="false" class="screenshot" src="/img/screenshot.png" alt="Screenshot of a Vanillo video page">
+    </div>
 
-	<div id="credits-modal" class="modal">
-		<div class="modal-content">
-			<span id="credits-close" class="close">&times;</span>
-			<p>
-				<strong>Vanillo Staff</strong>
-				<br>
-
-				Vanillo is developed by 
-				<a class="social-link" href="https://twitter.com/@The1Developer">Blake B</a>, 
-				<a class="social-link" href="https://twitter.com/kenhydrogen">Hydrogen</a>,
-				<a class="social-link" href="https://twitter.com/michaelwebbtrm">Michael / TheRandomMelon</a>,
-				Kyle,
-				<a class="social-link" href="https://twitter.com/wakkoworld">Aaron</a>,
-				<a class="social-link" href="https://twitter.com/burialposter">Ellie</a>.
+    <div class="center min-container">
+        <div class="text">
+            <img class="wordmark" src="/img/wordmark.png" alt="Vanillo wordmark">
+            <p>
+                Vanillo is a new video-sharing platform,
+                <br> and we're currently accepting <a href="https://apply.vanillo.tv"><u>beta testers</u></a>.
 
-				<br>
-				<br>
+                <br> <br>
 
-				<small>Coming Soon page (the one you're looking at) made by Hydrogen</small>
-			</p>
-		</div>
-	</div>
-
-	<script src="/js/credits.js"></script>
-	<script src="/js/play.js"></script>
+                Join us publicly on the <a href="https://twitter.com/VanilloPR/status/1527397122160607235"><u>25th of December</u></a>.
+            </p>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/js/credits.js b/js/credits.js
diff --git a/js/play.js b/js/play.js