client_projects
/
flamme-website
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: add minor corrections 

- Modification du titre en haut de la page
- Réorganisation de la disposition des agences en bas de la page
- Correction des coordonnées (certaines agences étaient associées à des numéros de téléphone incorrects)
- Ajout d’une agence manquante et suppression d’un doublon concernant celle de Wignehies.
main
Nicolas Doby 2024-12-10 11:18:32 +01:00
parent a147eedbee
commit c03b412f40
2 changed files with 87 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
index.html
View File

@ -96,53 +96,44 @@
<ul class="section-contact__addresses"> <ul class="section-contact__addresses">
<li class="address-item"> <li class="address-item">
<span class="address-item__title">Saint-Rémy-du-Nord</span> <span class="address-item__title">Saint-Rémy-du-Nord</span>
<span>03 27 63 66 00</span> <span class="address-item__phone">03 27 63 66 00</span>
<address> <address>12 Rue Jean Messager<br/>59330 Saint-Remy-du-Nord</address>
12 Rue Jean Messager, 59330 Saint-Remy-du-Nord
</address>
</li>
<li class="address-item">
<span class="address-item__title">Estaires</span>
<span>03 28 48 83 98</span>
<address>
52 Rue de la Chapelle, 59940 Estaires
</address>
</li> </li>
<li class="address-item"> <li class="address-item">
<span class="address-item__title">Auby</span> <span class="address-item__title">Auby</span>
<span>03 27 63 66 00</span> <span class="address-item__phone">03 27 63 66 00</span>
<address> <address>Rue Jean-Jacques Rousseau <br/>59950 Auby</address>
Rue Jean-Jacques Rousseau, 59950 Auby
</address>
</li>
<li class="address-item">
<span class="address-item__title">Raillencourt-Sainte-Olle</span>
<span>03 27 85 06 47</span>
<address>81 Av. des Deux Vallées, 59554
Raillencourt-Sainte-Olle
</address>
</li> </li>
<li class="address-item"> <li class="address-item">
<span class="address-item__title">Bondues</span> <span class="address-item__title">Bondues</span>
<span>03 20 26 00 15</span> <span class="address-item__phone">03 20 26 00 15</span>
<address>Rue du Moulin Cardon, 59910 Bondues</address> <address>Rue du Moulin Cardon<br/>59910 Bondues</address>
</li> </li>
<li class="address-item"> <li class="address-item">
<span class="address-item__title">Wignehies</span> <span class="address-item__title">Caudry</span>
<span>03 27 63 66 00</span> <span class="address-item__phone">03 27 85 06 47</span>
<address>Adresse à confirmer</address> <address>29 rue Edouard Vaillant <br/>59540 Caudry</address>
</li>
<li class="address-item">
<span class="address-item__title">Wignehies</span>
<span>03 27 63 66 00</span>
<address>Adresse à confirmer</address>
</li> </li>
<li class="address-item"> <li class="address-item">
<span class="address-item__title">Dunkerque</span> <span class="address-item__title">Dunkerque</span>
<span>03 20 26 00 15</span> <span class="address-item__phone">03 28 44 21 82</span>
<address>241 rue du Meunynck <address>241 rue du Meunynck <br/>ZI de Petite Synthe <br/>59640 Dunkerque</address>
ZI de Petite Synthe 59640 Dunkerque </li>
</address> <li class="address-item">
<span class="address-item__title">Estaires</span>
<span class="address-item__phone">03 28 48 83 98</span>
<address>52 Rue de la Chapelle<br/>59940 Estaires</address>
</li>
<li class="address-item">
<span class="address-item__title">Raillencourt-Sainte-Olle</span>
<span class="address-item__phone">03 27 85 06 47</span>
<address>81 Av. des Deux Vallées <br/>59554 Raillencourt-Sainte-Olle</address>
</li>
<li class="address-item">
<span class="address-item__title">Wignehies</span>
<span class="address-item__phone">03 27 57 26 12</span>
<address>8 route Féron <br/>59212 Wigneghies</address>
</li> </li>
</ul> </ul>
</section> </section>

62
sass/style.scss
View File

@ -2,6 +2,7 @@ $page-width: 1280px;
$color-black: #231f20; $color-black: #231f20;
$color-white: #fafafa; $color-white: #fafafa;
$color-red: #d7191e; $color-red: #d7191e;
$color-blue: #0056b3;
*, *,
::before, ::before,
@ -239,29 +240,78 @@ body {
} }
.section-contact { .section-contact {
margin: 48px 0; padding: 40px 20px;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 40px 0;
&__title { &__title {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 8px;
text-align: center;
margin-bottom: 40px;
@media only screen and (min-width: 768px) {
flex-direction: row;
gap: 48px; gap: 48px;
} }
h2 {
font-size: 2.5em;
color: #333;
}
a {
font-size: 1.2em;
color: $color-blue;
text-decoration: none;
font-weight: bold;
}
}
&__addresses { &__addresses {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px; gap: 30px;
margin-block: 32px; margin-block-start: 32px;
} }
.address-item { .address-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 14px;
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
&:hover {
transform: translateY(-10px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
&__title { &__title {
font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 6px; font-size: 1.5em;
color: #333;
}
&__phone {
font-size: 1.2em;
color: $color-blue;
font-weight: bold;
flex-grow: 1;
}
address {
font-style: normal;
color: #666;
justify-self: end;
} }
} }
} }