Formulaire de contact CSS

Publiez votre code

Recommandé

28 July 2023

@import "https://fonts.googleapis.com/css?family=Poppins";
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #333;
  font-family: Poppins;
  text-transform: uppercase;
  font-size: 11px;
  background: #0f0c29; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #24243e,
    #302b63,
    #0f0c29
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #24243e,
    #302b63,
    #0f0c29
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h1 {
  margin: 0;
}
#contact {
  margin: 4em auto;
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 1px solid white;
}

#contact:hover {
  background: #000000;
}
#contact:active {
  background: #444;
}

#contactForm {
  display: none;

border: 6px solid 3324be;
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-radius: 16px;
}

input,
textarea {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 15px;
}
textarea {
  height: 80px;
  resize: none;
}

.formBtn {
  outline: 0;
  background: #3324be;
  width: 140px;
  height: 30px;
  border: 0;
  color: #ffffff;
  font-size: 1.2em;
  border-radius: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

Formulaire de contact CSS

Recommandé

Barre de recherche CSS

Un code par toninrazafison

Un code par slowlogic9

index.html

styles.css

main.js

Recommandé

Barre de recherche CSS

Un code par toninrazafison

Un code par slowlogic9

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js