base.html: Improve Navbar

Improve navbar with changes in navstyle.css and add about us link in navbar. Closes pclubuiet#2
sagar-kalra · Oct 19, 2017 · 640c2ca · 640c2ca
1 parent 0869972
commit 640c2ca
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 15 deletions.
diff --git a/staticFiles/home/base.css b/staticFiles/home/base.css
@@ -1,9 +1,16 @@
 .footer {
-  position: absolute;
+  position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #222;
+  height: 120px;
+}
+
+#content {
+	padding-top: 0px;
+	margin-bottom: 110px;
+	clear: both;
 }
 
 .loader-wrapper {

diff --git a/staticFiles/home/navstyle.css b/staticFiles/home/navstyle.css
@@ -0,0 +1,29 @@
+@import url('https://fonts.googleapis.com/css?family=Tangerine&effect=shadow-multiple|3d-float');
+.navbar-custom {
+background-color: #23527C;
+color: #fff;
+}
+.navbar-brand {
+font-family: 'Tangerine',serif;
+color: #fff;
+}
+.navbar-header a.navbar-brand:hover {
+	color: #00B8D4;
+}
+.navbar .nav > li > a {
+    float: none;
+    color: #EEE;
+
+}
+.navbar .nav > li > a:hover {
+    float: none;
+    color: #23527C;
+    background-color: #ECEFF1;
+}
+.icon-bar {
+background-color: #fff;
+}
+.nav > li > a:hover, .nav > li > a:focus {
+  background-color: red;
+  text-decoration: none;
+}
diff --git a/templates/base.html b/templates/base.html
@@ -9,6 +9,7 @@
     <title>{% block title %}Programming Club{% endblock %}</title>
     <!-- Bootstrap -->
     <link rel="stylesheet" type="text/css" href="{% static 'home/base.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'home/navstyle.css' %}"/>
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
@@ -29,35 +30,38 @@
     jQuery(window).load(function(){
         jQuery(".loader-wrapper").fadeOut(2500);
     });
-	</script>
+  </script>
 
   </head>
   <body  {% block body_style %} {% endblock %}>
 <!--CSS Loader -->
 <div class="loader-wrapper">
   <div class="loader">
-  	<div class="loader-rect1"></div>
-  	<div class="loader-rect2"></div>
-  	<div class="loader-rect3"></div>
-  	<div class="loader-rect4"></div>
-  	<div class="loader-rect5"></div>
+    <div class="loader-rect1"></div>
+    <div class="loader-rect2"></div>
+    <div class="loader-rect3"></div>
+    <div class="loader-rect4"></div>
+    <div class="loader-rect5"></div>
   </div>
 </div>
-<nav class="navbar navbar-inverse" style="margin-bottom:0;">
+<nav class="navbar navbar-custom " style="margin-bottom:0;">
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span> 
       </button>
-      <a class="navbar-brand" href="{% url 'home:home' %}">Programming Club</a>
+      <a class="navbar-brand" href="{% url 'home:home' %}" style = 'font-size: 40px;'>Programming Club</a>
     </div>
     <div class="collapse navbar-collapse" id="myNavbar">
-    <ul class="nav navbar-nav">
-      <li {% block nav_home %}class="active"{% endblock %}><a href="{% url 'home:home' %}">Home</a></li>
-      <li {% block nav_resources %}{% endblock %}><a href="{% url 'home:resources' %}">Resources</a></li>
-    </ul>
+    <ul class="nav navbar-nav navbar-right">
+
+      <li {% block nav_home %}class="active"{% endblock %} class="divider-vertical"><a href="{% url 'home:home' %}"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;Home</a></li>
+      <li {% block nav_resources %}{% endblock %} class="divider-vertical"><a href="{% url 'home:resources' %}"><span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;Resources</a></li>
+      <li><a href = {% block aboutus %} {% endblock %} ><span class="glyphicon glyphicon-bookmark"></span>&nbsp;&nbsp;About us</a></li>
+
+        </ul>
     </div>
   </div>
 </nav>

diff --git a/templates/home/home.html b/templates/home/home.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% load staticfiles %}
 {% block title %}Programming Club {% endblock %}
+{% block aboutus %} '#aboutus' {% endblock %}
 {% block content %}
 <div class="jumbotron">
   <div class="container">
@@ -10,6 +11,6 @@ <h3><center>UIET, Panjab University</center></h3>
 </div>
 <div class="container text-center">
   <h1>About us</h1>
-  <p>Programming club is one of the biggest clubs of Panjab University. We aim and create a platform which allows students to gain assistance and mentorship to enhance their ability. Our aim is to propagate the enthusiasm for programming in the institute. We believe that every student should have an opportunity to learn how to code and we help them develop that passion for it.</p>
+  <p id = 'aboutus'>Programming club is one of the biggest clubs of Panjab University. We aim and create a platform which allows students to gain assistance and mentorship to enhance their ability. Our aim is to propagate the enthusiasm for programming in the institute. We believe that every student should have an opportunity to learn how to code and we help them develop that passion for it.</p>
 </div>
 {% endblock %}
diff --git a/templates/home/resources/resources.html b/templates/home/resources/resources.html
@@ -1,6 +1,7 @@
 {% extends 'base.html'%}
 {% load staticfiles %}
+{% block aboutus %} '{% url 'home:home' %}#aboutus' {% endblock %}
 {% block nav_home %}{% endblock %}
 {% block nav_resources %}
     class="active"
-{% endblock %}
+{% endblock %}