diff --git a/index.css b/index.css
index 3be9f8b47bcc38ba6f8f0d0718b2f1b6988e0ed9..d9b619bb925139fa5b03c62aa4f5b2cda003e5f9 100644
--- a/index.css
+++ b/index.css
@@ -1,52 +1,128 @@
/*
-HOME PAGE
+INDEX
+INDEX
+INDEX
+INDEX
+Make a list of each different item, so list of restaurants, classes, etc. With this list, include a picture and rating maybe, color as well. Then make a javascript function that
+will take each and display them properly. Also add randomization for it
*/
-
-h1 {
- text-align:center;
-
+/* Sets up grid for home page */
+.grid-container {
+ display:grid;
+ grid-template-areas:
+ 'jumbotron jumbotron jumbotron jumbotron'
+ 'topbar topbar topbar topbar'
+ 'row row row row'
+ 'Footer Footer Footer Footer';
+ grid-template-columns:25% 25% 25% 25%;
}
-
+/* Jumbotron text */
#homePageJumbo {
+ grid-area: jumbotron;
background-color:#002f6c;
height:100px;
padding:15px;
margin:0px;
-
-
-
-
}
.jumbotext {
+ margin-top:10px;
text-align:center;
float:left;
width:33%;
}
#homepageTitle {
+
color:#ffc915;
font-size:30px;
}
#homePageSlogan1 {
+ margin-top:20px;
color:#ffc915;
font-size:20px;
font-style:italic;
}
#homePageSlogan2 {
+ margin-top:20px;
color:#ffc915;
font-size:20px;
font-style:italic;
}
-.row {
+.navbar {
+ grid-area:topbar;
+ width:100%;
+ text-align:center;
+ background-color:#ffc915;
+}
+/* search bar */
+.search {
+ width:100%;
+}
+.bars {
+ width:200px;
+
+}
+.nav_title {
+ font-size:20px;
+ font-weight:bold;
+ color:#002f6c;
+
+ }
+.align_ {
+ margin-left:5px;
+ margin-right:5px;
+ width:1350px;
+ height:45px;
+ color:#002f6c;
+
+
+
+}
+.search_button:hover {
+ background-color:#002f6c;
+ filter: brightness(90%);
+
+
+}
+.search_button {
+ background-color:#002f6c;
+ color:white;
+ border-color:#002f6c;
+ width:100px;
}
+.nav_buttons:hover {
+
+ background-color:#ffc915;
+ filter: brightness(95%);
+}
+.nav_buttons {
+ font-weight:bold;
+ text-align:center;
+ width:100px;
+ font-size:15px;
+ height:45px;
+ border-style:solid;
+ border-radius:5%;
+ border-color:#002f6c;
+ color:#002f6c;
+}
+
+
+#drexel_dragon {
+ width:42px;
+ height:30px;
+}
+
+/* clickable options for home page */
.clickables {
+ position:relative;
float:left;
width:25%;
height:400px;
@@ -55,31 +131,187 @@ h1 {
border-color:black;
border-width:2px;
color:black;
+ font-weight:bold;
+ overflow:hidden;
+ text-align:center;
+
}
-.clickables {
+.row {
+ width:100%;
+ grid-area:row;
+}
+#restaurants {
+ background-size:100% 100%;
+ background-blend-mode:lighten;
+ background-image:url(https://educationsnapshots.com/wp-content/uploads/sites/4/2017/09/drexel-university-the-summit-5.jpg);
+ background-color:#8B0000;
}
-.resturants {
- background-color:red;
+#classes {
+ background-size:100% 100%;
+ background-blend-mode:lighten;
+ background-image:url(https://www.acentech.com/wp-content/uploads/2021/08/drexel-lebow-college-classroom-acentech-02.jpg);
+ background-color:#00008B;
+
+
}
-.resturants:hover .clickables{
- width:33%;
- padding:105px;
+
+#professors {
+ background-size:100% 100%;
+ background-blend-mode:lighten;
+ background-image:url(https://images.theconversation.com/files/427047/original/file-20211018-21-1wzz3yc.jpg?ixlib=rb-1.1.0&rect=10%2C0%2C6699%2C4476&q=20&auto=format&w=320&fit=clip&dpr=2&usm=12&cs=strip);
+ background-color:#800080;
}
-#classes {
+
+#dorms {
+ background-size:100% 100%;
+ background-blend-mode:lighten;
+ background-image:url(https://drexel.edu/studentlife/~/media/Drexel/Sites/StudentLife/Images/campus-living/housing/residential-halls/race/race-street-hall-exterior-3264x1836/race-street-hall-exterior-3264x1836_4x3.ashx);
+ background-color:#8B4000;
+
+}
+.catagory_titles {
+ position:relative;
+ border-style:solid;
+ color:white;
+
+ width:220px;
+ text-align:center;
+ margin-left:105px;
+}
+
+.buttons {
+ position:relative;
+}
+.R {
+ background-color:#8B0000;
+
+}
+
+.C {
+ background-color:#00008B;
+
+}
+
+.P {
+ background-color:#800080;
+
+}
+
+.D {
+ background-color:#8B4000;
+
+}
+.mag {
+ width:40px;
+ height:40px;
+ transform: scaleX(-1);
+ float:left;
+
+}
+.the_buttons {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 1fr 1fr;
+ column-gap:5px;
+ float:left;
+ position:relative;
+ top:200px;
+ margin-left:125px;
+ width:165px;
+ border-style:solid;
+ height:65px;
+
+ color:white;
+
+}
+
+/* homepage buttons */
+
+#r_button {
+ background-color:red;
+ box-shadow: 0px 0px 20px 10px red;
+
+}
+#c_button {
background-color:blue;
+ box-shadow: 0px 0px 20px 10px blue;
+
}
-#professors {
+
+#p_button {
background-color:purple;
+ box-shadow: 0px 0px 20px 10px purple;
}
-#dorms {
+
+#d_button {
background-color:orange;
+ box-shadow: 0px 0px 20px 10px orange;
+
+}
+
+/* HOVER FUNCTIONAILITY FOR HOME PAGE */
+
+.row:hover > .clickables {
+ width:20%;
}
+
+.clickables:hover > .catagory_titles {
+ margin-left:240px;
+}
+
+.clickables:hover > .buttons {
+
+ margin-left:130px;
+ top:20px;
+}
+
+#restaurants:hover {
+ width:40%;
+ height:500px;
+
+}
+
+#classes:hover{
+ width:40%;
+ height:500px;
+
+}
+
+#professors:hover {
+ width:40%;
+ height:500px;
+
+}
+
+#dorms:hover {
+ width:40%;
+ height:500px;
+}
+
+
+/* general text styling */
+
+h5 {
+ font-weight:bold;
+ margin:2px;
+
+}
+
+
+h1 {
+ text-align:center;
+
+}
+
+
+
+
/* implement cool thing on the slogan where it glows */
.sub_section {
@@ -105,4 +337,37 @@ h1 {
}
+/* side pages */
+
+.side_bar {
+ float:left;
+ width:25%;
+ height:900px;
+ border-style:solid;
+ border-color:black;
+
+}
+.main_bar {
+ float:right;
+ width:75%;
+ height:900px;
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+