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

it's fuckin minuit

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
GrossesMitaines/grosses-mitaines-ui/src/components/ContactInfo.js Normal file
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;

58
GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js
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>
<ContactInfo/>
</div>
</li>
<br />
<li>
<h5 >
Question?
</h5>
<a>
Nous Contacter
</a>
</li>
</ul>
</div>
</>
);
}

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

@ -132,6 +132,43 @@ html{
background-color: plum !important;
}
.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%;
@ -156,13 +193,18 @@ html{
.footer-partners {
display: flex;
}
.partner-img {
margin: auto;
height: 50px;
}
/* -------------------------------------------------------- */
/* specification pour les écrans plus petits / cells */
/* -------------------------------------------------------- */
@media (max-width:450px) {
.featured-img {
border: 5px purple double;
@ -197,4 +239,13 @@ html{
}
.contact-info-container{
padding-top:5%;
}
.employee-text {
margin: 5px;
padding: 10px;
}
}