blue css

lewypopescu · Aug 5, 2024 · 2da7649 · 2da7649
1 parent f78450a
commit 2da7649
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 22 deletions.
diff --git a/src/components/Cast/Cast.module.css b/src/components/Cast/Cast.module.css
@@ -1,4 +1,6 @@
 .container {
+  max-width: 800px;
+  margin: 0 auto;
   padding: 20px;
 }
 
@@ -8,15 +10,32 @@
 }
 
 .item {
-  margin-bottom: 20px;
+  margin-bottom: 30px;
+  text-align: center;
 }
 
 .image {
-  width: 100px;
-  margin-right: 20px;
+  width: 150px;
+  border-radius: 10px;
+}
+
+p {
+  margin: 10px 0 0;
+  color: #003366;
+  font-weight: bold;
 }
 
 .button {
-  padding: 8px 16px;
+  background-color: #66b2ff;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
   margin-bottom: 20px;
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+.button:hover {
+  background-color: #005bb5;
 }
diff --git a/src/components/Home/Home.module.css b/src/components/Home/Home.module.css
@@ -3,8 +3,10 @@
 }
 
 .title {
-  font-size: 24px;
-  margin-bottom: 10px;
+  font-size: 28px;
+  color: #003366;
+  margin-bottom: 20px;
+  text-align: center;
 }
 
 .list {
@@ -13,14 +15,16 @@
 }
 
 .item {
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .link {
-  color: #007bff;
+  color: #003366;
+  font-size: 18px;
   text-decoration: none;
 }
 
 .link:hover {
+  color: #66b2ff;
   text-decoration: underline;
 }
diff --git a/src/components/MovieDetails/MovieDetails.module.css b/src/components/MovieDetails/MovieDetails.module.css
@@ -1,23 +1,44 @@
 .container {
+  max-width: 800px;
+  margin: 0 auto;
   padding: 20px;
 }
 
 .button {
-  padding: 8px 16px;
+  background-color: #66b2ff;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
   margin-bottom: 20px;
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+.button:hover {
+  background-color: #005bb5;
 }
 
 .poster {
-  width: 200px;
+  width: 300px;
   float: left;
   margin-right: 20px;
 }
 
+h2 {
+  color: #003366;
+}
+
+h3 {
+  color: #005bb5;
+}
+
 .link {
-  color: #007bff;
+  color: #003366;
   text-decoration: none;
 }
 
 .link:hover {
+  color: #66b2ff;
   text-decoration: underline;
 }
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -7,8 +7,7 @@ const Navbar = () => {
     <nav className={styles.navbar}>
       <Link className={styles.link} to="/">
         Home
-      </Link>{' '}
-      |
+      </Link>
       <Link className={styles.link} to="/movies">
         Movies
       </Link>

diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
@@ -1,15 +1,24 @@
 .navbar {
-  padding: 10px;
-  background-color: #18176e;
-  color: white;
+  background-color: #003366;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .link {
-  margin: 0 10px;
+  margin-right: 20px;
   color: white;
   text-decoration: none;
+  font-weight: bold;
+  font-size: 24px;
+}
+
+.link:last-child {
+  margin-right: 0;
 }
 
 .link:hover {
+  color: #66b2ff;
   text-decoration: underline;
 }
diff --git a/src/components/Reviews/Reviews.module.css b/src/components/Reviews/Reviews.module.css
@@ -1,4 +1,6 @@
 .container {
+  max-width: 800px;
+  margin: 0 auto;
   padding: 20px;
 }
 
@@ -8,15 +10,30 @@
 }
 
 .item {
-  margin-bottom: 20px;
+  margin-bottom: 40px;
 }
 
-.message {
-  padding: 20px;
-  font-size: 18px;
+h4 {
+  color: #003366;
+  margin-bottom: 10px;
+}
+
+p {
+  color: #333333;
+  line-height: 1.6;
 }
 
 .button {
-  padding: 8px 16px;
+  background-color: #66b2ff;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
   margin-bottom: 20px;
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+.button:hover {
+  background-color: #005bb5;
 }