From e4e48cc1dea511fa148d7ca220154fbe2dcf53a1 Mon Sep 17 00:00:00 2001 From: tymoteuszjozwiak Date: Mon, 24 Jun 2024 11:37:36 +0200 Subject: [PATCH] add CTA banner --- css/style.css | 48 +++++++++++++++++++++++++++++-- templates/partials/base.html.twig | 3 ++ templates/partials/cta.html.twig | 3 ++ 3 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 templates/partials/cta.html.twig diff --git a/css/style.css b/css/style.css index f5cb99b..54be8f2 100644 --- a/css/style.css +++ b/css/style.css @@ -198,6 +198,34 @@ a:hover { margin: 0; } +.cta { + color: var(--btn-txt-color); + background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); + font-size: 1rem; + margin: 0; + padding: 0; + text-align: center; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 3rem; + line-height: 3rem; + top: 0; + left: 0; + animation: fadeOut 7s forwards; +} + + @keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + .blog-card { display: flex; flex-direction: row; @@ -365,10 +393,20 @@ em { } nav { - margin-top: 1%; - font-size: 1.6em; + margin-top:3rem; + font-size:1.6em; + animation: adjustMargin 7s forwards; } + @keyframes adjustMargin { + 0% { + margin-top: 2rem; + } + 100% { + margin-top: 1rem; + } + } + nav a, nav a:focus, nav a:hover { @@ -404,6 +442,12 @@ nav .nav-btn { margin-right: 5%; } + .cta { + font-size:.9rem; + line-height: 1.5rem; + height: 3.1rem; + } + .content { font-size: 1.15rem; padding: 15% 5% 0; diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig index 3778539..51130f1 100644 --- a/templates/partials/base.html.twig +++ b/templates/partials/base.html.twig @@ -93,6 +93,9 @@ +{% CTA banner %} +
{% include 'partials/cta.html.twig' %}
+ {% block header %}
{% block header_navigation %} diff --git a/templates/partials/cta.html.twig b/templates/partials/cta.html.twig new file mode 100644 index 0000000..4c57e5a --- /dev/null +++ b/templates/partials/cta.html.twig @@ -0,0 +1,3 @@ +{% CTA banner content %} +Zbiór wszystkich ciekawych linków z newslettera? Znajdziesz go tutaj +