Merge pull request #200 from RenegadeGandhi/develop

debt reminders page done

public/frontend/assets/css/debt_reminder.css

@@ -0,0 +1,267 @@
+@font-face {
+    font-family: "gilroybold";
+    src: url("../fonts/gilroy-bold.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "gilroy-medium";
+    src: url("../fonts/gilroy-medium.ttf");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "gilroysemibold";
+    src: url("../fonts/gilroy-semibold.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+/* Top section */
+.faq-top {
+    background: #f3f3f3;
+    height: auto;
+    padding-top: 0px;
+}
+
+.faq-top__content {
+    padding: 100px 0;
+    font-size: 15px;
+}
+
+/* faq top title */
+.faq-top__title {
+    font-weight: normal;
+    font-size: 30px;
+    color: #00098a;
+    margin-bottom: 30px;
+    font-family: "gilroybold";
+    line-height: 64px;
+}
+
+/* faq search input */
+#search-faq {
+    max-width: 671px;
+    width: 100%;
+    padding: 16px 0px 16px 34px;
+    margin: 0 auto 45px;
+    height: auto;
+    font-size: 14px;
+    border: none;
+}
+
+#search-faq:hover,
+#search-faq:focus,
+#search-faq:active {
+    box-shadow: 0 0 0 0.1rem #ff8c5f;
+}
+
+/* faq search button */
+.faq-top__btn {
+    border: 1px solid #ff8c5f;
+    box-sizing: border-box;
+    border-radius: 10px;
+    color: #ff8c5f;
+    padding: 12px 60px;
+    transition: all 0.2s ease;
+    -webkit-transition: all 0.2s ease;
+}
+
+.faq-top__btn:hover,
+.faq-top__btn:focus,
+.faq-top__btn:active {
+    background-color: #ff8c5f;
+    color: #fff;
+    transform: translateY(3px);
+    -webkit-transform: translateY(3px);
+}
+
+/* background vector containers with bounce animation */
+.faq-bg__left {
+    position: absolute;
+    left: 0px;
+    top: 210px;
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+    -webkit-animation-name: bounce_effect;
+    animation-name: bounce_effect;
+    -webkit-animation-duration: 3s;
+    animation-duration: 3s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-direction: normal;
+    animation-direction: normal;
+}
+
+.faq-bg__right {
+    position: absolute;
+    right: 0px;
+    top: 24px;
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+    -webkit-animation-name: bounce_effect;
+    animation-name: bounce_effect;
+    -webkit-animation-duration: 3s;
+    animation-duration: 3s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-direction: normal;
+    animation-direction: normal;
+}
+
+/* set height of background vectors */
+.faq-bg__blue-cutout,
+.faq-bg__orange-triangle-cutout {
+    display: block;
+    height: 180px;
+}
+
+.faq-bg__orange-triangle-cutout,
+.faq-bg__yellow-cutout {
+    margin-top: -1px;
+}
+
+.faq-bg__orange-cutout,
+.faq-bg__yellow-cutout {
+    display: block;
+    height: 100px;
+    width: 80px;
+}
+
+/* bounce animation keyframes */
+@keyframes bounce_effect {
+    0% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    50% {
+        -webkit-transform: translateY(32px);
+        transform: translateY(32px);
+    }
+
+    100% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+}
+
+.table-borderless > tbody > tr > td,
+.table-borderless > tbody > tr > th,
+.table-borderless > tfoot > tr > td,
+.table-borderless > tfoot > tr > th,
+.table-borderless > thead > tr > td,
+.table-borderless > thead > tr > th {
+    border: none;
+}
+
+.due, .late, .upcoming {
+    margin: 4rem 0 2rem 0;
+    border-bottom: 1px solid grey;
+}
+
+.y-bullet{
+    color: #FFD43C;
+}
+
+.r-bullet{
+    color: #FF5C5C;
+}
+
+.w-bullet{
+    color: grey;
+}
+
+.last {
+    margin-bottom: 4rem;
+}
+
+@media screen and (max-width: 768px) {
+
+    .faq-bg__left {
+        top: 310px;
+    }
+
+    .faq-bg__right {
+        top: 60px;
+    }
+
+
+    .faq-bg__blue-cutout,
+    .faq-bg__orange-triangle-cutout {
+        height: 110px;
+    }
+
+    .faq-bg__orange-cutout,
+    .faq-bg__yellow-cutout {
+        height: 80px;
+        width: 70px;
+    }
+}
+
+@media screen and (max-width: 425px) {
+    .faq-top__title {
+        font-size: 26px;
+        line-height: 30px;
+    }
+
+    #search-faq {
+        padding: 12px 0px 12px 24px;
+        margin: 0 auto 34px;
+    }
+    .faq-top__btn {
+        padding: 10px 40px;
+    }
+    .faq__title {
+        font-size: 18px;
+    }
+    .faq__content {
+        font-size: 14px;
+    }
+
+    .faq-bg__blue-cutout,
+    .faq-bg__orange-triangle-cutout {
+        height: 60px;
+    }
+
+    .faq-bg__orange-cutout,
+    .faq-bg__yellow-cutout {
+        height: 60px;
+        width: 50px;
+    }
+
+    .fa-angle-up {
+        font-size: 18px;
+    }
+}
+
+@media screen and (max-width: 375px) {
+    .faq-top__title {
+        font-size: 24px;
+    }
+    .fa-angle-up {
+        font-size: 15px;
+    }
+    .faq__title {
+        font-size: 16px;
+    }
+    .faq__content {
+        font-size: 13px;
+    }
+}
+
+@media screen and (max-width: 340px) {
+    .faq-top__title {
+        font-size: 22px;
+    }
+    .fa-angle-up {
+        font-size: 12px;
+    }
+    .faq__title {
+        font-size: 14px;
+    }
+    .faq__content {
+        font-size: 11px;
+    }
+}