pages comprendre and rejoindre reponsive mobile

This commit is contained in:
Yves Gatesoupe 2020-07-17 15:57:08 +02:00
parent b59f4b55de
commit 1e9b6f6d5f
8 changed files with 219 additions and 144 deletions

View File

@ -23,30 +23,32 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### Au démarrage ### Au démarrage
</summary> </summary>
<table> <div class="table-wrapper">
<thead> <table>
<tr> <thead>
<th></th> <tr>
<th>Entrepreneur salarié en CAE</th> <th></th>
<th>Auto-entrepreneur</th> <th>Entrepreneur salarié en CAE</th>
<th>Gérant société</th> <th>Auto-entrepreneur</th>
</tr> <th>Gérant société</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>Création du statut</td> <tr>
<td>Simple</td> <td>Création du statut</td>
<td>Relativement simple</td> <td>Simple</td>
<td>Mise en place complexe</td> <td>Relativement simple</td>
</tr> <td>Mise en place complexe</td>
<tr> </tr>
<td>Aide à la création</td> <tr>
<td>ARE* pour les demandeurs d'emploi</td> <td>Aide à la création</td>
<td>ACRE* pour les demandeurs d'emploi</td> <td>ARE* pour les demandeurs d'emploi</td>
<td>ACRE* pour les demandeurs d'emploi</td> <td>ACRE* pour les demandeurs d'emploi</td>
</tr> <td>ACRE* pour les demandeurs d'emploi</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
*ARE : Aide au Retour à lEmploi *ARE : Aide au Retour à lEmploi
@ -58,48 +60,50 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### Votre activité ### Votre activité
</summary> </summary>
<table> <div class="table-wrapper">
<thead> <table>
<tr> <thead>
<th></th> <tr>
<th>Entrepreneur salarié en CAE</th> <th></th>
<th>Auto-entrepreneur</th> <th>Entrepreneur salarié en CAE</th>
<th>Gérant société</th> <th>Auto-entrepreneur</th>
</tr> <th>Gérant société</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>Assurance de l'activité professionnelle</td> <tr>
<td>Assurance RCPro* spécifique à votre activité</td> <td>Assurance de l'activité professionnelle</td>
<td>À votre charge</td> <td>Assurance RCPro* spécifique à votre activité</td>
<td>À votre charge</td> <td>À votre charge</td>
</tr> <td>À votre charge</td>
<tr> </tr>
<td>Suivi de l'activité</td> <tr>
<td>Une personne référente vous accompagne dans votre projet</td> <td>Suivi de l'activité</td>
<td>Accompagnement à votre charge</td> <td>Une personne référente vous accompagne dans votre projet</td>
<td>Accompagnement à votre charge</td> <td>Accompagnement à votre charge</td>
</tr> <td>Accompagnement à votre charge</td>
<tr> </tr>
<td>Pouvoir de décision dans la structure</td> <tr>
<td>Chaque coopérateur possède un pouvoir égal</td> <td>Pouvoir de décision dans la structure</td>
<td>Vous êtes seul décisionnaire</td> <td>Chaque coopérateur possède un pouvoir égal</td>
<td>Vous êtes seul décisionnaire</td> <td>Vous êtes seul décisionnaire</td>
</tr> <td>Vous êtes seul décisionnaire</td>
<tr> </tr>
<td>Agrément CIR*</td> <tr>
<td>Une demande d'agrément est en cours pour Astrolabe</td> <td>Agrément CIR*</td>
<td>Vous devez en faire la demande</td> <td>Une demande d'agrément est en cours pour Astrolabe</td>
<td>Vous devez en faire la demande</td> <td>Vous devez en faire la demande</td>
</tr> <td>Vous devez en faire la demande</td>
<tr> </tr>
<td>Référencement client / Prospection</td> <tr>
<td>Vous démarchez directement vos clients et profitez du référencement des coopérateurs auprès de clients grand compte, vous profitez du réseau de coopérateurs et dappels doffres auprès des partenaires</td> <td>Référencement client / Prospection</td>
<td>Vous démarchez directement vos clients</td> <td>Vous démarchez directement vos clients et profitez du référencement des coopérateurs auprès de clients grand compte, vous profitez du réseau de coopérateurs et dappels doffres auprès des partenaires</td>
<td>Vous démarchez directement vos clients</td> <td>Vous démarchez directement vos clients</td>
</tr> <td>Vous démarchez directement vos clients</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
*RCPro : Responsabilité Civile Professionnelle *RCPro : Responsabilité Civile Professionnelle
@ -111,36 +115,38 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### Vos obligations ### Vos obligations
</summary> </summary>
<table> <div class="table-wrapper">
<thead> <table>
<tr> <thead>
<th></th> <tr>
<th>Entrepreneur salarié en CAE</th> <th></th>
<th>Auto-entrepreneur</th> <th>Entrepreneur salarié en CAE</th>
<th>Gérant société</th> <th>Auto-entrepreneur</th>
</tr> <th>Gérant société</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>Régime social</td> <tr>
<td>Couverture sociale auprès de la sécurité sociale, cotisation au régime général des retraites</td> <td>Régime social</td>
<td>Vous êtes redevable de cotisations et contributions à différents organismes de prestations sociales</td> <td>Couverture sociale auprès de la sécurité sociale, cotisation au régime général des retraites</td>
<td>Vous êtes redevable de cotisations et contributions à différents organismes de prestations sociales</td> <td>Vous êtes redevable de cotisations et contributions à différents organismes de prestations sociales</td>
</tr> <td>Vous êtes redevable de cotisations et contributions à différents organismes de prestations sociales</td>
<tr> </tr>
<td>Obligation comptables</td> <tr>
<td>Votre activité comptable est prise en charge</td> <td>Obligation comptables</td>
<td>Relativement peu contraignant</td> <td>Votre activité comptable est prise en charge</td>
<td>Nécessite une expertise comptable</td> <td>Relativement peu contraignant</td>
</tr> <td>Nécessite une expertise comptable</td>
<tr> </tr>
<td>Obligation fiscales</td> <tr>
<td>Impôt sur le revenu</td> <td>Obligation fiscales</td>
<td>Chiffre d'affaire plafonné<br>Régime simplifié</td> <td>Impôt sur le revenu</td>
<td>Impôt sur les sociétés</td> <td>Chiffre d'affaire plafonné<br>Régime simplifié</td>
</tr> <td>Impôt sur les sociétés</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</details> </details>
<details> <details>
@ -148,37 +154,39 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### La prévoyance ### La prévoyance
</summary> </summary>
<table> <div class="table-wrapper">
<thead> <table>
<tr> <thead>
<th></th> <tr>
<th>Entrepreneur salarié en CAE</th> <th></th>
<th>Auto-entrepreneur</th> <th>Entrepreneur salarié en CAE</th>
<th>Gérant société</th> <th>Auto-entrepreneur</th>
</tr> <th>Gérant société</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>Assurance chômage</td> <tr>
<td>Maintient de lARE* pour les demandeurs demploi si aucun salaire perçu. <td>Assurance chômage</td>
Votre activité ouvre des droits à lARE*</td> <td>Maintient de lARE* pour les demandeurs demploi si aucun salaire perçu.
<td>Votre activité n'ouvre pas de nouveaux droits ARE*</td> Votre activité ouvre des droits à lARE*</td>
<td>Votre activité n'ouvre pas de nouveaux droits ARE*</td> <td>Votre activité n'ouvre pas de nouveaux droits ARE*</td>
</tr> <td>Votre activité n'ouvre pas de nouveaux droits ARE*</td>
<tr> </tr>
<td>Retraite</td> <tr>
<td>Régime général</td> <td>Retraite</td>
<td>Cotisation et droits réduits</td> <td>Régime général</td>
<td>Similaire au régime général</td> <td>Cotisation et droits réduits</td>
</tr> <td>Similaire au régime général</td>
<tr> </tr>
<td>Couverture santé</td> <tr>
<td>Sécurité sociale + mutuelle groupe + prévoyance groupe</td> <td>Couverture santé</td>
<td>Sécurité sociale (RSI*) + mutuelle et prévoyance optionnelle</td> <td>Sécurité sociale + mutuelle groupe + prévoyance groupe</td>
<td>Sécurité sociale (RSI*) + mutuelle et prévoyance optionnelle</td> <td>Sécurité sociale (RSI*) + mutuelle et prévoyance optionnelle</td>
</tr> <td>Sécurité sociale (RSI*) + mutuelle et prévoyance optionnelle</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
*ARE: Aide au Retour à l'Emploi *ARE: Aide au Retour à l'Emploi

