Merge pull request #35 from Sh-Ac/html-changes

Html changes (mostly) with a few design changes

32 files changed, 363 insertions, 406 deletions

diff --git a/.travis.yml b/.travis.yml
index 6e1fb31..b9fb3d7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,13 +6,15 @@ python:
 before_install:
   - sudo apt-get update -qq
   - "export DISPLAY=:99.0"
-  - "sh -e /etc/init.d/xvfb start"
-  - sleep 3 # give xvfb some time to start
+  # - "sh -e /etc/init.d/xvfb start"
+  # - sleep 3 # give xvfb some time to start
 
 # command to install dependencies
 install:
   - pip install -r requirements.txt
 
+services:
+  - xvfb
 # command to run tests and coverage
 script:
   - python manage.py makemigrations
@@ -22,4 +24,4 @@ script:
 
 after_success:
   - coverage combine
-  - coverage report
\ No newline at end of file
+  - coverage report
diff --git a/fossee_anime/settings.py b/fossee_anime/settings.py
index b620525..8b5f93a 100644
--- a/fossee_anime/settings.py
+++ b/fossee_anime/settings.py
@@ -165,4 +165,4 @@ ADMIN_EMAIL = 'your admin email'
 FILE_UPLOAD_PERMISSIONS = 0o644
 SESSION_EXPIRE_AT_BROWSER_CLOSE = True
 SESSION_SAVE_EVERY_REQUEST = True
-SESSION_COOKIE_AGE = 36000
\ No newline at end of file
+SESSION_COOKIE_AGE = 36000
diff --git a/fossee_anime/urls.py b/fossee_anime/urls.py
index 9fb65d5..0db0fe5 100644
--- a/fossee_anime/urls.py
+++ b/fossee_anime/urls.py
@@ -23,7 +23,7 @@ from django.conf.urls.static import static
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
     url(r'^', include('fossee_manim.urls')),
-    url(r'^', include('fossee_manim.urls_password_reset'))
+    url(r'^', include('fossee_manim.urls_password_reset')),
 ]
 urlpatterns += static(settings.MEDIA_URL,
-                        document_root=settings.MEDIA_ROOT)
\ No newline at end of file
+                        document_root=settings.MEDIA_ROOT)
diff --git a/fossee_manim/forms.py b/fossee_manim/forms.py
index 7dfdc77..69f8458 100644
--- a/fossee_manim/forms.py
+++ b/fossee_manim/forms.py
@@ -250,9 +250,16 @@ class AnimationProposal(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super(AnimationProposal, self).__init__(*args, **kwargs)
         self.fields['subcategory'].widget.attrs['placeholder'] = 'Eg: Quantum Mechanics, Topology'
-        self.fields['outline'].widget.attrs['placeholder'] = 'NOTE:-Do\
- add info about prerequisites (if any), possible textbooks and \
- any other related information'
+        # self.fields['outline'].widget.attrs['placeholder'] = 'NOTE: Do\
+        #  add info about prerequisites (if any), possible textbooks and \
+        #  any other related information'
+        self.fields['outline'].widget.attrs={
+            'id': 'custom_editor',
+            'rows': 10,
+            'cols': 50,
+            'placeholder': ('NOTE: Do add info about prerequisites (if any), possible textbooks and '
+            'any other related information')
+        }
 
     class Meta:
         model = Animation
diff --git a/fossee_manim/models.py b/fossee_manim/models.py
index e2ff72c..273ebe6 100644
--- a/fossee_manim/models.py
+++ b/fossee_manim/models.py
@@ -10,7 +10,6 @@ from os import path, sep
 import tempfile
 import subprocess
 
-
 position_choices = (
     ("contributor", "Contributor"),
     ("reviewer", "Reviewer")
@@ -220,7 +219,7 @@ class AnimationStats(models.Model):
             # some Django-specific additions
             django_file = File(que_file)
             self.thumbnail.save(file_name, django_file, save=True)
-    
+
     def _create_ogv(self):
         video_input = self.video_path.path
         vid_output = path.join(
@@ -233,4 +232,4 @@ class AnimationStats(models.Model):
             # Converting to Python file object with
             # some Django-specific additions
             django_file = File(que_file)
-            self.video_path.save(file_name, django_file, save=True)
\ No newline at end of file
+            self.video_path.save(file_name, django_file, save=True)
diff --git a/fossee_manim/send_mails.py b/fossee_manim/send_mails.py
index 15b2e87..363a0ec 100644
--- a/fossee_manim/send_mails.py
+++ b/fossee_manim/send_mails.py
@@ -117,7 +117,7 @@ def send_email(request, call_on, contributor=None, key=None, proposal=None):
 
 		logging.info("FOSSEE Animations | Proposal Outcome: %s", request.user.email)
 		send_mail(
-			"FOSSEE Animation Status Update", message, SENDER_EMAIL,
+			"FOSSEE Animations Status Update", message, SENDER_EMAIL,
 			[contributor.profile.user.email], fail_silently=True
 				)
 	elif call_on == 'changes':
@@ -136,7 +136,7 @@ def send_email(request, call_on, contributor=None, key=None, proposal=None):
 
 		logging.info("Comment by Reviewer: %s", request.user.email)
 		send_mail(
-			"FOSSEE Animation  Comment by Reviewer", message, SENDER_EMAIL,
+			"FOSSEE Animations Comment by Reviewer", message, SENDER_EMAIL,
 			[contributor.profile.user.email], fail_silently=True)
 	elif call_on == 'proposal_form':
 		message = dedent("""\
@@ -152,7 +152,7 @@ def send_email(request, call_on, contributor=None, key=None, proposal=None):
 					FOSSEE Animations Team""".format(contributor.profile.user.username))
 
 		logging.info("Animation Proposal Form 2: %s", request.user.email)
-		subject = "FOSSEE Animation Proposal Form 2"
+		subject = "FOSSEE Animations Proposal Form 2"
 		msg = EmailMultiAlternatives(subject, message, SENDER_EMAIL,
 				[contributor.profile.user.email])
 		attachment_paths = path.join(settings.MEDIA_ROOT, "Proposal_Form")
diff --git a/fossee_manim/static/css/custom_base.css b/fossee_manim/static/css/custom_base.css
new file mode 100644
index 0000000..e2623b1
--- /dev/null
+++ b/fossee_manim/static/css/custom_base.css
@@ -0,0 +1,35 @@
+#basefooter{
+    font-family: 'Lato', sans-serif;
+}
+.navbar{
+    font-family: 'Montserrat', sans-serif;
+    font-size: 15px;
+}
+p,
+h3,
+h4,
+h5,
+h6,
+.card-body,
+form{
+    font-family: 'Lato', sans-serif;
+}
+h1,
+h2,
+.btn{
+    font-family: 'Montserrat', sans-serif;
+}
+.perma_link:hover{
+    background-color:#d1d2d3;
+    text-decoration: none;
+}
+.perma_link a{
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 18px;
+}
+
+#btnblue{
+    background-color: #1facb3;
+    border-color: transparent;
+}
diff --git a/fossee_manim/static/css/index.css b/fossee_manim/static/css/index.css
index 176126e..0a7895e 100644
--- a/fossee_manim/static/css/index.css
+++ b/fossee_manim/static/css/index.css
@@ -1,15 +1,13 @@
 #brand{
     font-size: 2vw;
-    /* font-family: "Times New Roman", Georgia, serif; */
-    font-family: 'Raleway', sans-serif;
+    font-family: "Times New Roman", Georgia, serif;
 }
 
 #tag {
     padding: 15 15 15 15;
     font-size: 3vw;
     color: goldenrod;
