add CTA banner

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;