-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (173 loc) · 14 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sportit</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header>
<div class="contenedor">
<div class="logo">
<img src="./img/logo.svg" alt="Logo Sportit" />
</div>
<nav class="menu">
<ul>
<li><a href="#">Sports</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Trainning</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<button class="btn-primario" name="button">Contacto</button>
<img class="menu-mobile" src="./img/icons/icon-hamburger.svg" alt="" />
</div>
</header>
<section class="slideshow">
<div class="content contenedor">
<img src="./img/padel-intro.png" alt="Hombre con raqueta" />
<div class="contenido-slideshow">
<h2>LIVE: Follow the Telcel Huawei Mexico Open 2022 for free</h2>
<p>The final Open of the 2022 World Padel Tour season is underway, don't miss out on any of the action!</p>
<button class="btn-primario" name="button">Contacto</button>
</div>
</div>
</section>
<section class="engache" style="background-color: #FAFAFA">
<!-- Banner -->
<div class="banner">
<div class="contenedor">
<div class="contenido">
<h2>What´s different between pros?</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet consequat purus sit amet sodales. In faucibus ut nisi eu dignissim. Vestibulum fringilla velit sed tincidunt tincidunt.</span>
</div>
</div>
</div>
<!-- End Banner -->
<!-- Cards -->
<div class="contenedor">
<div class="cards">
<div class="card">
<div class="numero">01</div>
<div class="contenido-card">
<div class="titulo">Track company-wide progress</div>
<legend>Donec elit est, mattis lacinia arcu eu, efficitur consequat augue. Nam tellus sem, tempus pellentesque egestas vitae, efficitur vel nulla. Etiam vel orci rutrum, placerat quam eget, consequat dolor.</legend>
</div>
</div>
<div class="card">
<div class="numero">02</div>
<div class="contenido-card">
<div class="titulo">Advance built-in reports</div>
<legend>Donec elit est, mattis lacinia arcu eu, efficitur consequat augue. Nam tellus sem, tempus pellentesque egestas vitae, efficitur vel nulla. Etiam vel orci rutrum, placerat quam eget, consequat dolor.</legend>
</div>
</div>
<div class="card">
<div class="numero">03</div>
<div class="contenido-card">
<div class="titulo">Everything you need in one place</div>
<legend>Donec elit est, mattis lacinia arcu eu, efficitur consequat augue. Nam tellus sem, tempus pellentesque egestas vitae, efficitur vel nulla. Etiam vel orci rutrum, placerat quam eget, consequat dolor.</legend>
</div>
</div>
</div>
</div>
<!-- End Cards -->
</section>
<!-- BestMonth -->
<section class="bestmonth">
<div class="contenedor">
<h2>Best of the month</h2>
<article>
<div class="items-article">
<img src="./img/avatar-sanyo.png" alt="">
<div class="contenido">
<h4>Sanyo</h4>
<p>Etiam fermentum, nulla eget gravida cursus, purus lectus feugiat mauris, ut suscipit massa ipsum eu neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="items-article">
<img src="./img/avatar.lebron.png" alt="">
<div class="contenido">
<h4>Lebron</h4>
<p>Etiam fermentum, nulla eget gravida cursus, purus lectus feugiat mauris, ut suscipit massa ipsum eu neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="items-article">
<img src="./img/avatar-navarro.png" alt="">
<div class="contenido">
<h4>Navarro</h4>
<p>Etiam fermentum, nulla eget gravida cursus, purus lectus feugiat mauris, ut suscipit massa ipsum eu neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</article>
<button class="btn-primario">More</button>
</div>
</section>
<!-- END BestMonth -->
<section class="calltoaction">
<div class="banner py64">
<div class="contenedor">
<div class="contenido">
<h2>Get to know the best teams of the year</h2>
<button class="btn-segundario" name="button">Contacto</button>
</div>
</div>
</div>
</section>
<footer>
<div class="contenedor">
<div class="contenido-footer">
<div class="fila-1">
<div class="box">
<div class="logo">
<svg width="108" height="26" viewBox="0 0 108 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8196 15.1278C24.9382 14.4363 25 13.7253 25 13C25 6.09644 19.4036 0.5 12.5 0.5C8.31396 0.5 4.6085 2.55766 2.33991 5.71671C3.60762 5.54137 4.86107 5.62264 6.10323 5.93808C9.23662 6.73379 11.9017 8.9669 14.0623 10.7857L14.2343 10.9306C16.5219 12.857 18.38 14.4217 20.3729 15.1628C21.6644 15.6431 23.0789 15.7956 24.8196 15.1278ZM22.443 20.5765C20.1592 23.5691 16.5551 25.5 12.5 25.5C5.59644 25.5 0 19.9036 0 13C0 12.6428 0.0149802 12.2892 0.0443467 11.9396C2.10785 10.528 3.63023 10.4688 4.87256 10.7843C6.70365 11.2493 8.50642 12.6444 10.8421 14.6108C10.9808 14.7275 11.1215 14.8464 11.2643 14.9671L11.2643 14.9671C13.3148 16.7 15.7925 18.794 18.6301 19.8493C19.8564 20.3053 21.1271 20.564 22.443 20.5765Z" fill="#3CDDF3" />
<path d="M39.4058 20.4032C38.2775 20.4032 37.3007 20.1908 36.4755 19.7661C35.6672 19.3413 35.0525 18.7892 34.6315 18.1096C34.2105 17.413 34 16.6825 34 15.9179V15.765H37.4102V15.9179C37.4102 16.3767 37.587 16.7844 37.9406 17.1412C38.2943 17.498 38.8079 17.6764 39.4815 17.6764C40.0373 17.6764 40.4835 17.5489 40.8203 17.2941C41.174 17.0223 41.3508 16.657 41.3508 16.1983C41.3508 15.7905 41.1993 15.4677 40.8961 15.2299C40.593 14.992 40.2141 14.8391 39.7594 14.7712L38.2438 14.4653C37.2502 14.2785 36.3492 13.8792 35.5409 13.2676C34.7326 12.656 34.3284 11.73 34.3284 10.4898C34.3284 9.2156 34.7915 8.22171 35.7177 7.50816C36.6439 6.77761 37.8312 6.41234 39.2795 6.41234C40.3404 6.41234 41.2582 6.60771 42.0329 6.99847C42.8075 7.38923 43.3969 7.90741 43.8011 8.55301C44.2053 9.18162 44.4073 9.8612 44.4073 10.5917V10.6937H40.9972V10.6172C40.9972 10.2095 40.8456 9.83571 40.5425 9.49592C40.2394 9.13914 39.7762 8.96076 39.1532 8.96076C38.6311 8.96076 38.2101 9.09667 37.8901 9.3685C37.5702 9.64033 37.4102 9.99711 37.4102 10.4388C37.4102 10.8466 37.5702 11.1694 37.8901 11.4072C38.2269 11.6451 38.6395 11.8065 39.1279 11.8914L40.7951 12.2227C41.8729 12.4606 42.7822 12.8938 43.5232 13.5224C44.2642 14.134 44.6347 15.009 44.6347 16.1473C44.6347 16.9968 44.4073 17.7443 43.9527 18.3899C43.498 19.0355 42.8665 19.5367 42.0581 19.8935C41.2666 20.2333 40.3825 20.4032 39.4058 20.4032Z" fill="#fff" />
<path d="M53.8331 20.4032C52.7048 20.4032 51.8207 20.1398 51.1807 19.6131C50.5408 19.0865 50.0693 18.5088 49.7661 17.8802H49.564V25.5H46.0528V6.74363H49.564V8.83333H49.7661C50.0356 8.25569 50.4903 7.71203 51.1302 7.20234C51.7701 6.67567 52.6627 6.41234 53.8078 6.41234C55.5087 6.41234 56.8138 7.04944 57.7232 8.32365C58.6494 9.59786 59.1125 11.3053 59.1125 13.446C59.1125 15.5357 58.6494 17.2176 57.7232 18.4918C56.8138 19.7661 55.5171 20.4032 53.8331 20.4032ZM52.5701 17.5999C53.5805 17.5999 54.3299 17.1922 54.8182 16.3767C55.3235 15.5612 55.5761 14.5758 55.5761 13.4205C55.5761 12.2992 55.3235 11.3393 54.8182 10.5408C54.3299 9.72528 53.5805 9.31753 52.5701 9.31753C51.5765 9.31753 50.8271 9.72528 50.3219 10.5408C49.8167 11.3563 49.564 12.3247 49.564 13.446C49.564 14.5843 49.8167 15.5612 50.3219 16.3767C50.8271 17.1922 51.5765 17.5999 52.5701 17.5999Z" fill="#fff" />
<path d="M66.7947 20.4032C65.3969 20.4032 64.2181 20.0889 63.2582 19.4602C62.3152 18.8146 61.6079 17.9652 61.1363 16.9118C60.6648 15.8585 60.429 14.7032 60.429 13.446C60.429 12.1888 60.6564 11.0335 61.1111 9.98012C61.5826 8.90979 62.2983 8.05182 63.2582 7.40622C64.2181 6.76062 65.3969 6.43782 66.7947 6.43782C68.1924 6.43782 69.3713 6.76062 70.3312 7.40622C71.2911 8.03483 72.0068 8.87581 72.4783 9.92915C72.9498 10.9825 73.1856 12.1378 73.1856 13.395C73.1856 14.6522 72.9498 15.816 72.4783 16.8863C72.0068 17.9397 71.2911 18.7892 70.3312 19.4348C69.3713 20.0804 68.1924 20.4032 66.7947 20.4032ZM66.7947 17.5489C67.7714 17.5489 68.504 17.1582 68.9924 16.3767C69.4976 15.5782 69.7502 14.5843 69.7502 13.395C69.7502 12.2057 69.4976 11.2288 68.9924 10.4643C68.504 9.68281 67.7714 9.29205 66.7947 9.29205C65.818 9.29205 65.0854 9.68281 64.597 10.4643C64.1087 11.2288 63.8645 12.2057 63.8645 13.395C63.8645 14.5843 64.1087 15.5782 64.597 16.3767C65.1022 17.1582 65.8348 17.5489 66.7947 17.5489Z" fill="#fff" />
<path d="M74.8759 6.74363H78.3366V8.8843H78.5134C78.7323 8.28967 79.1365 7.78848 79.7259 7.38073C80.3153 6.956 81.0732 6.74363 81.9994 6.74363C82.353 6.74363 82.6561 6.77761 82.9088 6.84557L82.7572 10.0821C82.3362 9.96313 81.8899 9.90367 81.4184 9.90367C80.3743 9.90367 79.5996 10.184 79.0944 10.7446C78.5892 11.2883 78.3366 12.1972 78.3366 13.4715V20.1993H74.8759V6.74363Z" fill="#fff" />
<path d="M88.661 9.49592V15.4847C88.661 16.0793 88.6863 16.5211 88.7368 16.8099C88.8042 17.0987 88.9726 17.3281 89.242 17.498C89.5115 17.6679 89.9493 17.7528 90.5556 17.7528C90.9092 17.7528 91.2713 17.7188 91.6418 17.6509V20.0974C91.4565 20.1313 91.1197 20.1738 90.6314 20.2248C90.1598 20.2757 89.6967 20.3012 89.242 20.3012C88.0127 20.3012 87.0949 20.1228 86.4886 19.7661C85.8992 19.3923 85.5287 18.9336 85.3772 18.3899C85.2256 17.8293 85.1498 17.1157 85.1498 16.2492V9.49592H82.9269V6.74363H85.1751V2.36035H88.661V6.74363H91.6418V9.49592H88.661Z" fill="#fff" />
<path d="M93.8116 6.74363H97.2976V20.1993H93.8116V6.74363ZM95.5294 4.42457C94.9736 4.42457 94.5105 4.23768 94.14 3.86391C93.7695 3.47316 93.5843 3.00595 93.5843 2.46228C93.5843 1.90163 93.7695 1.43442 94.14 1.06065C94.5105 0.686884 94.9736 0.5 95.5294 0.5C96.0851 0.5 96.5482 0.695379 96.9187 1.08614C97.2892 1.45991 97.4744 1.91862 97.4744 2.46228C97.4744 3.00595 97.2892 3.47316 96.9187 3.86391C96.5482 4.23768 96.0851 4.42457 95.5294 4.42457Z" fill="#fff" />
<path d="M104.703 9.49592V15.4847C104.703 16.0793 104.729 16.5211 104.779 16.8099C104.847 17.0987 105.015 17.3281 105.284 17.498C105.554 17.6679 105.992 17.7528 106.598 17.7528C106.952 17.7528 107.314 17.7188 107.684 17.6509V20.0974C107.499 20.1313 107.162 20.1738 106.674 20.2248C106.202 20.2757 105.739 20.3012 105.284 20.3012C104.055 20.3012 103.137 20.1228 102.531 19.7661C101.942 19.3923 101.571 18.9336 101.42 18.3899C101.268 17.8293 101.192 17.1157 101.192 16.2492V9.49592H98.9693V6.74363H101.218V2.36035H104.703V6.74363H107.684V9.49592H104.703Z" fill="#fff" />
</div>
<div class="sociales">
<a href="#"><img src="./img/icons/icon-facebook.svg" alt="Facebook" /></a>
<a href="#"><img src="./img/icons/icon-youtube.svg" alt="Facebook" /></a>
<a href="#"><img src="./img/icons/icon-pinterest.svg" alt="Facebook" /></a>
<a href="#"><img src="./img/icons/icon-twitter.svg" alt="Twitter" /></a>
<a href="#"><img src="./img/icons/icon-instagram.svg" alt="Instagram" /></a>
</div>
</div>
<div class="box">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="#">Trainning</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</nav>
</div>
<div class="box">
<form action="" method="post">
<input type="email" placeholder="Update in your inbox...">
<button type="submit" class="btn-primario">GO</button>
</form>
</div>
</div>
<div class="fila-2">
Copyright 2020. All Rights Reserved
</div>
</div>
</div>
</footer>
</body>
</html>