codepath · jasynj · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/movie.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flixster</title>
   </head>

diff --git a/src/App.css b/src/App.css
@@ -9,7 +9,11 @@
   align-items: center;
   justify-content: space-evenly;
   color: white;
-  padding: 20px;
+  padding: 1.5rem;
+
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
 }
 
 @media (max-width: 600px) {
@@ -19,7 +23,7 @@
 
   .search-bar {
     flex-direction: column;
-    gap: 10px;
+    gap: 1rem;
   }
 
   .search-bar form {

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,12 +1,15 @@
 import './App.css'
 import MovieList from './MovieList'
+import SearchForm from './SearchForm'
+import SortForm from './SortForm'
 
 const App = () => {
   return (
     <div className="App">
       <header className="App-header">
         <h1>Flixster</h1>
-        inp
+        <SearchForm/>
+        <SortForm/>
       </header>
       <MovieList />
     </div>

diff --git a/src/MovieCard.css b/src/MovieCard.css
@@ -1,15 +1,19 @@
 .movie-card {
   width: 200px;
   margin: 1rem;
-  border-radius: 8px;
+  border-radius: 0.8rem;
   overflow: hidden;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease,
+  box-shadow 0.3s ease;
   background-color: #1a1a1a;
+  cursor: pointer;
+  /* z-index:  */
 }
 
 .movie-card:hover {
   transform: scale(1.03);
+  box-shadow: 0rem 0.15rem 0.9rem rgba(229, 9, 20);
+
 }
 
 .movie-poster {
@@ -34,12 +38,14 @@
 .movie-vote {
   display: flex;
   align-items: center;
+  /* text-align: center; */
 }
 
 .vote-average {
-  background-color: #ffd700;
+  background-color: #fa5252;
   color: black;
   padding: 0.2rem 0.5rem;
+  margin: 0.05rem auto;
   border-radius: 4px;
   font-weight: bold;
   font-size: 0.9rem;

diff --git a/src/MovieList.css b/src/MovieList.css
@@ -1,12 +1,17 @@
 .movie-list-container {
-  padding: 20px;
+  padding: 11rem 3.5rem;
 }
 
 .section-title {
   font-size: 1.8rem;
   margin-bottom: 20px;
   color: #fff;
   text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.15rem;
+  word-spacing: 0.5rem;
+  /* color: rgb(229, 9, 20) */
+  color: #fa5252;
 }
 
 .movie-list {

diff --git a/src/SearchForm.css b/src/SearchForm.css
@@ -0,0 +1,74 @@
+.search-container
+{
+    width: 100%;
+
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 7rem;
+    /* gap: 1rem; */
+}
+
+.search-bar[type="text"]
+{
+
+    border: 0.1rem solid rgba(250, 82, 82, 0.6);
+    border-right: none;
+    width: 85rem;
+
+    padding: 1rem 1rem;
+    /* margin-right: 2rem; */
+    border-radius: 8rem 0rem 0rem 8rem;
+    background-color: #212529;
+}
+
+.search-bar::placeholder
+{
+    padding-left: 2rem;
+    color: rgb(250, 82, 82, 0.6);
+    /* background-color: #868e96; */
+}
+
+.search-bar::after
+{
+
+}
+
+
+.search-button
+{
+    height: 4.05rem;
+    border: 0.1rem solid rgba(250, 82, 82, 0.6);
+    border-radius: 0rem 8rem 8rem 0rem;
+
+    border-left: none;
+    background-color: #1a1e21;
+    color: rgb(250, 82, 82, 0.8);
+    /* padding: 1.2rem 2.4rem; */
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    place-content: center;
+
+    margin-right: 2.5rem;
+}
+
+/* .search-button:hover
+{
+    background-color: 373b3e;
+} */
+
+.clear-button
+{
+    height: 4.05rem;
+    border: 0.1rem solid rgba(250, 82, 82, 0.6);
+    border-radius: 8rem;
+
+
+    background-color: #1a1e21;
+    color: rgb(250, 82, 82, 0.8);
+    padding: 0 1.5rem;
+
+    cursor: pointer;
+    place-content: center;
+}
diff --git a/src/SearchForm.jsx b/src/SearchForm.jsx
@@ -0,0 +1,16 @@
+import './SearchForm.css';
+
+const SearchForm = () =>
+    {
+        return(
+            <div className="search-form">
+                <form className="search-container">
+                    <input className='search-bar' type="text" placeholder="Search for movies" />
+                    <button className="search-button" type="submit">Search</button>
+                    <button className="clear-button" type="clear">Clear</button>
+                </form>
+            </div>
+        )
+    }
+
+export default SearchForm;
diff --git a/src/SortForm.css b/src/SortForm.css
@@ -0,0 +1,16 @@
+.sort-button
+
+{
+    height: 4.05rem;
+
+    border: 0.1rem solid rgba(250, 82, 82, 0.6);
+    border-radius: 1rem;
+
+
+    background-color: #1a1e21;
+    color: rgb(250, 82, 82, 0.8);
+    padding: 0 3.5rem;
+
+    cursor: pointer;
+    place-content: center;
+}
diff --git a/src/SortForm.jsx b/src/SortForm.jsx
@@ -0,0 +1,14 @@
+import './SortForm.css'
+
+const SortForm = () =>
+    {
+        return (
+            <div className = "SortForm">
+                <button className='sort-button'>
+                    Sort By: &darr;
+                </button>
+            </div>
+        )
+    }
+
+export default SortForm
diff --git a/src/index.css b/src/index.css
@@ -1,14 +1,25 @@
 body {
   margin: 0;
-  font-family: Arial, sans-serif;
-  background-color: #b4b1b1;
+  font-family: 'Rubik', sans-serif;
+  background-color: #212529;
+
 }
 
+
+*
+{
+  /* color: rgb(229, 9, 20); */
+  color: #fa5252;
+  font-size: 1.6rem;
+  box-sizing: border-box;
+}
+
+
 button {
   background-color: #282c34;
-  color: white;
+  color: #fa5252;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1.6rem;
   font-weight: bold;
   transition: background-color 0.3s ease;
 }
@@ -17,3 +28,10 @@ button:hover {
   background-color: #777;
   color: white;
 }
+
+
+
+html
+{
+  font-size: 62.5%;
+}