create & style basic banner component

2022-05-07 01:12:50 +02:00
parent 07a60dc8b5
commit 66e92fd8fd
3 changed files with 40 additions and 0 deletions
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -22,6 +22,7 @@ nav.main {
 	display: flex;
 	align-items: center;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+	position: relative;
 	a {
 		display: block;
 		padding: 0 1.5rem;
@@ -59,3 +60,29 @@ nav.main {
 		height: var(--size);
 	}
 }
+
+section.banner {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 28rem;
+	h1,
+	p {
+		position: fixed;
+		text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
+	}
+	h1 {
+		font-size: 3.5rem;
+	}
+	p {
+		margin-top: 6rem;
+	}
+	div {
+		// filter: blur(0.2rem);
+		width: 100%;
+		height: 100%;
+		background-size: cover;
+		background-color: var(--black0);
+	}
+}