add CTA banner

2024-06-24 11:37:36 +02:00
parent 37c6e2d009
commit e4e48cc1de
3 changed files with 52 additions and 2 deletions
--- 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;
--- a/templates/partials/base.html.twig
+++ b/templates/partials/base.html.twig
@@ -93,6 +93,9 @@
 </head>
 <body id="top"{% if page.header.onload %} onload='{{ page.header.onload|raw }}'{% endif %}>

+{% CTA banner %}
+<div class="cta">{% include 'partials/cta.html.twig' %}</div>
+
 {% block header %}
    <div class="navigation">
            {% block header_navigation %}
--- a/templates/partials/cta.html.twig
+++ b/templates/partials/cta.html.twig
@@ -0,0 +1,3 @@
+{% CTA banner content %}
+Zbiór wszystkich ciekawych linków z newslettera? <a style="color:var(--btn-txt-color)" href="https://newsletter.jozwiak.top/resources/archiwum">Znajdziesz go tutaj</a>
+