updated design

kuncgregor · Jan 12, 2024 · 4b8d321 · 4b8d321
1 parent 9d55c9b
commit 4b8d321
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,9 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
         <title>vrabec</title>
         <script src="script.js" defer></script>
         <link rel="stylesheet" href="style.css" />
@@ -29,22 +31,19 @@
         </div>
         <div class="opis">
             <p id="textopis">
-                =Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
-                suscipit et accusamus expedita repellat saepe deserunt
-                asperiores libero explicabo quas autem officia sapiente corporis
-                pariatur, esse non excepturi quia voluptatibus debitis corrupti
-                quaerat cupiditate aspernatur dolorum. Quaerat amet officia
-                officiis ipsam nisi id earum velit! Accusantium quia nesciunt
-                odit provident ad nobis sint? Iusto non ea at, minima, maxime
-                quidem eum doloribus laboriosam totam repellat omnis veniam
-                mollitia libero molestiae est exercitationem beatae optio, quae
-                quaerat labore quisquam! Vero esse laudantium blanditiis
-                nesciunt fugiat, delectus expedita provident sed, placeat nobis
-                quia amet mollitia quibusdam, voluptate aperiam temporibus. Aut,
-                odit obcaecati?
+                HIDING (feat. altr) In case you ever thought of hiding in your
+                solace, because the room was cold, the ambience was empty, the
+                music stopped playing and the heart felt lonely. This song is
+                for you. Dedicated to all the beautiful souls that hide their
+                vibrant twin behind a facade, a face that is filled with
+                trouble. <br />
+                The verse is meant to remind you that every moment of stray
+                comes to a chorus, a resolution.<br />
+
+                Listen to altr and Madison as they sing in harmony, listen to
+                their gentle sound. In all beauty, music comes from a deeper
+                place, a place where lots of us find a safe HIDING space.
             </p>
-            <br />
-            <p></p>
         </div>
     </body>
 </html>
diff --git a/style.css b/style.css
@@ -4,17 +4,20 @@ body {
     align-items: center;
     justify-content: center;
     height: 100vh;
+    width: 100vw;
     margin: 0;
     overflow: hidden;
     text-align: center;
     background-color: black;
+    min-height: 100vh;
+    overflow: auto;
 }
 
 #visualiser {
     cursor: pointer;
     position: relative;
-    background-image: url("slika.JPEG"); /* Replace 'your-image-path.jpg' with the path or URL of your background image */
-    background-position: center; /* Centers the background image */
+    background-image: url("slika.JPEG");
+    background-position: center;
     text-align: center;
     background-size: 50% 100%;
     background-position: center;
@@ -37,11 +40,25 @@ body {
 }
 
 .opis {
-    margin-bottom: 30px;
+    margin-bottom: 120px;
     width: 50%;
 }
 
 #textopis {
     font-family: "Inter", sans-serif;
     color: #ffffff;
 }
+
+@media screen and (max-width: 768px) {
+    #textopis {
+        font-size: 12px;
+    }
+
+    .opis {
+        width: 95%;
+    }
+
+    #visualiser {
+        background-size: 100% 100%;
+    }
+}