diff --git a/public/about.css b/public/about.css index cc3fbe9..41e5cac 100644 --- a/public/about.css +++ b/public/about.css @@ -1,17 +1,29 @@ - +* { + font-weight: 200; +} #main-nav { - background-color: lightblue; + background-color: rgb(0,0,0); text-align: center; + font-family: 'Roboto', sans-serif; + color: white; + position:absolute; + top:0; + left:0; + right:0; + width:100%; } #main-nav li:hover { - background-color: lavender; - color: black; + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); } #main-nav li { display: inline-block; position: relative; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } #main-nav ul li { @@ -21,24 +33,39 @@ text-align: center; } +#pageTitle { + margin-top: 75px; + text-align: center +} + a { text-decoration: none; color: inherit; } body { - + background-color: rgb(18,18,18); + font-family: 'Roboto'; + color: white; padding: 20px; + margin: 0; + animation: fadeIn 1s ease-in-out; + opacity: 0; + animation-fill-mode: forwards; } -#pageTitle { - background-color: white; - text-align: center; +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } .students { - background-color: lightblue; + background-color: black; display: inline-block; border: 2px black solid; padding-left: 200px; @@ -62,9 +89,20 @@ body { .project { display:inline-block; border: 2px black solid; - background-color: antiquewhite; + background-color: black; } li { font-weight: bold; } + +h2 { + text-decoration: underline; + text-decoration-color: rgb(101,8,8); + text-underline-offset: 8px; +} + +img { + max-width: 40px; + max-height: 40px; +} \ No newline at end of file diff --git a/public/about.html b/public/about.html index c9ca68f..02994e8 100644 --- a/public/about.html +++ b/public/about.html @@ -3,6 +3,7 @@ About + @@ -10,9 +11,9 @@ @@ -38,14 +39,10 @@

node.js and Express

Admins

-

Michelle Starcher

- GitHub -

Amanuel Kebede Tsehay

- GitHub -

Shaina Silawan

- GitHub -

Justin Guzman

- GitHub +

Michelle Starcher

github icon +

Amanuel Kebede Tsehay

github icon +

Shaina Silawan

github icon +

Justin Guzman

github icon
diff --git a/public/home.css b/public/home.css index 09600dd..5183b47 100644 --- a/public/home.css +++ b/public/home.css @@ -1,123 +1,127 @@ - #main-nav { - font-weight: bold; - background-color: lightblue; - text-align: center; + background-color: rgb(0,0,0); + text-align: center; + font-family: 'Roboto', sans-serif; + color: white; + position:absolute; + top:0; + left:0; + right:0; + width:100%; } - + #main-nav li:hover { - background-color: lavender; - color: black; +color: white; +transform: scale(1.2); +text-shadow: none; +background-color: rgb(101,8,8); } - + #main-nav li { - display: inline-block; - position: relative; + display: inline-block; + position: relative; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } - + #main-nav ul li { - list-style-type: none; - display: inline-block; - padding: 10px; - text-align: center; + list-style-type: none; + display: inline-block; + padding: 10px; + text-align: center; +} + +#pageTitle { +margin-top: 75px; +text-align: center } a { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } - + body { - background-color: lightcyan; + background-color: rgb(18,18,18); + font-family: 'Roboto'; + color: white; + padding: 20px; + margin: 0; + animation: fadeIn 1s ease-in-out; + opacity: 0; + animation-fill-mode: forwards; } -#pageTitle { - text-align: center; +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } + /* Swiper container Styling (Some elements below do not appear on HTML file since they are being created in JS */ /* Entire swiper container */ .swiper-container { - padding: 10px; +width: 100%; +height: 600px; +padding: 20px; } /* Area where the slides of the movie pictures go */ .swiper-wrapper { - display: flex; - gap: 1px; +display: flex; +gap: 10px; } /* Movie Object box (created dynamically in JS) */ .movieObjectBox { - width: 300px; - height: 450px; - border-radius: 10px; - overflow: hidden; - background-color: #333; - position: relative; +width: 300px; +height: 450px; +border-radius: 10px; +overflow: hidden; +background-color: #333; +position: relative; } /* Movie Poster Image */ .movieObjectBox img { - width: 100%; - height: 100%; - object-fit: cover; +width: 100%; +height: 100%; +object-fit: cover; } /* Title on Movie Poster */ .movieTitleBox { - position: absolute; - bottom: 10px; - left: 10px; - color: white; - background-color: rgba(0, 0, 0, 0.6); - font-size: 18px; - font-weight: bold; - padding: 5px 10px; - border-radius: 5px; +position: absolute; +bottom: 10px; +left: 10px; +color: white; +background-color: rgb(126,12,12); +font-size: 18px; +font-weight: bold; +padding: 5px 10px; +border-radius: 5px; } /* Swiper Nav Buttons */ .swiper-button-next, .swiper-button-prev { - color: #fff; -} - -body { - padding: 20px; - margin: 0; +color: #fff; } /* Row at Bottom where you can click on whatever number in the sequence and be redirected to it */ /* this might be removed later though, but whomever is working on the frontend JS will take care of it */ .swiper-pagination { - margin-top: 100px; -} - -#movieTable th, tr { - font-weight: bold; - gap: 10px; - background-color: bisque; - border : 2px black solid; -} - -tbody tr, td{ - text-align:center; - gap: 20px; - background-color: lightskyblue; - border: 2px black solid; +position: top; } #movieTable { - width: 100%; - margin-top:20px; - margin-left: auto; - margin-right: auto; -} +text-align: center; +margin: 25px 0; +width: 100%; -#t20tm { - text-align: center; } - diff --git a/public/home.html b/public/home.html index de01f32..ca3b4b4 100644 --- a/public/home.html +++ b/public/home.html @@ -4,6 +4,7 @@ Home + @@ -13,13 +14,15 @@

