*{ margin:0; padding:0; box-sizing:border-box; } body { margin: 0; font-size: 1.1em; background: url('../Image/background.jpg'); background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed; } .lien { color: #66BFBF; } .lien:hover{ color: #66BFBF; } .contact-parent{ background: #fff; display:flex; margin:80px 0; } .contact-child{ display:flex; flex:1; box-shadow:0px 0px 10px -2px rgba(0,0,0,0.75); } .child1{ background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("https://cdn.pixabay.com/photo/2017/10/31/19/05/web-design-2906159_960_720.jpg"); background-size:cover; display:flex; flex-direction:column; justify-content:space-around; color:#fff; padding:100px 0; } .child1 p{ padding-left:20%; font-size:20px; text-shadow:0px 0px 2px #000; } .child1 p span{ font-size:16px; color:#9df2fd; } .child2{ flex-direction:column; justify-content:space-around; align-items:center; } .inside-contact{ width:90%; margin:0 auto; } .inside-contact h2{ text-transform:uppercase; text-align:center; margin-top:50px; } .inside-contact h3{ text-align:center; font-size:16px; color:#0085e2; margin-bottom: 10%; } .inside-contact input, .inside-contact textarea{ width:100%; background-color:#eee; border:1px solid rgba(0,0,0,0.48); padding:5px 10px; margin-bottom:20px; } .inside-contact input[type=submit]{ background-color:#000; color:#fff; transition:0.2s; border:2px solid #000; margin:30px 0; } .inside-contact input[type=submit]:hover{ background-color:#fff; color:#000; transition:0.2s; } .button { font-family: 'Lobster Two', cursive; font-size: 1.3rem; margin-left: 2%; position: relative; display: inline-flex; color: #fff; background-color: #76abe9; padding-left: 2rem; overflow: hidden; z-index: 1; align-items: center; box-shadow: 0px 3px 4px -4px rgba(0, 0, 0, 0.75); } .button::before { content: ""; position: absolute; left: 0; top: 0; transform: scaleX(0); transform-origin: 0 50%; width: 100%; height: 100%; background-color: #4A90E2; z-index: -1; transition: transform 750ms; } .button span { display: flex; align-items: center; justify-content: center; margin-left: 2rem; padding: 1rem; overflow: hidden; background-color: #4A90E2; } .button svg { max-width: 20px; width: 100%; height: auto; max-height: 18px; fill: white; } .button:hover::before { transform: scaleX(1); } .button:hover svg { -webkit-animation: moveArrow 750ms; animation: moveArrow 750ms; } @-webkit-keyframes moveArrow { 0% { transform: translateX(0px); } 49% { transform: translateX(50px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } @keyframes moveArrow { 0% { transform: translateX(0px); } 49% { transform: translateX(50px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } @media screen and (max-width:991px){ .contact-parent{ display:block; width:100%; } .child1{ display:none; } .child2{ background-image:linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url("https://cdn.pixabay.com/photo/2017/10/31/19/05/web-design-2906159_960_720.jpg"); background-size:cover; } .inside-contact input, .inside-contact textarea{ background-color:#fff; } }