@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap"); :root { --text-color: rgb(0, 0, 0); --dmsans-s: "Dm sans", sans-serif; --poppins-s: "Poppins", sans-serif; --black-alpha: rgba(0, 0, 0, 0.5); --wh-color: rgb(255, 255, 255); --clr-darkblue: #1E0E62; } button { display: inline-flex; background: transparent; border: none; } /*** The new CSS reset - version 1.8.2 (last updated 23.12.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) ) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: ""; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .page_introuvable { background-image:url("assets/bck.jpg"); background-repeat: no-repeat; background-size: cover; } /* Accueil (première page de rendu) */ .accueil { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2rem; min-width: 100%; min-height: 100vh; background-image: url("assets/WP8.jpg"); background-repeat: no-repeat; background-size: cover; object-fit: cover; color: var(--wh-color); font-family: var(--poppins-s); } .accueil_titre { font-size: 7rem; font-weight: bold; text-transform: uppercase; } .accueil_name { font-size: 2rem; font-weight: bold; } .accueil_btn { display: inline-block; margin-bottom: 3rem; padding: 15px 32px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 2rem; color: var(--wh-color); text-align: center; text-decoration: none; } .accueil_btn:hover { transform: scale(1.1); border: 2px solid #ff810b; background-color: #ff810b; } .accueil_color{ display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 1rem; background-color: rgba(0, 0, 0, 0.3); width: 37.5rem; } /* Accueil 2 (deuxième page de rendu) */ .accueil_2 { display: flex; align-items: center; flex-direction: column; gap: 2rem; min-width: 100%; min-height: 100vh; background-image: url("assets/WP8.jpg"); background-repeat: no-repeat; background-size: cover; object-fit: cover; color: var(--wh-color); font-family: var(--poppins-s); } .accueil_allcard { display: flex; align-items: center; justify-content: flex-start; gap: 2rem; } .accueil_card { display: flex; align-items: center; flex-direction: column; padding-bottom: 1rem; width: 26.125rem; height: 35rem; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 1rem; } .accueil_card_composants { margin-bottom: 1rem; } .accueil_card_lien:hover { color: #ff810b; } .accueil2_btn { display: inline-block; padding: 15px 32px; margin-bottom: 3rem; text-align: center; text-decoration: none; border: 0; border-radius: 2rem; color: var(--wh-color); background-color: var(--black-alpha); } .accueil2_btn:hover { transform: scale(1.1); border: 2px solid #ff810b; background-color: #ff810b; } /* Navigation */ .nav_all { display: block; position: fixed; top: 0; left: 0; z-index: 11; width: 100%; margin: 0; font-family: var(--dmsans-s); background-color: var(--wh-color); } .nav { display: flex; align-items: center; height: 4.25rem; padding-left: 4rem; padding-right: 4rem; justify-content: space-between; } .nav_list { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 2rem; } .nav_list_obj:hover { transform: scale(1.1); color: #482be7; } .nav_list_obj:active { color: #482be7; } .nav_logo { width: 1em; } .nav_connexion { display: flex; flex-direction: row; gap: 2rem; } .nav_title { font-weight: bold; } .nav_button_up { border: 0; padding: 0.5rem 1rem 0.5rem; text-align: center; background-color: #482be7; color: var(--wh-color); border-radius: 2rem; } .nav_button_up:hover { background-color: var(--wh-color); color:var(--text-color); } .nav_button_in { border: 0; padding: 0.5rem 1rem 0.5rem; text-align: center; color: var(--text-color); border-radius: 2rem; } .nav_button_in:hover { background-color: #482be7; color: var(--wh-color); } /* Header */ .hero_all { display: flex; justify-content: center; align-items: center; /* position: relative; z-index: -100;*/ width: 100%; height: 100vh; background-image: url("assets/Image.jpg"); background-repeat: no-repeat; background-size: cover; } /*.hero_all::before { position: absolute; z-index: -99; content:""; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.4); }*/ .hero_group { display: flex; flex-direction: column; position: relative; gap: 5rem; margin-top: 2rem; width: 70%; text-align: center; font-family: var(--dmsans-s); color: var(--wh-color); } .hero_logo { display: block; width: 4rem; margin: auto; } .hero_txt { font-weight: bold; font-size: 3.5rem; } .hero_txt1 { width: 60%; margin: auto; font-weight: lighter; } /* Content */ .cont_column { display: flex; flex-direction: column; gap:1.875rem; width: 23.125rem ; } .cont_all { display: flex; align-items: center; justify-content: center; gap:1.875rem; margin: 6.25rem 0 4.5rem; } .cont_img_square { width: 23.125rem ; aspect-ratio:1; object-fit: cover; } .cont_img_small { height: 13.125rem ; width: 23.125rem; object-fit: cover; } .cont_img_long { height: 33.125rem ; width: 23.125rem; object-fit: cover; } /* Showcase */ .showcase_content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem; max-width: 87.5rem; margin: auto; } .showcase_all { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 1400px; margin: auto; text-align: center; font-family: var(--dmsans-s); } .showcase_list { display: flex; justify-content: space-between; align-items: center; min-width: 10rem; gap: 2rem; margin: 2rem auto 3rem; } .showcase_gtitre { font-size: 2.625rem; font-weight: bold; padding-top: 2rem; color: var(--clr-darkblue); } .showcase_titre { font-size: 1.375rem; font-weight: bold; color: var(--clr-darkblue); } .showcase_block { display: flex; flex-direction: column; gap: .5rem; } .showcase_desc { width: 40%; color: var(--black-alpha); font-size: 1.375rem; } .showcase_list2 { display: flex; justify-content: space-between; gap: 2rem; margin: 0 auto 5.7rem; } .showcase_name { display: flex; justify-content: center; align-items: center; text-align: center; text-transform: uppercase; font-weight: bold; color: var(--black-alpha); } .showcase_point { display: flex; align-items: center; flex-direction: column; gap: 1rem; } /* Feature */ .feature_vraiment_all{ display: flex; align-items: center; justify-content: space-between; } .feature_mac_div { display: flex; justify-content: flex-end; margin-top: 5rem; } .feature_all_txt { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 60%; padding-left: 20rem; text-align: start; font-family: var(--dmsans-s); } .feature_sous_titre { display: flex; gap: .5em; text-transform: uppercase; font-weight: bold; font-size: .875rem; color: var(--clr-darkblue); } .feature_titre { font-size: 2.5rem; font-weight:bold ; color: var(--clr-darkblue); } .feature_txt { font-size: 1.375rem; color: var(--black-alpha); } .feature_list { display: flex; flex-direction: column; gap: 2rem; max-width: 50%; margin: 0%; } .feature_presentation{ display: flex; flex-direction: column; gap: 1rem; width: 60%; margin-bottom: 3rem; } .feature_stxt { font-size: .875rem; color: var(--black-alpha); } /* Forms */ .forms { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2em; padding: 3rem; width: 50%; margin: 2rem auto; border: solid 2px var(--black-alpha); border-radius: 0.5rem; font-family: var(--dmsans-s); } .forms_mail { padding: 0.5em; border: solid 2px var(--black-alpha); border-radius: 2rem; color: var(--black-alpha); } .forms_grp { display: flex; gap: 1rem; } .forms_titre { font-weight: bold; font-size: large; color: var(--clr-darkblue); } .forms_button { border: 0; padding: 0.5rem 1rem 0.5rem; border-radius: 3rem; text-align: center; background-color: #25DAC5; color: var(--wh-color); } .forms_button:hover{ transform: scale(1.1); border: 1px solid #25DAC5; color: #25DAC5; background-color: white; } /* Testimonial */ .test_content { display: flex; } .test { display: flex; justify-content: space-around; padding: 6rem; font-family: var(--dmsans-s); background-color: var(--clr-darkblue); color: var(--wh-color); } .test_txt { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 1em; max-width: 50%; font-size: 1.2rem; } .test_austim { display: flex; gap: 2em; } .test_name { text-transform: uppercase; font-size: .875rem; color: rgba(255, 255, 255, 0.5); } .test_pdp { width: 4rem; height: 4rem; } /* Call to action */ .cta_eall { position: relative; width: 100%; height: 100vh; overflow: hidden; } .cta_eall::before { position: absolute; content: ""; width: 100%; height: 100vh; z-index: -99; background-color: rgba(0, 0, 0, 0.3); } .cta_eall video { position:absolute ; z-index: -100; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; } .ctae_text { display: flex; align-items: center; justify-content: center; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); gap:2rem; font-family: var(--dmsans-s); font-size: 2.5rem; font-weight: bold; color: var(--wh-color); } /* Team */ .team_samevanbr { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; width: 24.375rem; border-right: solid 1px grey; padding: 5em; color: #1e0e62; } .team_total { display: flex; align-items: center; flex-direction: column; width: 100%; height: 100%; background-image: url("assets/Background.jpg"); background-repeat: no-repeat; background-size: cover; font-family: var(--dmsans-s); } .team_3 { display: flex; align-items: center; flex-direction: row; overflow: hidden; max-width: 73.125rem; margin: 2rem 0 2rem; text-align: center; border-radius: 0.5rem; background-color: var(--wh-color); } .team_btn { display: inline-block; margin-bottom: 3rem; padding: 15px 32px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 2rem; text-align: center; text-decoration: none; color: var(--wh-color); } .team_btn:hover { transform: scale(1.1); border: 2px solid #25DAC5; background-color: #25DAC5; } .team_reseau { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2em; } .team_sup { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 40%; text-align: center; color: var(--wh-text-color); color:var(--wh-color); } .team_titre { font-size: 2.5rem; font-weight: bold; } .team_p { font-size: 1.375rem; } .team_name { font-size: 1.375rem; font-weight: bold; color: var(--clr-darkblue); } .team_content { display: flex; flex-wrap: wrap; max-width: 1400px; } /* Pricing */ .pricing_all { width: 100%; height: 100%; padding-bottom: 5rem; background-image: url("assets/Backgroundprix.jpg"); background-repeat: no-repeat; background-size: cover; font-family: var(--dmsans-s); color: var(--wh-color); } .pricing_price_block { display: flex; gap: .5rem; padding-left: 4.375rem; } .pricing_list{ display: flex; flex-direction: column; width: 23.125rem; padding-top: 4rem; margin-top: 3.5rem; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 1rem; } .pricing_titre { margin-bottom: 1.875rem; font-size: 2.625rem; font-weight: bold; } .pricing_top { display: flex; flex-direction: column; align-items: center; padding-top:2rem; } .pricing_desc{ width: 30%; text-align: center; font-size: 1.375rem; } .pricing_3 { display: flex; justify-content: center; flex-direction: row; gap: 3rem; } .pricing_list_option{ display: flex; gap: 1em; } .pricing_text_option { padding-left: 1.8rem; } .pricing_price { margin-bottom: 2.75rem; font-size: 3.5rem; } .pricing_titre_list { padding-left: 4.375rem; margin-bottom: 1.375rem; font-size: 1.375rem; } .pricing_block { display: flex; flex-direction: column; gap: .6rem; padding-left: 2.875rem; } .pricing_btn { padding: 1rem 3.75rem 1rem; margin-top: 1rem; margin-bottom: 2rem; margin-left: 4.3rem; border: solid 1px white; border-radius: 2rem; font-size: 1.25rem; text-align: center; color: white; } .pricing_btn:hover { border: 0; background-color:#E93A7D; } .pricing_titre_list { display:flex; justify-content: flex-start; width: 10rem; font-weight: lighter; } /* Contact */ .contact_all { display: flex; justify-content: space-between; font-family: var(--dmsans-s); } .contact_map { height: 500; margin-left: 2rem; } .contact_all_text { display: flex; justify-content: center; flex-direction: column; width: 50%; padding-left: 10rem; } .contact_info_grande { padding-bottom: 2.5rem; font-size: 2.625rem; font-weight: bold; color: var(--clr-darkblue); } .contact_sous_titre{ padding-bottom: .5rem; text-transform: uppercase; font-size: .875rem; color: var(--black-alpha); } .contact_definition{ padding-bottom: 7rem; font-size: 1.375rem; color: var(--black-alpha); } .contact_titre{ padding-bottom: 1.3rem; font-size: 1.5rem; font-weight: bold; color: var(--clr-darkblue); } /* Footer */ .footer_logo { align-items: center; width: 2rem; } .footer_logo_doom { width: 0.8rem; } .footer_nav { display: flex; flex-direction: row; justify-content: space-between; gap: 1em; flex-wrap: nowrap; margin: 1rem; font-family: var(--dmsans-s); } .footer_nav_obj:hover { transform: scale(1.1); color: #482be7; }