forked from tailwindtoolbox/App-Landing-Page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (79 loc) · 6.16 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
<!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>Un techo para mi club</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
<meta
name="description"
content="Ayudemos a este club de barrio a cumplir su sueño. Juntos podemos lograrlo!"
/>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css">
<!--Replace with your tailwind.css once created-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
<!-- Animation CSS-->
<style>
/* ----------------------------------------------
* Generated by Animista
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes bg-pan-top{0%{background-position:50% 100%}100%{background-position:50% 0}}@keyframes bg-pan-top{0%{background-position:50% 100%}100%{background-position:50% 0}}
.bg-pan-top{-webkit-animation:bg-pan-top 50s infinite both;animation:bg-pan-top 50s infinite both}
.heartbeat{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}
@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
.main-div {
background: #1488CC; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #2B32B2, #1488CC); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #2B32B2, #1488CC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
</head>
<body class="leading-normal tracking-normal text-gray-900 " style="font-family: 'Titillium Web', sans-serif;">
<div class="pb-14 bg-right bg-cover bg-pan-top main-div">
<!--Main-->
<div class="container md:pt-12 sm:pt-8 px-6 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<div class="w-5/5 md:w-4/5 mx-auto overflow-y-hidden">
<img class="lg:w-4/6 mx-auto mb-12 pt-6 w-12/12" src="combo.png">
<h1 class="my-4 md:text-3xl text-lg text-white font-bold leading-tight text-center mb-6 text-yellow-400"> Ayudanos a cumplir el sueño de una comunidad</h1>
<p class="leading-normal text-gray-200 text-base md:text-xl sm:text-sm mb-8 text-center w-5/5 lg:w-8/12 mx-auto ">
El <span class="text-yellow-400"> Club General Paz</span>, situado en la calle San Juan 1550 de Salta Capital, necesita de tu ayuda para lograr techar el predio que contiene mas de 70 familias.
</p>
<p class="leading-normal text-gray-200 text-base md:text-xl sm:text-sm mb-8 text-center lg:w-8/12 mx-auto ">
Estamos construyendo este sitio web para que puedas seguir todos los detalles de esta gran campaña solidaria.
</p>
<p class="leading-normal text-gray-200 text-base md:text-xl sm:text-sm mb-8 text-center lg:w-8/12 mx-auto ">
Mientras tanto, enterate de todo en nuestro Instagram 👇
</p>
<div class="w-full my-3 text-center ">
<a class="text-3xl" href="https://www.instagram.com/general_paz_salta/">
<!-- <img src="/instagram.svg" alt="" class="w-6 inline-block" /> -->
<span class="text-yellow-400 font-bold text-lg md:text-3xl">@general_paz_salta</span>
</a>
</div>
<h1 class="my-4 md:text-3xl text-3xl text-white font-bold leading-tight text-center mb-6 text-yellow-400 heartbeat pt-8">Cómo donar?</h1>
<p class="leading-normal text-gray-100 text-base md:text-xl sm:text-sm mb-8 text-center lg:w-8/12 mx-auto ">
Podés donar directamente a la cuenta bancaria del Club 👇
</p>
<p class="leading-normal text-gray-100 text-base md:text-xl sm:text-sm mb-8 text-center">
Banco Credicoop - Cuenta corriente<br>
Club Deportivo Gral Paz A C <br>
CUIT: 30-70884774-3 <br>
CBU: 1910085855008502284300 <br>
</p>
<h1 class="my-4 md:text-3xl text-xl text-white font-bold leading-tight text-center mb-6 text-yellow-400 pt-8">Tu colaboracion puede hacer la diferencia</h1>
<p class="leading-normal text-gray-100 text-base md:text-xl sm:text-sm mb-8 text-center lg:w-8/12 mx-auto ">
Vos podés ayudarnos a cumplir este sueño! 😊 <br/> Siguiéndonos en Instagram, o simplemente comentandole a un amigo sobre la campaña, ya estas contribuyendo para que mas personas conozcan nuestra historia. <br/>
</p>
</div>
<div class="flex flex-col w-full w-6/6 justify-center lg:items-start overflow-y-hidden">
</div>
</div>
</div>
</body>
</html>