style.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. @font-face {
  2. font-family: Universalis ADF Std, sans-serif;
  3. src: url('../fonts/UniversalisADFStd.otf') format('otf'),
  4. url('../fonts/UniversalisADFStd.woff') format('woff');
  5. font-family: Millimetre, sans-serif;
  6. src: url('../fonts/Millimetre.otf') format('OpenType'),
  7. url('../fonts/Millimetre.otf') format('otf'),
  8. url('../fonts/Millimetre.woff') format('woff');
  9. }
  10. body {
  11. width: 300px;
  12. margin: 0 auto;
  13. font-size: 16px;
  14. font-family: Universalis ADF Std, sans-serif;
  15. }
  16. h1, h2, h3, h5{
  17. font-family: Millimetre, sans-serif;
  18. }
  19. h1, h5, h6{
  20. text-transform: uppercase;
  21. }
  22. img{
  23. width: 100%;
  24. height: auto;
  25. }
  26. ul{
  27. padding:0;
  28. }
  29. li {
  30. list-style-type:none;
  31. }
  32. a, a:hover{
  33. color: black;
  34. text-decoration: none;
  35. }
  36. section{
  37. position: relative;
  38. }
  39. .titre_page, .titre {
  40. position: absolute;
  41. top: -100px;
  42. left: -70px;
  43. text-transform: uppercase;
  44. font-weight: bold;
  45. text-align: center;
  46. align-items: center;
  47. border: 8px solid blue;
  48. transform: rotate(-10deg);
  49. padding: 0.5rem;
  50. background-color: white;
  51. }
  52. .titre_1{
  53. margin-top:1em;
  54. }
  55. .next_edition{
  56. font-style: italic;
  57. text-transform: uppercase;
  58. }
  59. .title, .cat {
  60. color: blue;
  61. text-align: center;
  62. text-transform: uppercase;
  63. }
  64. .sidebar_left .__content, .sider_left_form, .__organisation .__item, .content_zone {
  65. border: 8px solid blue;
  66. padding: 1em;
  67. }
  68. .tableau_engagements {
  69. margin-top : 10%;
  70. }
  71. .tableau_engagements div{
  72. margin-top : 5%;
  73. padding-left: 5%;
  74. }
  75. /*sections page accueil*/
  76. .item {
  77. margin-top: 50px;
  78. }
  79. .wrap__content_proch {
  80. position: relative;
  81. width: 80%;
  82. padding: 10px;
  83. margin: -50px auto -20px auto;
  84. align-items: center;
  85. text-align: center;
  86. background-color: white;
  87. border: 4px solid black;
  88. }
  89. .colonne_section{
  90. margin-top: 4%;
  91. }
  92. .colonne_section .wrap_content {
  93. border: 8px solid blue;
  94. padding: 1em;
  95. }
  96. .colonne_section h3 {
  97. color: blue;
  98. text-transform: uppercase;
  99. text-align: center;
  100. }
  101. .image_sectionasso {
  102. position: absolute;
  103. width: 500px;
  104. }
  105. .content_asso {
  106. position: relative;
  107. margin: 150px auto auto 200px;
  108. padding: 10px;
  109. background-color: white;
  110. border: 8px solid yellow;
  111. }
  112. .projet .colonne_section .header{
  113. height: 80px;
  114. display: flex;
  115. align-items: flex-end ;
  116. }
  117. .projet .colonne_section .header h3{
  118. text-align: center;
  119. width: 100%;
  120. }
  121. .item .__img{
  122. width: 100%;
  123. height: 300px;
  124. }
  125. .item img{
  126. width: 100%;
  127. height: 100%;
  128. object-fit: cover;
  129. }
  130. ._content_tpsF {
  131. position: relative;
  132. width: 80%;
  133. padding: 10px;
  134. margin: -50px auto -20px auto;
  135. align-items: center;
  136. text-align: center;
  137. background-color: white;
  138. border: 4px solid black;
  139. }
  140. .video iframe {
  141. margin: 40px auto 0 auto;
  142. width:100%;
  143. }
  144. /*fin sections page accueil*/
  145. /*page évent*/
  146. .titre_event {
  147. position: absolute;
  148. top: -450px;
  149. left: 18vw;
  150. text-transform: uppercase;
  151. font-weight: bold;
  152. text-align: center;
  153. align-items: center;
  154. border: 8px solid blue;
  155. transform: rotate(-10deg);
  156. padding: 0.5rem;
  157. background-color: white;
  158. }
  159. .voir_aussi {
  160. position: absolute;
  161. top: 1300px;
  162. left: -50px;
  163. text-transform: uppercase;
  164. font-weight: bold;
  165. text-align: center;
  166. align-items: center;
  167. border: 8px solid blue;
  168. transform: rotate(-10deg);
  169. padding: 0.5rem;
  170. background-color: white;
  171. }
  172. .__img_event {
  173. position: relative;
  174. width: 100%;
  175. height: 500px;
  176. top: 50px;
  177. }
  178. .__img_event img{
  179. width: 100%;
  180. height: 100%;
  181. object-fit: cover;
  182. }
  183. .partager img {
  184. width: 50px;
  185. height: auto;
  186. margin-right: 2%;
  187. }
  188. .data {
  189. border: 8px solid blue;
  190. padding: 1em;
  191. }
  192. .tarif h3, .partager h3, .inscription h3{
  193. color: blue;
  194. }
  195. .tarif, .partager, .inscription {
  196. margin-top: 8%;
  197. }
  198. /*fin page event*/
  199. /*page les projets*/
  200. .projet img {
  201. margin: 5% 0 5% 0;
  202. }
  203. ._pjt{
  204. margin-top: 8%
  205. }
  206. .cat-list{
  207. align-items: baseline;
  208. }
  209. .cat_name{
  210. margin: 0 4% 0 4%;
  211. }
  212. /*fin page les projets*/
  213. /*privatiser l'espace*/
  214. .legendes{
  215. background-color: white;
  216. position : absolute;
  217. bottom: 4%;
  218. margin-left: 4%;
  219. border: 8px solid blue;
  220. padding: 1%;
  221. padding-top: 2%;
  222. }
  223. .__organisation {
  224. margin-top: 4%;
  225. text-align: center;
  226. }
  227. ._orga {
  228. margin-top: 4%;
  229. }
  230. /*fin privatiser l'espace*/
  231. /*BOUTONS*/
  232. .__bouttons div {
  233. position: relative;
  234. text-align : center;
  235. margin-top: 20px;
  236. border: 4px solid blue;
  237. border-radius: 0%;
  238. padding: 5px;
  239. /*background-color: white;*/
  240. }
  241. .tout_voir a {
  242. /*penser à mettre le lien sur toute la surface du bouton*/
  243. }
  244. .telechargement_plaquette, .redirection_page, .tout_voir {
  245. position: relative;
  246. margin: 50px auto 10px auto;
  247. display:flex;
  248. border: 4px solid black;
  249. border-radius: 0%;
  250. text-align: center;
  251. padding: 5px;
  252. }
  253. .__bouttons #bouton_asso {
  254. position: relative;
  255. top: 100px;
  256. }
  257. .__bouttons #bouton_contact {
  258. position: relative;
  259. top: -30px;
  260. }
  261. .__bouttons div:hover, .telechargement_plaquette:hover, .bouton_asso:hover, .redirection_page:hover, .tout_voir:hover {
  262. text-decoration-color: white;
  263. transform: rotate(-10deg);
  264. }
  265. .group_link {
  266. margin-top: 2%;
  267. width: 100%;
  268. color: black;
  269. text-decoration: underline;
  270. border: none;
  271. border-radius: 0%;
  272. }
  273. .group_link:hover, .cat_name:hover {
  274. color: black;
  275. background-color: grey;
  276. text-decoration: underline;
  277. border: none;
  278. border-radius: 0%;
  279. }
  280. .hero .slide .flickity-button{
  281. }
  282. /*FIN BOUTON*/
  283. footer{
  284. background-color: rgba(240, 240, 240, 240);
  285. width: 100%;
  286. padding: 5%;
  287. margin-top: 10%;
  288. }
  289. footer div{
  290. margin-right: 20px;
  291. }
  292. footer img {
  293. width: 50px;
  294. height: auto;
  295. }
  296. ._rs{
  297. margin-left: 5%;
  298. }
  299. /* START KEVIN */
  300. header{
  301. z-index: 9999;
  302. position: absolute;
  303. width: 100%;
  304. top: 0;
  305. left: 0;
  306. }
  307. .hero{
  308. width: 100%;
  309. height: 100vh;
  310. position: relative;
  311. }
  312. .hero .slide{
  313. width: 100%;
  314. height: 100vh;
  315. overflow: hidden;
  316. }
  317. .hero .slide .image{
  318. width: 100%;
  319. height: 100vh;
  320. }
  321. .hero .slide img{
  322. width: 100%;
  323. height: 100%;
  324. object-fit: cover;
  325. }
  326. .hero .slide .flickity-page-dots{
  327. bottom: 20px;
  328. }
  329. .hero .slide .flickity-page-dots li{
  330. background: white;
  331. }
  332. .hero .__head{
  333. width: 100%;
  334. text-align: center;
  335. position: absolute;
  336. bottom: 60px;
  337. color: white;
  338. }
  339. .wrapper section{
  340. margin: 150px 0;
  341. padding: 100px 0;
  342. }
  343. .wrapper section > div {
  344. position: relative;
  345. }
  346. .tpsF .img{
  347. width: 100%;
  348. height: 400px;
  349. }
  350. .tpsF .img img{
  351. width: 100%;
  352. height: 100%;
  353. object-fit: cover;
  354. }
  355. .projet .img{
  356. height: 300px;
  357. }
  358. .projet .img img{
  359. width: 100%;
  360. height: 100%;
  361. object-fit: cover;
  362. }
  363. .tableau_engagements .engagement{
  364. width: 50%;
  365. }
  366. .prive .images{
  367. width: 100%;
  368. height: 600px;
  369. }
  370. .prive .img img{
  371. width: 100%;
  372. height: 100%;
  373. object-fit: cover;
  374. }
  375. /* END KEVIN */