(Created page with "<html> <head> <style> →────────────────── header ──────────────────: header{ margin: 0 auto...") |
|||
(3 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style> | <style> | ||
+ | /* Universal Styling */ | ||
− | + | body { | |
− | + | margin: 0; | |
− | + | font-family: Lato; | |
− | + | ||
− | margin: 0 | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /* Header Styling */ | |
− | + | ||
− | + | #iGEMLogo { | |
+ | float: center; | ||
+ | padding 20px; | ||
} | } | ||
− | + | #Title { | |
− | + | float: left; | |
− | + | color: white; | |
− | + | font-size: 32px; | |
} | } | ||
− | + | header { | |
− | + | height: 235px; | |
position: relative; | position: relative; | ||
− | + | background-color: #4b5320; | |
} | } | ||
− | a | + | header a { |
− | + | ||
− | + | ||
text-decoration: none; | 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; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 15:15, 28 July 2021