Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- *
- {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body
- {
- overflow-x: hidden;
- background-color: #480ca8;
- font-family: 'Work Sans', sans-serif;
- }
- .container-nav-header
- {
- width: 100vw;
- height: 100vh;
- }
- /*Questa keyframes fa scorrere la nav-bar
- da sinistra verso destra al caricamento della pagina*/
- @keyframes SlideInFromLeft
- {
- 0%
- {
- transform: translateX(-100%);
- }
- 100%
- {
- transform: translateX(0);
- }
- }
- nav
- {
- width: 100%;
- position: fixed;
- top: 0;
- animation: 1.5s ease-out 0s 1 SlideInFromLeft;
- }
- /*
- |
- |
- |
- */
- nav .nav-bar
- {
- width: 100%;
- padding: 6px;
- background-color: rgb(121, 82, 179);
- display: flex;
- justify-content: space-around;
- align-items: center;
- }
- /*
- |
- |
- |
- */
- /*Questa keyframes apre la navbar responsiva con una animazione*/
- @keyframes OpenNavBarResponsive
- {
- 0%
- {
- transform: translateY(-100%);
- }
- 100%
- {
- transform: translateY(0);
- }
- }
- /*
- |
- |
- |
- */
- /*Questa keyframes chiude la navbar responsiva con una animazione*/
- @keyframes CloseNavBarResponsive
- {
- 0%
- {
- transform: translateY(0);
- }
- 100%
- {
- transform: translateY(-100%);
- background-color: transparent;
- }
- }
- /*
- |
- |
- |
- */
- /*Questa classe serve per la chiusura a rallenty della nav,
- ma è nascosta all'inizio*/
- .for-close-responsive-nav-hidden
- {
- width: 100%;
- height: 173px;
- background-color: rgb(121, 82, 179);
- position: fixed;
- top: 0;
- left: 0;
- display: none;
- }
- /*
- |
- |
- |
- */
- /*Questa classe serve per la chiusura a rallenty della nav,
- e viene attivato alla pressione del bottone con la X
- in alto a destra e la nav viene chiusa a rallenty*/
- .for-close-responsive-nav
- {
- display: block;
- transform:translateY(-100%);
- animation: 0.5s ease-out 0s 1 CloseNavBarResponsive;
- }
- /*
- |
- |
- |
- */
- /*
- |
- |
- |
- */
- /*Questa classe permette al bottone che apre e chiude
- la nav-bar responsive di restare nascosto finchè la dimensione dello schermo
- non diventa troppo piccola e si attiva la media query che fa visualizzare il bottone*/
- .nav-bar .resp-nav
- {
- display: none;
- }
- /*
- |
- |
- |
- */
- /*Questa classe attivata dopo che il bottone che apre e chiude
- la nav-bar responsive viene premuto permette di visualizzare nuovamente
- gli elementi che compongono la nav-bar*/
- .nav-bar.responsive .home, .nav-bar.responsive .subscribe,
- .nav-bar.responsive .login, .nav-bar.responsive .info, .nav-bar.responsive .search
- {
- display: block;
- }
- /*
- |
- |
- |
- */
- /*Questa classe viene attivata quando il bottone
- che apre e chiude la nav-bar responsive viene schiacciato
- mette in colonna gli elementi della nav, li allinea al centro e
- chiama l'animazione che fa aprire la nav-bar a rallenty*/
- nav .nav-bar.responsive
- {
- width: 100%;
- flex-direction: column;
- align-items: center;
- animation: 0.7s ease-out 0s 1 OpenNavBarResponsive;
- }
- /*
- |
- |
- |
- */
- /*Aggiustamenti grafici per le icone della nav bar*/
- .nav-bar .login i:before, .nav-bar .subscribe i:before, .nav-bar .home i:before
- {
- font-size: 1em;
- line-height: 1.25;
- }
- /*
- |
- |
- |
- */
- /*Aggiustamenti grafici per le icone della nav bar*/
- .nav-bar .info i:before
- {
- font-size: 0.8em;
- line-height: 1.4;
- }
- /*
- |
- |
- |
- */
- /*Aggiustamenti grafici per la scritta info della nav bar*/
- .nav-bar .info span
- {
- position: relative;
- right: 3px;
- }
- /*
- |
- |
- |
- */
- /*effetti grafici che aggiustano i link della nav bar*/
- .nav-bar .home a,.nav-bar .subscribe a, .nav-bar .login a, .nav-bar .info a
- {
- font-size: 160%;
- text-decoration: none;
- color: white;
- transition: background-color 1s;/*attivata con :hover*/
- transition: font-size 0.3s;/*attivata con :hover*/
- }
- /*
- |
- |
- |
- */
- @keyframes ColorHomeBotton
- {
- 0%
- {
- border: 2px solid #fae392;
- color: #fae392;
- }
- 20%
- {
- border: 2px solid #ff6666;
- color: #ff6666;
- }
- 80%
- {
- border: 2px solid #081924;
- color:#081924;
- }
- 85%
- {
- border: 2px solid #016628;
- color:#016628;
- }
- 90%
- {
- border: 2px solid #9c9a37;
- color:#9c9a37;
- }
- 95%
- {
- border: 2px solid #0a1f3a;
- color: #0a1f3a;
- }
- 100%
- {
- border: 2px solid #ffe484;
- color: #ffe484;
- }
- }
- /*
- |
- |
- |
- */
- .nav-bar .subscribe a:hover, .nav-bar .login a:hover, .nav-bar .info a:hover
- {
- border-radius: 8px;
- padding: 2px;
- font-size: 170%;
- border: 2px solid #ffe484;
- color: #ffe484;
- }
- /*
- |
- |
- |
- */
- .nav-bar .home a
- {
- border-radius: 8px;
- padding: 2px;
- border: 2px solid #ffe484;
- color: #ffe484;
- }
- /*
- |
- |
- |
- */
- .nav-bar .home a:hover
- {
- color: white;
- border-color: white;
- border-radius: 8px;
- font-size: 180%;
- animation: 3.5s ease-out 0s 100000 ColorHomeBotton;
- }
- /*
- |
- |
- |
- */
- /*effetti grafici per la barra di ricerca della nav bar*/
- .nav-bar .search input
- {
- border: 2px solid #ffe484;
- color: #7209b7;
- background-color: white;
- border-radius: 5px;
- padding: 3px;
- font-size: 137%;
- transition: background-color 0.7s;/*attivata con :hover*/
- }
- /*
- |
- |
- |
- */
- .search .research input:hover
- {
- background-color: #ffe484;
- }
- /*
- |
- |
- |
- */
- /*effetti grafici per il bottone di ricerca della nav bar*/
- .nav-bar .search .button-search
- {
- width: 3.3rem;
- border: 3px solid #ffe484;
- color: #7209b7;
- background-color: white;
- border-radius: 5px;
- padding: 3px;
- font-size: 137%;
- cursor: pointer;
- transition: background-color 0.7s;/*attivato con hover*/
- }
- /*
- |
- |
- |
- */
- .search .research .button-search:hover
- {
- background-color: #ffe484;
- }
- /*Header principale della pagina*/
- /*Utilizzo di flex-box per allineare main-text al centro*/
- header
- {
- width: 100%;
- height: 100%;
- background-image: url("img/background-Home.jpg");
- background-size: cover;
- background-position: center;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- /*
- |
- |
- |
- */
- /*effetti grafici per main-text*/
- header .main-text
- {
- color: black;
- background-color: rgba(250, 250, 250, 0.1);
- font-family: 'Dancing Script', cursive;
- text-align: center;
- font-size: 250%;
- border: 1px solid rgba(250, 250, 250, 0.1);
- border-radius: 10px;
- box-shadow: 5px 5px 3px rgba(245, 245, 245, 0.1);
- transition: font-size 2s;/*attivato con :hover*/
- }
- /*
- |
- |
- |
- */
- header .main-text:hover
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 300%;
- }
- /*contenuto della pagina*/
- /*form che contiene la barra di ricerca per i corsi gigante
- e il rispettivo bottone di ricerca gigante*/
- .search-course
- {
- width: 80%;
- margin: 1.5% 10%;
- display: flex;
- border-radius: 2px;
- }
- /*
- |
- |
- |
- */
- /*Questa keyframes permette alla barra di ricerca
- per i corsi gigante di aprirsi a rallenty*/
- @keyframes SlidInToWidthingYou
- {
- 0%
- {
- width: 0%;
- }
- 100%
- {
- width: 90%;
- }
- }
- /*
- |
- |
- |
- */
- /*effetti grafici per la barra di ricerca
- per i corsi gigante*/
- .search-course input
- {
- color: #343a40;
- height: 5rem;
- width: 90%;
- font-size: 3rem;
- border: 3px solid #ffe484;
- border-right: none;
- transition: background-color 0.7s;
- animation: 1.5s ease-out 1s 1 SlidInToWidthingYou;
- }
- /*
- |
- |
- |
- */
- /*effetti grafici per il bottone
- di ricerca per i corsi gigante*/
- .search-course button
- {
- height: 5rem;
- width: 10%;
- font-size: 3rem;
- border: none;
- background-color: white;
- color: #343a40;
- cursor: pointer;
- border: 3px solid #ffe484;
- border-left: none;
- transition: background-color 0.7s;/*attivato con :hover*/
- }
- /*
- |
- |
- |
- */
- .search-course input:hover, .search-course button:hover
- {
- background-color: #ffe484;
- }
- /*Riferimenti(Sono i bottoni in nero)*/
- /*Uso flex-box per disporre in orizzontale gli elementi*/
- .container-references
- {
- display: flex;
- background-color: #480ca8;
- }
- /*
- |
- |
- |
- */
- /*uso flex-box per disporre in colonna i bottoni neri*/
- .references
- {
- display: flex;
- flex-direction: column;
- list-style: none;
- font-size: 1.2rem;
- }
- /*
- |
- |
- |
- */
- /*Aggiustamenti grafici dei bottoni neri*/
- .references li
- {
- background-color: #343a40;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 220px;
- padding: 20px;
- margin: 15px 4px;
- transition: box-shadow 1s;/*attivato con :hover*/
- transition: font-size 1s;/*attivato con :hover*/
- }
- /*
- |
- |
- |
- */
- .references li:hover
- {
- font-size: 1.4rem;
- box-shadow: 2px 8px 8px #424446;
- }
- /*
- |
- |
- |
- */
- /*Aggiustamenti grafici ai link delle li*/
- .references a
- {
- text-decoration: none;
- font-weight: 900;
- color: white;
- text-transform: uppercase;
- }
- /*Aggiustamenti grafici alla li*/
- .Description
- {
- border: 4px solid #343a40;
- color: #343a40;
- font-size: 1rem;
- font-weight: 500;
- margin: 25px 15px 0px 15px;
- margin-bottom: 22px;
- padding: 5px;
- list-style: none;
- background-color: white;
- }
- /*
- |
- |
- |
- */
- /*aggiustamento grafico*/
- .Description.one
- {
- margin-top: 13px;
- }
- /*
- |
- |
- |
- */
- /*aggiustamento grafico*/
- .Description a
- {
- color: #343a40;
- font-weight: 900;
- font-size: 1.5rem;
- text-transform: uppercase;
- }
- /*Contiene l'immagine della DAD*/
- .Info-DAD
- {
- background-image: url("img/Info-DAD.jpg");
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- width: 40%;
- height: 445px;
- margin-top: 10px;
- border: 5px solid #343a40;
- border-radius: 5px;
- display: flex;
- align-items: flex-start;
- justify-content: center;
- }
- /*
- |
- |
- |
- */
- /*aggiustamento grafico*/
- .Info-DAD a
- {
- font-size: 2rem;
- font-weight: 900;
- color: black;
- text-transform: uppercase;
- padding: 6px;
- }
- /*
- |
- |
- |
- */
- .Info-DAD svg
- {
- width: 30px;
- }
- .Events
- {
- background-color: #3330e9;
- padding: 3px;
- color: #5a189a;
- }
- /*
- |
- |
- |
- */
- @keyframes SlideInToFillTitle
- {
- 0%
- {
- width: 0%;
- }
- 50%
- {
- width: 80%;
- background-color: white;
- border: 3px solid #7209b7;
- }
- }
- /*
- |
- |
- |
- */
- .container-phrase-EVENTI
- {
- color: #7209b7;
- border: 3px solid #7209b7;
- padding: 20px;
- margin: 3% 10%;
- background-color: white;
- width: 80%;
- }
- /*
- |
- |
- |
- */
- .container-phrase-EVENTI span
- {
- font-size: 3rem;
- width: 40%;
- }
- /*
- |
- |
- |
- */
- .container-phrase-EVENTI hr
- {
- width: 100%;
- height: 3px;
- background-color: #7209b7;
- border: none;
- }
- /*
- |
- |
- |
- */
- .events
- {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- color: #343a40;
- font-weight: 400;
- }
- /*
- |
- |
- |
- */
- .events .event
- {
- width: 250px;
- display: flex;
- justify-content: center;
- font-size: 1rem;
- color: #343a40;
- font-family: 'Noto Sans', sans-serif;
- background-color: white;
- padding: 10px;
- margin: 3px;
- }
- /*
- |
- |
- |
- */
- .event .date
- {
- font-size: 2rem;
- font-weight: 800;
- color: #5a189a;
- }
- /*
- |
- |
- |
- */
- .event .hour
- {
- color: #5a189a;
- font-size: 1rem;
- }
- /*footer*/
- footer
- {
- background-color: rgb(94, 45, 167);
- }
- .container-link-footer
- {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- padding: 25px;
- font-size: 1.2rem;
- }
- .structures, .services, .competition, .option-footer
- {
- width: 280px;
- display: flex;
- flex-direction: column;
- list-style-type: none;
- padding: 10px;
- margin: 15px;
- }
- .services a, .structures a, .competition a, .option-footer a
- {
- color: white;
- text-decoration: none;
- font-weight: 500;
- }
- .STRUCTURES a, .SERVICES a, .COMPETITION a
- {
- font-weight: bold;
- color: #18191a;
- font-size: 2.2rem;
- text-decoration: none;
- }
- .option-footer li:nth-of-type(odd)
- {
- background-color: #31a56d;
- }
- .option-footer li:nth-of-type(even)
- {
- background-color: #c0dd3f;
- }
- .option-footer a:nth-of-type(odd)
- {
- color: #c0dd3f;
- }
- .option-footer li:nth-child(2) a,
- .option-footer li:nth-child(4) a
- {
- color:#31a56d;
- }
- @keyframes MoveShadow
- {
- 0%
- {
- box-shadow: -2px 26px 26px #18191a;
- }
- 25%
- {
- box-shadow: 3px 35px 35px #18191a;
- }
- 50%
- {
- box-shadow: -5px 26px 26px #18191a;
- }
- 100%
- {
- box-shadow: -2px 26px 26px #18191a;
- }
- /* 2%
- {
- box-shadow: -2px 25px 25px #18191a;
- }
- 3%
- {
- box-shadow: -1px 26px 26px #18191a;
- }
- 4%
- {
- box-shadow: 0px 27px 27px #18191a;
- }
- 5%
- {
- box-shadow: 1px 28px 28px #18191a;
- }
- 10%
- {
- box-shadow: 2px 29px 29px #18191a;
- }
- 20%
- {
- box-shadow: 6px 34px 34px #18191a;
- }
- 30%
- {
- box-shadow: 4px 31px 31px #18191a;
- }
- 40%
- {
- box-shadow: 5px 32px 32px #18191a;
- }
- 50%
- {
- box-shadow: 8px 37px 37px #18191a;
- }
- 60%
- {
- box-shadow: 5px 32px 32px #18191a;
- }
- 70%
- {
- box-shadow: 7px 36px 36px #18191a;
- }
- 75%
- {
- box-shadow: 3px 30px 30px #18191a;
- }
- 80%
- {
- box-shadow: 2px 29px 29px #18191a;
- }
- 85%
- {
- box-shadow: 6px 35px 35px #18191a;
- }
- 90%
- {
- box-shadow: 0px 27px 27px #18191a;
- }
- 95%
- {
- box-shadow: -1px 26px 26px #18191a;
- }
- 100%
- {
- box-shadow: -2px 25px 25px #18191a;
- } */
- }
- .option-footer li
- {
- border: 3px solid #18191a;
- padding: 8px;
- margin-bottom: 30px;
- box-shadow: -2px 26px 26px #18191a;
- /*transition: box-shadow 0.3s;*/
- animation: 4s ease-out 0s 1000000 MoveShadow;
- }
- /*
- .option-footer li:hover
- {
- font-size: 1.3rem;
- box-shadow: 6px 6px 16px #18191a;
- }
- */
- .social-and-contact
- {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 102%;
- position: relative;
- bottom: 15px;
- }
- .social
- {
- display: flex;
- }
- .social li
- {
- list-style: none;
- padding: 5px;
- }
- .social a
- {
- text-decoration: none;
- color: #0e062e;
- }
- .contact
- {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- font-weight: 700;
- color: #0e062e;
- }
- .contact li
- {
- list-style-type: none;
- padding: 8px;
- }
- @media only screen and (max-width: 1200px)
- {
- header .main-text
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 170%;
- }
- header .main-text:hover
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 200%;
- }
- }
- /*media queries & keyframes*/
- @media only screen and (max-width: 1100px)
- {
- .Description-references
- {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .references
- {
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- }
- .container-references
- {
- flex-direction: column;
- align-items: center;
- }
- .Info-DAD
- {
- width: 70%;
- }
- }
- /*Questa media query permette il funionamento della nav-bar responsiva */
- @media only screen and (max-width: 950px)
- {
- .nav-bar .login, .nav-bar .subscribe,
- .nav-bar .info, .nav-bar .search
- {
- display: none;
- }
- .nav-bar
- {
- justify-content: flex-start!important;
- position: relative;
- }
- .nav-bar .resp-nav
- {
- display: inline-block;
- position: absolute;
- top: 3px;
- right:17px;
- }
- .nav-bar .resp-nav i
- {
- font-size: 2.2em;
- color: white;
- }
- .search-course
- {
- width: 75%;
- margin: 1.5% 12.5%;
- }
- .search-course .input, .search-course button
- {
- font-size: 2rem;
- }
- }
- @media only screen and (max-width: 800px)
- {
- header .main-text
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 140%;
- }
- header .main-text:hover
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 170%;
- }
- }
- /*Questa keyframes viene utilizzata per far SLIDEare
- la barra di ricerca gigante per i corsi fino ad una larghezza che stia nella pagina.E' un adattamento grafico*/
- @keyframes SlideInToWidthingYou730px
- {
- 0%
- {
- width: 0%;
- }
- 0.1%
- {
- width: 85%;
- }
- }
- @media only screen and (max-width: 750px)
- {
- .search-course
- {
- width: 65%;
- margin: 1.5% 17.5%;
- }
- .search-course input, .search-course button
- {
- font-size: 1.5rem;
- height: 4rem;
- }
- .search-course input
- {
- width: 0%;
- animation: 1000s ease-out 2s 1 SlideInToWidthingYou730px;
- }
- .search-course button
- {
- width: 15%;
- }
- .social-and-contact
- {
- flex-direction: column;
- }
- }
- @media only screen and (max-width: 690px)
- {
- header .main-text
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 110%;
- }
- header .main-text:hover
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 135%;
- }
- }
- @media only screen and (max-width: 550px)
- {
- header .main-text
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 90%;
- }
- header .main-text:hover
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 100%;
- }
- }
- @media only screen and (max-width: 430px)
- {
- header .main-text
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 75%;
- }
- header .main-text:hover
- {
- background-color: rgba(220, 220, 220, 0.2);
- font-size: 83%;
- }
- .search-course input, .search-course button
- {
- font-size: 1.1rem;
- height: 3rem;
- }
- .search-course input
- {
- width: 0%;
- }
- .search-course button
- {
- width: 20%;
- }
- .Info-DAD
- {
- height: 280px;
- }
- }
- @media only screen and (max-width: 330px)
- {
- .search-course input, .search-course button
- {
- font-size: 0.9rem;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement