add images, restructure css

2023-07-15 19:35:55 -07:00 · 2023-07-15 19:35:55 -07:00 · 6bebf404ad
parent b3f06875bf
commit 6bebf404ad
4 changed files with 12 additions and 3 deletions
--- a/css/styles.css
+++ b/css/styles.css
@ -0,0 +1,10 @@
+.navbar {
+    display: flex;
+    align-items: center;
+    box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
+    width: 100vh;
+}
+
+.sbi-logo {
+    max-width: 150px;
+}
--- a/img/sbi-logo.png
+++ b/img/sbi-logo.png
--- a/index.html
+++ b/index.html
@ -4,15 +4,14 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./css/styles.css">
    <title>Serious Business International</title>
 </head>
 <body>
    <!-- Navbar example without JS: https://codepen.io/iPawan/pen/rNNGEzw -->
    <nav class="navbar">
        <a href="#" class="navbar-logo">
-            <!-- Going to replace this with an img probably due to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i-->
-            <i class="sbi-logo"></i>
+            <img class="sbi-logo" src="./img/sbi-logo.png"></i>
        </a>
    </nav>
 </body>
--- a/styles.css
+++ b/styles.css