Skip to content
Snippets Groups Projects
Commit f490e89e authored by sm4797's avatar sm4797
Browse files

Update index.css

parent 44013cf7
No related branches found
No related tags found
No related merge requests found
/*
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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment