hawk / commit

Added a link to the Spotify logo and put both logos (Hawk and Spotify) on the same line at the top.

feb7d632ccd0ecd5b64fa096bc57fbdd1049f7fa · Pavel Safronov · 2023-10-14 18:11:11 -0700 · parents 79b94404de51

Added a link to the Spotify logo and put both logos (Hawk and Spotify) on the same line at the top.

 public/index.html       | 20 ++++++++++++--------
 public/styles/style.css | 16 +++++++++++++++-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index e3daaea..dbcdf90 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,14 +14,18 @@
 <body>
     <!-- HEADER -->
     <div>
-        <div>
-            <h1 id="header">
-                <img id="logo" src="images/hawk.png" />
-                <span>Hawk</span>
-            </h1>
-        </div>
-        <div>
-            <img id="spotify-logo" src="images/Spotify_Logo_RGB_Black.png" />
+        <div id="header">
+            <span class="right">
+                <h1 id="logo-and-text">
+                    <img id="logo" src="images/hawk.png" />
+                    <span>Hawk</span>
+                </h1>
+            </span>
+            <span class="left">
+                <a href="https://spotify.com/" target="_blank">
+                    <img id="spotify-logo" src="images/Spotify_Logo_RGB_Black.png" />
+                </a>
+            </span>
         </div>
     </div>
 
diff --git a/public/styles/style.css b/public/styles/style.css
index 6625f4f..cb425e4 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -17,13 +17,26 @@ button {
     font-size: 1em;
 }
 
+#logo-and-text {
+    text-align: center;
+    display: flex;
+    align-items: center;
+}
+
 #header {
-    margin-top: 1em;
     text-align: center;
     display: flex;
     align-items: center;
 }
 
+.left {
+    margin-left: auto;
+}
+
+.right {
+    margin-right: auto;
+}
+
 #logo {
     width: 48px;
     height: 48px;
@@ -154,6 +167,7 @@ button {
     justify-content: space-between;
     font-size: 1em;
 }
+
 .song-duration>span {
     margin: 0 .5em;
 }
\ No newline at end of file