Add button

src/assets/source-sans-3/source-sans-3.css

@@ -1,9 +0,0 @@
-/* source-sans-3 */
-@font-face {
-	font-family: "Source Sans 3";
-	font-style: normal;
-	font-weight: 400;
-	font-stretch: 100%;
-	src: local("Source Sans 3 Regular"), local("SourceSans3-Regular"), url(source-sans-3.woff2) format("woff2");
-}
-

src/assets/source-sans-variable/source-sans-3.css

@@ -0,0 +1,19 @@
+/* source-sans-3-extralight-italic-latin */
+@font-face {
+	font-family: "Source Sans 3";
+	font-style: italic;
+	font-weight: 200 900;
+	font-stretch: 100%;
+	src: local("Source Sans 3 Italic"), local("SourceSans3-Italic"), url(source-sans-3-extralight-italic-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+}
+/* source-sans-3-extralight-latin */
+@font-face {
+	font-family: "Source Sans 3";
+	font-style: normal;
+	font-weight: 200 900;
+	font-stretch: 100%;
+	src: local("Source Sans 3"), local("SourceSans3-Roman"), url(source-sans-3-extralight-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+}
+

src/css/customButton.css

@@ -0,0 +1,13 @@
+button {
+  height: 1.2cm;
+  text-decoration: none;
+  font-weight: bold;
+  border-radius: 0.6cm;
+  padding: 0cm 0.75cm 0cm 0.75cm;
+  margin-right: 0.25cm;
+  margin-bottom: 0.25cm;
+  transition-duration: 0.2s;
+  display: flex;
+  align-items: center;
+}
+

src/css/global.css

@@ -1,9 +1,10 @@
-@import url("../assets/source-sans-3/source-sans-3.css");
+@import url("../assets/source-sans-variable/source-sans-3.css");
 
 :root {
   --black: 0, 0, 0;
   --white: 255, 255, 255;
   font-family: "Source Sans 3";
+  font-size: 16pt;
 }
 
 html * {
@@ -13,6 +14,10 @@ html * {
 
 body {
   margin: 0;
-  
 }
 
+.title {
+  font-size: 36pt;
+  font-weight: 900;
+  text-align: center;
+}

src/pages/components/customButton.jsx

@@ -0,0 +1,10 @@
+import '../../css/customButton.css'
+
+function BlackButton({ text })  {
+
+    return(
+          <button>{text}</button>
+    )
+  }
+  
+export default BlackButton

src/pages/homePage.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import '../css/global.css'
+import BlackButton from './components/customButton'
 
 function HomePage() {
 
@@ -10,8 +11,10 @@ function HomePage() {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100vh',
+        flexDirection: 'column',
       }}>
-        <a>Fifty Shades of Bully</a>
+        <a className='title'>Fifty Shades <br /> of Bully</a>
+        <BlackButton text="Start"/>
   	  </div>
   )
 }