View File

@ -34,13 +34,14 @@ permalink: '/nous-rejoindre/index.html'
<img src="/images/sailor-accomp.svg" alt="Entrepreneur en contrat CAPE" style="width: 9rem;"> <img src="/images/sailor-accomp.svg" alt="Entrepreneur en contrat CAPE" style="width: 9rem;">
Au bout dun certain temps votre activité devient prérenne. Au bout dun certain temps votre activité devient prérenne. Deux options s'offrent à vous :
</article> </article>
</section> </section>
<section class="process-cae split"> <section class="process-cae split">
<article class="process-cae__block"> <article class="process-cae__block">
<img src="/images/arrow-left.svg" alt="flèche gauche"> <img class="hide-mobile" src="/images/arrow-left.svg" alt="flèche gauche">
<p class="hide-desktop" style="font-weight: 600; align-self: center">- SOIT -</p>
Vous intégrez la coopérative en tant qu'Entrepreneur salarié, bienvenue parmi nous ! Vous intégrez la coopérative en tant qu'Entrepreneur salarié, bienvenue parmi nous !
@ -66,10 +67,11 @@ permalink: '/nous-rejoindre/index.html'
</article> </article>
<article class="process-cae__block"> <article class="process-cae__block">
<img src="/images/arrow-right.svg" alt="flèche droite"> <img class="hide-mobile" src="/images/arrow-right.svg" alt="flèche droite">
<p class="hide-desktop" style="font-weight: 600; align-self: center">- SOIT -</p>
Vous créez votre propre entreprise, félicitations ! Vous créez votre propre entreprise, félicitations !
<img src="/images/small-boat.svg" alt="Petit bateau à voile" style="width: 8rem; margin-top: 4rem; margin-left: 18rem;"> <img class="small-boat" src="/images/small-boat.svg" alt="Petit bateau à voile">
</article> </article>
</section> </section>

