ui

news/static/news/css/styles.css

@@ -103,3 +103,49 @@ a.article-title:hover {
   text-decoration: none !important;
   color: black !important;
 }
+
+.btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.btn:active {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.btn::after {
+  content: "";
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  border-radius: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  transition: all .4s;
+}
+
+.btn:hover::after {
+  transform: scaleX(1.4) scaleY(1.6);
+  opacity: 0;
+}
+
+.btn-animated {
+  animation: moveInBottom 5s ease-out;
+  animation-fill-mode: backwards;
+}
+
+@keyframes moveInBottom {
+  0% {
+      opacity: 0;
+      transform: translateY(30px);
+  }
+
+  100% {
+      opacity: 1;
+      transform: translateY(0px);
+  }
+}
+

news/templates/news/about.html

@@ -1,4 +1,5 @@
 {% extends 'news/base.html' %}
 {% block content %}
-<h1>This is the NVN about page.</h1>
+<h1>About NewViewsNews</h1>
+<h3><p>In this day and age, close-mindedness and echochambers prevent others from being exposed to people who offer varying perspectives. This has caused a lot of conflict within our society. Our solution: NewViewsNews.</p> <p>NewViewsNews is a crowdsourcing news site that allows you to view the news and opinions of people who have opposing political views. To get started, you simply make an account and specify your position on the political compass. After that, you can write your own posts and view other posts! Our algorithms will display posts from individuals on the opposite side of the compass on your home page.</p> <p>NewViewsNews is paving the way for an open minded and more understanding community. Join us today!</p></h3>
 {% endblock content %}

news/templates/news/base.html

@@ -21,7 +21,7 @@
     <header class="site-header">
       <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
         <div class="container">
-          <a class="navbar-brand mr-4" href=""><img src="../../media/nvn_logo_small.png"></img>
+          <a class="navbar-brand mr-4" href="{% url 'home' %}"><img src="../../media/nvn_logo_small.png"></img>
           </a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>