-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add link to communities section, add content to communities file
- Loading branch information
Showing
7 changed files
with
233 additions
and
27 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| --- | ||
| permalink: /comunidades-locales/ | ||
| title: Comunidades locales | ||
| layout: index.liquid | ||
| data: | ||
| route: comunidades-locales | ||
| --- | ||
| <style> | ||
| /* Navbar */ | ||
| #nav { background-color: var(--clr-lavender-lightest); } | ||
| #nav a:not(#about-link) { color: var(--clr-olive-darker); } | ||
| #menu-dropdown a { color: var(--clr-lavender-lightest) !important; } | ||
| #menu-icon svg line { stroke: var(--clr-olive-darker); } | ||
| #virto-logo svg path { fill: var(--clr-olive-darker); } | ||
| #communities, #communities article { flex-direction: column; } | ||
| section article { margin: 3em 7.8vw; flex-wrap: wrap; } | ||
| #animated-svg-3 { | ||
| position: absolute; | ||
| bottom: clamp(10%, 15%, 25%); | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| z-index: -1; | ||
| } | ||
| #animated-svg-3 path { | ||
| stroke-dasharray: 1200; | ||
| stroke-dashoffset: 1200; | ||
| animation: draw 4s ease-in-out forwards; | ||
| } | ||
| @keyframes draw { | ||
| to { | ||
| stroke-dashoffset: 0; | ||
| } | ||
| } | ||
| #democracy article h1 { | ||
| line-height: 1.3; | ||
| max-width: 1200px; | ||
| text-align: left; | ||
| } | ||
| .underlined { position: relative; } | ||
| .underlined::after { | ||
| content: ''; | ||
| position: absolute; | ||
| width: 0; | ||
| border-top: solid 6px var(--clr-green-darker); | ||
| left: 0; | ||
| bottom: -10px; | ||
| height: 15px; | ||
| border-radius: 5%; | ||
| transition: width 0.5s ease-out; | ||
| display: block; | ||
| } | ||
| .underlined.show::after { | ||
| width: 110%; | ||
| } | ||
| .header-1 { | ||
| float: left; | ||
| width: calc(100% - 10px); | ||
| } | ||
| #lip article{ gap: 5em; } | ||
| #lip article .text-section { max-width: 500px; align-items: end;} | ||
| .link-arrow.color { color: var(--clr-white); } | ||
| .cta h2 { max-width: 1200px;} | ||
| @media (max-width: 700px) { | ||
| #animated-svg-3 { | ||
| bottom: 50%; | ||
| } | ||
| #communities h1 { | ||
| --font-size-main-title: clamp(3rem, 6vw, 5.25rem); | ||
| } | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <section id="communities" class="center light-lavender-bg dark-olive-text"> | ||
| <article class="animated"> | ||
| <h1 class="header-0">Comunidades Locales | ||
| <figure class="logo container"> | ||
| {% include "communities_arrow.svg" %} | ||
| </figure> | ||
| </h1> | ||
| <h3 class="center bold">En lugar de asumir costos de intermediación en cada una de tus transacciones, con Virto, una pequeña parte de los recursos irá al fondo común de tu comunidad.</h3> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section class="light-lavender-bg" id="democracy"> | ||
| <article class="animated"> | ||
| <h1 class="header-1 dark-lavender-text left"> | ||
| Cada comunidad puede <span class="dark-olive-text">elegir su propio <span class="underlined">sistema</span> <span class="underlined">democrático</span></span>, permitiendo la decisión colectiva sobre qué proyecto se beneficiará con esos ahorros. | ||
| </h1> | ||
| <figure class="logo container"> | ||
| {% include "democracy.svg" %} | ||
| </figure> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section id="lip"> | ||
| <article class="animated"> | ||
| <figure class="logo container"> | ||
| {% include "communities.svg" %} | ||
| </figure> | ||
| <div class="text-section white-text"> | ||
| <h2 class="right">¿Cómo funciona todo esto?</h2> | ||
| <p class="right">Nuestra estructura se basa en la tecnología blockchain, que incluye un protocolo de incentivos locales y un sistema operativo web 3.</p> | ||
| <a class="center-arrow">Ver más | ||
| <figure class="link-arrow color"> | ||
| {% include "see_more.svg" %} | ||
| </figure> | ||
| </a> | ||
| </div> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section class="cta light-lavender-bg"> | ||
| <article class="animated center dark-olive-text"> | ||
| <h2>¡En Virto creemos que juntos podemos hacer <span class="dark-lavender-text">un cambio positivo!</span></h2> | ||
| <button class="dark-lavender-bg white-text"><a href="https://forms.gle/hSjzyETwuGMadsaU8">¡Únete a nuestra comunidad hoy!</a></button> | ||
| </article> | ||
| </section> | ||
|
|
||
| <script> | ||
| const observerCommunities = new IntersectionObserver(entries => { | ||
| entries.forEach(entry => { | ||
| if (entry.isIntersecting) { | ||
| entry.target.classList.add('show'); | ||
| } | ||
| }); | ||
| }, { threshold: 0.7 }); | ||
| document.querySelectorAll('#democracy .underlined').forEach(word => { | ||
| observerCommunities.observe(word); | ||
| }); | ||
| </script> | ||
|
|
||
| </body> |
This file was deleted.
Oops, something went wrong.