diff --git a/index.html b/index.html index a52ab900..08b12b08 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Music Releases - Project - Week 5 + Shanti Studio
diff --git a/src/App.css b/src/App.css new file mode 100644 index 00000000..79bc387d --- /dev/null +++ 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 index a34b4f27..8cbc0a42 100644 --- 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 (
diff --git a/src/components/Header.jsx b/src/components/Header.jsx index ed27af82..425600ad 100644 --- 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
Header
; + return ( +
+

Header

+ +
+ ); }; diff --git a/src/fonts/Argue.otf b/src/fonts/Argue.otf new file mode 100644 index 00000000..0898e58c Binary files /dev/null and b/src/fonts/Argue.otf differ diff --git a/src/fonts/Gerbera-Bold.otf b/src/fonts/Gerbera-Bold.otf new file mode 100644 index 00000000..c0b93a66 Binary files /dev/null and b/src/fonts/Gerbera-Bold.otf differ diff --git a/src/reusables/Button.jsx b/src/reusables/Button.jsx index ba85e761..1bdf2d61 100644 --- a/src/reusables/Button.jsx +++ b/src/reusables/Button.jsx @@ -1,3 +1,14 @@ -export const Button = () => { - return
Button
; -}; +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); + } +`;