-    /* font-family: Arial, Helvetica, sans-serif; */
-    font-family: 'Raleway', sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 
diff --git a/fossee_manim/static/img/FA_logo.png b/fossee_manim/static/img/FA_logo.png
deleted file mode 100644
index 601774c..0000000
--- a/fossee_manim/static/img/FA_logo.png
+++ /dev/null
diff --git a/fossee_manim/static/img/fossee_logo.png b/fossee_manim/static/img/fossee_logo.png
deleted file mode 100644
index d2d18d0..0000000
--- a/fossee_manim/static/img/fossee_logo.png
+++ /dev/null
diff --git a/fossee_manim/static/img/logo.png b/fossee_manim/static/img/logo.png
deleted file mode 100644
index 2fef43b..0000000
--- a/fossee_manim/static/img/logo.png
+++ /dev/null
diff --git a/fossee_manim/static/img/logo_center.png b/fossee_manim/static/img/logo_center.png
deleted file mode 100644
index e4ac736..0000000
--- a/fossee_manim/static/img/logo_center.png
+++ /dev/null
diff --git a/fossee_manim/templates/fossee_manim/base.html b/fossee_manim/templates/fossee_manim/base.html
index bacb95d..f54e373 100644
--- a/fossee_manim/templates/fossee_manim/base.html
+++ b/fossee_manim/templates/fossee_manim/base.html
@@ -7,15 +7,20 @@
 			HomePage
 		{% endblock %}
 	</title>
+
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
-  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
-
   	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="{{ URL_ROOT }}/static/css/sticky-footer.css" type="text/css" />
+
+	<!-- <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+	<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> -->
 
-    <link rel="stylesheet" href="{{ URL_ROOT }}/static/css/sticky-footer.css" type="text/css" />
     <!-- favicon -->
     <link rel="shortcut icon" href="{{ URL_ROOT }}/static/img/favicon.ico" />
+	<link href="https://fonts.googleapis.com/css?family=Montserrat|Lato&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="{{ URL_ROOT }}/static/css/custom_base.css" type="text/css" />
 </head>
 
 	<!-- For js/ajax and other related scripts -->
@@ -25,7 +30,7 @@
 
 <body>
  {% block header %}
- 	<nav class="navbar navbar-expand-lg navbar-light row bck_clr fixed-top" style="background-color:#222222; padding-top: 20px; padding-bottom: 20px;">
+ 	<nav class="navbar navbar-expand-lg navbar-light row fixed-top" style="background-color:#222222; padding-top: 20px; padding-bottom: 20px;">
 		<a class="navbar-brand" href="{% url 'index' %}">
 			<img src="{{ URL_ROOT }}/static/img/logo_main.png" width="150" height="33.75" alt="" style="margin-right: 50px; margin-left: 20px">
 		</a>
@@ -34,11 +39,11 @@
 		</button>
 
 	    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-			<form class="form-inline" method="POST" action="/search/" style="margin-left: 10px; margin-top: 10px">
+			<form class="form-inline" method="POST" action="/search/" style="margin-left: 10px; margin-top: 10px; ">
 				{% csrf_token %}
 				<input class="form-control mr-sm-2" type="search" id="sbox" name="sbox" placeholder="Search for animations">
-					<button class="btn btn-primary my-2 my-sm-0" type="submit">
-			 		Search
+					<button class="btn btn-primary my-2 my-sm-0" id= "btnblue" type="submit">
+					Search
 					</button>
 			</form>
 
@@ -72,7 +77,7 @@
 		    </ul>
 	   </div>
     </nav>
-	<div class="jumbotron  sticky-top" style="padding-top: 90px; padding-bottom: 0.2%; margin-bottom: 0px; color:#dddddd">
+	<div class="jumbotron sticky-top" style="padding-top: 90px; padding-bottom: 0.2%; margin-bottom: 0px; background-color: #dddddd">
 		<div class="btn-group btn-group-lg" role="group">
 			<button class="btn btn-link perma_link" type="button"><a href="#" style="color:#157b80">About</a></button>
 			<button class="btn btn-link perma_link" type="button"><a href="{% url 'guidelines' %}" style="color:#222222">Guidelines</a></button>
@@ -82,37 +87,40 @@
 		</div>
 	</div>
   	{% endblock %}
-	<main role="main" class="container">
+	<!-- <main role="main" class="container"> -->
     {% block content %}
     <br><br>
 		<h1>Base Template Content. Please override me</h1>
 	{% endblock %}
-	</main>
+	<!-- </main> -->
 
 	{% block footer %}
-	<div class="jumbotron" style="background-color: #222222; margin-bottom: 0px; border-radius: 0 !important;">
+	<div class="jumbotron" id="basefooter" style="background-color: #222222; margin-bottom: 0px; padding: 40px;border-radius: 0 !important;">
 
 		<div class="container">
 			<div class="row">
 				<div class="col-md text-center">
 					<img src="{{ URL_ROOT }}/static/img/fossee_logo_iitb.png" style="">
 				</div>
-				<div class="col-md text" style="color:#e9ecef;">
+				<div class="col-md text" style="color:#dddddd;">
 					FOSSEE | IIT-Bombay <br>
 					Mumbai, India  - 400-076 <br>
 					Phone: (+91) 22-2576-4133<br>
 					Email: animations@fossee.in
 				</div>
-				<div class="col-md text-center" style="color:#e9ecef; margin-top: 15px">
-				  <b>Follow us on:<br/>
+				<div class="col-md text-center" style="color:#dddddd; margin-top: 15px">
+				  Follow us on:<br/>
 				  <a href="https://twitter.com/fosseenmeict" class="fa fa-twitter"></a>
+				  &nbsp; &nbsp; &nbsp;
 				  <a href="https://www.instagram.com/fossee_nmeict/" class="fa fa-instagram"></a>
+				  &nbsp; &nbsp; &nbsp;
 				  <a href="https://www.facebook.com/FOSSEENMEICT/" class="fa fa-facebook"></a>
+				  &nbsp; &nbsp; &nbsp;
 				  <a href="https://github.com/FOSSEE/" class="fa fa-github"></a>
 				</div>
 			</div>
 			<hr>
-			<div class="text-center row" style="color: #e9ecef; color:white;  padding:10px;margin-left: 10px; text-align:center">
+			<div class="text-center row" style="color: #dddddd; color:white;  padding:10px;margin-left: 10px; text-align:center">
 				The FOSSEE project is funded by the National Mission on Education through ICT, MHRD, Government of India.
 					This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
 			</div>
diff --git a/fossee_manim/templates/fossee_manim/edit_profile.html b/fossee_manim/templates/fossee_manim/edit_profile.html
index 78d1546..e5c3bc5 100644
--- a/fossee_manim/templates/fossee_manim/edit_profile.html
+++ b/fossee_manim/templates/fossee_manim/edit_profile.html
@@ -12,6 +12,7 @@
 {% block content %}
 <br>
   <div class="container">
+	<center>  <h1> Edit Profile </h1> </center>
     <form action="{{URL_ROOT}}/edit_profile/" method="post" >
     {% csrf_token %}
       <center>
@@ -20,7 +21,8 @@
         </table>
       </center>
       <br>
-        <button class="btn btn-primary pull-right" type="submit">Save Profile</button>
+        <button class="btn btn-primary pull-right" type="submit" id="btnblue">Save Profile</button>
     </form>
+	<br> <br> <br>
   </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/edit_proposal.html b/fossee_manim/templates/fossee_manim/edit_proposal.html
index f6e3f48..cfc2beb 100644
--- a/fossee_manim/templates/fossee_manim/edit_proposal.html
+++ b/fossee_manim/templates/fossee_manim/edit_proposal.html
@@ -20,16 +20,16 @@
         {% endfor %}
     </ul>
     {% endif %}
-    
+
   <form method="POST" >
   {% csrf_token %}
-    
+
       <table class="table table-bordered">
         {{ proposal_form.as_table }}
       </table>
-  
+
     <br>
-      <button class="btn btn-primary pull-right" type="submit">Save</button>
+      <button class="btn btn-primary pull-right" type="submit" id="btnblue">Save</button>
       <br>
   </form>
   <br>
