From ec62a8c8aef00d86d7c6020f6809da4812e35c1d Mon Sep 17 00:00:00 2001
From: matt <matt@fiddaman.net>
Date: Tue, 25 Jan 2022 22:51:09 +0000
Subject: [PATCH] Added feature component

---
 src/stylesheets/components/_feature.scss | 46 ++++++++++++++++++++++++
 src/stylesheets/main.scss                |  1 +
 views/partials/feature.hbs               |  7 ++++
 3 files changed, 54 insertions(+)
 create mode 100644 src/stylesheets/components/_feature.scss
 create mode 100644 views/partials/feature.hbs

diff --git a/src/stylesheets/components/_feature.scss b/src/stylesheets/components/_feature.scss
new file mode 100644
index 0000000..9714159
--- /dev/null
+++ b/src/stylesheets/components/_feature.scss
@@ -0,0 +1,46 @@
+.feature {
+	display: grid;
+	grid-template-areas: 'image' 'text';
+	margin: 2rem 0;
+	align-items: center;
+
+	img {
+		width: 100%;
+		grid-area: image;
+		text-align: center;
+	}
+
+	.feature__text {
+		grid-area: text;
+
+		h2 {
+			font-size: 2em;
+			font-family: Roboto;
+			font-style: normal;
+			font-weight: 300;
+			letter-spacing: -0.005em;
+			text-transform: capitalize;
+			text-align: center;
+		}
+
+		p {
+			font-family: Roboto;
+			font-style: normal;
+			font-weight: 300;
+			font-size: 1.1em;
+			letter-spacing: -0.005em;
+		}
+	}
+
+	@include respond-to('medium') {
+		grid-template-columns: 50% 50%;
+
+		&:nth-child(odd) {
+			grid-template-areas: 'image text';
+		}
+
+		&:nth-child(even) {
+			grid-template-areas: 'text image';
+		}
+	}
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index d92d47f..dfe4274 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -8,3 +8,4 @@
 
 @import 'components/homeNav';
 @import 'components/button';
+@import 'components/feature';
diff --git a/views/partials/feature.hbs b/views/partials/feature.hbs
new file mode 100644
index 0000000..00eb205
--- /dev/null
+++ b/views/partials/feature.hbs
@@ -0,0 +1,7 @@
+<div class='feature'>
+	<img src='{{img}}' alt='{{alt}}'/>
+	<div class='feature__text'>
+		<h2 class='feature__title'>{{title}}</h2>
+		<p class='feature__content'>{{content}}</p>
+	</div>
+</div>