eden is picture and scrolling thing

lifehaverdev · Oct 30, 2022 · 97f06e3 · 97f06e3
1 parent ead3083
commit 97f06e3
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 20 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -27,40 +27,36 @@
     </nav>
     <body>
         <div class="big-gap"></div>
+        <div id="scroll-container">
+            <div id="scroll-text">      !!! EDEN IS: NEW ALBUM OUT NOW !!!      !!! EDEN IS: NEW ALBUM OUT NOW !!!      !!! EDEN IS: NEW ALBUM OUT NOW !!!      </div>
+        </div>
         <div class="header">
             <img src="public/media/vikinghat1.jpg"/>
             <img id="logo" src="public/media/icon/logo.svg"/>
         </div>
         <div class="lil-gap"></div>
         <div id="audio">
             <audio controls>
-            <source src="public/media/Excalibur.wav" type="audio/wav">
+            <source src="public/media/springtimeback.wav" type="audio/wav">
             Your browser does not support the audio element
             </audio>
         </div>
           <div class="container">
 
             <div class="column">
                 <iframe width="666" height="315" src="https://www.youtube.com/embed/jc8y61pfQ6s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-                <p>
-                    Sing, Goddess, Achilles' rage,
-                    Black and murderous, that cost the Greeks
-                    Incalculable pain, pitched countless souls
-                    Of heroes into Hades' dark,
-                    And left their bodies to rot as feasts
-                    For dogs and birds, as Zeus' will was done.
-                        Begin with the clash between Agamemnon--
-                    The Greek warlord--and godlike Achilles.
-
-                       Which of the immortals set these two
-                    At each other's throats?
-                                                        Apollo
-                    Zeus' son and Leto's, offended
-                    By the warlord. Agamemnon had dishonored
-                    Chryses, Apollo's priest, so the god
-                    Struck the Greek camp with plague,
-                    And the soldiers were dying of it.
-                </p>
+                <h2>
+                    Eden Is
+                </h2>
+                <h3>
+                    the Valhalla Bass Sophomore Album <a href="https://open.spotify.com/album/5WgB2vjScpz0EoFey3Aj3M">streaming</a> now!!!!!!
+                </h3>
+                <div class="zoom" >
+                <a href="https://valhallabass.bandcamp.com/album/eden-is">
+                    <img src="public/media/Edenis.jpeg"/>
+                </a>
+                </div>
+
             </div>
         </div>
     </body>

diff --git a/public/media/Edenis.jpeg b/public/media/Edenis.jpeg
diff --git a/public/media/springtimeback.wav b/public/media/springtimeback.wav
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -104,6 +104,7 @@ body {
     padding: 3%;
     display:block;
     justify-content: center;
+    color: white;
 }
 
 #audio {
@@ -251,6 +252,49 @@ ul {
         height: 40px;
     }
 }
+#scroll-container {
+    border: 3px solid white;
+    border-radius: 5px;
+    overflow: hidden;
+    color: white;
+    height: 40px;
+}
+#scroll-text {
+    /* animation properties */
+    font-size: 30px;
+    -moz-transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+
+    -moz-animation: my-animation 20s linear infinite;
+    -webkit-animation: my-animation 20s linear infinite;
+    animation: my-animation 20s linear infinite;
+}
+
+/* for Firefox */
+@-moz-keyframes my-animation {
+from { -moz-transform: translateX(100%); }
+to { -moz-transform: translateX(-100%); }
+}
+
+/* for Chrome */
+@-webkit-keyframes my-animation {
+from { -webkit-transform: translateX(100%); }
+to { -webkit-transform: translateX(-100%); }
+}
+
+@keyframes my-animation {
+    from {
+      -moz-transform: translateX(100%);
+      -webkit-transform: translateX(100%);
+      transform: translateX(100%);
+    }
+    to {
+      -moz-transform: translateX(-100%);
+      -webkit-transform: translateX(-100%);
+      transform: translateX(-100%);
+    }
+}