@@ -46,10 +46,10 @@
   {% elif proposal_form.instance.status == 'pending' and request.user.profile.position == 'contributor' %}
     <h3>Awaiting Reviewer's Moderation  </h3>
     <h6>Further details regarding the second stage of Proposal will be shared with you over the email shortly</h6>
-    
+
   {% else %}
     <video width="100%" height="100%" controls>
-      <source src="{{video.0.video_path.url}}" type="video/mp4">                
+      <source src="{{video.0.video_path.url}}" type="video/mp4">
     </video>
   {% endif %}
 
@@ -59,11 +59,11 @@
 			{% csrf_token %}
 			<div class="form-group">
         <div class="row">
-          <button class="btn btn-success pull-left" type="submit" name="release" value="1">Approve</button> 
+          <button class="btn btn-success pull-left" type="submit" name="release" value="1">Approve</button>
           <button class="btn btn-danger pull-left" type="submit" name="rejected" value="2" style="margin-left: 1%">Reject</button>
           <button class="btn btn-info pull-left" type="submit" name="proposal_form" value="3" style="margin-left: 1%" >Send Proposal 2 Form</button>
-        </div> 
-			</div> 
+        </div>
+			</div>
   </form>
   {% endif %}
   <br><br>
@@ -76,7 +76,7 @@
           {{ comment_form.as_p }}
           <button type="submit" class="btn btn-default">Post</button>
       </form>
-      
+
     </div>
     <hr style="background-color: #fff;
         border-top: 5px double #8c8b8b;">
@@ -85,7 +85,7 @@
       <tbody>
         <tr>
           <td>
-            <h5>{{ comment.commentor.profile.user.get_full_name }} | {{ comment.created_date | date  }}</h5> 
+            <h5>{{ comment.commentor.profile.user.get_full_name }} | {{ comment.created_date | date  }}</h5>
             <h6 style="background-color: #ecf0f1; padding:10px;">{{ comment.comment }}</h6>
             <hr style="border-top: 0.5px solid #8c8b8b;">
           </td>
@@ -93,7 +93,7 @@
       </tbody>
       {% endfor %}
     </table>
-    
+
 <br><br>
   </div>
 
@@ -104,7 +104,7 @@
          <ul class="pagination pagination-sm">
             <li class="page-item">
               {% if comments.has_previous %}
-            <a class="page-link" tabindex="-1" 
+            <a class="page-link" tabindex="-1"
                 href="?page={{ comments.previous_page_number }}">Previous</a>
             {% endif %}
             </li>
@@ -116,7 +116,7 @@
             <li class="page-item">
             {% if comments.has_next %}
             <a class="page-link" href="?page={{ comments.next_page_number }}">Next
-            </a>	
+            </a>
           {% endif %}
             </li>
           </ul>
@@ -127,4 +127,4 @@
 
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/faqs.html b/fossee_manim/templates/fossee_manim/faqs.html
index 36ad9da..09900c2 100644
--- a/fossee_manim/templates/fossee_manim/faqs.html
+++ b/fossee_manim/templates/fossee_manim/faqs.html
@@ -5,11 +5,15 @@
 	{% endblock %}
 
 {% block content %}
-
+<style>
+	span {
+		background-color: #f2e680;
+	}
+</style>
 <div class="container-fluid jumbotron" align = "justify" style="margin-top:20px">
 	 <!-- style="padding-top:120px"> -->
 <h1><center>Frequently Asked Questions</center></h1>
-	<div class="container">
+	<div class="container" style= "font-family: 'Lato', sans-serif;">
 
 	<hr/>
 	<ul>
@@ -57,7 +61,7 @@
 			Yes. One of the major focus of the FOSSEE Animations project is to promote a visual-approach to learning of science concepts.
 			The videos  are published under a Creative Commons Attribution-ShareAlike 4.0 International License licence.
 			The code used to generate the videos is to be published under the MIT license.
-			Please place the terms and conditions of the MIT license on the GitHub page of your code.
+			<span>Please place the terms and conditions of the MIT license on the GitHub page of your code.</span>
 		<br><br>
 		<li><h5>When will I receive my Honorarium?</h5></li>
 			Honorarium would generally be processed within 45 days from the day we receive your forms.
@@ -79,4 +83,5 @@
 
 	<h5>If you have any other queries, email us at <a href="mailto: animations@fossee.in">animations@fossee.in</a> </h2>
 </div>
+</div>
 {% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/guidelines.html b/fossee_manim/templates/fossee_manim/guidelines.html
index e1fd8c6..a6256c5 100644
--- a/fossee_manim/templates/fossee_manim/guidelines.html
+++ b/fossee_manim/templates/fossee_manim/guidelines.html
@@ -11,151 +11,146 @@
         }
     </style>
 	<div class="container-fluid jumbotron" align = "justify" style="margin-top:20px;">
-    <h2><center>Guidelines for Submitting Proposals</center></h2>
-	<div class="container">
-		<hr>
-		<div id="accordion">
-		<div class="card">
-		<div class="card-header" id="headingOne">
-		  <h5 class="mb-0">
-			<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-			  1. Creating an account
-			</button>
-		  </h5>
-		</div>
+	    <h1><center>Guidelines for Submitting Proposals</center></h1>
+		<div class="container">
+			<hr>
+			<div id="accordion">
+				<div class="card">
+					<div class="card-header" id="headingOne">
+			  		<h5 class="mb-0">
+						<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+				  		1. Creating an account
+						</button>
+			  		</h5>
+					</div>
 
