/** PROMPT CODE @author: Arar Nacer @date: 04/05/2020 @from: self work http://Prormpt-code.com @license: /*on import la police directement dans le fichier ,apres l'avoire copié dans google fonts*/ @import url('https://fonts.googleapis.com/css2?family=Cantarell:ital@1&family=Raleway&family=Sofia&display=swap'); /*Uiliser les variables de CSS*/ :root{ /*root séléctionne la racine du code la balise */ --bleu: #0288d1 !important; --black: #333333; --red: #c12720; --shaded-red: #df9595; --green: #00751f; --white: #ffffff; --twhite: rgba(255,255,255,0.8); box-sizing: border-box; /*Appliquer un box-sizing par défaut*/ } /* Render la class accessibility invisible dans l'affichage mais accessible au lecteur vocale*/ .accessibility { position:absolute; left: -150rem; } body { font-family: "Century Gothic", 'Lato',Raleway,"Avenir Next", "Avenir","Sofia",Dijkstra,"Freestyle Script",'Times New Roman',Verdana, Arial, sans-serif; font-size: 1rem; margin: 0; padding: 0; color: #cdcdcd; background: #eee; min-height: 100%; display: flex; flex-direction: column; } #colorContact{ background-color: #a59797; } h1, h2 { text-align:center; margin-top:0; } h1 { padding: 8rem 0rem 5rem; margin-left: 1.5em; font-size: 2em; font-family: 'Amaranth', Arial, Verdana, sans-serif; } .soustitre { padding: 1em 0; font-size: 2.5em; font-family: 'Amaranth', Arial, Verdana, sans-serif; text-shadow: 0 2px 2px #000; margin: 0; letter-spacing: .2rem; transform-origin: 50% 100%; text-align: center; color: #fff; } .titreP{ margin: 0; letter-spacing: .2rem; transform-origin: 50% 100%; text-align: center; font-size: 175%; color: #fff; } h1 span { display:block; margin: 0.75em 0 0 -2em; line-height: 1em; font-size: 0.55em; } h1 .cursive { margin: 0 0 0 -3em; font-size: 1.1em; line-height:0.5em; color: #bd9b83; } figure { text-transform: capitalize; display: inline-block; } a { text-decoration: none; color: navy; } a:hover, a:focus { /*border-bottom: 1px dashed #bc9d88;*/ text-shadow: 2px 2px 8px #FF0000; transition: all 0.5s ease; } /*définir la hauteur du header*/ #mainHeader { display: flex;/*Utiliser le view grid*/ /*background-color: var(--white);*/ z-index: 15; width: 100%; height: 7rem; position: relative; /*Fixée l'entête*/ padding: 0; top: 0; grid-template-columns: 70px 20% 1fr; grid-template-rows: 100px; justify-content: center; align-items: center; } .navigation{ align-items: center; } nav{ margin: auto; } .mainNav li { list-style-type:none; text-align: center; justify-content: center; /*border-right: 1px solid #252525;*/ } .mainNav li a { width: 140px; height: 12px; padding: 15px 15px; color: #c2185b ; text-decoration: none; text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; display: block; justify-content: center; align-items: center; transition: all 0.5s ease; font-size: 0.8rem; flex-flow: row wrap; float: right; flex-direction: row; line-height: 1.6; } #logoImg { float: left; object-fit: fill; padding: 1% 1% 1% 1%; margin-bottom: 4%; } #menuToggle > span{ padding: 0% 0% 0% 10%; } /* logoImg border-radius: 50%; filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.2)); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) crimson */ #show-nails:hover div.thumbnail-peekaboo { display:block; } header div.thumbnail-peekaboo { display:none; height:165px; width:3000px; top:40px; left:0; background:#222; background-size:100px 100px; position:absolute; } .mainNav a:hover{ color: white; transition: all 0.5s ease; } #navigation { display: none; /*desactivé l'affichage du menu*/ background-color: #c2185b !important; position: static; width: 100%; top: 40px; padding-bottom: 10px; } #navigation ul{ list-style: none; padding: 0; margin: 0; display: flex; /*flex structure réactive flexible */ flex-direction: column; font-size: 1.5em; } /*Utiliser les identifiants comme selecteurs et désactivé le soulignement du lien*/ #navigation a{ color: var(--white); text-decoration: none; font-family: "Cantarell",Verdana,Tahoma,sans-serif; font-size: 1.5em; display: block; padding-left: 90px; } #navigation a:hover{ color: var(--shaded-red) } #menuToggle{ display: block; position: absolute; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle a:hover, a:focus { text-shadow: 2px 2px 8px #FF0000; transition: all 0.5s ease; } #menuToggle span:hover { text-shadow: 2px 2px 8px #FF0000; transition: all 0.5s ease; } .input{ display: block; } #menuToggle input { display: block; width: 7rem; height: 4rem; position: absolute; top: -.9rem; left: 4rem; cursor: pointer; opacity: 0; /* hide this */ margin: auto; } #menuToggle span { display: block; width: 3rem; height: .2rem; margin-bottom: .4rem; position: relative; background: crimson; border-radius: 1rem; z-index: 1; transform-origin: 5rem 1rem; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; margin-left: 5rem; margin-right: 10rem; } #menuToggle span:first-child { transform-origin: 0 0; } #menuToggle span:nth-last-child(2) { transform-origin: 10% 100%; } #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #00751f; } #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu { position: absolute; width: 17rem; margin: -21rem -2rem; padding: 1rem; background: rgba(255,255,255,0.4); list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0 0; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); text-transform: capitalize; letter-spacing: 1px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); border: 1px solid rgb(255 255 255); animation: mymove 3s infinite; } @keyframes mymove { 50% { border-radius: 50px 20px; } } #menu li { padding: 0.6rem 0.9rem; } #menu a { display: block; color: navy; /*#2b1d1f;*/ text-decoration: none; text-align: left; font-weight: 570; letter-spacing: .2rem; justify-content: center; align-items: center; font-size: 0.85rem; } #menuToggle input:checked ~ ul { transform: none; } #slideshow { position: relative; width: 640px; height: 310px; padding: 8px; border: 1px solid #ddd; margin: 0 auto 2em; background: #FFF; background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); border-radius: 2px 2px 2px 2px; box-shadow: 0 0 3px rgba(0,0,0, 0.2); } #slideshow:before, #slideshow:after { position: absolute; display:block; bottom:16px; width: 50%; height: 20px; content: " "; background: rgba(0,0,0,0.1); border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7); z-index: -10; } #slideshow:before { left:0; transform: rotate(-4deg); } #slideshow:after { right:0; transform: rotate(4deg); } #slideshow .commands { position: absolute; top: 45%; padding: 5px 13px; border-bottom:0; font-family: 'Amaranth', Arial, Verdana, sans-serif; font-size: 1.3em; color: #aaa; text-decoration:none; background-color: #eee; background-image: linear-gradient(#fff,#ddd); text-shadow: 0 0 1px #aaa; border-radius: 50%; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } #slideshow .commands:after { position: absolute; bottom: 65px; left:-18px; content: attr(title); width: 50px; padding: 12px; background: #fff; font-family: Georgia, Times, serif; font-size: 14px; text-align:center; text-shadow: 0 0 0; opacity: 0; border-radius: 12px; box-shadow: 1px 1px 4px rgba(0,0,0,0.4); transition: opacity 0.7s, bottom 0.7s; } #slideshow .commands:before { position: absolute; bottom: 55px; left: 13px; content: " "; width: 1px; height: 1px; border-top: 10px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; z-index:10; opacity: 0; transition: opacity 0.7s, bottom 0.7s; } #slideshow .commands:hover:before { bottom: 35px; opacity: 1; } #slideshow .commands:hover:after { bottom: 45px; opacity: 1; } #slideshow .commands:focus { outline: 0; transform: translate(1px, 2px); } #slideshow .commands:active { transform: translate(0, 1px); } #slideshow .prev { left: -48px; } #slideshow .next { right: -48px; } #slideshow .prev, #slideshow .next { display:none; } #slideshow .prev, #slideshow .next { display:none; } #slideshow .commands1 { display: block; } .play_commands { position: absolute; width: 22px; height: 22px; top: 25px; right: 25px; z-index: 10; text-indent: -9999px; border:0 none; opacity: 0; transition: opacity 1s, right 1s; } .play { right: 55px; cursor: default; } .pause:hover { border:0 none; } .play_commands:focus { outline:0; } #slideshow:hover .pause, #sl_play:target ~ #slideshow:hover .pause, .play_commands:focus { opacity: 1; } .sl_command:target ~ #slideshow:hover .pause, #sl_pause:target ~ #slideshow:hover .pause { opacity: 0; } .pause:after, .pause:before { position: absolute; display: block; content: " "; top:0; width:38%; height: 22px; background: #fff; background: rgba(255,255,255,0.5); } .pause:after { right:0; } .pause:before { left:0; } .play { width: 1px; height: 1px; border-top: 10px solid transparent; border-left: 20px solid #fff; border-left: 20px solid rgba(255,255,255,0.5); border-bottom: 10px solid transparent; opacity: 0; } .play:hover, .play:focus { border-bottom: 10px solid transparent; } #slideshow .container { position:relative; width: 640px; height: 310px; overflow: hidden; } /* timeline base */ #slideshow .container:after { position:absolute; bottom: 0; left:0; content: " "; background: #999; width: 100%; height: 1px; } @-webkit-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @-moz-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } #slideshow .slider { position: absolute; left:0; top:0; width: 400%; height: 310px; animation: slider 32s infinite; } .sl_i:target ~ #slideshow .slider { transition: left 1s; } .sl_command:target ~ #slideshow .slider { transition: opacity 1s; } #slideshow .c_slider { position: absolute; left:0; top:0; width: 400%; height: 310px; background: url(../img/img-1.jpg) 0 0 no-repeat, url(../img/img-2.jpg) 640px 0 no-repeat, url(../img/img-3.jpg) 1280px 0 no-repeat, url(../img/img-5.jpg) 1920px 0 no-repeat; } .sl_i:target ~ #slideshow .c_slider { transition: background 1s; } #slideshow figure { position:relative; padding:0; margin:0; } @-webkit-keyframes figurer { 0%, 25%, 50%, 75%, 100% { box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } @-moz-keyframes figurer { 0%, 25%, 50%, 75%, 100% { box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } @keyframes figurer { 0%, 25%, 50%, 75%, 100% { box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } #slideshow figure:after { position: absolute; display:block; content: " "; top:0; left:0; width: 100%; height: 100%; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; animation: figurer 32s infinite; } @-webkit-keyframes figcaptionner { 0%, 25%, 50%, 75%, 100% { bottom: -55px; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; } } @-moz-keyframes figcaptionner { 0%, 25%, 50%, 75%, 100% { bottom: -55px; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; } } @keyframes figcaptionner { 0%, 25%, 50%, 75%, 100% { bottom: -55px; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; } } #slideshow figcaption { position:absolute; padding: 20px 20px; margin:0; left:0; right:0; bottom: 5px; text-align:center; letter-spacing: 0.05em; word-spacing: 0.05em; font-family: "Century Gothic", 'Lato',Raleway,"Avenir Next", "Avenir","Sofia",Dijkstra,"Freestyle Script",'Times New Roman',Verdana, Arial, sans-serif; background: rgba(37,37,37,0.9); border-top: 1px solid rgb(225,225,225); color: #dddddd; text-shadow: -1px -1px 0 rgba(255,255,255,0.3); animation: figcaptionner 32s infinite; } @-webkit-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } @-moz-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } @keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } #timeline { position: absolute; bottom: 9px; left: 8px; height: 1px; background: rgb(214,98,13); background: rgba(214,98,13,.8); width: 0; animation: timeliner 32s infinite; } /* dots styles */ .dots_commands { position: relative; top: 32px; padding:0; margin:0; text-align:center; } .dots_commands li { display:inline; padding:0; margin:0; list-style:none; } .dots_commands a { position: relative; display:inline-block; height:8px; width: 8px; margin: 0 5px; text-indent: -9999px; background: #fff; border-bottom:0; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; z-index:25; } .dots_commands li + li a { z-index:10; } .dots_commands li:first-child a:after, .dots_commands li:first-child a:before { position: absolute; top: 0; left: 0; content: " "; width: 8px; height: 8px; background: #bd9b83; z-index:20; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; } .dots_commands li:first-child a:after { animation: dotser 32s infinite; } .dots_commands li:first-child a:before { display:none; } /* need a stop ! */ /* actions when target ! */ .sl_command { display: none; } .sl_command:target ~ #slideshow .slider, .sl_command:target ~ #slideshow figure:after, .sl_command:target ~ #slideshow figcaption, .sl_command:target ~ #slideshow #timeline, .sl_command:target ~ #slideshow .dots_commands li:first-child a:after { animation-play-state: paused; } #sl_play:target ~ #slideshow .slider, #sl_play:target ~ #slideshow figure:after, #sl_play:target ~ #slideshow figcaption, #sl_play:target ~ #slideshow #timeline, #sl_play:target ~ #slideshow .dots_commands li:first-child a:after { animation-play-state: running; } .sl_command:target ~ #slideshow .pause { opacity:0; } .sl_command:target ~ #slideshow .play { opacity:1; right: 25px; cursor: pointer; } #sl_play:target ~ #slideshow .pause { opacity:0; } #sl_play:target ~ #slideshow .play { opacity:0; right: 55px; cursor: default;} .sl_i:target ~ #slideshow .slider { visibility: hidden } .sl_i:target ~ #slideshow .slider figcaption { visibility: hidden } .sl_i:target ~ #slideshow .dots_commands li:first-child a:after { display:none; } .sl_i:target ~ #slideshow .dots_commands li:first-child a:before { display:block; } #sl_i1:target ~ #slideshow .commands { display: none; } #sl_i1:target ~ #slideshow .commands1 { display: block; } #sl_i1:target ~ #slideshow .c_slider { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; } #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before { left:0; } #sl_i2:target ~ #slideshow .commands { display: none; } #sl_i2:target ~ #slideshow .commands2 { display: block; } #sl_i2:target ~ #slideshow .c_slider { background-position: -640px 0, 0 0, 640px 0, 1280px 0; } #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before { left:18px; } #sl_i3:target ~ #slideshow .commands { display: none; } #sl_i3:target ~ #slideshow .commands3 { display: block; } #sl_i3:target ~ #slideshow .c_slider { background-position: -1280px 0, -640px 0, 0 0, 640px 0; } #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before { left:36px; } #sl_i4:target ~ #slideshow .commands { display: none; } #sl_i4:target ~ #slideshow .commands4 { display: block; } #sl_i4:target ~ #slideshow .c_slider { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; } #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before { left:54px; } /*From PictInfo */ #main { padding: 10px; color: #8a796d; font-family: Helvetica, Arial, sans-serif; text-align:left; text-shadow: -1px -1px 0 rgba(255,255,255,0.1); max-width: 1140px; margin-left: auto; margin-right: auto; font-style: inherit; font-weight: inherit; } #main h2, #main h3 { margin-top: 45px; font-size: 2em; font-family: "Amaranth", cursive; text-align:left; } #main h3 { margin-top: 25px; font-size: 1.4em; } #main p { line-height: 1.85em; margin-top: 2em; } #main .col2, #main .col2 { position: relative; margin-top: 1em; column-count: 2; column-gap: 3em; } #main .col2 + .col2 { margin-top: 3em; } #main p + p:before { position: absolute; content: "*"; width: 100%; text-align: center; top: -1.2em; font-size: 2em; color: #e1d7cf; text-shadow: 1px 1px 0 rgba(0,0,0,0.15); } #mainFooter{ text-align: center; height: 40px; width: 100%; font-size: .5em; padding: 2px; margin: 0 .6em; bottom: 0; background-color: var(--white); display: flex; justify-content: center; align-items: center; } #mainFooter p{ color: #c2185b; font-size: 1.5em; font-weight: 700; } @media only screen and (max-width: 1800px) { .mainNav li a { font-size: .9rem; width: 120px; letter-spacing: 1px; padding: 12px 15px; } } @media only screen and (max-width: 1650px) { .mainNav li a { font-size: .8rem; width: 120px; letter-spacing: 1px; padding: 10px 12px; } } @media only screen and (max-width: 1550px) { .mainNav li a { font-size: .7rem; width: 100px; letter-spacing: 1px; padding: 10px 13px; } } @media only screen and (max-width: 1350px) { .mainNav li a { font-size: .65rem; width: 100px; letter-spacing: 0; padding: 8px 7px; } /*#logoImg{ width: 270px; height: 90px; }*/ } @media only screen and (max-width: 1250px) { .mainNav li a { font-size: .65rem; width: 100px; letter-spacing: 0; padding: 5px 5px; } /*#logoImg{ width: 240px; height: 85px; }*/ } @media only screen and (max-width: 1150px) { .mainNav li a { width: 7.5em; padding-left: 2.5em; font-size: .5em; } } @media only screen and (max-width: 1000px) { .mainNav { display: none; } } @media only screen and (max-width: 700px) { #slideshow{ display: none; } .soustitre { padding: 1em 0; font-size: 1.5em; font-family: 'Amaranth', Arial, Verdana, sans-serif; text-shadow: 0 2px 2px #000; margin: 0; letter-spacing: .2rem; transform-origin: 50% 100%; text-align: center; color: #fff; } }