made the first view

ibrahimhabibeg · Apr 13, 2022 · 0cf41ff · 0cf41ff
1 parent fa88d1c
commit 0cf41ff
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 1 deletion.
diff --git a/client/src/App.css b/client/src/App.css
@@ -0,0 +1,4 @@
+body{
+    background-color: rgba(0, 0, 0,.9);
+    text-align: center;
+}
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,9 +1,10 @@
 import './App.css';
+import LandingPage from './pages/LandingPage/LandingPage';
 
 function App() {
   return (
     <div className="App">
-      <h1>Hello World!</h1>
+      <LandingPage/>
     </div>
   );
 }

diff --git a/client/src/pages/LandingPage/LandingPage.css b/client/src/pages/LandingPage/LandingPage.css
@@ -0,0 +1,76 @@
+@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap');
+.LandingPage{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+.title{
+    color: white;
+    font-size: 75px;
+    font-family: 'Ms Madi', cursive;
+    margin-bottom: 20px;
+}
+
+.info{
+    color: rgba(255, 255, 255,.9);
+}
+
+.headerBreak{
+    width: 80%;
+}
+
+.options{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 80%;
+    margin: 0 auto;
+}
+
+.option{
+    color: white;
+    background-color: black;
+    width: 25%;
+    margin: 50px 50px 0;
+    height: 75px;
+    font-size: 40px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border-radius: 20px;
+    transition: all 0.3s;
+    border: 3px solid white;
+}
+
+.option:hover{
+    color: black;
+    background-color: rgba(255, 255, 255,.85);
+    border: 3px solid black;
+}
+
+@media screen and (max-width: 1200px) and (min-width: 480px) {
+    .options{
+        flex-direction: column;
+        width: 75%;
+    }
+    .option{
+        width: 100%;
+        margin: 50px 0 25px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .options{
+        flex-direction: column;
+        width: 75%;
+    }
+    .option{
+        width: 100%;
+        margin: 50px 0 25px;
+        font-size: 25px;
+    }
+    .title{
+        font-size: 50px;
+    }
+}
diff --git a/client/src/pages/LandingPage/LandingPage.jsx b/client/src/pages/LandingPage/LandingPage.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import './LandingPage.css';
+
+export default function LandingPage(){
+    return(
+        <div className="LandingPage">
+            <h1 className="title">Food Game</h1>
+            <h3 className="info">Don't eat the last piece</h3>
+            <hr className="headerBreak"/>
+            <div className="options">
+                <div className="option">Easy</div>
+                <div className="option">Hard</div>
+                <div className="option">Unbeatable</div>
+            </div>
+        </div>
+    );
+}