-		<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
-		  <div class="card-body">
-			<ul>
-			  <li> Create your account on the FOSSEE Animations website.</li>
-			  <li> Upon successful registration, an email is sent to your registered email ID. Activate your account by clicking on the activation link provided.</li>
-			</ul>
-		  </div>
-		</div>
-		</div>
-		<div class="card">
-		<div class="card-header" id="headingTwo">
-		  <h5 class="mb-0">
-			<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-		2. Submitting a proposal
-			</button>
-		  </h5>
-		</div>
-		<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
-		  <div class="card-body">
-			Before you start creating the animation videos, you need to send a proposal. The proposal submission is divided into two stages, Stage 1 and Stage 2. The details for both the stages are given below.
-					<ul class="list-group">
-			  <li class="list-group-item">  <b class="text-center">Stage 1</b><hr/>
-				<ol>
-					<li>Once the account is activated and you are logged in, proposals for video ideas can be submitted. Click on “Send Proposal” in the drop-down list next to your username (in the top-right corner).
-					</li>
-					<li>Enter your <b>Category and Subcategory</b>. The Subcategory field refers to the specific subdomain in which the topic to be animated lies. </br>
-					For example, if any topic related to Newtonian motion is to be animated, the Category would be Physics and the Subcategory would be Classical Mechanics.<br>
-					<b>Note: </b>If there is any ambiguity regarding the Subcategory (or sub-categories) that the chosen topic comes under, enter your best guess after performing a Google Search.
-					</li>
-					<li>The Title field refers to the specific topic that you have chosen to animate.
-						Concerning the the previous example, your title would be something like “Angular Momentum” or “Newton’s Laws of Motion”.</li>
-					<li>The Outline field should ideally include:
-						<ul><li>a general description of the chosen topic,</li>
-						<li>the key points you intend to cover in your animation/ video,</li>
-						<li>the tools you might use</li></ul>
-						<b>Note: </b> If you haven’t zeroed-down on all the above specifics, try to mention a fair estimate. 150-300 words would be sufficient.
-					</li>
-					<li>The Tags field should be filled with keywords relating to your topic of animation (i.e., your Title).
-						Some of the possible tags for “Angular Momentum” are “Newtonian Physics”, “Classical Mechanics” and “Rotational Motion”.</li>
-					<li>Click on Save to Submit your proposal. You will now be able to view and edit your proposals on the proposals page. You can access this page by selecting “View Proposals” in the drop-down list next to your username in the top-right corner of the website.</li>
-				</ol>
-				</li>
-			  <li class="list-group-item"> <b class="text-center">Stage 2</b><hr/>
-				<ol>
-				<li>Once you have submitted Stage 1 of the proposal, you will receive an email on your registered email within 3 working days. It will contain an attached Writer document (.odt), where specific details of the animation(s) proposed have to be filled in. </li>
-				<li>Further correspondence between the contributor and the moderator usually happens in the same email thread.</li>
-				<li>After the document has been submitted and has passed the moderator’s review, the proposal is cleared for submission on the FOSSEE Animations website. The contributor is notified of the same via email.</li>
-				</ol>
-				<hr>
-				Please note that the second form is completed and sent after the contributor has worked out the more precise details of their proposed animation. The moderators should get a fair idea of what the video you animate will consist of such as the approach to visualising a concept, the tools used and the books used for reference, among other things.
-			  </li>
-			</ul>
-		  </div>
-		</div>
-		</div>
+					<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+			  		<div class="card-body">
+						<ul>
+				  		<li> Create your account on the FOSSEE Animations website.</li>
+				  		<li> Upon successful registration, an email is sent to your registered email ID. Activate your account by clicking on the activation link provided.</li>
+						</ul>
+			  		</div>
+					</div>
+				</div>
+				<div class="card">
+					<div class="card-header" id="headingTwo">
+			  		<h5 class="mb-0">
+						<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+							2. Submitting a proposal
+						</button>
+			  		</h5>
+					</div>
+					<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+			  		<div class="card-body">
+						Before you start creating the animation videos, you need to send a proposal. The proposal submission is divided into two stages, Stage 1 and Stage 2. The details for both the stages are given below.
+						<ul class="list-group">
+				  		<li class="list-group-item">  <b class="text-center">Stage 1</b><hr/>
+						<ol>
+						<li>Once the account is activated and you are logged in, proposals for video ideas can be submitted. Click on “Send Proposal” in the drop-down list next to your username (in the top-right corner).
+						</li>
+						<li>Enter your <b>Category and Subcategory</b>. The Subcategory field refers to the specific subdomain in which the topic to be animated lies. </br>
+						For example, if any topic related to Newtonian motion is to be animated, the Category would be Physics and the Subcategory would be Classical Mechanics.<br>
+						<b>Note: </b>If there is any ambiguity regarding the Subcategory (or sub-categories) that the chosen topic comes under, enter your best guess after performing a Google Search.
+						</li>
+						<li>The Title field refers to the specific topic that you have chosen to animate.
+							Concerning the the previous example, your title would be something like “Angular Momentum” or “Newton’s Laws of Motion”.</li>
+						<li>The Outline field should ideally include:
+							<ul><li>a general description of the chosen topic,</li>
+							<li>the key points you intend to cover in your animation/ video,</li>
+							<li>the tools you might use</li></ul>
+							<b>Note: </b> If you haven’t zeroed-down on all the above specifics, try to mention a fair estimate. 150-300 words would be sufficient.
+						</li>
+						<li>The Tags field should be filled with keywords relating to your topic of animation (i.e., your Title).
+							Some of the possible tags for “Angular Momentum” are “Newtonian Physics”, “Classical Mechanics” and “Rotational Motion”.</li>
+						<li>Click on Save to Submit your proposal. You will now be able to view and edit your proposals on the proposals page. You can access this page by selecting “View Proposals” in the drop-down list next to your username in the top-right corner of the website.</li>
+						</ol>
+						</li>
+					  	<li class="list-group-item"> <b class="text-center">Stage 2</b><hr/>
+						<ol>
+						<li>Once you have submitted Stage 1 of the proposal, you will receive an email on your registered email within 3 working days. It will contain an attached Writer document (.odt), where specific details of the animation(s) proposed have to be filled in. </li>
+						<li>Further correspondence between the contributor and the moderator usually happens in the same email thread.</li>
+						<li>After the document has been submitted and has passed the moderator’s review, the proposal is cleared for submission on the FOSSEE Animations website. The contributor is notified of the same via email.</li>
+						</ol>
+						<hr>
+						Please note that the second form is completed and sent after the contributor has worked out the more precise details of their proposed animation. The moderators should get a fair idea of what the video you animate will consist of such as the approach to visualising a concept, the tools used and the books used for reference, among other things.
+					  	</li>
+						</ul>
+			  		</div>
+					</div>
+				</div>
 
 
-		<div class="card">
-		<div class="card-header" id="headingThree">
-		  <h5 class="mb-0">
-			<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">3.
-		Creating your animation / visualisation: </button>
-		  </h5>
-		</div>
-		<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
-		  <div class="card-body">
-			<ul>
-				<li>You may use any tool for creating your animation. More than one tool may also be used, as per the discretion of the contributor. However, you are expected to use only open source tools such as manim, mayavi and blender. You may also use an open-source game engine. For more details contact: <a href="mailto:animations@fossee.in">animations@fossee.in</a></li>
-		<li>Submit the final video in a .mp4 format.</li>
-		<li>Any queries can be clarified by email or through the comments on the proposal submission page.</li>
-		<li>In case you feel that the animation video requires narration, you may provide a complementary script in a .txt file over email. A voiceover would be provided for the animations from FOSSEE. You may refer to the videos already published on the website for instances of animations with and without an additional script. Email <a href="mailto:animations@fossee.in">animations@fossee.in</a> if you want to add a script. </li>
-		<hr/>
-		<b>References for animations</b>
-		<li>You may refer to <a href="https://purusharthsaxena.wordpress.com/">this blog</a> and <a href="https://talkingphysics.wordpress.com/2019/01/08/getting-started-animating-with-manim-and-python-3-7/">this blog</a> for getting started with <b>manim</b>. <a href="https://www.youtube.com/watch?v=r6OD07Qq2mw">Here's the link</a> for getting started with mayavi.</li>
-			</ul>
-		  </div>
-		</div>
-		</div>
+			<div class="card">
+			<div class="card-header" id="headingThree">
+			  <h5 class="mb-0">
+				<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">3.
+			Creating your animation / visualisation: </button>
+			  </h5>
+			</div>
+			<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
+			  <div class="card-body">
+				<ul>
+					<li>You may use any tool for creating your animation. More than one tool may also be used, as per the discretion of the contributor. However, you are expected to use only open source tools such as manim, mayavi and blender. You may also use an open-source game engine. For more details contact: <a href="mailto:animations@fossee.in">animations@fossee.in</a></li>
+			<li>Submit the final video in a .mp4 format.</li>
+			<li>Any queries can be clarified by email or through the comments on the proposal submission page.</li>
+			<li>In case you feel that the animation video requires narration, you may provide a complementary script in a .txt file over email. A voiceover would be provided for the animations from FOSSEE. You may refer to the videos already published on the website for instances of animations with and without an additional script. Email <a href="mailto:animations@fossee.in">animations@fossee.in</a> if you want to add a script. </li>
+			<hr/>
+			<b>References for animations</b>
+			<li>You may refer to <a href="https://purusharthsaxena.wordpress.com/">this blog</a> and <a href="https://talkingphysics.wordpress.com/2019/01/08/getting-started-animating-with-manim-and-python-3-7/">this blog</a> for getting started with <b>manim</b>. <a href="https://www.youtube.com/watch?v=r6OD07Qq2mw">Here's the link</a> for getting started with mayavi.</li>
+				</ul>
+			  </div>
+			</div>
+			</div>
 
