logo (navbar-brend)

3 files changed, 20 insertions, 1 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 1e5919b..c4ab380 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -15,6 +15,23 @@ body {
     /*margin-left: 5px;*/
 }
 
+/* brand */
+.navbar-brand {
+    padding: 7px 15px; /*adjust the top/bottom padding if your logo looks too small */
+    margin-top: 0; /* you can adjust this if your logo needs to be moved up or down but simply adjusting the padding is easier */
+    height: 50px; /* this should be equal to computed height of .navbar-nav>li>a */
+}
+
+.navbar-brand>img {
+    -o-object-fit: contain; /* Opera Support */
+    object-fit: contain; /* Resize down to fit container */
+    max-height: 100%; /* resize DOWN to height of container which is set to 50px */
+    height: 100%; /* resize UP to fit*/
+    max-width: 100%;
+    width: auto; /* resize based on height */
+    margin: 0 auto;
+}
+
 /* modalLogIn */
 #modalLogIn{
     min-width: 250px;
diff --git a/index.html b/index.html
index 5752cb6..352db02 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,9 @@
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a id="navigation-home" class="navbar-brand" href="#" title="Intelligent tutor system">CodeQ</a>
+                    <a id="navigation-home" class="navbar-brand" href="#" title="Intelligent tutor system">
+                        <img src="res/CodeQ_logo-sivi.png" class="img-responsive">
+                    </a>
                     <!--a class="navbar-brand" id="title"></a-->
                 </div>
 
diff --git a/res/CodeQ_logo-sivi.png b/res/CodeQ_logo-sivi.png
new file mode 100644
index 0000000..b39b25d
--- /dev/null
+++ b/res/CodeQ_logo-sivi.png