(2 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style> | <style> | ||
+ | /* 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; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 15:15, 28 July 2021