some minor character.html changes

animations and whatnot
1337faye · May 1, 2024 · ba8c417 · ba8c417
1 parent 8009dc1
commit ba8c417
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/characters.html b/characters.html
@@ -43,18 +43,21 @@
     </header>
 
     <section class="characters">
-        <h1 class="charactersHeading">Characters</h1>
+        <h1 class="charactersHeading">Characters (Only Acheron has a page)</h1>
         <div class="charactersSearchBar">
             <form>
                 <i class="ri-search-line"></i>
-                <input type="text" name="" id="charactersSearch" placeholder="Search characters..." onkeyup="search()"
+                <input type="text" name="" id="charactersSearch"
+                    placeholder="Search characters... (I'll add more button filters later)" onkeyup="search()"
                     autocomplete="off">
             </form>
         </div>
         <div class="charactersGrid" id="charactersGrid">
             <div class="charactersGridBox">
-                <img src="https://www.prydwen.gg/static/958329d59d77eb7605e4d01cee5122f0/b26e2/acheron_card.webp">
-                <h3>Acheron</h3>
+                <a href="https://youtu.be/i-0pJaVpWfA?si=QeK4lX7WVQ7x_T_j" target="_blank">
+                    <img src="https://www.prydwen.gg/static/958329d59d77eb7605e4d01cee5122f0/b26e2/acheron_card.webp">
+                    <h3>Acheron</h3>
+                </a>
             </div>
             <div class="charactersGridBox">
                 <img src="https://www.prydwen.gg/static/c041cdddabd3991cffc3a8b688cfdbbf/b26e2/argenti.webp">

diff --git a/styles/style.css b/styles/style.css
@@ -314,7 +314,7 @@ footer {
 } */
 
 @media (max-width: 1460px) {
-  section {
+  .indexHero {
     padding: 0 12%;
     transition: 0.2s;
   }
@@ -449,6 +449,7 @@ footer {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  align-items: flex-start;
   gap: 0 15px;
 }
 
@@ -461,6 +462,11 @@ footer {
   width: 140px;
 }
 
+.charactersGridBox img:hover {
+  /* IMAGE CROPS OUTSIDE OF BOX!!!! FIX LATER */
+  transform: translateY(-5px);
+}
+
 .charactersGridBox.hidden {
   display: none;
 }
@@ -469,9 +475,11 @@ footer {
   color: #a9d9ce;
   font-size: 18px;
   padding: 10px 0;
+  transition: all 0.55s ease;
 }
 
 .charactersGridBox img {
   width: 100%;
   height: auto;
+  transition: all 0.55s ease;
 }