Difference between revisions of "Team:ASIJ Tokyo/CSS"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | |||
| + | <head> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
<style> | <style> | ||
| Line 135: | Line 139: | ||
} | } | ||
| − | + | .navbar { | |
| − | + | overflow: hidden; | |
| − | + | background-color: #333; | |
| − | + | font-family: Arial, Helvetica, sans-serif; | |
| − | + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| − | + | position: fixed; | |
| − | + | width:100%; | |
| − | + | } | |
| − | + | ||
| − | + | .navbar a { | |
| − | + | float: left; | |
| − | + | font-size: 16px; | |
| − | + | color: white; | |
| − | + | text-align: left; | |
| − | + | padding: 10px 50px; | |
| − | + | text-decoration: none; | |
| − | + | } | |
| − | + | .dropdown { | |
| − | + | float: left; | |
| − | + | overflow: hidden; | |
| − | + | } | |
| − | + | .dropdown .dropbtn { | |
| − | + | font-size: 16px; | |
| − | + | border: none; | |
| − | + | outline: none; | |
| − | + | color: white; | |
| − | + | padding: 10px 50px; | |
| − | + | background-color: inherit; | |
| − | + | font-family: inherit; | |
| − | + | margin: 0; | |
| − | + | } | |
| − | + | .navbar a:hover, .dropdown:hover .dropbtn { | |
| − | + | background-color: blue; | |
| − | + | } | |
| − | + | .dropdown-content { | |
| − | + | display: none; | |
| − | + | position: fixed; | |
| − | + | background-color: #f9f9f9; | |
| − | + | min-width: 130px; | |
| − | + | 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; | |
| − | + | } | |
/* Start footer reset =================================================== */ | /* Start footer reset =================================================== */ | ||
| Line 265: | Line 268: | ||
<body> | <body> | ||
| − | + | <div class="navbar"> | |
<a href="#home">Home</a> | <a href="#home">Home</a> | ||
<a href="#news">News</a> | <a href="#news">News</a> | ||
Revision as of 22:52, 11 September 2018
