importing fonts and working on button component

Technigo · Apr 20, 2024 · 92f5060 · 92f5060
1 parent 8979b66
commit 92f5060
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
+    <title>Shanti Studio</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,39 @@
+/* basic css */
+
+/* import fonts */
+/* Poppins (from google fonts) */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
+
+/*Argue (download)*/
+@font-face {
+  font-family: "Argue";
+  src: local("Argue"), url("./fonts/Argue.otf") format("otf");
+}
+
+/*Gerbera (download)*/
+@font-face {
+  font-family: "Gerbera";
+  src: local("Gerbera-Bold"), url("./fonts/Gerbera-Bold.otf") format("otf");
+}
+
+/* create variables for colours */
+:root {
+  --primary-blk: #111111;
+  --primary-grey: #505050;
+  --primary-prpl: #620981;
+  --primary-white: #ffffff;
+  --hover-prpl: #430159;
+  --secondary-blue: #dbe3fb;
+}
+
+/* basics */
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: Poppins, sans-serif;
+}
+
+h1 {
+  font-family: "Argue";
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,4 @@
+//components
 import { Happenings } from "./components/Happenings";
 import { Header } from "./components/Header";
 import { About } from "./components/About";
@@ -9,6 +10,13 @@ import { FAQ } from "./components/FAQ";
 import { Form } from "./components/Form";
 import { Footer } from "./components/Footer";
 
+//stylesheet
+import "./App.css";
+
+//fonts
+import "./fonts/Argue.otf";
+import "./fonts/Gerbera-Bold.otf";
+
 export const App = () => {
   return (
     <div>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,3 +1,11 @@
+import { Button } from "../reusables/Button";
+import "../App.css";
+
 export const Header = () => {
-  return <div>Header</div>;
+  return (
+    <section>
+      <h1>Header</h1>
+      <Button>View schedule</Button>
+    </section>
+  );
 };
diff --git a/src/fonts/Argue.otf b/src/fonts/Argue.otf
diff --git a/src/fonts/Gerbera-Bold.otf b/src/fonts/Gerbera-Bold.otf
diff --git a/src/reusables/Button.jsx b/src/reusables/Button.jsx
@@ -1,3 +1,14 @@
-export const Button = () => {
-  return <div>Button</div>;
-};
+import styled from "styled-components";
+
+export const Button = styled.button`
+  background-color: var(--primary-prpl);
+  border-radius: 8px;
+  border: none;
+  color: var(--primary-white);
+  font-size: 30px;
+  padding: 8px 16px;
+
+  &:hover {
+    background-color: var(--hover-prpl);
+  }
+`;