View File

@ -128,14 +128,12 @@ legend {
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.home .form-container { .form-container {
svg { svg {
width: 70rem; width: 70rem;
overflow: hidden; overflow: hidden;
} }
}
.form-container {
.contact-heading { .contact-heading {
margin: 2rem 0; margin: 2rem 0;
} }

View File

@ -34,3 +34,9 @@
} }
} }
} }
@media (max-width: 575.98px) {
.nav {
margin-top: 1rem;
}
}

View File

@ -166,6 +166,16 @@
} }
} }
.table-wrapper {
~ p {
font-size: .875rem;
&:last-child {
margin-bottom: 1.5rem;
}
}
}
table { table {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -208,14 +218,6 @@
background-color: var(--color-light-gray); background-color: var(--color-light-gray);
} }
} }
~ p {
font-size: .875rem;
&:last-child {
margin-bottom: 1.5rem;
}
}
} }
.process-cae { .process-cae {
@ -295,10 +297,15 @@
} }
img { img {
// width: 18rem;
align-self: center; align-self: center;
margin: 0 auto; margin: 0 auto;
} }
.small-boat {
width: 8rem;
margin-top: 4rem;
margin-left: 18rem;
}
} }
} }
} }
@ -322,3 +329,45 @@
} }
} }
} }
@media (max-width: 575.98px) {
.post {
&__body {
h1 {
margin: 4rem 0;
font-size: 1.75rem;
}
.split-content {
display: block;
}
.table-wrapper {
overflow-y: auto;
}
table {
min-width: 48rem;
}
.process-cae{
&.split {
display: block;
.process-cae__block:last-child {
align-items: flex-start;
}
}
&__block {
.small-boat {
margin-left: auto;
margin-right: auto;
}
}
}
}
}
}

View File

@ -30,4 +30,4 @@
margin: 0 auto; margin: 0 auto;
} }
} }
} }

View File

@ -75,3 +75,4 @@ img {
@import 'components/sponsor'; @import 'components/sponsor';
@import 'components/skip-link'; @import 'components/skip-link';
@import 'components/video-player'; @import 'components/video-player';
@import 'utilities/responsive';

View File

@ -0,0 +1,11 @@
.hide-desktop {
@media (min-width: 576px) {
display: none;
}
}
.hide-mobile {
@media (max-width: 575.98px) {
display: none;
}
}