-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtabs.html
98 lines (98 loc) · 23.8 KB
/
tabs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;} html,body{height:100%;font-family: system-ui;margin:0;font-size:100%;} header { background: #FFF; max-height: 56px; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.24); position: fixed; width: 100%; } h1,h3,h4 { align-items: center; line-height: 1.8; margin-bottom: 24px; text-transform: uppercase; font-weight: bold; } h1 { text-align: center; font-size: 2em; color: #FFF; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } h4 { font-size: 1.1em; } p { font-size: 1em; line-height: 1.6; margin-bottom: 16px; } .fh { min-height: 100vh; } a.btn-light:link, a.btn-light:visited { background: #FFF; color: #06F; } .hero { background-color: #000; color: #FFF; text-align: center; } section,footer { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-content: center; align-items: center; padding: 48px 0; margin: 0; } .height-56 { min-height: 56vh; } .primary { color: #06F; } .white { color: #FFF; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .bg-grey { background: #fafafa; } .bg-main { background: #06F; } .bg-dark { background-color: #000; } .bold { font-weight: bold; } .space-16 { padding: 16px 0; } .header-container { margin: 0 auto; padding: 0 16px; max-width: 1280px; } .header-row { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; padding: 16px 0; margin: 0; } .logo { padding: 0; } .menu { text-align: right; margin: 0; padding: 0; } .resp-nav a { color: #222; padding: 16px 0; margin-left: 24px; font-size: .8em; font-weight: 600; text-transform: uppercase; text-align: center; text-decoration: none; background-image: linear-gradient(90deg, #06F 0%, #06F 100%); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } #selected { color: #06F; background-size: 100% 2px; background-image: linear-gradient(90deg, #06F 0%, #06F 100%); } .menu-open,.menu-close, #menu-toggle { display: none; width: 0px; } .hero { background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='auto' style='background-color:%23000' viewBox='0 0 1280 1280'%3E%3Cdefs/%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill='%23010E18' d='M-668.3 895.3l622-622 622 622-622 622-622-622zM354 355l826-826 826 826-826 826-826-826z'/%3E%3Cpath fill='%23010E18' d='M722 242l48-48 48 48-48 48-48-48z'/%3E%3Cpath fill='%2304253E' d='M783 630l24-24 24 24-24 24-24-24zm284-190.2h4v-4h-4v4zm-72-55.5h4v-4h-4v4zm0 59.5h4v-4h-4v4zm0-31.8h4v-4h-4v4zm0 51.6h4v-4h-4v4zm36-39.6h4v-4h-4v4zm72 0h4v-4h-4v4zm36-23.9h4v-4h-4v4zm-72 99.2h4v-4h-4v4zm-36-15.9h4v-4h-4v4zm0 154.6h4v-3.9h-4v4zm72-154.6h4v-4h-4v4zm36 8h4v-4h-4v4zm-72-31.8h4v-4h-4v4zm-36-15.8h4v-4h-4v4zm72 0h4v-4h-4v4zm36-23.8h4v-4h-4v4zm-72 99.1h4v-4h-4v4zm-36 15.9h4v-4h-4v4zm0 138.8h4v-4h-4v4zm0 35.7h4v-4h-4v4zm0 55.5h4v-39.7h-4V765zm72-238h4v-4h-4v4zm0 51.6h4v-4h-4v4zm-36-99.1h4v-4h-4v4zm-36-15.9h4v-4h-4v4zm0 146.7h4v-4h-4v4zm72-146.7h4v-4h-4v4zm36-7.9h4v-4h-4v4zm-72 211.1h4V536h-4v130.8zm-36-92.2h4v-23.8h-4v23.8zm72 151.7h4V595.5h-4v130.8z'/%3E%3Cpath fill='%2304253E' fill-rule='evenodd' d='M1069 217l-74 74 74 74 74-74-74-74zm0 6l-68 68 68 68 68-68-68-68z' clip-rule='evenodd'/%3E%3Cpath fill='%2304253E' d='M184 613.8h4v-16h-4v16zM112 550h4v-4h-4v4zm36 63.8h4V578h-4v36zm72-31.9h4v-4h-4v4zm36-23.9h4v-4h-4v4zm-72 139.6h4v-4h-4v4zm-36 99.7h4v-4h-4v4zm72-155.6h4v-4h-4v4zm36 8h4v-4h-4v4zm-144 27.9h4v-37.9h-4v38zm36 16h4v-4h-4v4zm0 175.4h4v-3.9h-4v4zm0 56h4v-40h-4v40zm72-239.4h4v-4h-4v4zm-72 83.8h4v-12h-4v12zm108-155.6h4v-4h-4v4zM184 974h4V806.3h-4V974z'/%3E%3Cpath fill='%2304253E' d='M112 677.6h4v-30.9h-4v31zM220 886h4V754.4h-4V886zM118 478l68-68 68 68-68 68-68-68zm547 457h4v-12h-4v12zm56 16h4v-32h-4v32zm-28 99h4V930h-4v120zm-28-103h4v-4h-4v4zm56 24h4v-4h-4v4zm-28 96h4v-4h-4v4zm-28-100h4v-4h-4v4zm56 28h4v-4h-4v4zm-28 96h4v-4h-4v4zm28-80h4v-4h-4v4z'/%3E%3Cpath fill='%2304253E' fill-rule='evenodd' d='M659 867l36-36 36 36-36 36-36-36zm36-32l-32 32 32 32 32-32-32-32z' clip-rule='evenodd'/%3E%3Cpath fill='%23010E18' fill-rule='evenodd' d='M998 1077l40-40 40 40-40 40-40-40zm40-36l-36 36 36 36 36-36-36-36z' clip-rule='evenodd'/%3E%3Cpath fill='%23010E18' d='M371 415h4v-12h-4v12zm56 16h4v-32h-4v32zm-28 99h4V410h-4v120zm-28-103h4v-4h-4v4zm56 24h4v-4h-4v4zm-28 96h4v-4h-4v4zm-28-100h4v-4h-4v4zm56 28h4v-4h-4v4zm-28 96h4v-4h-4v4zm28-80h4v-4h-4v4z'/%3E%3Cpath fill='%23010E18' fill-rule='evenodd' d='M365 347l36-36 36 36-36 36-36-36zm36-32l-32 32 32 32 32-32-32-32z' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E")no-repeat; background-size: cover; padding: 16px; margin: 0px; height: 320px } .flex-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: center; align-items: center; width: 100%; max-width: 1280px; padding: 0 8px; margin: -16px -16px; } .flex-wrap-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; width: 100%; max-width: 1280px; padding: 0 8px; margin: -16px -16px; } .flex-wrap-elevated { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width: calc(100% - 16px); padding: 16px 32px 40px; margin: 24px 0 40px 0; background: #FFF; box-shadow: 0 16px 32px -16px rgba(0,0,0,0.24); } .box-1,.box-2,.box-3,.box-4 { padding: 32px 16px; margin: 8px; align-self: stretch; } .box-1,.inner-1 { width: calc(100% - 16px); } .box-2,.inner-2 { width: calc(50% - 16px); } .box-3,.inner-3 { width: calc(33.333% - 16px); } .box-4,.inner-4 { width: calc(25% - 16px); } .inner-1,.inner-2,.inner-3,.inner-4 { align-self: stretch; } .box-elevated { background: #FFF; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.24); margin: 24px 0; } .footer-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: center; align-items: center; width: 100%; max-width: 1280px; padding: 0 8px; margin: -16px -16px; } .footer-content a,.footer-content p { color: #FFF; font-size: .8em; line-height: 1.6; text-decoration: none; } .footer-content a { display: inline-block; text-align: left; margin: 0 16px 0 0; } .footer-content p { text-align: right; margin: 0; } .footer-right { width: calc(36% - 16px); padding: 0; margin: 8px; } .footer-left { width: calc(64% - 16px); padding: 0; margin: 8px; } .footer-divider { display: none; } .table-row { border-top: 1px dashed #EEE; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: center; align-items: center; width: 100%; } .table-row span { display: block; color: #222; margin: 8px 0; vertical-align: middle; padding: 8px 0; font-size: 1.0em; } .table-left-col { flex: 75%; max-width: 75%; text-align: left; } .table-right-col { flex: 25%; max-width: 25%; text-align: right; } a.btn { display: inline-block; } a.btn-fw { display: block; } a.btn,a.btn-fw { text-align: center; cursor: pointer; text-transform: uppercase; letter-spacing: .02em; height: 48px; font-weight: bolder; min-height: 48px; line-height: 48px; font-size: .8em; margin: 0; padding: 0 16px; min-width: 96px; overflow: hidden; text-decoration: none; white-space: nowrap; } a.btn-primary:link,a.btn-primary:visited { background: #06F; color: #FFF; } a.btn-secondary:link,a.btn-secondary:visited { background: #FFF; border: 2px solid #06F; color: #06F; } .list { display: flex; flex-direction: row; margin-bottom: 16px; text-align: left; } .li-img { flex: 1 1 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M18 8L10 16L6 12M5 23H19C20.0609 23 21.0783 22.5786 21.8284 21.8284C22.5786 21.0783 23 20.0609 23 19V5C23 3.93913 22.5786 2.92172 21.8284 2.17157C21.0783 1.42143 20.0609 1 19 1H5C3.93913 1 2.92172 1.42143 2.17157 2.17157C1.42143 2.92172 1 3.93913 1 5V19C1 20.0609 1.42143 21.0783 2.17157 21.8284C2.92172 22.5786 3.93913 23 5 23Z' stroke='%230066FF' stroke-width='2'/%3E%3C/svg%3E")no-repeat center; min-width: 24px; width: 24px; height: 24px; margin-top: 4px; } .li-text { flex: 5 2 auto; } .li-text p { margin: 0; padding-left: 16px; } .card img { width: 100%; height: auto; vertical-align: middle } .card-title { display: block; } .card-title::after { content: ""; margin: 24px auto; display: block; background: #06F; width: 32px; height: 2px; } .card-content,.card-bottom { align-self: flex-start; width: 100%; padding: 16px 16px 0 16px; } .card-content h3,.card-content h4,.card-content p,.card-content svg { margin: 0 0 8px; } .contact-links { display: flex; flex-direction: column; min-height: 200px; align-items: center; justify-content: space-around; } .contact-links a,.contact-links p { font-size: .96em; font-weight: 600; color: #06F; text-decoration: none; line-height: 1; margin: 0; } #grid-toggle:checked ~ .grid > .item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; padding-bottom: 24px; width: calc(25% - 16px); margin: 8px 8px 16px; align-self: stretch; background: #FFF; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.24); } #grid-toggle:checked ~ .grid > .item picture { width: 100%; height: auto; overflow: hidden; } .grid > .item picture { width: 96px; height: 96px; overflow: hidden; align-self: stretch; background: #06F; } .grid > .item svg { width: 100%; height: auto; } #grid-toggle:checked ~ .grid > .item .card-content,#grid-toggle:checked ~ .grid > .item .card-price, .grid > .item .card-bottom { width: 100%; overflow: hidden; text-align: center; } .grid > .item .card-content { display: flex; flex-direction: row; flex-wrap: wrap; width: calc(100% - 96px); padding: 16px 16px 0 16px; align-self: stretch; } .grid > .item .card-content .c-title { width: 70%; order: 1; text-align: left; } .grid > .item .card-content .c-price { width: 30%; order: 2; text-align: right; } .grid > .item .card-content .c-text { width: 100%; order: 3; text-align: left; } #grid-toggle:checked ~ .grid > .item .card-content .c-title { width: 100%; order: 1; text-align: center; } #grid-toggle:checked ~ .grid > .item .card-content .c-price { width: 100%; order: 3; text-align: center; } #grid-toggle:checked ~ .grid > .item .card-content .c-text { width: 100%; order: 2; text-align: center; } .grid > .item .card-title::after { display: none; } .grid > .item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; width: 100%; border-bottom: 1px solid #EEE; margin: 0; align-self: stretch; background: #FFF; padding: 16px; } .divider { display: block; width: calc(100% - 16px); height: 2px; text-align: center; margin: 16px 0; border-bottom: 1px solid #CCC; } .selector-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: center; align-items: center; width: 100%; max-width: 1280px; padding: 0 8px; margin: 0 -16px 24px -16px; } .selector-wrap h2 { margin: 0; } .inner-left { width: calc(80% - 16px); } .inner-right { width: calc(20% - 16px); } .grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: center; align-items: center; width: 100%; max-width: 1280px; padding: 0 8px; margin: -16px -16px; } #grid-toggle:checked ~ .list-view, .grid-view { display: flex; flex-direction: row; flex-wrap: wrap; cursor: pointer; width: 24px; height: 24px; align-self: flex-end; text-align: right; margin: 0 0 0 auto; } #grid-toggle:checked ~ .selector-wrap > .inner-right > .grid-view { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M8 20H20V18H8V20ZM8 13H20V11H8V13ZM8 4V6H20V4H8Z' fill='%23000'/%3E%3Cpath d='M4 20H6V18H4V20ZM4 13H6V11H4V13ZM4 4V6H6V4H4Z' fill='%23000'/%3E%3C/svg%3E")no-repeat center; } .grid-view { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 11H4V4H11V11ZM9 6H6V9H9V6Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 11H13V4H20V11ZM18 6H15V9H18V6Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 20H4V13H11V20ZM9 15H6V18H9V15Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 20H13V13H20V20ZM18 15H15V18H18V15Z' fill='%23000'/%3E%3C/svg%3E")no-repeat center; } .grid > .item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; padding: 0 0 24px 0; width: calc(25% - 16px); margin: 0 8px 16px; align-self: stretch; background: #FFF; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.24); } #grid-toggle:checked ~ .grid > .item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; width: calc(100% - 16px); border-bottom: 1px solid #EEE; margin: 0; align-self: stretch; background: #FFF; padding: 8px; } .grid > .item picture { width: 100%; height: auto; overflow: hidden; } #grid-toggle:checked ~ .grid > .item picture { width: 96px; height: 96px; overflow: hidden; align-self: stretch; background: #06F; } .grid > .item svg { width: 100%; height: auto; } .grid > .item .card-content { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; overflow: hidden; text-align: center; } #grid-toggle:checked ~ .grid > .item .card-content,#grid-toggle:checked ~ .grid > .item .card-price, .grid > .item .card-bottom { display: flex; flex-direction: row; flex-wrap: wrap; width: calc(100% - 96px); padding: 16px 16px 0 16px; align-self: stretch; } .grid > .item .card-content .c-title { width: 100%; order: 1; text-align: center; } .grid > .item .card-content .c-price { width: 100%; order: 3; text-align: center; } .grid > .item .card-content .c-text { width: 100%; order: 2; text-align: center; } #grid-toggle:checked ~ .grid > .item .card-content .c-title { width: 70%; order: 1; text-align: left; } #grid-toggle:checked ~ .grid > .item .card-content .c-price { width: 30%; order: 2; text-align: right; } #grid-toggle:checked ~ .grid > .item .card-content .c-text { width: 100%; order: 3; text-align: left; } .grid > .item .card-title::after { display: none; } .tab-wrapper { width: calc(100% - 16px); display: flex; flex-wrap: wrap; overflow-x: auto; align-items: flex-start; justify-content: flex-start; background: #FFF; margin: 24px 0 40px 0; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.24); } .tab-wrapper .tab-item,.tab-wrapper input { display: none; } .tab-wrapper .tab-item { width: 100%; padding: 16px 32px 40px; order: 1; min-height: 240px; } .tab-wrapper label { flex-direction: row; border-bottom: 1px solid #EEE; background-color: #FFF; height: 48px; line-height: 48px; padding: 0; font-size: .8em; font-weight: 600; text-transform: uppercase; text-align: center; align-items: center; justify-content: center; flex-grow: 1; cursor: pointer; } .tab-wrapper input:checked + label { background: #FFF; color: #06F; border-bottom: 2px solid #06F; } .tab-wrapper input:checked + label + .tab-item { display: block; } @media not screen and (max-width: 800px) { .contact-links a:hover { opacity:.64; } a.btn-primary:hover,a.btn-primary:active,a.btn-secondary:hover,a.btn-secondary:active { box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.24) } .grid-view:hover, #grid-toggle:checked ~ .selector-wrap > .inner-right > .grid-view:hover { opacity: 0.4; transition: all .3s; } a:hover { transition: all .3s } .resp-nav a:hover { background-size: 100% 2px; color: #06F; } } @media (max-width: 1024px) { body { font-size:90%; } a.btn { font-size: .88em; } .hero { padding: 48px 0 16px 0; margin: 0px; height: 240px; } .footer-left,.footer-right { width: 100%; text-align: center; padding: 0; margin: 0 8px; } .footer-divider { display: block; width: 100%; height: 2px; text-align: center; margin: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-content { flex-direction: column; } .footer-content a,.footer-content p { font-size: .96em; display: block; text-align: center; margin: 16px 0 8px 0; } .card-4 { width: calc(33.333% - 16px); margin: 8px; align-self: stretch; } #grid-toggle:checked ~ .grid > .item { width: calc(50% - 16px); } .grid-view:hover,#grid-toggle:checked ~ .selector-wrap > .inner-right > .grid-view:hover { opacity: 100; } } @media (max-width: 768px) { body { font-size:88%; } p { font-size: 1.2em; } .logo { width: 100%; padding-left: 24px; text-align: center; } .menu-open { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19h16v-2H4v2zm0-6h16v-2H4v2zm0-8v2h16V5H4z' fill='%23000'/%3E%3C/svg%3E")no-repeat center; display: block; cursor: pointer; width: 24px; height: 24px; } .menu-close { display: none; } #selected { background: none; } #menu-toggle:checked ~ .menu-open { display: none; } #menu-toggle:checked ~ .menu-close { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6.5L17.5 5 12 10.5 6.5 5 5 6.5l5.5 5.5L5 17.5 6.5 19l5.5-5.4 5.5 5.4 1.5-1.5-5.5-5.5L19 6.5z' fill='%23FFFFFF'/%3E%3C/svg%3E")no-repeat center; display: block; cursor: pointer; width: 24px; height: 24px; } .overlay { display: none; } #menu-toggle:checked ~ .overlay { display: block; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, .72); z-index: -10000; } .resp-nav { display: flex; flex-direction: column; justify-content: flex-start; position: fixed; top: 0; left: 0; width: 80%; max-width: 256px; height: 100%; padding-top: 16px; margin: 0; background: #FFF; transform: translateX(-100%); transition: 0.3s; } .resp-nav a { font-size: .96em; line-height: 1.6; text-align: left; } #menu-toggle:checked ~ .resp-nav { transform: translateX(0); list-style: none; } .flex-wrap-grid,.flex-wrap { width: 96%; } .footer-wrap { flex-direction: column; flex-wrap: nowrap; } .flex-wrap-elevated { padding: 16px 16px 40px; } .hero { padding: 48px 0 16px 0; margin: 0px; height: 240px; } .box-1,.inner-1,.box-2,.inner-2,.box-3,.inner-3 { width: calc(100% - 16px); } .card-4,.box-4,.inner-4 { width: calc(50% - 16px); } .list { flex-direction: column; text-align: center; align-items: center; } .li-img { flex: 1 1 auto; min-width: 24px; width: 24px; height: 24px; margin-top: 4px; } .li-text { flex: 100%; margin: 8px 0 16px; } .li-text p { padding: 0; } .card-content h4,.card-content p { font-size: 96%; } .grid > .item { width: calc(50% - 16px); } #grid-toggle:checked ~ .grid > .item { width: calc(100% - 16px); } #grid-toggle:checked ~ .grid > .item .card-content .c-text { font-size: 80%; } } @media (max-width: 480px) { body { font-size:80%; } a.btn { font-size: .96em; } .hero { background: #000; } .card-4,.box-4,.inner-4 { width: calc(100% - 16px); } .grid { width: 96%; } } @media (max-width: 375px) { .grid > .item { width:calc(100% - 16px); } #grid-toggle:checked ~ .grid > .item .card-content .c-text { display: none; } }
</style>
<title>Rocket - text page</title>
<link rel="manifest" href="manifest.json">
<meta name="description" content="Rocket pwa boilerplate">
<meta name="apple-mobile-web-app-status-bar-style" content="#0066ff">
<meta name="application-name" content="Rocket pwa boilerplate">
<meta name="msapplication-TileColor" content="#0066ff">
<meta name="theme-color" content="#0066ff">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="img/apple-touch-icon.png">
</head>
<body>
<!-- Header -->
<header>
<div class="header-container">
<div class="header-row">
<a class="logo" href="index.html">
<img width="24" height="24" src="data:image/svg+xml;base64,PHN2ZyAgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw%0D%0AMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZmlsbD0iIzA2%0D%0ARiIgZD0iTTEzIDloLTJ2Mkg5djJoMnYyaDJ2LTJoMnYtMmgtMlY5ek0yMCAyNGg0di00aC0ydjJo%0D%0ALTJ2MnpNNCAwSDB2NGgyVjJoMlYwek00IDI0SDB2LTRoMnYyaDJ2MnpNMjAgMGg0djRoLTJWMmgt%0D%0AMlYweiIvPgo8L3N2Zz4K" alt="Back to home page">
</a>
<div class="menu">
<input id="menu-toggle" type="checkbox" style="display:none;width:0px;">
<label class="menu-open" for="menu-toggle"></label>
<label class="menu-close" for="menu-toggle"></label>
<label class="overlay" for="menu-toggle"></label>
<div class="resp-nav">
<a href="index.html" title="Simple page">Simple</a>
<a href="prices.html" title="Data table">Table</a>
<a href="infotext.html" title="Text block">Text</a>
<a href="tabs.html" id="selected" title="Tabs and accordions">Tabs</a>
<a href="cardsgrid.html" title="Cards showcase">Cards</a>
<a href="contacts.html" title="Contact info">Contacts</a>
<a href="downloads.html" title="downloads page">Downloads</a>
</div>
</div>
</div>
</div>
</header>
<!-- End Header -->
<!-- Section hero -->
<section class="hero">
<div class="flex-wrap center">
<h1 class="inner-1">Pwa ready boilerplate</h1>
<h2 class="inner-1">Tabs</h2>
</div>
</section>
<!-- End Section hero -->
<section class="bg-grey">
<div class="flex-wrap">
<!-- Tabs -->
<div class="tab-wrapper">
<input type="radio" name="tab" id="tab1" checked />
<label class="tab-label" for="tab1" nth="1">Tab 01</label>
<div class="tab-item" id="tab-content1">
<h3>Tab 01</h3>
<p>This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists.</p>
</div>
<input type="radio" name="tab" id="tab2" />
<label class="tab-label" for="tab2" nth="2">Tab 02</label>
<div class="tab-item" id="tab-content2">
<h3>Tab 02</h3>
<p>This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists.</p>
</div>
<input type="radio" name="tab" id="tab3" />
<label class="tab-label" for="tab3" nth="3">Tab 03</label>
<div class="tab-item" id="tab-content3">
<h3>Tab 03</h3>
<p>This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists.</p>
</div>
<input type="radio" name="tab" id="tab4" />
<label class="tab-label" for="tab4" nth="4">tab4</label>
<div class="tab-item" id="tab-content4">
<h3>Tab 04</h3>
<p>This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists. This is the plain text used in this layout, in paragraphs, in lists.</p>
</div>
</div>
</div>
</section>
<footer class="bg-dark">
<div class="footer-wrap footer-content">
<div class="footer-left">
<a href="https://mobikdev.com/" title="back to mobikdev folio"><i>back to</i> → <b>mobikdev.com</b></a>
</div>
<div class="footer-divider"></div>
<div class="footer-right">
<p>© 2021 mobikdev. All rights reserved</p>
</div>
</div>
</footer>
<script> if ('serviceWorker' in navigator) {navigator.serviceWorker.register('sw.js', {updateViaCache: 'none',});}</script>
</body>
</html>