change template

css/reset.css

@@ -0,0 +1,25 @@
+/* Minimal CSS Reset */
+
+html {
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

css/styles.css

@@ -0,0 +1,75 @@
+/* Typography */
+
+html {
+	font-family: 'Roboto', sans-serif;
+}
+
+@media (min-width: 576px) {
+	html {
+		font-size: 14px;
+	}
+}
+
+@media (min-width: 768px) {
+	html {
+		font-size: 16px;
+	}
+}
+
+@media (min-width: 992px) {
+	html {
+		font-size: 18px;
+	}
+}
+
+@media (min-width: 1200px) {
+	html {
+		font-size: 20px;
+	}
+}
+
+.icons-social i {
+	font-size: 3em;
+}
+
+/* Custom Styles */
+
+main {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	justify-content: center;
+	padding: 0 30px;
+	text-align: center;
+}
+
+main > .intro {
+	font-family: 'Reem Kufi', sans-serif;
+	font-size: 3.75em;
+	font-weight: 600;
+}
+
+main > .tagline {
+	font-size: 1.5rem;
+	margin: 1.5rem 0;
+	font-weight: 100;
+}
+
+.icons-social i {
+	padding: 10px;
+}
+
+.icons-social a {
+  text-decoration: none;
+}
+
+.devto {
+	margin-bottom: -0.20rem;
+}
+
+.devto svg {
+	margin-bottom: -0.20rem;
+	margin-left: 0.675rem;;
+	width: 2.65rem;
+	height: 2.65rem;
+}

css/themes/green-white.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #43A047;
+	color: #FAFAFA;
+}
+
+.icons-social a {
+	color: #FAFAFA;
+}
+
+.icons-social a svg path{
+	fill: #FAFAFA;
+}

css/themes/grey-white.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #485564;
+	color: #FAFAFA;
+}
+
+.icons-social a {
+	color: #FAFAFA;
+}
+
+.icons-social a svg path{
+	fill: #FAFAFA;
+}

css/themes/indigo-white.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #303F9F;
+	color: #FAFAFA;
+}
+
+.icons-social a {
+	color: #FAFAFA;
+}
+
+.icons-social a svg path{
+	fill: #FAFAFA;
+}

css/themes/red-white.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #AF3D4E;
+	color: #FAFAFA;
+}
+
+.icons-social a {
+	color: #FAFAFA;
+}
+
+.icons-social a svg path{
+	fill: #FAFAFA;
+}

css/themes/white-blue.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #FAFAFA;
+	color: #0277BD;
+}
+
+.icons-social a {
+	color: #0277BD;
+}
+
+.icons-social a svg path{
+	fill: #0277BD;
+}

css/themes/white-grey.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #EDEDED;
+	color: #4B5658;
+}
+
+.icons-social a {
+	color: #4B5658;
+}
+
+.icons-social a svg path{
+	fill: #4B5658;
+}

css/themes/white-indigo.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #E8EAF6;
+	color: #303F9F;
+}
+
+.icons-social a {
+	color: #303F9F;
+}
+
+.icons-social a svg path{
+	fill: #303F9F;
+}

css/themes/white-red.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #EDEDED;
+	color: #AF3D4E;
+}
+
+.icons-social a {
+	color: #AF3D4E;
+}
+
+.icons-social a svg path{
+	fill: #AF3D4E;
+}

css/themes/yellow-black.css

@@ -0,0 +1,14 @@
+/* Theme */
+
+main {
+	background: #FFEB3B;
+	color: #1E1E1E;
+}
+
+.icons-social a {
+	color: #1E1E1E;
+}
+
+.icons-social a svg path{
+	fill: #1E1E1E;
+}