|
|
(15 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <div class="tabset">
| |
| <!-- Tab 1 -->
| |
| <input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked>
| |
| <label for="tab1">DDX</label>
| |
| <!-- Tab 2 -->
| |
| <input type="radio" name="tabset" id="tab2" aria-controls="rauchbier">
| |
| <label for="tab2">Features</label>
| |
| <div class="tab-panels">
| |
| <section id="DDX" class="tab-panel">{{{1}}}</section>
| |
| <section id="features" class="tab-panel">{{{2}}}</section>
| |
| </div>
| |
| </div>
| |
| <style> | | <style> |
| /* | | @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400&display=swap'); |
| CSS for the main interaction
| | .hero{ |
| */
| | background-image: url("https://wikimsk.org/w/img_auth.php/e/ea/Reading_manikin.jpg"); |
| .tabset > input[type="radio"] { | | height: 350px; |
| position: absolute;
| | background-position: center; |
| left: -200vw;
| | background-repeat: no-repeat; |
| }
| | background-size: cover; |
| | | position: relative; |
| .tabset .tab-panel {
| | display: flex; |
| display: none;
| | justify-content: center; /* align horizontal */ |
| | align-items: center; /* align vertical */ |
| } | | } |
| | | .hero-text{ |
| .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child, | | font-family:"Josefin Sans" |
| .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
| | margin:2em; |
| .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
| | padding:2em; |
| .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
| | line-height:1rem; |
| .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
| | color:white; |
| .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
| | display:flex; |
| display: block;
| | flex-direction:column; |
| | align-items:center; |
| | justify-content:center; |
| } | | } |
|
| |
|
| /*
| | .hero-title{ |
| Styling
| | font-size:80px; |
| */
| | margin-bottom:3rem; |
| .tabset > label { | | font-weight:900; |
| position: relative;
| | line-height:1.1em; |
| display: inline-block;
| | text-align: center; |
| padding: 15px 15px 25px;
| | text-decoration: underline; |
| border: 1px solid transparent;
| | text-decoration-color: #3498db; |
| border-bottom: 0;
| | text-shadow: 2px 2px DimGray; |
| cursor: pointer;
| |
| font-weight: 600;
| |
| } | | } |
| | | .hero-caption{ |
| .tabset > label::after { | | font-size:30px; |
| content: "";
| | text-align: center; |
| position: absolute;
| | text-shadow: 2px 2px DimGray; |
| left: 15px;
| | line-height:1.1em; |
| bottom: 10px;
| |
| width: 22px;
| |
| height: 4px;
| |
| background: #8d8d8d;
| |
| } | | } |
|
| |
|
| .tabset > label:hover,
| | @media only screen and (max-width: 900px) { |
| .tabset > input:focus + label { | | .hero-caption{ |
| color: #06c;
| | font-size:20px; |
| } | | } |
| | | .hero-title{ |
| .tabset > label:hover::after,
| | font-size:60px; |
| .tabset > input:focus + label::after,
| |
| .tabset > input:checked + label::after { | |
| background: #06c;
| |
| } | | } |
|
| |
| .tabset > input:checked + label {
| |
| border-color: #ccc;
| |
| border-bottom: 1px solid #fff;
| |
| margin-bottom: -1px;
| |
| }
| |
|
| |
| .tab-panel {
| |
| padding: 30px 0;
| |
| border-top: 1px solid #ccc;
| |
| }
| |
|
| |
| /*
| |
| Demo purposes only
| |
| */
| |
| *,
| |
| *:before,
| |
| *:after {
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .tabset {
| |
| max-width: 65em;
| |
| } | | } |
| </style> | | </style> |
| </html> | | </html> |
| | <div class="hero"> |
| | <div class="hero-text"> |
| | <div class="hero-title">WELCOME TO <span style="color:#3498db">WIKIMSK</span></div> |
| | <div class="hero-caption">''The New Zealand Musculoskeletal Medicine Wiki''</div> |
| | {{{test|}}} |
| | </div> |
| | </div> |