diff --git a/src/assets/BannerTemplate.jpg b/src/assets/BannerTemplate.jpg new file mode 100644 index 0000000..847dd18 Binary files /dev/null and b/src/assets/BannerTemplate.jpg differ diff --git a/src/assets/intermission.png b/src/assets/intermission.png new file mode 100644 index 0000000..7a5dd79 Binary files /dev/null and b/src/assets/intermission.png differ diff --git a/src/pages/Home.js b/src/pages/Home.js index e65a239..12ff3ea 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,6 +1,6 @@ import React from "react"; import { Link } from "react-router-dom"; -import BannerImage from "../assets/MytwitchBanner.png"; +import BannerImage from "../assets/BannerTemplate.jpg"; import "../styles/Home.css"; function Home() { diff --git a/src/styles/Footer.css b/src/styles/Footer.css index 9be003a..c829fbb 100644 --- a/src/styles/Footer.css +++ b/src/styles/Footer.css @@ -1,23 +1,23 @@ .footer { width: 100svw; - height: 160px; + height: 130px; background-color: #121619; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 10px; - z-index: 1000; + } .socialMedia svg, .socialMedia a { - color: white; + color: rgb(255, 0, 0); margin: 20px; - font-size: 70px; + font-size: 60px; cursor: pointer; text-decoration: none; } .footer p { - color: white; + color: rgb(0, 255, 13); } \ No newline at end of file diff --git a/src/styles/Home.css b/src/styles/Home.css index 8572441..4174c6e 100644 --- a/src/styles/Home.css +++ b/src/styles/Home.css @@ -14,8 +14,10 @@ .headerContainer { border-radius: 10px; height: auto; - width: auto; + width: 50svw; margin-left: 30px; + padding: 16px; + background-color: rgba(105, 105, 105, 0.16); } .headerContainer h1 { @@ -68,6 +70,7 @@ border: 1px solid black; padding: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + border-radius: 10%; z-index: 1001; } @@ -130,8 +133,60 @@ } } -@media only screen and (max-height: 500px) { +@media only screen and (max-width: 1030px) { .discordint iframe { display: none; } -} \ No newline at end of file +} + +@media only screen and (max-width: 920px),(max-height: 630px) { + .home { + justify-content: center; + align-items: center; + } + .headerContainer h1, + .headerContainer p { + display: flex; + } + + .headerContainer { + margin-left: 0px; + border-radius: 10px; + padding: 10px; + width: auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: #121619; + color: white; + } + + .headerContainer h1 { + font-size: 40px; + height: 30px; + color: white; + } + + .headerContainer p { + font-size: 30px; + color: white; + } + + .headerContainer button { + background-color: rgb(255, 255, 255); + color: #000000; + margin-bottom: 30px; + } + + .headerContainer button:hover { + background-color: #1500ff; + color: rgb(255, 255, 255); + } + + .discordint iframe { + display: none; + } + +} + diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css index 50cccc2..9af89f4 100644 --- a/src/styles/Navbar.css +++ b/src/styles/Navbar.css @@ -39,6 +39,7 @@ background-color: white; padding: 10px; color: black; + transition: 0.3s ease-in; } .navbar .rightSide button {