<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../../css/app.css">
- <link href="https://fonts.googleapis.com/css?family=Barlow:600|Muli&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Barlow:500|Muli&display=swap" rel="stylesheet">
<title>pmi</title>
</head>
<body>
<div id="contact-form">
- <div class="form">
- <p>Vous souhaitez obtenir des informations sur PM-Instrumentation ?
+ <div class="form flex flex-col">
+ <p class="form-info text-navy">Vous souhaitez obtenir des informations sur PM-Instrumentation ?<br>
Remplissez le formulaire ci-dessous, nous vous recontactons sous 48h.</p>
- <label for="name">Nom*</label>
- <input type="text" id="name">
+ <div class=" flex flex-col text-navy">
+
+ <div class="field-line flex">
+ <label class="form-input flex flex-col mr-form" for="lastname">Nom*
+ <input class="py-3 mt-3" type="text" id="lastname">
+ </label>
+
+ <label class="form-input flex flex-col" for="firstname">Prénom*
+ <input class="py-3 mt-3" type="text" id="firstname">
+ </label>
+ </div>
+
+ <div class="field-line flex">
+ <label class="form-input flex flex-col mt-5 mr-form" for="societe">Société*
+ <input class="py-3 mt-3" type="text" id="societe">
+ </label>
+
+ <label class="form-input flex flex-col mt-5" for="zipcode">Code Postal*
+ <input class="py-3 mt-3" type="text" id="zipcode">
+ </label>
+ </div>
+ </div>
+
+ <label class=" flex flex-col mt-5 text-navy" for="mail">Email*
+ <input class="py-3 mt-3" type="text" id="mail">
+ </label>
+
+ <label class="flex flex-col mt-5 text-navy" for="message">Message
+ <textarea class="py-3 textarea mt-3" type="text" id="message"></textarea>
+ </label>
+
+ <p class="form-endmessage mt-5 text-grey-dark">
+ En nous transmettant votre demande, vous acceptez que PM Instrumentation traite
+ vos données personnelles dans le but de vous offrir un service de qualité. Pour plus
+ d’information sur la protection de vos données à caractère personnel, vous pouvez
+ consulter la page “<a href="">Vie privée</a>”
+ </p>
+ <div class="flex justify-between items-center xs:flex-col-reverse">
+ <span class="text-grey-dark xs:self-start xs:mt-5">*Champs obligatoires</span>
+ <button class="btn btn-custom xs:w-full">Envoyer</button>
+ </div>
</div>
</div>
$lightgrey = #F7F8FC
$darkblue = #152F4E
$lightblue = #0EAADA
+$verylightgrey =#E7E9F3
*
padding: 0
#contact-form
.form
background $lightgrey
- padding 48px
- width 38.75vw
\ No newline at end of file
+ padding 2.5vw
+ width 44.2vw
+ @media (max-width :990px)
+ width 90vw
+ margin 0 5vw // a enlever lors de l'integration
+ @media (max-width :500px)
+ width 85vw
+ padding 7.5vw
+ .field-line
+ @media (max-width :500px)
+ flex-direction column
+ .form-input
+ width: 18.30vw
+ max-width: 18.30vw
+ @media (max-width :990px)
+ width 41.25vw
+ max-width 41.25vw
+ @media (max-width :500px)
+ width 100%
+ max-width 100%
+ input,textarea
+ border-radius 3px
+ color: $dark
+ padding 12px 10px
+ label
+ font-family: $barlow
+ .textarea
+ height 144px
+ &-endmessage
+ font-size: 14px
+ .btn-custom
+ padding 1.125rem 5.375rem
+ .mr-form
+ margin-right: 2.5vw
+ *:focus
+ outline-color $verylightgrey
\ No newline at end of file
projects / pmi.git / commitdiff