memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

beautification du form de demande de contact

Browse Source
This commit is contained in:
Medenos 2022-09-27 23:46:26 -04:00
parent 014bca24d8
commit 9fa0c948d9
2 changed files with 64 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
View File

@ -1,44 +1,44 @@
const ContactForm = () =>{ const ContactForm = () =>{
return ( return (
<section> <div className="contact-form-container">
<form method="post" class="form-horizontal" role="form"> <form method="post" className="form-horizontal" role="form">
<h4 class="text-center text-white">Demander une rencontre!</h4> <h4 className="text-center">Demander une rencontre!</h4>
<div class="form-group"> <div className="form-group">
<div class="col-md-12"> <div className="col-md-12">
<label class="text-white">Nom*</label> <label >Nom*</label>
<input class="form-control" /> <input className="form-control contact-form-input" />
{/* <span asp-validation-for="Name" class="text-danger"></span> */} {/* <span asp-validation-for="Name" className="text-danger"></span> */}
</div> </div>
</div> </div>
<div class="form-group"> <div className="form-group">
<div class="col-md-12"> <div className="col-md-12">
<label class="text-white">Email*</label> <label >Email*</label>
<input class="form-control" /> <input className="form-control contact-form-input" />
{/* <span asp-validation-for="Email" class="text-danger"></span> */} {/* <span asp-validation-for="Email" className="text-danger"></span> */}
</div> </div>
</div> </div>
<div class="form-group"> <div className="form-group">
<div class="col-md-12"> <div className="col-md-12">
<label class="text-white">Téléphone*</label> <label >Téléphone*</label>
<input class="form-control" /> <input className="form-control contact-form-input" />
{/* <span asp-validation-for="Phone" class="text-danger"></span> */} {/* <span asp-validation-for="Phone" className="text-danger"></span> */}
</div> </div>
</div> </div>
<div class="form-group"> <div className="form-group">
<div class="col-md-12"> <div className="col-md-12">
<label class="text-white">Message</label> <label >Message</label>
<input class="form-control" rows="3"/> <textarea className="form-control contact-form-input" rows="3"/>
{/* <span asp-validation-for="Message" class="text-danger"></span> */} {/* <span asp-validation-for="Message" className="text-danger"></span> */}
</div> </div>
</div> </div>
<div class="form-group"> <div className="form-group">
<div class="col-md-offset-2 col-md-12"> <div className="col-md-offset-2 col-md-12">
<button type="submit" class="btn btn-default bg-success">Demande</button> <button type="submit" className="btn btn-default bg-success contact-form-btn">Demande</button>
</div> </div>
</div> </div>
</form> </form>
</section> </div>
); );
} }

37
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -111,7 +111,26 @@ html{
background-color: plum; background-color: plum;
} }
.contact-form-container{
padding:3% 5% 3% 5%;
color:black;
background-color: beige;
}
.contact-form-input{
border:3px solid rgba(0,0,0,.25);
/* box-shadow: 1px 2px rgba(0, 0, 0, .25); */
}
.contact-form-btn{
margin-top:3%;
color:beige;
background-color: purple !important;
}
.contact-form-btn:hover{
background-color: plum !important;
}
.footer-container{ .footer-container{
color: black; color: black;
@ -160,4 +179,22 @@ html{
padding-right: 20px; padding-right: 20px;
background-color: rgba(255, 255, 255, .75); background-color: rgba(255, 255, 255, .75);
} }
.contact-form-container{
margin-bottom: 35px;
margin-top: 35px;
}
.contact-form-input{
min-height: 50px;
}
.contact-form-btn{
margin-left: 10%;
margin-right:10%;
height:75px;
width: 80%;
}
} }