-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
449 additions
and
434 deletions.
There are no files selected for viewing
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 |
|---|---|---|
| @@ -1,99 +1,100 @@ | ||
| <script> | ||
| let mobile = screen.width <= 760 ? true : false; | ||
| let mobile = screen.width <= 760 ? true : false; | ||
| </script> | ||
|
|
||
| <div class="intro"> | ||
| <div class="title"> | ||
| <div class="top">Terremoti</div> | ||
| <div class="bottom" aria-hidden="true">Terremoti</div> | ||
| </div> | ||
| <div class="title"> | ||
| <div class="top">Terremoti</div> | ||
| <div class="bottom" aria-hidden="true">Terremoti</div> | ||
| </div> | ||
|
|
||
| <br /> <br /> | ||
| <span class="subtitle">in Italia dal 2000 ad oggi</span> | ||
| <br /> <br /> | ||
| <span class="subtitle">in Italia dal 2000 ad oggi</span> | ||
|
|
||
| <p id="description"> | ||
| L'Italia è situata lungo la zona di collisione tra la placca africana e | ||
| quella euroasiatica, ed è quindi soggetta a frequenti attività sismiche. | ||
| Essendo caratterizzata da zone geologicamente complesse, dove le rocce sono | ||
| molto varie e la crosta terrestre è molto sottile, l'Italia è inoltre | ||
| vittima di una maggiore instabilità sismica. | ||
| </p> | ||
| <p> | ||
| Negli ultimi 20 anni, l'italia ha subito diversi terremoti significativi. | ||
| </p> | ||
|
|
||
| {#if !mobile} | ||
| <a id="scroll-btn" href="#scroller"> </a> | ||
| {:else} | ||
| <p style="color:red"> | ||
| Malheureusement la visualisation est disponible seulement en Desktop. | ||
| <p id="description"> | ||
| L'Italia è situata lungo la zona di collisione tra la placca africana e | ||
| quella euroasiatica, ed è quindi soggetta a frequenti attività | ||
| sismiche. Essendo caratterizzata da zone geologicamente complesse, dove | ||
| le rocce sono molto varie e la crosta terrestre è molto sottile, | ||
| l'Italia è inoltre vittima di una maggiore instabilità sismica. | ||
| </p> | ||
| <p> | ||
| Negli ultimi 20 anni, l'italia ha subito diversi terremoti | ||
| significativi. | ||
| </p> | ||
| {/if} | ||
|
|
||
| {#if !mobile} | ||
| <a id="scroll-btn" href="#scroller"> </a> | ||
| {:else} | ||
| <p style="color:red"> | ||
| Purtroppo, la visualizzazione è ottimizzata per desktop. <br /> | ||
| </p> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <style> | ||
| #description { | ||
| padding: 50px; | ||
| } | ||
| .intro { | ||
| height: 100vh; | ||
| padding: 8%; | ||
| text-align: center; | ||
| } | ||
| .subtitle { | ||
| font-family: Poppins; | ||
| font-weight: 100; | ||
| font-size: 2rem; | ||
| color: #f12526; | ||
| } | ||
| #description { | ||
| padding: 50px; | ||
| } | ||
| .intro { | ||
| height: 100vh; | ||
| padding: 8%; | ||
| text-align: center; | ||
| } | ||
| p { | ||
| font-weight: 100; | ||
| font-size: 1.3rem; | ||
| } | ||
| .subtitle { | ||
| font-family: Poppins; | ||
| font-weight: 100; | ||
| font-size: 2rem; | ||
| color: #f12526; | ||
| } | ||
| .title { | ||
| display: grid; | ||
| place-content: center; | ||
| background-color: var(--background-color); | ||
| min-height: 3vh; | ||
| font-size: clamp(1.5rem, 1rem + 18vw, 15rem); | ||
| font-weight: 500; | ||
| font-size: 4rem; | ||
| text-transform: uppercase; | ||
| color: var(--text-color); | ||
| } | ||
| p { | ||
| font-weight: 100; | ||
| font-size: 1.3rem; | ||
| } | ||
| .title > div { | ||
| grid-area: 1/1/-1/-1; | ||
| } | ||
| .top { | ||
| clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%); | ||
| font-size: 4rem; | ||
| } | ||
| .bottom { | ||
| clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%); | ||
| color: transparent; | ||
| background: -webkit-linear-gradient( | ||
| 177deg, | ||
| whitesmoke 53%, | ||
| var(--text-color) 65% | ||
| ); | ||
| background: linear-gradient(177deg, white 10%, var(--text-color) 65%); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| transform: translateX(-0.02em); | ||
| font-size: 4rem; | ||
| } | ||
| .title { | ||
| display: grid; | ||
| place-content: center; | ||
| background-color: var(--background-color); | ||
| min-height: 3vh; | ||
| font-size: clamp(1.5rem, 1rem + 18vw, 15rem); | ||
| font-weight: 500; | ||
| font-size: 4rem; | ||
| text-transform: uppercase; | ||
| color: var(--text-color); | ||
| } | ||
| @media only screen and (min-width: 768px) { | ||
| .title > div { | ||
| grid-area: 1/1/-1/-1; | ||
| } | ||
| .top { | ||
| font-size: 8rem; | ||
| clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%); | ||
| font-size: 4rem; | ||
| } | ||
| .bottom { | ||
| font-size: 8rem; | ||
| clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%); | ||
| color: transparent; | ||
| background: -webkit-linear-gradient( | ||
| 177deg, | ||
| whitesmoke 53%, | ||
| var(--text-color) 65% | ||
| ); | ||
| background: linear-gradient(177deg, white 10%, var(--text-color) 65%); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| transform: translateX(-0.02em); | ||
| font-size: 4rem; | ||
| } | ||
| @media only screen and (min-width: 768px) { | ||
| .top { | ||
| font-size: 8rem; | ||
| } | ||
| .bottom { | ||
| font-size: 8rem; | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.