123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402 |
- @font-face {
- font-family: Universalis ADF Std, sans-serif;
- src: url('../fonts/UniversalisADFStd.otf') format('otf'),
- url('../fonts/UniversalisADFStd.woff') format('woff');
- font-family: Millimetre, sans-serif;
- src: url('../fonts/Millimetre.otf') format('OpenType'),
- url('../fonts/Millimetre.otf') format('otf'),
- url('../fonts/Millimetre.woff') format('woff');
- }
- body {
- width: 300px;
- margin: 0 auto;
- font-size: 16px;
- font-family: Universalis ADF Std, sans-serif;
- }
- h1, h2, h3, h5{
- font-family: Millimetre, sans-serif;
- }
- h1, h5, h6{
- text-transform: uppercase;
- }
- img{
- width: 100%;
- height: auto;
- }
- ul{
- padding:0;
- }
- li {
- list-style-type:none;
- }
- a, a:hover{
- color: black;
- text-decoration: none;
- }
- section{
- position: relative;
- }
- .titre_page, .titre {
- position: absolute;
- top: -100px;
- left: -70px;
- text-transform: uppercase;
- font-weight: bold;
- text-align: center;
- align-items: center;
- border: 8px solid blue;
- transform: rotate(-10deg);
- padding: 0.5rem;
- background-color: white;
- }
- .titre_1{
- margin-top:1em;
- }
- .next_edition{
- font-style: italic;
- text-transform: uppercase;
- }
- .title, .cat {
- color: blue;
- text-align: center;
- text-transform: uppercase;
- }
- .sidebar_left .__content, .sider_left_form, .__organisation .__item, .content_zone {
- border: 8px solid blue;
- padding: 1em;
- }
- .tableau_engagements {
- margin-top : 10%;
- }
- .tableau_engagements div{
- margin-top : 5%;
- padding-left: 5%;
- }
- /*sections page accueil*/
- .item {
- margin-top: 50px;
- }
- .wrap__content_proch {
- position: relative;
- width: 80%;
- padding: 10px;
- margin: -50px auto -20px auto;
- align-items: center;
- text-align: center;
- background-color: white;
- border: 4px solid black;
- }
- .colonne_section{
- margin-top: 4%;
- }
- .colonne_section .wrap_content {
- border: 8px solid blue;
- padding: 1em;
- }
- .colonne_section h3 {
- color: blue;
- text-transform: uppercase;
- text-align: center;
- }
- .image_sectionasso {
- position: absolute;
- width: 500px;
- }
- .content_asso {
- position: relative;
- margin: 150px auto auto 200px;
- padding: 10px;
- background-color: white;
- border: 8px solid yellow;
- }
- .projet .colonne_section .header{
- height: 80px;
- display: flex;
- align-items: flex-end ;
- }
- .projet .colonne_section .header h3{
- text-align: center;
- width: 100%;
- }
- .item .__img{
- width: 100%;
- height: 300px;
- }
- .item img{
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- ._content_tpsF {
- position: relative;
- width: 80%;
- padding: 10px;
- margin: -50px auto -20px auto;
- align-items: center;
- text-align: center;
- background-color: white;
- border: 4px solid black;
- }
- .video iframe {
- margin: 40px auto 0 auto;
- width:100%;
- }
- /*fin sections page accueil*/
- /*page évent*/
- .titre_event {
- position: absolute;
- top: -450px;
- left: 18vw;
- text-transform: uppercase;
- font-weight: bold;
- text-align: center;
- align-items: center;
- border: 8px solid blue;
- transform: rotate(-10deg);
- padding: 0.5rem;
- background-color: white;
- }
- .voir_aussi {
- position: absolute;
- top: 1300px;
- left: -50px;
- text-transform: uppercase;
- font-weight: bold;
- text-align: center;
- align-items: center;
- border: 8px solid blue;
- transform: rotate(-10deg);
- padding: 0.5rem;
- background-color: white;
- }
- .__img_event {
- position: relative;
- width: 100%;
- height: 500px;
- top: 50px;
- }
- .__img_event img{
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .partager img {
- width: 50px;
- height: auto;
- margin-right: 2%;
- }
- .data {
- border: 8px solid blue;
- padding: 1em;
- }
- .tarif h3, .partager h3, .inscription h3{
- color: blue;
- }
- .tarif, .partager, .inscription {
- margin-top: 8%;
- }
- /*fin page event*/
- /*page les projets*/
- .projet img {
- margin: 5% 0 5% 0;
- }
- ._pjt{
- margin-top: 8%
- }
- .cat-list{
- align-items: baseline;
- }
- .cat_name{
- margin: 0 4% 0 4%;
- }
- /*fin page les projets*/
- /*privatiser l'espace*/
- .legendes{
- background-color: white;
- position : absolute;
- bottom: 4%;
- margin-left: 4%;
- border: 8px solid blue;
- padding: 1%;
- padding-top: 2%;
- }
- .__organisation {
- margin-top: 4%;
- text-align: center;
- }
- ._orga {
- margin-top: 4%;
- }
- /*fin privatiser l'espace*/
- /*BOUTONS*/
- .__bouttons div {
- position: relative;
- text-align : center;
- margin-top: 20px;
- border: 4px solid blue;
- border-radius: 0%;
- padding: 5px;
- /*background-color: white;*/
- }
- .tout_voir a {
- /*penser à mettre le lien sur toute la surface du bouton*/
- }
- .telechargement_plaquette, .redirection_page, .tout_voir {
- position: relative;
- margin: 50px auto 10px auto;
- display:flex;
- border: 4px solid black;
- border-radius: 0%;
- text-align: center;
- padding: 5px;
- }
- .__bouttons #bouton_asso {
- position: relative;
- top: 100px;
- }
- .__bouttons #bouton_contact {
- position: relative;
- top: -30px;
- }
- .__bouttons div:hover, .telechargement_plaquette:hover, .bouton_asso:hover, .redirection_page:hover, .tout_voir:hover {
- text-decoration-color: white;
- transform: rotate(-10deg);
- }
- .group_link {
- margin-top: 2%;
- width: 100%;
- color: black;
- text-decoration: underline;
- border: none;
- border-radius: 0%;
- }
- .group_link:hover, .cat_name:hover {
- color: black;
- background-color: grey;
- text-decoration: underline;
- border: none;
- border-radius: 0%;
- }
- .hero .slide .flickity-button{
- }
- /*FIN BOUTON*/
- footer{
- background-color: rgba(240, 240, 240, 240);
- width: 100%;
- padding: 5%;
- margin-top: 10%;
- }
- footer div{
- margin-right: 20px;
- }
- footer img {
- width: 50px;
- height: auto;
- }
- ._rs{
- margin-left: 5%;
- }
- /* START KEVIN */
- header{
- z-index: 9999;
- position: absolute;
- width: 100%;
- top: 0;
- left: 0;
- }
- .hero{
- width: 100%;
- height: 100vh;
- position: relative;
- }
- .hero .slide{
- width: 100%;
- height: 100vh;
- overflow: hidden;
- }
- .hero .slide .image{
- width: 100%;
- height: 100vh;
- }
- .hero .slide img{
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .hero .slide .flickity-page-dots{
- bottom: 20px;
- }
- .hero .slide .flickity-page-dots li{
- background: white;
- }
- .hero .__head{
- width: 100%;
- text-align: center;
- position: absolute;
- bottom: 60px;
- color: white;
- }
- .wrapper section{
- margin: 150px 0;
- padding: 100px 0;
- }
- .wrapper section > div {
- position: relative;
- }
- .tpsF .img{
- width: 100%;
- height: 400px;
- }
- .tpsF .img img{
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .projet .img{
- height: 300px;
- }
- .projet .img img{
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .tableau_engagements .engagement{
- width: 50%;
- }
- .prive .images{
- width: 100%;
- height: 600px;
- }
- .prive .img img{
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- /* END KEVIN */
|