-		<div class="card">
-		<div class="card-header" id="headingFour">
-		  <h5 class="mb-0">
-			<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
-			  4. Uploading the final video
-			</button>
-		  </h5>
-		</div>
-		<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
-		  <div class="card-body">
-			After submitting the Proposal - Form 2, and after the moderator has approved, you will receive a link on your proposals page for uploading the required video. FOSSEE notifies you of the same via email.
-		  </div>
-		</div>
-		</div>
+			<div class="card">
+			<div class="card-header" id="headingFour">
+			  <h5 class="mb-0">
+				<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+				  4. Uploading the final video
+				</button>
+			  </h5>
+			</div>
+			<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
+			  <div class="card-body">
+				After submitting the Proposal - Form 2, and after the moderator has approved, you will receive a link on your proposals page for uploading the required video. FOSSEE notifies you of the same via email.
+			  </div>
+			</div>
+			</div>
 
 
-		<div class="card">
-		<div class="card-header" id="headingFive">
-		  <h5 class="mb-0">
-			<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
-			  5. Obtaining certificates
-			</button>
-		  </h5>
-		</div>
-		<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
-		  <div class="card-body">
-			The criterion for obtaining a certificate from FOSSEE, IITB is that you should have successfully submitted and uploaded your animation on the FOSSEE animations website.
-		FOSSEE sends the certificate to your registered email within 15 working days. If you submit a bunch of closely related videos in a series, you receive a certificate for that set. Otherwise, for every standalone contribution, you receive a certificate. The certificate is issued by FOSSEE, IIT Bombay.
-		  </div>
-		</div>
-		</div>
+			<div class="card">
+			<div class="card-header" id="headingFive">
+			  <h5 class="mb-0">
+				<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
+				  5. Obtaining certificates
+				</button>
+			  </h5>
+			</div>
+			<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
+			  <div class="card-body">
+				The criterion for obtaining a certificate from FOSSEE, IITB is that you should have successfully submitted and uploaded your animation on the FOSSEE animations website.
+			FOSSEE sends the certificate to your registered email within 15 working days. If you submit a bunch of closely related videos in a series, you receive a certificate for that set. Otherwise, for every standalone contribution, you receive a certificate. The certificate is issued by FOSSEE, IIT Bombay.
+			  </div>
+			</div>
+			</div>
 
 
-		<div class="card">
-		<div class="card-header" id="headingSix">
-		  <h5 class="mb-0">
-			<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
-			  6. Acquiring the honorarium
-			</button>
-		  </h5>
-		</div>
-		<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion">
-		  <div class="card-body">
-			<a href="https://animations.fossee.in/honorarium/">Click here</a> to learn about the procedure for receiving the honorarium.
-		  </div>
-		</div>
+			<div class="card">
+			<div class="card-header" id="headingSix">
+			  <h5 class="mb-0">
+				<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
+				  6. Acquiring the honorarium
+				</button>
+			  </h5>
+			</div>
+			<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion">
+			  <div class="card-body">
+				<a href="https://animations.fossee.in/honorarium/">Click here</a> to learn about the procedure for receiving the honorarium.
+			  </div>
+			</div>
+			</div>
 		</div>
-
-
-
-
-
 		</div>
-	</div>
     </div>
 {% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/honorarium.html b/fossee_manim/templates/fossee_manim/honorarium.html
index 398449e..e281cf2 100644
--- a/fossee_manim/templates/fossee_manim/honorarium.html
+++ b/fossee_manim/templates/fossee_manim/honorarium.html
@@ -18,10 +18,12 @@
 
 	<div class="container-fluid jumbotron"  align = "justify" style="margin-top:20px;">
 		<h1><center>Honorarium</center></h1>
-		<div class="container"">
+		<div class="container" style= "font-family: 'Lato', sans-serif;">
 			<hr>
 
-			<h4><center>Amount</center></h4>
+			<h2><center>Amount</center></h2>
+			<br>
+
 			<ol>
 				<li> The honorarium amount is assigned based on:
 					<ul>
@@ -38,8 +40,9 @@
 				<li> A quality bonus of Rs 500-1000 per video can be granted if deemed fit by the reviewer. </li>
 				<li> <strong>The final amount is up to the discretion of the moderators.</strong></li>
 			</ol>
+			<br> <br>
+			<h2><center>Procedure</center></h2>
 			<br>
-			<h4><center>Procedure</center></h4>
 			<p> A contributor can begin with the honorarium process only after submission of the final video and its release on the website.
             	<br>The procedure for acquiring the honorarium is as follows:
 			<ol>
@@ -48,10 +51,11 @@
 				<li>After FOSSEE receives the filled-in honorarium forms, the honorarium amount is transferred to your bank account through NEFT. Fill in  Bankdetails_Form.pdf with details of the bank account to which you want the honorarium to be transferred.</li>
 				<li>We generally process your honorarium within 45 days from the day we receive your forms. However, if you do not receive your money within 45 days of acknowledgement of forms received, please feel free to contact us;  we are happy to assist you.</li>
 			</ol>
-			<span>Please note that the honorarium processing only starts after we receive your completed honorarium forms. Ensure that you have made a PAN card and submit the forms in time to avoid delays.</span>
-
-			<h4><center>Forms</center></h4>
-			Kindly print out the forms below, fill the required fields and mail them to the address:
+			<p><span>Please note that the honorarium processing only starts after we receive your completed honorarium forms. Ensure that you have made a PAN card and submit the forms in time to avoid delays.</span><p>
+			<br> <br>
+			<h2><center>Forms</center></h2>
+			<br>
+			<p>Kindly print out the forms below, fill the required fields and mail them to the address:<p>
 			<ul>
 				<li> <a href = "https://static.fossee.in/animations/forms/Copyright_Transfer.pdf"> Copyright Transfer Form </a> </li>
 				<li> <a href = "https://static.fossee.in/animations/forms/Contributor_Details.pdf"> Contributor Details Form </a> </li>
diff --git a/fossee_manim/templates/fossee_manim/index.html b/fossee_manim/templates/fossee_manim/index.html
index f37d79b..2adf680 100644
--- a/fossee_manim/templates/fossee_manim/index.html
+++ b/fossee_manim/templates/fossee_manim/index.html
@@ -1,87 +1,11 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
+{% extends 'fossee_manim/base.html' %}
 
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="Akshen Doke" content="FOSSEE-IITB">
-        <meta name="title" content="Welcome to FOSSEE's Animation for Education">
-        <meta name="description" content=".">
-        <meta name="keywords" content="fossee, iit bombay, animation based learning math, manim, python based animations">
+{% block title %}
+	FOSSEE Animations Homepage
+{% endblock %}
 
-		<title>FOSSEE Animations</title>
-		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-		<style type="text/css">
-			.perma_link{
-				color: #222222;
-			}
-			.perma_link:hover{
-				background-color:#a0e6ee;
-				text-decoration: none;
-			}
-			.perma_link a{
-				text-decoration: none;
-			}
-			.bck_clr{
-				background-color: #222222;
-			}
-			.fa{
-				padding: 10px;
-			}
-		</style>
-		<!-- favicon -->
-		<link rel="shortcut icon" href="{{ URL_ROOT }}/static/img/favicon.ico" />
-		</head>
-
-		<body>
-			<!--<div class="container-fluid">-->
-			<div class="col-md-12">
-			<nav class="navbar navbar-expand-lg navbar-light row bck_clr fixed-top" style="padding-top: 20px; padding-bottom: 20px;">
-			  	<a class="navbar-brand" href="#">
-					<img src="{{ URL_ROOT }}/static/img/logo_main.png" width="150" height="33.75" alt="Main_Logo" style="margin-right: 50px; margin-left: 20px">
-			  	</a>
-			  	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-			    	<span class="navbar-toggler-icon"></span>
-			  	</button>
-
-			  	<div class="collapse navbar-collapse" id="navbarSupportedContent">
-					<form class="form-inline" method="POST" action="/search/" style="margin-left: 10px; margin-top: 10px ">
-						{% csrf_token %}
-						<input class="form-control mr-sm-2" type="search" id="sbox" name="sbox" placeholder="Search">
-							<button class="btn btn-primary my-2 my-sm-0" type="submit">
-							Search
-							</button>
-					</form>
-
-					<ul class="navbar-nav ml-md-auto">
-						<li class="nav-item dropdown">
-							<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" style="color:white">Login / Register</a>
-							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
-								 <a class="dropdown-item" href="{% url 'login' %}">Login</a>
-								<div class="dropdown-divider">
-								</div>
-								<a class="dropdown-item" href="{% url 'register' %}">Register</a>
-							</div>
-						</li>
-					</ul>
-
-			  </div>
-			</nav>
-			<!-- Remove sticky-top if the buttons are not supposed to scroll down-->
-			<div class="jumbotron row sticky-top" style="padding-top: 90px; padding-bottom: 0.2%; margin-bottom: 0px; color:#dddddd">
-				<div class="btn-group btn-group-lg" role="group">
-					<button class="btn btn-link perma_link" type="button"><a href="#" style="color:#157b80">About</a></button>
-					<button class="btn btn-link perma_link" type="button"><a href="{% url 'guidelines' %}" style="color:#222222">Guidelines</a></button>
-					<button class="btn btn-link perma_link" type="button"><a href="{% url 'faqs' %}" style="color:#222222">FAQ</a></button>
-					<button class="btn btn-link perma_link" type="button"><a href="{% url 'honorarium' %}" style="color:#222222">Honorarium</a></button>
-					<button class="btn btn-link perma_link" type="button"><a href="{% url 'send_proposal' %}" style="color:#dd1100">Submit Proposal</a></button>
-				</div>
-			</div>
+			{% block content %}
+			<div class="container-fluid jumbotron row" align = "justify" style= "padding:0px; height: 550px;">
 
 			<div id="carouselExampleIndicators" class="carousel slide row" data-ride="carousel" style="margin-top: 0px">
 			  <ol class="carousel-indicators">
@@ -93,8 +17,8 @@
 
 			    <div class="carousel-item active">
 			      <img class="d-block w-100" src="{{ URL_ROOT }}/static/img/carousel1.png" alt="First slide" height=550>
-			      <div class="carousel-caption col-md-4" style="float:left;">
-				   <h3><b>FOSSEE Animations</b></h3>
+			      <div class="carousel-caption col-md-4" style="float:left; font-family: 'Lato', sans-serif;  text-align: left; margin-left: -20px; margin-bottom:15px">
+				   <h3><a style="font-family: 'Montserrat', sans-serif; font-weight: 500;">FOSSEE Animations</a></h3>
 				   <h5>endeavors to be an extensive library
 						of community-curated videos on STEM topics
 					</h5>
@@ -102,16 +26,16 @@
 			    </div>
 			    <div class="carousel-item">
 			      <img class="d-block w-100" src="{{ URL_ROOT }}/static/img/carousel3.png" alt="Second slide" height=550>
-				  	<div class="carousel-caption col-md-3" style="float:right;">
-				   		<h3><b>Anyone can contribute to the project</b></h3>
+				  	<div class="carousel-caption col-md-3" style="float:right; font-family: 'Lato', sans-serif;">
+				   		<h3><a style="font-family: 'Montserrat', sans-serif; font-weight: 500;">Anyone can contribute to the project</a></h3>
 						<h5> The only requirement is that the video should be made using <i>OpenSource</i> tools</h5>like Blender, Manim, Mayavi, etc.
 			  		</div>
 				</div>
 			    <div class="carousel-item">
 			      <img class="d-block w-100" src="{{ URL_ROOT }}/static/img/carousel2.png" alt="Third slide" height=550>
-				  <div class="carousel-caption col-md-4" style="margin-left:540px; margin-bottom:250px;float:right;">
-					  <h5><b>Upon successful submission</b><br>
-						  you receive a certificate and an<br>
+				  <div class="carousel-caption col-md-4" style="margin-left:560px; margin-bottom:250px;float:right; font-family: 'Lato', sans-serif; text-align:right">
+					  <h3><a style="font-family: 'Montserrat', sans-serif; font-weight: 500;">On successful submission</a></h3>
+						  <h5>you receive a certificate and an<br>
 						  honorarium from FOSSEE,<br>IIT-Bombay</h5>
 				  </div>
 			    </div>
@@ -125,45 +49,17 @@
 			    <span class="sr-only">Next</span>
 			  </a>
 			</div>
+			</div>
 
 
 			<!--Infographics-->
 
-			<div class="jumbotron row text-center" style="background-color: white"> <!-- style="background-image: url('');  background-size: cover;">-->
+			<div class="jumbotron row text-center" id= "infg" style="background-color: white; margin: 10px; font-family:'Lato', sans-serif; font-weight:400">
 				<div class="container text-center">
-				 	<h1 style="color: #e45700"><b>HOW IT WORKS</b></h1>
+				 	<h1 style="color: #e45700; font-family:'Montserrat', sans-serif;">HOW IT WORKS</h1>
 					<img  class="img-fluid d-block text-center" width="100%" src="{{ URL_ROOT }}/static/img/info.svg" alt="Infographic">
+					<br>
+					Want to know more? Visit our <a href="{{URL_ROOT}}/guidelines/"  style="background-color:#157b80; color:white;">Guidelines</a> page!
 			    </div>
 			</div>
-
-		<!--Footer-->
-		<div class="jumbotron row" style="background-color: #222222; margin-bottom: 0px; border-radius: 0 !important;">
-
-			<div class="container">
-				<div class="row">
-				    <div class="col-md text-center">
-				        <img src="{{ URL_ROOT }}/static/img/fossee_logo_iitb.png" style="">
-				    </div>
-				    <div class="col-md text" style="color:#e9ecef;">
-				        FOSSEE | IIT-Bombay <br>
-				        Mumbai, India  - 400-076 <br>
-				        Phone: (+91) 22-2576-4133<br>
-				        Email: animations@fossee.in
-				    </div>
-				    <div class="col-md text-center" style="color:#e9ecef; margin-top: 15px">
-				      <b>Follow us on:<br/>
-				      <a href="https://twitter.com/fosseenmeict" class="fa fa-twitter"></a>
-				      <a href="https://www.instagram.com/fossee_nmeict/" class="fa fa-instagram"></a>
-					  <a href="https://www.facebook.com/FOSSEENMEICT/" class="fa fa-facebook"></a>
-					  <a href="https://github.com/FOSSEE/" class="fa fa-github"></a>
-					</div>
-				</div>
-				<hr>
-				<div class="text-center row" style="color: #e9ecef; color:white;  padding:10px;margin-left: 10px; text-align:center">
-				    The FOSSEE project is funded by the National Mission on Education through ICT, MHRD, Government of India.
-				        This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
-				</div>
-			</div>
-		</div>
-	</body>
-</html>
+		{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/login.html b/fossee_manim/templates/fossee_manim/login.html
index 611f6ca..fc5d4bc 100644
--- a/fossee_manim/templates/fossee_manim/login.html
+++ b/fossee_manim/templates/fossee_manim/login.html
@@ -7,8 +7,7 @@
 {% block content %}
 	<div class="container" align="center">
 		<br>
-		<h3>Login</h3>
-		<br>
+		<h1>Login</h1>
 		<form method="post">
 			  {% csrf_token %}
 			  <table class="table table-bordered">
@@ -16,10 +15,11 @@
 			  <br>
 			  <br>
 			  </table>
-				<button class="btn btn-success btn-sm" type="submit">Login</button>
-        <a href="{{URL_ROOT}}/forgotpassword/" class="btn btn-default btn-sm" style="color:#3693C0;">Forgot Password</a>
-			  <br>
+				<button class="btn btn-success btn-sm" type="submit" style="background-color:#e45700;color:white; border:0px">Login</button>
+        <a href="{{URL_ROOT}}/forgotpassword/" class="btn btn-default btn-sm" style="color:#157b80; ">Forgot Password?</a>
 		</form>
 		<br>
+		<p>Don't have an account yet? <a href="{{URL_ROOT}}/register/"  style="background-color:#157b80; color:white;">Register here!</a></p>
+		<br>
 	</div>
-	{% endblock %}
\ No newline at end of file
+	{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/profile_updated.html b/fossee_manim/templates/fossee_manim/profile_updated.html
index ef7177c..68cf636 100644
--- a/fossee_manim/templates/fossee_manim/profile_updated.html
+++ b/fossee_manim/templates/fossee_manim/profile_updated.html
@@ -11,9 +11,11 @@
   <script src="{{URL_ROOT}}/static/fossee_manim/js/bootstrap-3.3.7.min.js"></script>
   {% endblock %}
 {% block content %}
+<br> <br> <br>
   <div class="container">
-    <div class="jumbotron">
+    <div class="jumbotron row">
       <h3>Your Profile has changed {{ user.first_name }}</h3>
     </div>
   </div>
-{% endblock %}
\ No newline at end of file
+  <br>
+{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/proposal_status.html b/fossee_manim/templates/fossee_manim/proposal_status.html
index a37a8be..a5cf74e 100644
--- a/fossee_manim/templates/fossee_manim/proposal_status.html
+++ b/fossee_manim/templates/fossee_manim/proposal_status.html
@@ -4,12 +4,14 @@
 		Proposal Status
 	{% endblock %}
 {% block content %}
+
 <div class = "jumbotron" style = "background-color: white; margin-top: 0px;">
 	<div class="container" align="center">
 
 	{% if request.user.profile.position == 'contributor' %}
 	<h2> Proposal Status </h2>
-	<table class="table table-hover">
+	<hr>
+	<table class="table table-hover" style= "font-family: 'Lato', sans-serif;">
 		<thead>
 			<tr>
 				<th>Title</th>
@@ -29,7 +31,7 @@
 					<td><span class="text-info">{{ an.status }}</span></td>
 					{% endif %}
 					<td><span class="badge">{{ an.created }}</span></td>
-					<td><a href="{% url 'edit_proposal' an.id %}"><button type="button" class="btn btn-info">Edit</button></a></td>
+					<td><a href="{% url 'edit_proposal' an.id %}"><button type="button" class="btn btn-info" id= "btnblue">Edit</button></a></td>
 				</tr>
 			</tbody>
 		{% endfor %}
diff --git a/fossee_manim/templates/fossee_manim/register.html b/fossee_manim/templates/fossee_manim/register.html
index 5b148a9..e21c5fa 100644
--- a/fossee_manim/templates/fossee_manim/register.html
+++ b/fossee_manim/templates/fossee_manim/register.html
@@ -18,7 +18,8 @@
 
 	<div class="container" >
 		<br>
-		<h3>Contributor Registration Form</h3>
+		<center>
+		<h1>Contributor Registration Form</h1>
 		<br>
 		<form action="" method="post">
 			{% csrf_token %}
@@ -26,12 +27,13 @@
 					{{ form.as_table }}
 				</table>
 
-				<button class="btn btn-success" type="submit">Register</button>
+				<button class="btn btn-success" type="submit" style="background-color: #157b80; border-width:0px;">Register</button>
 		</form><br>
+		</center>
 		<!-- Activate when reviwers registeration starts -->
 		<!-- <div class="alert alert-info">
   			<strong>Info!</strong> reviwerss, please wait for our admin approval, if your reviwers account is not activated in 7 days, please mail us at workshops[at]fossee[dot]in
 		</div> -->
 		<br>
 	</div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/search_results.html b/fossee_manim/templates/fossee_manim/search_results.html
index add5004..303b735 100644
--- a/fossee_manim/templates/fossee_manim/search_results.html
+++ b/fossee_manim/templates/fossee_manim/search_results.html
@@ -5,6 +5,7 @@
 	{% endblock %}
 
 {% block content %}
+<br> <br>
 <div class="container-fluid jumbotron" style="margin-top:20px">
 		{% if s_result %}
 			{% for anime in s_result %}
@@ -16,8 +17,8 @@
 						</a>
 					</div>
 					<div class="col-md-4">
-						<p style="color:#26A669; font-size: 300%;"> {{ anime.animation.title }} </p>
-						<p style="color:#26A669; font-size: 100%;"> {{ anime.animation.description | truncatewords:5}} </p>
+						<p style="color:#157b80; font-size: 300%;"> {{ anime.animation.title }} </p>
+						<p style="color:black; font-size: 100%;"> {{ anime.animation.description | truncatewords:5}} </p>
 						<a target="_blank" href="{{ anime.animation.github }}"><p style="font-size: 70%;"> {{ anime.animation.github }} </p></a>
 					</div>
 				</div>
diff --git a/fossee_manim/templates/fossee_manim/send_proposal.html b/fossee_manim/templates/fossee_manim/send_proposal.html
index ecfa1e0..b17e2bd 100644
--- a/fossee_manim/templates/fossee_manim/send_proposal.html
+++ b/fossee_manim/templates/fossee_manim/send_proposal.html
@@ -16,18 +16,14 @@
 			</ul>
 			{% endif %}
 
-
-  	<!-- <div class="container-fluid jumbotron"  align = "justify"> -->
-  		<!-- <h1><center>Proposal - Stage 1</center></h1> -->
-	<!-- </div> -->
-
 	<div class="container-fluid jumbotron" align="center" style="background-color: white;">
 		<h1><center>Proposal - Stage 1</center></h1>
-			<div class="alert alert-info">
+		<hr>
+			<div class="alert alert-info" style= "background-color: #c2eff4; color: #157b80;">
 					Please Note: If you're not serious about creating animations, do not send us a proposal.
 					Fake submissions can result in permanent ban.
 			  </div>
-			  <br>
+			 
 
 		<form method="post">
 			{% csrf_token %}
@@ -37,7 +33,15 @@
 			</table>
 			<br>
 			<br>
-			<button class="btn btn-success" type="submit">Save</button>
-			</form>
+			<button class="btn btn-success" id = "btnblue" type="submit">Save</button>
+		</form>
+
+		<!-- Initialize Quill editor -->
+		<script>
+		  var quill = new Quill('#custom_editor', {
+		    theme: 'snow'
+		  });
+		</script>
+
 	</div>
 	{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/video.html b/fossee_manim/templates/fossee_manim/video.html
index 31867da..e7cf6b3 100644
--- a/fossee_manim/templates/fossee_manim/video.html
+++ b/fossee_manim/templates/fossee_manim/video.html
@@ -10,11 +10,11 @@
             <div class="col-md-12" >
                     <br>
                     <video width="100%" height="90%" controls>
-                            <source src="{{video.0.video_path.url}}" type="video/mp4">                
+                            <source src="{{video.0.video_path.url}}" type="video/mp4">
                     </video>
                     <div class="row">
                         <div class="col-md-8">
-                                <p style="color:#26A669; font-size: 200%; float: left;"> {{ video.0.animation.title }} </p>            
+                                <p style="color: #157b80; font-size: 200%; float: left;"> {{ video.0.animation.title }} </p>
                         </div>
                         <div class="col-md-4">
                                 <p style="font-size: 70%; float: right;"> {{ video.0.animation.subcategory }} </p>
@@ -22,68 +22,58 @@
                     </div>
                     <br>
             </div>
-            
+
        </div>
        <div class="row">
                 <div class="col-md-10">
                                 <hr>
                                 <br>
-                                <p style="color:black; font-size: 100%; float: left;"> 
-                                        {{ video.0.animation.outline }} 
+                                <p style="color:black; font-size: 100%; float: left;">
+                                        {{ video.0.animation.outline|safe }}
                                 </p>
                                 <br>
                                 </div>
        </div>
        <hr>
-       <div class="row">
-                <div class="col-md-4">
-                        <a href="{% url 'video' reco.0.id  %}" >
-                                <span class="fa fa-play fa-4x" id="play-btn"></span>
-                                <img height="95%" width="95%" src="{{ reco.0.thumbnail.url }}">
-                        </a>
-                </div>
+	   <div class="row">
+		   {% if reco %}
+		   {% for item in reco %}
                 <div class="col-md-4">
-                        <a href="{% url 'video' reco.1.id  %}" >
+                        <a href="{% url 'video' item.id  %}" >
                                 <span class="fa fa-play fa-4x" id="play-btn"></span>
-                                <img height="95%" width="95%" src="{{ reco.1.thumbnail.url }}">
-                        </a>
-                </div>
-                <div class="col-md-4">
-                        <a href="{% url 'video' reco.2.id  %}" >
-                                <span class="fa fa-play fa-4x" id="play-btn"></span>
-                                <img height="95%" width="95%" src="{{ reco.2.thumbnail.url }}">
+                                <img height="95%" width="95%" src="{{ item.thumbnail.url }}">
                         </a>
                 </div>
+			{% endfor %}
+			{% endif %}
        </div>
         <div>
-                <br>  <br>
-                        <h2>Comments</h2>
-                        <div>
-                            <form method="POST">
-                                <br>
-                                {% csrf_token %}
-                                {{ comment_form.as_p }}
-                                <button type="submit" class="btn btn-success">Post</button>
-                            </form>
-                            
-                          </div>
-                          <hr style="background-color: #fff;
-                              border-top: 5px double #8c8b8b;">
-                          <table>
-                            {% for comment in comments %}
-                            <tbody>
-                              <tr>
-                                <td>
-                                  <h5>{{ comment.commentor.profile.user.get_full_name }} | {{ comment.created_date | date  }}</h5> 
-                                  <h6 style="background-color: #ecf0f1; padding:10px;">{{ comment.comment }}</h6>
-                                  <hr style="border-top: 0.5px solid #8c8b8b;">
-                                </td>
-                              </tr>
-                            </tbody>
-                            {% endfor %}
-                          </table>
-                          
-                      <br>
+        <br><br>
+        	<h2>Comments</h2>
+            <div>
+            <form method="POST">
+                <br>
+                {% csrf_token %}
+                {{ comment_form.as_p }}
+                <button type="submit" class="btn btn-success">Post</button>
+            </form>
+          	</div>
+            <hr style="background-color: #fff;
+                  border-top: 5px double #8c8b8b;">
+                <table>
+                {% for comment in comments %}
+                	<tbody>
+              		<tr>
+	                <td>
+	              	<h5>{{ comment.commentor.profile.user.get_full_name }} | {{ comment.created_date | date  }}</h5>
+	              	<h6 style="background-color: #ecf0f1; padding:10px;">{{ comment.comment }}</h6>
+	              	<hr style="border-top: 0.5px solid #8c8b8b;">
+	                </td>
+	              	</tr>
+	                </tbody>
+            	{% endfor %}
+                  </table>
+            <br>
         </div>
 	</div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/fossee_manim/templates/fossee_manim/view_profile.html b/fossee_manim/templates/fossee_manim/view_profile.html
index 69205a2..1edf689 100644
--- a/fossee_manim/templates/fossee_manim/view_profile.html
+++ b/fossee_manim/templates/fossee_manim/view_profile.html
@@ -12,8 +12,9 @@
 
 {% csrf_token %}
 {% block content %}
-  <br>
   <div class="container jumbotron" style="background-color:white;">
+    <center>  <h1> View Profile </h1> </center>
+    <br>
   <table class="table table-bordered">
   <tr>
     <th><label for="id_first_name"><h5>First name:</h5></label></th>
@@ -49,7 +50,7 @@
   </tr>
   </table>
     <br>
-    <a class="btn btn-primary pull-right" href="{{ URL_ROOT }}/edit_profile/">Edit Profile</a>
+    <a class="btn btn-primary pull-right" href="{{ URL_ROOT }}/edit_profile/" id= "btnblue">Edit Profile</a>
   </div>
   <br><br>
 {% endblock %}
diff --git a/fossee_manim/urls.py b/fossee_manim/urls.py
index 6d24111..c41dd11 100644
--- a/fossee_manim/urls.py
+++ b/fossee_manim/urls.py
@@ -25,7 +25,8 @@ urlpatterns = [
     url(r'^honorarium/$', views.honorarium, name='honorarium'),
     url(r'^faqs/$', views.faqs, name='faqs'),
     url(r'^search_category/(?P<cat>.+)$', views.search_category,
-        name='search_category')
+        name='search_category'),
+    url(r'^about/$',views.about, name='about'),
 ]
 
 urlpatterns += static(
diff --git a/fossee_manim/views.py b/fossee_manim/views.py
index a0d0c22..06c7b3b 100644
--- a/fossee_manim/views.py
+++ b/fossee_manim/views.py
@@ -35,7 +35,7 @@ except ImportError:
 
 __author__ = "Akshen Doke"
 __credits__ = ["Prabhu Ramachandran", "Aditya P.", "KhushalSingh Rajput",
-                "Prathamesh Salunke", "Purusharth Saxsena", "Sharanya Achut"
+                "Prathamesh Salunke", "Purusharth Saxsena", "Sharanya Achut", "Ankit Javalkar"
                 ]
 
 def makepath(proposal_data, reject=None):
@@ -88,7 +88,7 @@ def index(request):
 
 
 def is_reviewer(user):
-    '''Check if the user is having reviewer rights'''
+    '''Check if the user has reviewer rights'''
     return user.groups.filter(name='reviewer').exists()
 
 
@@ -304,7 +304,7 @@ def proposal_status(request):
             anime = Animation.objects.filter(contributor_id=user).order_by('-created')
         else:
             anime_list = Animation.objects.order_by('-created')
-        
+
         # Show upto 9 proposals per page
         paginator_c = Paginator(list(anime), 9)
         paginator_r  = Paginator(list(anime_list), 9)
@@ -429,7 +429,7 @@ def search(request):
             Q(animation__title__contains=word) | Q(animation__outline__contains=word)
             | Q(animation__category__name__contains=word) | Q(animation__subcategory__contains=word),
             animation__status='released')
-        
+
     return render(request, 'fossee_manim/search_results.html',
                   {'s_result': anime_list, 'categories': categories})
 
@@ -499,7 +499,7 @@ def video(request, aid=None):
                 return redirect('/login/')
     else:
         return redirect('/view_profile/')
-            
+
     if len(suggestion_list)>3:
         suggestion_list = sample(suggestion_list, 3)
     else:
@@ -525,7 +525,10 @@ def search_category(request, cat=None):
 def guidelines(request):
     categories = Category.objects.all()
     return render(request, 'fossee_manim/guidelines.html', {'categories': categories})
-    
+
+def about(request):
+    categories = Category.objects.all()
+    return render(request, 'fossee_manim/about.html', {'categories': categories})
 
 def honorarium(request):
     categories = Category.objects.all()
@@ -533,4 +536,4 @@ def honorarium(request):
 
 def faqs(request):
     categories = Category.objects.all()
-    return render(request, 'fossee_manim/faqs.html', {'categories': categories})
\ No newline at end of file
+    return render(request, 'fossee_manim/faqs.html', {'categories': categories})
diff --git a/static/css/index.css b/static/css/index.css
index f1b32bc..9d7643a 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -24,7 +24,7 @@
 
 #container_img {
     margin: auto;
-    
+
 }
 
 form.example input[type=text] {
@@ -64,7 +64,7 @@ form.example::after {
 #btns {
     padding: 25 25 25 25;
     font-size: 155%;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-family: 'Lato', sans-serif;
 }
 
 #btns > a {
@@ -123,4 +123,4 @@ hr {
 #circle:hover {
     background-color: #ffe0b2;
     border-radius: 50%;
-  }
\ No newline at end of file
+}
diff --git a/static/img/fossee_logo_iitb.png b/static/img/fossee_logo_iitb.png
deleted file mode 100644
index 4e56081..0000000
--- a/static/img/fossee_logo_iitb.png
+++ /dev/null
diff --git a/static/img/logo.png b/static/img/logo.png
index 8389fa1..2fef43b 100644
--- a/static/img/logo.png
+++ b/static/img/logo.png