it's fuckin minuit

This commit is contained in:
Medenos 2022-09-28 00:11:27 -04:00
parent 9fa0c948d9
commit 4aad85a627
3 changed files with 155 additions and 93 deletions

View File

@ -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;

View File

@ -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>
);
}

View File

@ -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;
}
}