Difference between revisions of "Team:iTesla-SoundBio/design"
Sophie006liu (Talk | contribs) |
|||
| Line 2: | Line 2: | ||
<style> | <style> | ||
body { background: #9cb8b3; } | body { background: #9cb8b3; } | ||
| + | /* Style the top navigation bar */ | ||
| + | .topnav { | ||
| + | overflow: hidden; | ||
| + | background-color: #333; | ||
| + | font-family: Bahnschrift; | ||
| + | font-size: 15px; | ||
| + | width: 100%; | ||
| + | margin-top: -10px; | ||
| + | } | ||
| + | /* Style the topnav links */ | ||
| + | .topnav a { | ||
| + | float: right; | ||
| + | display: block; | ||
| + | color: #f2f2f2; | ||
| + | text-align: center; | ||
| + | padding: 14px 16px; | ||
| + | text-decoration: none; | ||
| + | /*for transitions when hovering*/ | ||
| + | -o-transition: color .2s ease-out, background 1s ease-in; | ||
| + | -ms-transition: color .2s ease-out, background 1s ease-in; | ||
| + | -moz-transition: color .2s ease-out, background 1s ease-in; | ||
| + | -webkit-transition: color .2s ease-out, background 1s ease-in; | ||
| + | } | ||
| + | .topnav a img { | ||
| + | height: 10%; | ||
| + | width: 10%; | ||
| + | } | ||
| + | .topnav a.logo { | ||
| + | float: left; | ||
| + | } | ||
| + | /* Change color on hover */ | ||
| + | .topnav a:hover, .dropdown:hover .dropdown-button { | ||
| + | background-color: #ddd; | ||
| + | color: black; | ||
| + | |||
| + | } | ||
| + | .dropdown { | ||
| + | float: right; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | .dropdown .dropdown-button { | ||
| + | font-size: 16px; | ||
| + | border: none; | ||
| + | outline: none; | ||
| + | color: white; | ||
| + | padding: 14px 16px; | ||
| + | background-color: inherit; | ||
| + | font-family: inherit; | ||
| + | margin: 0; | ||
| + | cursor: pointer; | ||
| + | /*for transitions when hovering*/ | ||
| + | -o-transition: color .2s ease-out, background 1s ease-in; | ||
| + | -ms-transition: color .2s ease-out, background 1s ease-in; | ||
| + | -moz-transition: color .2s ease-out, background 1s ease-in; | ||
| + | -webkit-transition: color .2s ease-out, background 1s ease-in; | ||
| + | } | ||
| + | .dropdown-content { | ||
| + | /* opacity: 0; */ | ||
| + | display: none; | ||
| + | position: absolute; | ||
| + | background-color: whitesmoke; | ||
| + | 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: white; | ||
| + | } | ||
| + | |||
| + | .dropdown:hover .dropdown-content { | ||
| + | display: block; | ||
| + | /* | ||
| + | opacity: 1; | ||
| + | transition: all 1s ease; | ||
| + | -webkit-transition: all 1s ease; | ||
| + | */ | ||
| + | } | ||
| + | /* Base DIVs for whole website */ | ||
| + | #root { | ||
| + | position: absolute; | ||
| + | font-size: 16px; | ||
| + | width: 100%; | ||
| + | height: auto; | ||
| + | margin: auto; | ||
| + | background-color: Whitesmoke; | ||
| + | } | ||
h1 { | h1 { | ||
font: 600 1.5em/1 'Raleway', sans-serif; | font: 600 1.5em/1 'Raleway', sans-serif; | ||
Revision as of 05:49, 13 August 2018