Skip to content

Commit

Permalink
responsive : page welcome OK
Browse files Browse the repository at this point in the history
  • Loading branch information
@NicolasReitin
NicolasReitin committed Jun 30, 2024
1 parent 97efc3b commit b69098c
Show file tree
Hide file tree
Showing 10 changed files with 99 additions and 29 deletions.
6 changes: 3 additions & 3 deletions src/js/Components/ApiReseaux.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ export default function ApiReseaux() {
<div className="reseaux">
<div className='w-[350px] bloc-instagram'>
<div>
<a className='flex justify-center' target='_blank' rel="stylesheet" href="https://www.instagram.com/caenvolleyball/">
<a className='flex justify-center' target='_blank' rel="stylesheet" href="https://instagram.com/caenvolleyball/">
<img className='h-16 w-[55%] mb-4' src="/assets/icones/logo-instagram.png" alt="logo instagram" />
</a>
</div>
<div className="elfsight-app-0ee2e7e5-23f2-4149-bb33-5b55f249b820" data-elfsight-app-lazy></div>
</div>
<div className='w-[350px] bloc-facebook'>
<div>
<a className='flex justify-center' target='_blank' rel="stylesheet" href="https://www.facebook.com/cvbofficiel/">
<a className='flex justify-center' target='_blank' rel="stylesheet" href="https://facebook.com/cvbofficiel/">
<img className='h-16 mb-4' src="/assets/icones/logo-facebook.png" alt="logo facebook" />
</a>
</div>
<div className="fb-page" data-href="https://www.facebook.com/cvbofficiel" data-tabs="timeline" data-width="350" data-height="600" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/cvbofficiel" className="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/cvbofficiel">Caen Volley Ball</a></blockquote></div>
<div className="fb-page" data-href="https://facebook.com/cvbofficiel" data-tabs="timeline" data-width="350" data-height="600" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://facebook.com/cvbofficiel" className="fb-xfbml-parse-ignore"><a href="https://facebook.com/cvbofficiel">Caen Volley Ball</a></blockquote></div>
</div>
</div>
</>
Expand Down
6 changes: 3 additions & 3 deletions src/js/Components/Reseaux.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ export default function Reseaux() {
<>
<div className="reseaux">
<h2 className=''>SUIVEZ-NOUS SUR LES RESEAUX SOCIAUX</h2>
<div className='flex justify-center gap-36 mb-24'>
<a href="https://www.facebook.com/cvbofficiel" target='_blank'>
<div className='flex justify-center gap-16 lg:gap-36 mb-12 lg:mb-24'>
<a href="https://facebook.com/cvbofficiel" target='_blank'>
<img src="assets/icones/big-facebook.png" alt="facebook club" />
</a>
<a href="https://www.instagram.com/caenvolleyball/" target='_blank'>
<a href="https://instagram.com/caenvolleyball/" target='_blank'>
<img src="assets/icones/big-instagram.png" alt="Instagram Club" />
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/js/Components/dashboard/Default/Default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,14 @@ export default function Default() {
<div className="liens">
<a
target='_blank'
href="https://www.ffvbbeach.org/ffvbapp/weblic/acces_licences.php"
href="https://ffvbbeach.org/ffvbapp/weblic/acces_licences.php"
className="button-raccourcis ffvolley"
>
Accès au site de la FF volley
</a>
<a
target='_blank'
href="https://www.ffvbbeach.org/ffvbapp/resu/planning_club_class.php?cnclub=0149419&x=10&y=10"
href="https://ffvbbeach.org/ffvbapp/resu/planning_club_class.php?cnclub=0149419&x=10&y=10"
className="button-raccourcis ffvolley"
>
Accès aux classements
Expand Down
16 changes: 8 additions & 8 deletions src/js/Components/footer/PoliciesMentions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ import React from 'react'
export default function PoliciesMentions() {
return (
<>
<div className='mt-16 flex justify-center gap-48'>
<ul className='mentions flex text-white gap-8'>
<hr className='lg:hidden mt-8 mb-8'/>
<div className='lg:mt-16 lg:flex lg:justify-center lg:gap-48'>
<ul className='mentions flex justify-center text-white mb-4 lg:mb-0 gap-16 lg:gap-8'>
<li><a href="">Mentions légales</a></li>
<li><a href="">Politique de cookies</a></li>
</ul>

<div className='reseaux-sociaux flex gap-8'>
<a target='_blank' rel="stylesheet" href="https://www.instagram.com/caenvolleyball/">
<div className='reseaux-sociaux flex justify-center gap-8 mb-4 lg:mb-0'>
<a target='_blank' rel="stylesheet" href="https://instagram.com/caenvolleyball/">
<img className='' src="/assets/icones/instagram.png" alt="instagram" />
</a>
<a target='_blank' rel="stylesheet" href="https://www.facebook.com/cvbofficiel/">
<a target='_blank' rel="stylesheet" href="https://facebook.com/cvbofficiel/">
<img className='' src="/assets/icones/facebook.png" alt="facebook" />
</a>
</div>
<div className="sign flex gap-8">
<div className="sign flex flex-col lg:flex-row items-center justify-center gap-2 lg:gap-8">
<p className='text-white'>2024 © Tous droits réservés. Caen Volley Ball</p>
<p className='text-white'><a href="https://www.nicolas-reitin.fr" target='_blank'>Site by NR</a></p>
<p className='text-white'><a href="https://nicolas-reitin.fr" target='_blank'>Site by NR</a></p>
</div>
</div>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/js/Components/header/IntroBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ export default function IntroBar() {
<div className="introBar flex justify-between">
<p className='text-white mt-2'><i>Vivre le plaisir et la performance</i></p>
<div className='flex gap-4 mb-1 mt-1'>
<a target='_blank' rel="stylesheet" href="https://www.instagram.com/caenvolleyball/">
<a target='_blank' rel="stylesheet" href="https://instagram.com/caenvolleyball/">
<img src="/assets/icones/instagram.png" alt="instagram" />
</a>
<a target='_blank' rel="stylesheet" href="https://www.facebook.com/cvbofficiel/">
<a target='_blank' rel="stylesheet" href="https://facebook.com/cvbofficiel/">
<img src="/assets/icones/facebook.png" alt="facebook" />
</a>
</div>
Expand Down
3 changes: 1 addition & 2 deletions src/js/Layouts/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,11 @@ export default function Footer() {
</svg>
</div>
<div className="footer">
<div className='flex justify-center gap-64'>
<div className='flex flex-col lg:flex-row lg:justify-center gap-4 lg:gap-64'>
<LogoClub
filePath = "/assets/images/logo-cvb-white.png"
/>
<InfosPratiques />

</div>
<PoliciesMentions />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/js/Pages/Boutique/Boutique.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function Boutique( {auth}) {
<div className="riva-floc">
<h2>RIVA FLOC</h2>
<p>
<a href="https://www.boutique-rivasport.fr/brand/caen-volley-ball/">Commander via ce lien</a>
<a href="https://boutique-rivasport.fr/brand/caen-volley-ball/">Commander via ce lien</a>
</p>
<img src="/assets/images/boutique/rivasport.png" alt="boutique rivasport" />
</div>
Expand Down
28 changes: 28 additions & 0 deletions src/sass/caroussel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,32 @@ $animationSpeed: 50s;
max-width: 200px;
object-fit: contain; /* Utilisez 'contain' pour que l'image soit entièrement visible à l'intérieur de son conteneur sans déformation */
}
}

//________________________________________________________________
// ______________________ Media queries __________________________
//________________________________________________________________

/* Media queries pour appareils mobiles */
@media (max-width: 480px) {
.slider {
height: 100px;
&::before, &::after {
height: 0px;
width: 0px;
}

.slide-track {
gap: 20px;
width: calc(250px * var(--translation-multiplier));
display: flex;
justify-content: center;
align-items: center;
}
.slide img{
margin-top: 0px;
max-height: 95px;
max-width: 100px;
}
}
}
39 changes: 35 additions & 4 deletions src/sass/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ body{
//________________________________________________________________

/*
via https://www.shapedivider.app/
via https://shapedivider.app/
*/
.custom-shape-divider-bottom-1709894291 {
bottom: 0;
Expand Down Expand Up @@ -385,15 +385,13 @@ body{
/* Media queries pour appareils mobiles */
@media (max-width: 1024px) {
// ----------------- Menu -----------------

.burger-menu {
display: flex !important; /* Utilisez !important pour forcer le display à flex */
}

.menu-desktop {
display: none !important; /* Utilisez !important pour forcer le display à none */
}

.logoClub{
display: none;
}
Expand All @@ -420,5 +418,38 @@ body{
}
}
}
}
}

@media (max-width: 480px) {
// _____________________________ Footer ____________________________
.footer{
width: 100%;
padding-bottom: 20px;
.logoClub{
width: 200px;
}
.infos-pratiques{
h2{
font-size: $sizeTitleMobile;
}
p{
font-size: 16px;
text-align: center;
}
}
.mentions{
li {
font-size: 12px;
}
}
.sign{
p{
font-size: 12px;
}
a {
font-size: 12px;
}
}
}
}

20 changes: 16 additions & 4 deletions src/sass/welcome.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,8 +263,6 @@
height: 500px;
margin: 20px auto;
width: 100%;
margin: 20px auto;

h2{
position: relative;
margin: 10% 0 5% 2%;
Expand Down Expand Up @@ -361,7 +359,7 @@
.reseaux{
margin: 0 auto;
width: 80%;
margin-top: 15%;
margin-top: 15%;
h2{
position: relative;
margin: $marginTitle;
Expand All @@ -371,11 +369,25 @@
font-weight: 900;
}
img{
width: 100%;
width: 80%;
margin-top: 10%;
}
.button-post{
font-size: 16px;
}
}

// _____________________________ Partenaires ____________________________
.partenaires::after {
top: -10%; /* Commence à 60% de la hauteur */
height: 200%;
}
.partenaires{
height: 220px;
h2{
margin: 0 0 5% 2%;
font-size: $sizeTitleMobile;
}
}

}

0 comments on commit b69098c

Please sign in to comment.