Line 1: | Line 1: | ||
− | + | /* Universal Styling */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | body { | |
− | + | margin: 0; | |
− | + | font-family: Lato; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | *{ | + | /* Header Styling */ |
− | + | ||
− | padding | + | #iGEMLogo { |
− | + | float: center; | |
+ | padding 20px; | ||
} | } | ||
− | + | #Title { | |
− | + | float: left; | |
− | + | color: white; | |
− | + | font-size: 32px; | |
− | + | ||
} | } | ||
− | + | ||
− | + | header { | |
− | + | height: 235px; | |
− | header{ | + | position: relative; |
− | + | background-color: #4b5320; | |
− | + | ||
− | height: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | header a { | |
+ | text-decoration: none; | ||
} | } | ||
− | header:hover{ | + | header a:hover { |
− | + | text-decoration: none; | |
− | + | ||
} | } | ||
− | . | + | /* Navigation Bar Styling */ |
− | + | ||
− | + | .navbar { | |
− | + | overflow: hidden; | |
+ | background-color: #333; | ||
} | } | ||
− | . | + | .navbar a { |
− | + | float: left; | |
− | + | font-size: 16px; | |
− | + | color: white; | |
+ | text-align: center; | ||
+ | padding: 14px 16px; | ||
+ | text-decoration: none; | ||
} | } | ||
− | + | .dropdown { | |
− | + | float: left; | |
− | + | overflow: hidden; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .dropdown .dropbtn { |
− | + | font-size: 16px; | |
+ | border: none; | ||
+ | outline: none; | ||
+ | color: white; | ||
+ | /* padding: 14px 16px; */ | ||
+ | background-color: inherit; | ||
+ | font-family: inherit; | ||
+ | margin: 0; | ||
} | } | ||
− | . | + | .navbar a:hover, .dropdown:hover .dropbtn { |
− | + | background-color: #cb2c30; | |
− | + | ||
} | } | ||
− | + | .dropdown-content { | |
− | + | display: none; | |
− | + | position: absolute; | |
+ | background-color: #f9f9f9; | ||
+ | min-width: 160px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
− | + | .dropdown-content a { | |
− | + | float: none; | |
− | + | color: black; | |
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover { | ||
+ | background-color: #ddd; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | } |
Revision as of 15:11, 28 July 2021
/* Universal Styling */
body { margin: 0; font-family: Lato; }
/* Header Styling */
- iGEMLogo {
float: center; padding 20px; }
- Title {
float: left; color: white; font-size: 32px; }
header { height: 235px; position: relative; background-color: #4b5320; }
header a { text-decoration: none; }
header a:hover { text-decoration: none; }
/* Navigation Bar Styling */
.navbar {
overflow: hidden; background-color: #333;
}
.navbar a {
float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
.dropdown {
float: left; overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px; border: none; outline: none; color: white; /* padding: 14px 16px; */ background-color: inherit; font-family: inherit; margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #cb2c30;
}
.dropdown-content {
display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;
}
.dropdown-content a {
float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}