mockup site finished

webapp/src/App.js

@@ -1,7 +1,11 @@
+import './App.css';
+import Header from "./components/Header/Header"
+import LeetcodeProblems from "./components/LeetcodeProblems/LeetcodeProblems"
 function App() {
   return (
     <div className="App">
-
+      <Header></Header>
+      <LeetcodeProblems></LeetcodeProblems>
     </div>
   );
 }

webapp/src/components/Header/Header.css

@@ -0,0 +1,12 @@
+.header-container {
+    display: flex;
+    justify-content: center; /* Center the content horizontally */
+    align-items: center; /* Center the content vertically */
+    height: 100px; /* Set a fixed height */
+    border-bottom: 2px solid black;
+  }
+
+  .logo {
+    width: 500px; /* Set width as desired */
+    height: auto; /* Maintain aspect ratio */
+  }

webapp/src/components/Header/Header.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Logo from "../../assets/CodeCrewLogo.png"
+import './Header.css'
+
+function Header() {
+  return (
+    <div>
+        <div>
+      <header className="header-container">
+        <img src={Logo} alt="CodeCrewLogo" className="logo" />
+      </header>
+    </div>
+    </div>
+  )
+}
+
+export default Header

webapp/src/components/LeetcodeProblems/LeetcodeProblems.css

@@ -0,0 +1,32 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .title {
+    border: 1px solid #ccc; /* Add border to title section */
+    padding: 20px; /* Add padding for better spacing */
+    width: 80%; /* Set a width to prevent it from stretching too wide */
+    box-sizing: border-box; /* Include padding and border in the width calculation */
+    margin-bottom: 20px; /* Adjust as needed */
+    margin-top: 20px;
+  }
+
+  .box-container {
+    display: flex;
+    justify-content: space-between;
+    width: 80%; /* Set a width to prevent it from stretching too wide */
+  }
+
+  .content {
+    border: 1px solid #ccc; /* Add border to content sections */
+    padding: 20px; /* Add padding for better spacing */
+    width: calc(50% - 10px); /* Set width for content sections */
+    box-sizing: border-box; /* Include padding and border in the width calculation */
+  }
+
+  #problemName {
+    text-align: center; /* Center the text within #problemName */
+  }
+

webapp/src/components/LeetcodeProblems/LeetcodeProblems.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import '../LeetcodeProblems/LeetcodeProblems.css'; 
+
+function LeetcodeProblems() {
+  return (
+    <div id="problemContainer" class="container">
+    <div id="problemName" class="title">
+      <h1>Palindrome Number</h1>
+    </div>
+    <div class="box-container">
+      <div id="problemDescription" class="content">
+      Given an integer x, return true if x is a
+palindrome
+, and false otherwise.
+      </div>
+      <div id="problemExample" class="content">
+      Example 1:
+
+Input: x = 121
+Output: true
+Explanation: 121 reads as 121 from left to right and from right to left.
+<br></br>
+Example 2:
+
+Input: x = -121
+Output: false
+Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.
+<br></br>
+Example 3:
+
+Input: x = 10
+Output: false
+Explanation: Reads 01 from right to left. Therefore it is not a palindrome.
+
+
+      </div>
+    </div>
+  </div>
+
+
+  )
+}
+
+export default LeetcodeProblems