From 99ede1ddbcb09470a1fdfb94eb93dcfd06c5e0b0 Mon Sep 17 00:00:00 2001 From: 1776123 <50336512+1776123@users.noreply.github.com> Date: Sat, 15 Aug 2020 21:43:37 -0400 Subject: [PATCH] ui --- news/static/news/css/styles.css | 46 +++++++++++++++++++++++++++++++++ news/templates/news/about.html | 3 ++- news/templates/news/base.html | 2 +- 3 files changed, 49 insertions(+), 2 deletions(-) diff --git a/news/static/news/css/styles.css b/news/static/news/css/styles.css index f68d1f3..a3ddd82 100644 --- a/news/static/news/css/styles.css +++ b/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); + } +} + diff --git a/news/templates/news/about.html b/news/templates/news/about.html index 3f0ef82..67a10fa 100644 --- a/news/templates/news/about.html +++ b/news/templates/news/about.html @@ -1,4 +1,5 @@ {% extends 'news/base.html' %} {% block content %} -
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.
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.
NewViewsNews is paving the way for an open minded and more understanding community. Join us today!
{% endblock content %} diff --git a/news/templates/news/base.html b/news/templates/news/base.html index 232f468..3ff2666 100644 --- a/news/templates/news/base.html +++ b/news/templates/news/base.html @@ -21,7 +21,7 @@