-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (150 loc) · 13 KB
/
index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Workout idea">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Mario Flores Abreu">
<title>Workout - Fire up your body!</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta property="og:image" content="https://max131.github.io/workout/screenshot.png">
<meta property="og:title" content="Workout Layout">
<meta property="og:description" content="A simple and responsive layout for a gym, this have a nice transition between section.">
</head>
<body>
<input type="radio" name="x" id="x1" class="hidden-input" checked>
<input type="radio" name="x" id="x2" class="hidden-input">
<input type="radio" name="x" id="x3" class="hidden-input">
<input type="radio" name="x" id="x4" class="hidden-input">
<nav class="nav">
<label for="x1" class="button" title="Fire up!">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><path id="a-14" d="M-22 2.24H20V22H-22z"></path></defs><clipPath id="b-13"><use xlink:href="#a-14" overflow="visible"></use></clipPath><path clip-path="url(#b-13)" d="M16.543,8.028c-0.023,1.503-0.523,3.538-2.867,4.327c0.734-1.746,0.846-3.417,0.326-4.979 c-0.695-2.097-3.014-3.735-4.557-4.627C8.918,2.443,8.242,2.823,8.252,3.432c0.02,1.112-0.318,2.737-1.959,4.378 C4.107,9.994,3,12.251,3,14.517C3,17.362,5,21,9,21c-4.041-4.041-1-7.483-1-7.483C8.846,19.431,12.988,21,15,21 c1.711,0,5-1.25,5-6.448c0-3.133-1.332-5.511-2.385-6.899C17.268,7.195,16.551,7.455,16.543,8.028"></path></svg>
</span>
<span class="icon-text">Fire up!</span>
</label>
<label for="x2" class="button" title="Train hard">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 5L6 11 6 13 6 19 9 19 9 13 15 13 15 19 18 19 18 5 15 5 15 11 9 11 9 5zM3 15c0 .553.447 1 1 1h1V8H4C3.447 8 3 8.447 3 9v2H2v2h1V15zM21 9c0-.553-.447-1-1-1h-1v8h1c.553 0 1-.447 1-1v-2h1v-2h-1V9z"></path></svg>
</span>
<span class="icon-text">Train hard</span>
</label>
<label for="x3" class="button" title="More Power">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.168,8H13l0.806-4.835C13.907,2.555,13.438,2,12.819,2H7.667C7.178,2,6.761,2.354,6.681,2.835l-1.667,10 C4.912,13.445,5.382,14,6,14h4v8l8.01-12.459C18.438,8.875,17.96,8,17.168,8z"></path></svg>
</span>
<span class="icon-text">More Power</span>
</label>
<label for="x4" class="button" title="Schedule">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M15.293,16.707L11,12.414V6h2v5.586l3.707,3.707 L15.293,16.707z"></path></svg>
</span>
<span class="icon-text">Schedule</span>
</label>
</nav>
<main class="main">
<div class="slides">
<div class="slide">
<div class="slide__content">
<h2 class="title">Fire up your energy</h2>
<p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Eligendi, veniam magnam nostrum maiores tenetur possimus magni omnis, itaque corrupti corporis.</p>
</div>
</div>
<div class="slide">
<div class="slide__content">
<h2 class="title">Train like never</h2>
<p class="subtitle">Praesentium, sequi hic nesciunt velit ea? Cupiditate sunt, mollitia dicta.</p>
<p>Sit quos itaque alias illo, ea. Ipsa voluptates iusto molestias et nisi delectus magnam totam, perspiciatis natus, magni quasi ad?</p>
</div>
</div>
<div class="slide">
<div class="slide__content">
<h2 class="title">Empower your body</h2>
<p class="subtitle">Omnis, eligendi ex eius eum, incidunt repellendus architecto hic quasi!</p>
<p>Ipsa molestiae voluptatibus ducimus dicta ullam sit maxime dolorum, quidem temporibus eligendi laudantium officia, necessitatibus magni voluptate cum. Necessitatibus, laborum?</p>
</div>
</div>
<div class="slide">
<div class="slide__content">
<h2 class="title">Schedule your time</h2>
<p class="subtitle">Vero repellendus nihil dolorem, molestiae culpa assumenda!</p>
<p>Placeat illum explicabo rem odio quisquam ducimus, veniam, quis tempora ullam et, dignissimos dolor culpa, eum voluptate! Temporibus, nam, sequi!</p>
<p><a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/mabreumx/appointment'});return false;">Schedule your training.</a></p>
</div>
</div>
</div>
</main>
<input type="checkbox" name="info" id="info" class="hidden-input">
<label for="info" class="button info">
<span class="icon" title="More info...">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M13,17h-2v-6h2V17z M13,9h-2V7h2V9z"></path></svg>
</span>
</label>
<footer class="footer">
<label for="info" class="button is-close">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.172 16.242L12 13.414 14.828 16.242 16.242 14.828 13.414 12 16.242 9.172 14.828 7.758 12 10.586 9.172 7.758 7.758 9.172 10.586 12 7.758 14.828z"></path><path d="M12,22c5.514,0,10-4.486,10-10S17.514,2,12,2S2,6.486,2,12S6.486,22,12,22z M12,4c4.411,0,8,3.589,8,8s-3.589,8-8,8 s-8-3.589-8-8S7.589,4,12,4z"></path></svg>
</span>
</label>
<ul class="social-links">
<li>
<a href="#!" class="social-link">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2C7.589,2,4,5.589,4,9.995C3.971,16.44,11.696,21.784,12,22c0,0,8.029-5.56,8-12C20,5.589,16.411,2,12,2z M11,15.414 l-3.707-3.707l1.414-1.414L11,12.586l5.293-5.293l1.414,1.414L11,15.414z"></path></svg>
</span>
<span class="icon-text">Raven Avenue 540.</span>
</a>
</li>
<li>
<a href="#!" class="social-link">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,10.999h2C22,5.869,18.127,2,12.99,2v2C17.052,4,20,6.943,20,10.999z"></path><path d="M13 8c2.103 0 3 .897 3 3h2c0-3.225-1.775-5-5-5V8zM16.422 13.443c-.399-.363-1.015-.344-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.66-2.926l2.459-2.394c.388-.376.406-.991.043-1.391L6.859 3.513c-.363-.401-.98-.439-1.391-.087l-2.17 1.861C3.125 5.461 3.022 5.691 3.008 5.936c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008.245-.014.475-.117.648-.291l1.86-2.171c.353-.411.313-1.027-.086-1.391L16.422 13.443z"></path></svg>
</span>
<span class="icon-text">Phone</span>
</a>
</li>
<li>
<a href="#!" class="social-link">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.403,5.633C16.708,3.936,14.454,3.001,12.053,3 c-4.948,0-8.976,4.027-8.978,8.977c0,1.582,0.413,3.126,1.198,4.488L3,21.116l4.759-1.249c1.312,0.715,2.788,1.092,4.29,1.093h0.004 l0,0c4.947,0,8.975-4.027,8.977-8.977C21.03,9.585,20.098,7.33,18.403,5.633 M12.053,19.445H12.05 c-1.339-0.001-2.652-0.36-3.798-1.041l-0.272-0.162l-2.824,0.741l0.753-2.753l-0.177-0.282c-0.747-1.188-1.141-2.561-1.141-3.971 c0.002-4.114,3.349-7.461,7.465-7.461c1.993,0.001,3.866,0.778,5.275,2.188c1.408,1.411,2.184,3.285,2.183,5.279 C19.512,16.097,16.165,19.445,12.053,19.445 M16.146,13.856c-0.225-0.113-1.327-0.655-1.533-0.73 c-0.205-0.075-0.354-0.112-0.504,0.112s-0.58,0.729-0.711,0.879s-0.262,0.168-0.486,0.056s-0.947-0.349-1.804-1.113 c-0.667-0.595-1.117-1.329-1.248-1.554s-0.014-0.346,0.099-0.458c0.101-0.1,0.224-0.262,0.336-0.393 c0.112-0.131,0.149-0.224,0.224-0.374s0.038-0.281-0.019-0.393c-0.056-0.113-0.505-1.217-0.692-1.666 C9.627,7.787,9.442,7.845,9.304,7.839c-0.13-0.006-0.28-0.008-0.429-0.008c-0.15,0-0.393,0.056-0.599,0.28 C8.07,8.336,7.491,8.878,7.491,9.982c0,1.104,0.804,2.171,0.916,2.321c0.112,0.15,1.582,2.415,3.832,3.387 c0.536,0.231,0.954,0.369,1.279,0.473c0.537,0.171,1.026,0.146,1.413,0.089c0.431-0.064,1.327-0.542,1.514-1.066 c0.187-0.524,0.187-0.973,0.131-1.067C16.52,14.025,16.369,13.968,16.146,13.856"></path></svg>
</span>
<span class="icon-text">Whatsapp</span>
</a>
</li>
<li>
<a href="#!" class="social-link">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.001,2.002c-5.522,0-9.999,4.477-9.999,9.999c0,4.99,3.656,9.126,8.437,9.879v-6.988h-2.54v-2.891h2.54V9.798 c0-2.508,1.493-3.891,3.776-3.891c1.094,0,2.24,0.195,2.24,0.195v2.459h-1.264c-1.24,0-1.628,0.772-1.628,1.563v1.875h2.771 l-0.443,2.891h-2.328v6.988C18.344,21.129,22,16.992,22,12.001C22,6.479,17.523,2.002,12.001,2.002z"></path></svg>
</span>
<span class="icon-text">Facebook</span>
</a>
</li>
<li>
<a href="#!" class="social-link">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"></path></svg>
</span>
<span class="icon-text">Twitter</span>
</a>
</li>
<li>
<a href="#!" class="social-link">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.999,7.377c-2.554,0-4.623,2.07-4.623,4.623c0,2.554,2.069,4.624,4.623,4.624c2.552,0,4.623-2.07,4.623-4.624 C16.622,9.447,14.551,7.377,11.999,7.377L11.999,7.377z M11.999,15.004c-1.659,0-3.004-1.345-3.004-3.003 c0-1.659,1.345-3.003,3.004-3.003s3.002,1.344,3.002,3.003C15.001,13.659,13.658,15.004,11.999,15.004L11.999,15.004z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533,6.111c-0.469-1.209-1.424-2.165-2.633-2.632c-0.699-0.263-1.438-0.404-2.186-0.42 c-0.963-0.042-1.268-0.054-3.71-0.054s-2.755,0-3.71,0.054C7.548,3.074,6.809,3.215,6.11,3.479C4.9,3.946,3.945,4.902,3.477,6.111 c-0.263,0.7-0.404,1.438-0.419,2.186c-0.043,0.962-0.056,1.267-0.056,3.71c0,2.442,0,2.753,0.056,3.71 c0.015,0.748,0.156,1.486,0.419,2.187c0.469,1.208,1.424,2.164,2.634,2.632c0.696,0.272,1.435,0.426,2.185,0.45 c0.963,0.042,1.268,0.055,3.71,0.055s2.755,0,3.71-0.055c0.747-0.015,1.486-0.157,2.186-0.419c1.209-0.469,2.164-1.424,2.633-2.633 c0.263-0.7,0.404-1.438,0.419-2.186c0.043-0.962,0.056-1.267,0.056-3.71s0-2.753-0.056-3.71C20.941,7.57,20.801,6.819,20.533,6.111z M19.315,15.643c-0.007,0.576-0.111,1.147-0.311,1.688c-0.305,0.787-0.926,1.409-1.712,1.711c-0.535,0.199-1.099,0.303-1.67,0.311 c-0.95,0.044-1.218,0.055-3.654,0.055c-2.438,0-2.687,0-3.655-0.055c-0.569-0.007-1.135-0.112-1.669-0.311 c-0.789-0.301-1.414-0.923-1.719-1.711c-0.196-0.534-0.302-1.099-0.311-1.669c-0.043-0.95-0.053-1.218-0.053-3.654 c0-2.437,0-2.686,0.053-3.655c0.007-0.576,0.111-1.146,0.311-1.687c0.305-0.789,0.93-1.41,1.719-1.712 c0.534-0.198,1.1-0.303,1.669-0.311c0.951-0.043,1.218-0.055,3.655-0.055c2.437,0,2.687,0,3.654,0.055 c0.571,0.007,1.135,0.112,1.67,0.311c0.786,0.303,1.407,0.925,1.712,1.712c0.196,0.534,0.302,1.099,0.311,1.669 c0.043,0.951,0.054,1.218,0.054,3.655c0,2.436,0,2.698-0.043,3.654H19.315z"></path></svg>
</span>
<span class="icon-text">Instagram</span>
</a>
</li>
</ul>
<p class="footer-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, nulla dolorem officiis. Ad, accusantium optio.</p>
</footer>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
</body>
</html>