aboutus.html: add seperate page for aboutus

Add a new page for aboutus and made necessary change in urls and views. Closes pclubuiet#2
sagar-kalra · Oct 24, 2017 · b43159a · b43159a
1 parent 0869972
commit b43159a
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 21 deletions.
diff --git a/home/urls.py b/home/urls.py
@@ -4,7 +4,8 @@
 app_name='home'
 urlpatterns = [
 url(r'^$', views.Home.as_view(), name = 'home'),
-url(r'^resources/', views.Resources.as_view(), name = 'resources')
+url(r'^resources/', views.Resources.as_view(), name = 'resources'),
+url(r'^aboutus/', views.AboutUs.as_view(), name = 'aboutus'),
 ]
 
 handler404 = 'Template404.as_view()'

diff --git a/home/views.py b/home/views.py
@@ -8,3 +8,6 @@ class Home(TemplateView):
 
 class Resources(TemplateView):
     template_name = 'home/resources/resources.html'
+
+class AboutUs(TemplateView):
+	template_name = 'home/aboutus/aboutus.html'
diff --git a/staticFiles/home/base.css b/staticFiles/home/base.css
@@ -1,9 +1,34 @@
 .footer {
-  position: absolute;
+  position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #222;
+  height: 120px;
+}
+
+.jumbotron {
+	height: 800px;
+}
+
+.vertical-center {
+  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
+  min-height: 83vh; /* These two lines are counted as one :-)       */
+
+  display: flex;
+  align-items: center;
+}
+
+.jumbotron h1{
+	font-size: 6.2vw !important;
+}
+
+
+
+#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,38 @@
+@import url('https://fonts.googleapis.com/css?family=Tangerine&effect=shadow-multiple|3d-float');
+.navbar-custom {
+background-color: #23527C;
+color: #fff;
+}
+
+.navbar-custom .navbar-nav>.active> a, 
+.navbar-custom .navbar-nav>.active> a:focus, 
+.navbar-custom .navbar-nav>.active> a:hover {
+  border-radius: 10px 10px 0px 0px;
+  background: #00ACC1;
+  color: #23527C;
+}
+
+.navbar-brand {
+font-family: 'Tangerine',serif;
+color: #fff;
+}
+
+.navbar-header a.navbar-brand:hover {
+	color: #00ACC1;
+}
+
+.navbar .nav > li > a {
+    float: none;
+    color: #EEE;
+
+}
+
+.navbar .nav > li > a:hover {
+    float: none;
+    color: #23527C;
+    border-radius: 10px 10px 0px 0px;
+}
+
+.icon-bar {
+background-color: #fff;
+}
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 %} ><a href="{% url 'home:home' %}"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;Home</a></li>
+      <li {% block nav_aboutus %}{% endblock %}><a href = "{% url 'home:aboutus' %}"><span class="glyphicon glyphicon-bookmark"></span>&nbsp;&nbsp;About us</a></li>
+      <li {% block nav_resources %}{% endblock %} ><a href="{% url 'home:resources' %}"><span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;Resources</a></li>
+
+      </ul>
     </div>
   </div>
 </nav>

diff --git a/templates/home/aboutus/aboutus.html b/templates/home/aboutus/aboutus.html
@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block styles %}
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster+Two">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Moda">
+{% endblock %}
+{% block title %}Programming Club {% endblock %} 
+{% block nav_home %}{% endblock %}
+{% block nav_aboutus %} class ='active' {% endblock %}
+{% block content %}
+<div class="container text-center">
+  <h1 style='font-family: Lobster Two; font-size: 5.2vw;'>About us</h1>
+  <p id = 'aboutus' style='font-family: Moda; font-size: 1.8vw;'>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/home.html b/templates/home/home.html
@@ -2,14 +2,10 @@
 {% load staticfiles %}
 {% block title %}Programming Club {% endblock %}
 {% block content %}
-<div class="jumbotron">
+<div class="jumbotron vertical-center">
   <div class="container">
     <h1><center>Programming Club</center></h1>
-    <h3><center>UIET, Panjab University</center></h3>
+    <h2><center>UIET, Panjab University</center></h2>
   </div>
 </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>
-</div>
 {% endblock %}
diff --git a/templates/home/resources/resources.html b/templates/home/resources/resources.html
@@ -3,4 +3,4 @@
 {% block nav_home %}{% endblock %}
 {% block nav_resources %}
     class="active"
-{% endblock %}
+{% endblock %}