Submission

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.5",
+    "@mui/material": "^5.0.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/App.js

@@ -1,12 +1,22 @@
-import './App.css';
-import Leaderboard from './components/leaderboard';
+import './App.css'
+import Leaderboard from './components/leaderboard'
 import 'bootstrap/dist/css/bootstrap.min.css'
+import Landing from './components/Landing'
+import Questions from './components/Questions'
+import LoginPage from './components/LoginPage'
+import CTFhero from './components/CTFhero'
+import CTFQuestions from './components/CTFQuestions'
 function App() {
   return (
-    <div className="App">
-      <Leaderboard/>
+    <div className='App'>
+      {/* <Questions /> */}
+      {/* <Landing /> */}
+      {/* <Leaderboard /> */}
+      {/* <LoginPage /> */}
+      <CTFhero />
+      <CTFQuestions />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/Button.css

@@ -0,0 +1,19 @@
+.button {
+  font-family: Russo One;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 29px;
+  margin-right: 40px;
+  position: absolute;
+  width: 179px;
+  height: 62px;
+  left: 1100px;
+  top: 44px;
+}
+.button-title {
+  background-color: white;
+  border: none;
+  padding: 17px 54px 17px 54px;
+  border-radius: 40px;
+}

src/components/Button.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import './Button.css'
+
+function Button({ title }) {
+  return (
+    <div className='button'>
+      <button className='button-title'>{title}</button>
+    </div>
+  )
+}
+
+export default Button

src/components/CTFQuestions.css

@@ -0,0 +1,37 @@
+.questionBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.tag {
+  background-color: white;
+  border: none;
+  padding: 7px 10px 7px 10px;
+  border-radius: 40px;
+  font-family: Russo One;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 18px;
+}
+
+.QuestionPage {
+  margin-top: 400px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  color: white;
+  font-family: Russo One;
+}
+
+.questionBox {
+  display: flex;
+  flex-direction: column;
+}
+
+.questionBox textarea {
+  border: 2rem;
+  border-radius: 10px;
+  color: white;
+}

src/components/CTFQuestions.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import CTFhero from './CTFhero'
+import './CTFQuestions.css'
+import { Data } from './Data'
+
+function CTFQuestions() {
+  return (
+    <div className='QuestionPage'>
+      <CTFhero />
+      <div className='questionBox'>
+        <>
+          <p>What are common hydrogen powered vehicles?</p>
+          <button className='tag'>Science</button>
+          <br />
+          <div className='answer'>
+            <textarea name='Answer' id='' cols='30' rows='2'></textarea>
+          </div>
+        </>
+      </div>
+    </div>
+  )
+}
+
+export default CTFQuestions

src/components/CTFhero.css

@@ -0,0 +1,29 @@
+.ctf-text {
+  color: white;
+  font-family: Russo One;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.ctf-text h1 {
+  position: absolute;
+  width: 187px;
+  height: 121px;
+  left: 626px;
+  top: 214px;
+  font-size: 100px;
+  line-height: 120px;
+  background: none;
+  text-decoration: underline;
+}
+
+.ctf-text h3 {
+  position: absolute;
+  width: 299px;
+  height: 48px;
+  left: 570px;
+  top: 335px;
+  font-size: 40px;
+  line-height: 48px;
+  background: none;
+}

src/components/CTFhero.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Button from './Button'
+import './CTFhero.css'
+
+function CTFhero() {
+  return (
+    <div className='hero'>
+      <Button title='Leaderboard' />
+      <div className='ctf-text'>
+        <h1>CTF</h1>
+        <h3>Catch The Flag</h3>
+      </div>
+    </div>
+  )
+}
+
+export default CTFhero

src/components/Data.js

@@ -0,0 +1,23 @@
+export const Data = [
+  {
+    Field: 'Science',
+    Question: 'What is theory of relativity?',
+  },
+
+  {
+    Field: 'Technology',
+    Question: 'What are common hydrogen powered vehicles?',
+    Question:
+      'Is TESLA really helping save humanity by cutting down emmisions?',
+  },
+
+  {
+    Field: 'Architecture',
+    Question: 'What is theory of relativity?',
+  },
+
+  {
+    Field: 'Art',
+    Question: 'What is theory of relativity?',
+  },
+]

src/components/Dropdown.css

@@ -0,0 +1,33 @@
+.question h2 {
+  color: #082032;
+  font-family: Russo One;
+}
+
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.wrap {
+  margin-top: 25px;
+  background-color: white;
+  color: black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  padding: 1.5rem;
+  border-radius: 10px;
+}
+.dropdown {
+  background: white;
+  font-family: Russo One;
+  color: white;
+  text-decoration: none;
+  border-radius: 10px;
+}

src/components/Dropdown.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { Data } from './Data'
+import './Dropdown.css'
+import AddIcon from '@mui/icons-material/Add'
+import ClearIcon from '@mui/icons-material/Clear'
+import CheckIcon from '@mui/icons-material/Check'
+import { InboxRounded } from '@mui/icons-material'
+
+const Dropdown = () => {
+  const [clicked, setClicked] = useState(false)
+  const toggle = (index) => {
+    if (clicked === index) {
+      return setClicked(null)
+    }
+
+    setClicked(index)
+  }
+
+  return (
+    <div className='dropdown-page'>
+      <div className='question'>
+        {Data.map((item, index) => {
+          return (
+            <>
+              <div className='wrap'>
+                <h2 className='wrap' onClick={() => toggle(index)} key={index}>
+                  {item.Field}
+                </h2>
+                <span>
+                  {clicked === index ? (
+                    <ClearIcon className='clearicon' />
+                  ) : (
+                    <AddIcon className='addicon' />
+                  )}
+                </span>
+              </div>
+              {clicked === index ? (
+                <div className='dropdown'>
+                  <div
+                    style={{
+                      borderTop: '2px solid #808080  ',
+                    }}
+                  ></div>
+                  <p>{item.Question}</p>
+                </div>
+              ) : null}
+            </>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default Dropdown