You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
3.5 KiB

2 years ago
*{
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;
}
}