it's fuckin minuit
This commit is contained in:
Medenos
parent
9fa0c948d9
commit
4aad85a627
@ -0,0 +1,59 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const ContactInfo = () => {
|
||||
return (
|
||||
|
||||
<div className="row contact-info-container">
|
||||
<ul className="contact-info-list">
|
||||
<li>
|
||||
<h5>
|
||||
<span className="fa fa-location-arrow"></span> Adresse:
|
||||
</h5>
|
||||
<a href="https://goo.gl/maps/B76oSoXg9FXuTmCD6" target="_blank">
|
||||
<span className="fa fa-arrow-up-right-from-square"></span> 3005 Bd Laframboise, Saint-Hyacinthe, QC J2S 4Z6
|
||||
</a>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
<span className="fa fa-envelope"></span> Courriel:
|
||||
</h5>
|
||||
<a href="mailto:grossesmitaines@example.com" >
|
||||
<span className="fa fa-feather"></span> grossesmitaines@example.com
|
||||
</a>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
<span className="fa fa-phone"></span> Appellez-nous:
|
||||
</h5>
|
||||
<a href="tel:666-666-6666">
|
||||
<span className="fa fa-phone-volume"></span> 666-666-666
|
||||
</a>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
Réseaux Sociaux:
|
||||
</h5>
|
||||
<div className="socials">
|
||||
<span className="socials-icon fa fa-facebook"></span>
|
||||
<span className="socials-icon fa fa-etsy"></span>
|
||||
<span className="socials-icon fa fa-pinterest"></span>
|
||||
</div>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
Question?
|
||||
</h5>
|
||||
<Link to="/contactUs">
|
||||
Nous Contacter
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContactInfo;
|
||||
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import { useEffect } from "react";
|
||||
import ContactInfo from "../components/ContactInfo";
|
||||
|
||||
const AbtouUs = () => {
|
||||
|
||||
@ -8,7 +9,7 @@ const AbtouUs = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="about-us-container">
|
||||
<div className="row">
|
||||
<div className="col-12 text-light">
|
||||
<h1>À propos de nous:</h1>
|
||||
@ -19,7 +20,7 @@ const AbtouUs = () => {
|
||||
<div className="col col-12 col-md-6 col-lg-4 ">
|
||||
<img className="border-quetaine" src="/images/madamebrossard.jpg"/>
|
||||
</div>
|
||||
<div className="col col-12 col-md-6 col-lg-8 text-light">
|
||||
<div className="col col-12 col-md-6 col-lg-8 employee-text">
|
||||
<br />
|
||||
<h4>
|
||||
Ginette - Co-Fondatrice
|
||||
@ -36,7 +37,7 @@ const AbtouUs = () => {
|
||||
<br />
|
||||
<br />
|
||||
<div className="row">
|
||||
<div className="col col-12 col-md-6 col-lg-8 text-light">
|
||||
<div className="col col-12 col-md-6 col-lg-8 employee-text">
|
||||
<h4>
|
||||
Monique - Autre Co-Fondatrice
|
||||
</h4>
|
||||
@ -55,57 +56,8 @@ const AbtouUs = () => {
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div className="row bg-dark text-light pt-3">
|
||||
<ul>
|
||||
<li>
|
||||
<h5>
|
||||
<span className="fa fa-location-dot"></span> Adresse:
|
||||
</h5>
|
||||
<a href="https://goo.gl/maps/B76oSoXg9FXuTmCD6" target="_blank">
|
||||
<span className="fa fa-arrow-up-right-from-square"></span> 3005 Bd Laframboise, Saint-Hyacinthe, QC J2S 4Z6
|
||||
</a>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
<span className="fa fa-envelope"></span> Courriel:
|
||||
</h5>
|
||||
<a href="mailto:grossesmitaines@example.com" >
|
||||
<span className="fa fa-feather"></span> grossesmitaines@example.com
|
||||
</a>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
<span className="fa fa-phone"></span> Appellez-nous:
|
||||
</h5>
|
||||
<a href="tel:666-666-6666">
|
||||
<span className="fa fa-phone-volume"></span> 666-666-666
|
||||
</a>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
Réseaux Sociaux:
|
||||
</h5>
|
||||
<div className="row">
|
||||
<span className="col-4 fa fa-facebook"></span>
|
||||
<span className="col-4 fa fa-etsy"></span>
|
||||
<span className="col-4 fa fa-pinterest"></span>
|
||||
</div>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h5 >
|
||||
Question?
|
||||
</h5>
|
||||
<a>
|
||||
Nous Contacter
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
<ContactInfo/>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,42 +7,42 @@ body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
html{
|
||||
height:100%;
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home-text{
|
||||
.home-text {
|
||||
/* border: black 1px solid; */
|
||||
text-align: center;
|
||||
background-color:beige;
|
||||
background-color: beige;
|
||||
box-shadow: 2px 3px rgba(11, 11, 11, 0.5);
|
||||
padding:1% 2% 1% 2%;
|
||||
padding: 1% 2% 1% 2%;
|
||||
margin: 1% 2% 1% 2%;
|
||||
}
|
||||
|
||||
.home-title{
|
||||
.home-title {
|
||||
margin: 10px 10% 0% 10%;
|
||||
padding: 0px 0px 0px 0px ;
|
||||
padding: 0px 0px 0px 0px;
|
||||
border-radius: 5px 25px;
|
||||
color:plum;
|
||||
color: plum;
|
||||
background-color: rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
||||
.home-subtitle{
|
||||
.home-subtitle {
|
||||
text-shadow: 3px 2px 5px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.home-img{
|
||||
.home-img {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.home-description{
|
||||
.home-description {
|
||||
margin-top: 2%;
|
||||
/* border-top: 1px black solid; */
|
||||
}
|
||||
|
||||
.topbar-container{
|
||||
.topbar-container {
|
||||
background-color: beige;
|
||||
margin-bottom: 2%;
|
||||
border-bottom: rgb(82, 4, 82) solid 1px;
|
||||
@ -56,7 +56,7 @@ html{
|
||||
box-shadow: 2px 3px rgba(0, 0, 0, .25);
|
||||
border-radius: 5px;
|
||||
height: 40px;
|
||||
margin:auto;
|
||||
margin: auto;
|
||||
margin-bottom: 2%;
|
||||
width: 90%;
|
||||
}
|
||||
@ -111,58 +111,100 @@ html{
|
||||
background-color: plum;
|
||||
}
|
||||
|
||||
.contact-form-container{
|
||||
padding:3% 5% 3% 5%;
|
||||
color:black;
|
||||
.contact-form-container {
|
||||
padding: 3% 5% 3% 5%;
|
||||
color: black;
|
||||
background-color: beige;
|
||||
}
|
||||
|
||||
.contact-form-input{
|
||||
border:3px solid rgba(0,0,0,.25);
|
||||
.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;
|
||||
.contact-form-btn {
|
||||
margin-top: 3%;
|
||||
color: beige;
|
||||
background-color: purple !important;
|
||||
}
|
||||
|
||||
.contact-form-btn:hover{
|
||||
.contact-form-btn:hover {
|
||||
background-color: plum !important;
|
||||
}
|
||||
|
||||
.footer-container{
|
||||
.about-us-container {
|
||||
padding: 3% 2% 3% 2%;
|
||||
border-top: 3px solid rgba(123, 9, 102, 0.5);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.border-quetaine {
|
||||
border: 3px dotted purple;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.employee-text {
|
||||
color: whitesmoke;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.contact-info-container {
|
||||
color: white;
|
||||
background-color: rgb(12, 13, 13);
|
||||
padding: 2% 5% 2% 5%;
|
||||
}
|
||||
|
||||
.contact-info-list {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.socials {
|
||||
margin-top: 5%;
|
||||
width: 50%;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.socials-icon {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
color: black;
|
||||
margin-top: 5%;
|
||||
padding: 2% 3% 2% 3%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.footer-links{
|
||||
.footer-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer-link{
|
||||
color:purple;
|
||||
.footer-link {
|
||||
color: purple;
|
||||
text-shadow: 5px 5px 10px rgba(0, 0, 0, .75);
|
||||
margin:auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.footer-link:hover{
|
||||
.footer-link:hover {
|
||||
color: plum;
|
||||
}
|
||||
|
||||
.footer-partners{
|
||||
display:flex;
|
||||
.footer-partners {
|
||||
display: flex;
|
||||
}
|
||||
.partner-img{
|
||||
margin:auto;
|
||||
height:50px;
|
||||
|
||||
.partner-img {
|
||||
margin: auto;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------- */
|
||||
/* specification pour les écrans plus petits / cells */
|
||||
/* -------------------------------------------------------- */
|
||||
|
||||
@media (max-width:450px) {
|
||||
.featured-img {
|
||||
border: 5px purple double;
|
||||
@ -180,21 +222,30 @@ html{
|
||||
background-color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
|
||||
.contact-form-container{
|
||||
.contact-form-container {
|
||||
margin-bottom: 35px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.contact-form-input{
|
||||
|
||||
.contact-form-input {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.contact-form-btn{
|
||||
.contact-form-btn {
|
||||
margin-left: 10%;
|
||||
margin-right:10%;
|
||||
height:75px;
|
||||
margin-right: 10%;
|
||||
height: 75px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
|
||||
.contact-info-container{
|
||||
padding-top:5%;
|
||||
}
|
||||
|
||||
.employee-text {
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user