Trending Movies

+ +

Top 20 Trending Movies

@@ -37,7 +40,6 @@

Trending Movies


-

Top 20 Trending Movies

@@ -54,4 +56,4 @@

Top 20 Trending Movies

- + \ No newline at end of file diff --git a/public/search.css b/public/search.css index 245f63d..8e87fbf 100644 --- a/public/search.css +++ b/public/search.css @@ -1,19 +1,26 @@ - #main-nav { - - font-weight: bold; - background-color: lightblue; + background-color: rgb(0,0,0); text-align: center; + font-family: 'Roboto', sans-serif; + color: white; + position:absolute; + top:0; + left:0; + right:0; + width:100%; } #main-nav li:hover { - background-color: lavender; - color: black; + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); } - + #main-nav li { display: inline-block; position: relative; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } #main-nav ul li { @@ -23,68 +30,121 @@ text-align: center; } +#pageTitle { + margin-top: 75px; + text-align: center +} + a { text-decoration: none; color: inherit; } body { - background-color: aliceblue; + background-color: rgb(18,18,18); + font-family: 'Roboto'; + color: white; padding: 20px; + margin: 0; + animation: fadeIn 1s ease-in-out; + opacity: 0; + animation-fill-mode: forwards; } -#pageTitle { - text-align: center; +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } .movieSearch { width: 70%; + height: 75%; position: relative; right: 20px; top: 20px; margin-right: 20px; - - + background-color: rgb(0, 0, 0); + border: 1px solid black; border-radius: 5px; padding: 20px; } +#searchBar { + background-color: rgb(18,18,18); + border: none; + padding: 15px; + color: white; + width: 65%; +} + +#searchSubmit { + background-color: rgb(101,8,8); + color: white; + border: none; + padding: 15px; + font-size: 18px; + margin-left: 15Px; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; +} + +#searchSubmit:hover { + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); +} + #userAside { width: 20%; position: relative; right: 20px; top: 20px; float: right; - + background-color: black; + border: 1px solid black; border-radius: 5px; padding: 20px; } -.question { - background-color: #F2C6DE; - border: 2px black solid; - padding: 10px; +#userForm input{ + background-color: rgb(18,18,18); + border: none; + padding: 5px; + margin: 2px; } -.list { - padding: 10px; - margin: 10px; +#userForm button { + background-color: rgb(101,8,8); + color: white; + border: none; + padding: 10px; + font-size: 18px; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } - -#movieList li { - margin: 10px; -} - -.iup { - border: 2px black solid; - padding: 10px; - margin-bottom: 10px; - background-color: #C9E4DE; +#userForm button:hover { + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); } -.upl { - border: 2px black solid; - padding: 10px; - background-color: #C6DEF1; +#showUsersPreferences{ + background-color: rgb(101,8,8); + color: white; + border: none; + padding: 8px; + font-size: 18px; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } + +#showUsersPreferences:hover { + color: white; + transform: scale(1.1); + text-shadow: none; + background-color: rgb(101,8,8); +} \ No newline at end of file diff --git a/public/search.html b/public/search.html index 4b8fb25..4a326c5 100644 --- a/public/search.html +++ b/public/search.html @@ -3,6 +3,7 @@ Search + @@ -12,9 +13,9 @@ @@ -22,56 +23,44 @@

Movie Search

-
-

You can search for a movie name and see their title, release date, overview, and popularity number. +

You can search for a movie name and see their title, release date, overview, and popularity number. Or if you can't remember the name of the movie, you can find it by searching for things like a character's name or the release year of the movie as well. With a search index implemented, search combinations are endless!

- -
- - -
-
-
    - -
    + + + +