-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtabs.html
104 lines (103 loc) · 7.19 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
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Only Tabs</title>
<link rel="stylesheet" href="../css/main.min.css">
</head>
<body class="tabs-demo">
<svg style="display: none;">
<symbol id="decor-icon" viewBox="0 0 100 100">
<title>Home Decor</title>
<path d="M30,57.943v-1.641v-0.604c1-0.353,0.96-0.457,0.96-0.915c0-0.126-0.184-0.783-0.244-0.783h-0.301h-6.237h-6.538 c-0.06,0,0.079,0.657,0.079,0.783c0,0.458,0.28,0.562,1.28,0.915v0.604v1.641c-3,2.114-5.529,6.061-5.529,10.585S16,77,19,79.114 V81h2.433h2.746H30v-1.886c3-2.114,5.529-6.062,5.529-10.586S33,60.058,30,57.943z"/>
<path d="M59,36.717v-0.21l-0.035-1.059c0.602-0.608,0.919-1.506,0.919-2.251c0-0.225-0.034-0.197-0.093-2.197H59.49h-6.237h-6.538 c-0.059,2,0.042,1.973,0.042,2.197c0,0.823,0.244,1.802,1.244,2.437v1.083v2.94c-3,3.791-5.528,10.869-5.528,18.981 S45,73.828,48,77.619V81h2.507h2.746H59v-3.381c3-3.791,5.529-10.868,5.529-18.98S62,43.448,59,39.657V36.717z"/>
<path d="M84,33.694V30.33v-1.24c0-0.725,0.728-1.739,0.728-2.681c0-0.258-0.044-0.409-0.084-2.409h-0.202h-4.213h-4.415 c-0.039,2,0.188,2.151,0.188,2.409c0,0.941-0.001,1.956,0.999,2.681v1.24v3.364c-2,4.338-3.733,12.437-3.733,21.719 S75,72.794,77,77.132V81h1.374h1.854H84v-3.868c2-4.338,3.734-12.437,3.734-21.719S86,38.032,84,33.694z"/>
</symbol>
<symbol id="kitchen-icon" viewBox="0 0 100 100">
<title>Kitchen</title>
<polygon points="100,32.989 86.227,32.989 85.645,40.081 99.507,37.174 "></polygon>
<polygon points="0,32.989 0.495,37.174 14.332,40.076 13.752,32.989 "></polygon>
<path d="M44.409,17.262c0,0.143,0.038,0.279,0.059,0.417c-8.013,0.731-13.977,2.895-17.108,4.287 c-6.318,2.809-8.374,5.582-8.408,6.274c0.355,1.811,10.44,6.623,31.038,6.623c20.597,0,30.682-4.812,31.039-6.642 c-0.036-0.674-2.092-3.447-8.409-6.255c-3.132-1.392-9.096-3.555-17.108-4.287c0.02-0.139,0.059-0.274,0.059-0.417 c0-0.935-0.461-1.784-1.205-2.467c-1.021-0.939-2.591-1.554-4.375-1.554c-1.783,0-3.354,0.614-4.375,1.554 C44.871,15.479,44.409,16.327,44.409,17.262z"></path>
<path d="M83.781,29.457L79.818,77.06c-0.409,4.763-13.354,9.699-29.829,9.699c-16.474,0-29.33-5.029-29.829-9.699l-3.961-47.603 c0,0,2.752,8.1,33.791,8.196C81.028,37.75,83.781,29.457,83.781,29.457z"></path>
</symbol>
<symbol id="furniture-icon" viewBox="0 0 113.093 107.814">
<title>Furniture</title>
<path fill="currentColor" d="M23.037,79.739h-3.793v2.95h3.126L17.38,95.913c-0.498,1.189,0.061,2.555,1.25,3.053 c1.188,0.497,2.554-0.062,3.051-1.249l6.588-15.027h59.629l3.95,16.234c0.284,1.257,1.532,2.045,2.787,1.762 c1.257-0.283,2.045-1.531,1.762-2.788L93.59,82.689h7.826v-2.95h-3.792c1.861,0,3.371-1.51,3.371-3.371V66.255 c0-1.862-1.51-3.371-3.371-3.371h-7.689l-2.717-14.72h7.524c1.126,0,2.039-0.913,2.039-2.04s-0.913-2.04-2.039-2.04h-64.51 l-6.718-33.566c-0.37-1.824-2.15-3.003-3.975-2.633l-9.912,2.01c-1.823,0.37-3.003,2.149-2.633,3.975L19.61,76.904 c0.142,0.698,0.491,1.298,0.968,1.756C21.193,79.32,22.063,79.739,23.037,79.739z M31.048,48.164h4.349l-2.842,7.531L31.048,48.164z M83.08,62.884H36.953l6.454-14.72h36.092L83.08,62.884z"></path>
</symbol>
<symbol id="clearance-icon" viewBox="0 0 100 100">
<title>Clearance</title>
<g transform="translate(0,-952.36218)">
<path d="m 92.07815,960.29967 -38.9063,0.6875 -45.2499998,45.28123 38.1874998,38.1563 45.25,-45.25001 0.7188,-38.87502 z m -16.9688,10.96875 c 1.5356,0 3.0471,0.5784 4.2188,1.75 2.3431,2.3432 2.3431,6.1568 0,8.5 -2.3432,2.34307 -6.1256,2.34307 -8.4688,0 -2.3431,-2.3432 -2.3431,-6.1569 0,-8.5 1.1716,-1.1716 2.7145,-1.75 4.25,-1.75 z m -25.125,13.15627 c 3.29,0 6,2.71 6,6 0,3.29 -2.71,6 -6,6 -3.29,0 -6,-2.71 -6,-6 0,-3.29 2.71,-6 6,-6 z m 0,4 c -1.1282,0 -2,0.8718 -2,2 0,1.1282 0.8718,2 2,2 1.1282,0 2,-0.8718 2,-2 0,-1.1282 -0.8718,-2 -2,-2 z m -17,12.00001 34,0 c 1.1046,0 2,0.8954 2,2 0,1.1046 -0.8954,2 -2,2 l -34,0 c -1.1046,0 -2,-0.8954 -2,-2 0,-1.1046 0.8954,-2 2,-2 z m 17,8 c 3.29,0 6,2.71 6,6 0,3.29 -2.71,6 -6,6 -3.29,0 -6,-2.71 -6,-6 0,-3.29 2.71,-6 6,-6 z m 0,4 c -1.1282,0 -2,0.8718 -2,2 0,1.1282 0.8718,2 2,2 1.1282,0 2,-0.8718 2,-2 0,-1.1282 -0.8718,-2 -2,-2 z" fill="currentColor" stroke="none"/>
</g>
</symbol>
</svg>
<header>
<h1 class="demo__heading">CSS Only Tabs</h1>
</header>
<section class="tabs__section tabs-demo__content">
<input class="tabs__input sr-only focusable" type="radio" name="tabset1" id="tabset1-tab1" checked>
<input class="tabs__input sr-only focusable" type="radio" name="tabset1" id="tabset1-tab2">
<input class="tabs__input sr-only focusable" type="radio" name="tabset1" id="tabset1-tab3">
<input class="tabs__input sr-only focusable" type="radio" name="tabset1" id="tabset1-tab4">
<ul class="tabs__list">
<li class="tabs__tab">
<label class="tabs__label" for="tabset1-tab1">
<svg class="tabs__icon" title="Home Decor">
<use xlink:href="#decor-icon" />
</svg>
<span class="tab__text sm-hide" aria-hidden="true">Home Decor</span>
</label>
</li>
<li class="tabs__tab">
<label class="tabs__label" for="tabset1-tab2">
<svg class="tabs__icon" title="Furniture">
<use xlink:href="#furniture-icon" />
</svg>
<span class="tab__text sm-hide" aria-hidden="true">Furniture</span>
</label>
</li>
<li class="tabs__tab">
<label class="tabs__label" for="tabset1-tab3">
<svg class="tabs__icon" title="Kitchen">
<use xlink:href="#kitchen-icon" />
</svg>
<span class="tab__text sm-hide" aria-hidden="true">Kitchen</span>
</label>
</li>
<li class="tabs__tab">
<label class="tabs__label" for="tabset1-tab4">
<svg class="tabs__icon" title="Clearance">
<use xlink:href="#clearance-icon" />
</svg>
<span class="tab__text sm-hide" aria-hidden="true">Clearance</span>
</label>
</li>
</ul>
<ul class="tab-content__list">
<li class="tab__content">
<p>Browse through our list of home decor items.</p>
</li>
<li class="tab__content">
<p>Flash sale on living room and bedroom furniture.</p>
</li>
<li class="tab__content">
<p>Bring out the best of the mastermind chef in you.</p>
</li>
<li class="tab__content">
<p>Red hot deals at affordable prices. Check out our clearance section for more details.</p>
</li>
</du>
</section>
<footer class="tabs-demo__footer">
<!-- SVG attribution -->
<dl class="value-pairs__list">
<dt class="value-pairs__key">Sales Tag Icon</dt>
<dd class="value-pairs__value"> created by <a href="https://thenounproject.com/rockicon">Rockicon</a> from <a href="https://thenounproject.com">The Noun Project</a></dd>
<dt class="value-pairs__key">Vase icon </dt>
<dd class="value-pairs__value"> created by <a href="https://thenounproject.com/allie.fanni/">Alice Mortaro</a> from <a href="https://thenounproject.com">The Noun Project</a></dd>
</dl>
</footer>
</body>
</html>