|
|
| Line 6: |
Line 6: |
| | <style> | | <style> |
| | <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan" rel="stylesheet"> | | <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan" rel="stylesheet"> |
| − |
| |
| − | body {
| |
| − | background: #FFAA76;
| |
| − | background: #666;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | #tab_nav {
| |
| − | position: relative;
| |
| − | overflow: hidden;
| |
| − | margin: 0 auto;
| |
| − | margin-top: 25px;
| |
| − | word-spacing: -5px;
| |
| − | width: 90%;
| |
| − | height: 500px;
| |
| − | margin-bottom: 25px;
| |
| − | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
| |
| − | }
| |
| − |
| |
| − | #tab_nav ul {
| |
| − | margin: 0 auto;
| |
| − | padding: 0;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | #tab_nav li {
| |
| − | background: #222;
| |
| − | color: white;
| |
| − | word-spacing: 0;
| |
| − | width: 6%;
| |
| − | list-style: none;
| |
| − | display: inline-block;
| |
| − | margin: 0 auto;
| |
| − | padding: 20px;
| |
| − | border-right: 1px solid rgba(0, 0, 0, 0.1);
| |
| − | font-family: Helvetica, Arial, sans-serif;
| |
| − | letter-spacing: 3px;
| |
| − | cursor: pointer;
| |
| − | height: auto;
| |
| − | }
| |
| − |
| |
| − | #tab_nav li:first-of-type {
| |
| − | box-shadow: inset 0 -50px 50px -50px rgba(0, 0, 0, 0.2),
| |
| − | inset -1px 0 0 rgba(0, 0, 0, .5);
| |
| − | }
| |
| − |
| |
| − | #tab_nav li:last-of-type {
| |
| − | box-shadow: inset 0 -50px 50px -50px rgba(0, 0, 0, 0.2),
| |
| − | inset 1px 0 0 rgba(250, 255, 255, .1);
| |
| − | }
| |
| − |
| |
| − | #tab_nav li:hover {
| |
| − | background: #191919;
| |
| − | }
| |
| − |
| |
| − | #tab_nav li:active {
| |
| − | background: rgba(255,170,118, .5);
| |
| − | }
| |
| − |
| |
| − | #tab_nav li span {
| |
| − | float: right;
| |
| − | font-weight: bold;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #tab_nav li:hover span {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | #tab_nav div {
| |
| − | position: relative;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: white;
| |
| − | padding: 25px;
| |
| − | font-family: Helvetica, Arial, sans-serif;
| |
| − | word-spacing: 3px;
| |
| − | }
| |
| − |
| |
| − | #tab_nav li div {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | top: 60px;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: white;
| |
| − | padding: 25px;
| |
| − | font-family: calibri;
| |
| − | letter-spacing: 1px;
| |
| − | z-index: 10;
| |
| − | }
| |
| − |
| |
| − | #tab_nav div h1 {
| |
| − | margin: 0 auto;
| |
| − | font-family: Helvetica, Arial, sans-serif;
| |
| − | font-size: 25px;
| |
| − | }
| |
| − |
| |
| − | #tab_nav li:focus {
| |
| − | outline: none;
| |
| − | background: white;
| |
| − | color: black;
| |
| − | box-shadow: 0 -5px 0 white;
| |
| − | }
| |
| − |
| |
| − | #tab_nav li:focus div {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| | | | |
| | <div class = "main-content"> | | <div class = "main-content"> |
