fix: textes justifiés, images + responsives

This commit is contained in:
Emi Boucly 2025-06-11 00:53:15 +02:00
parent 7cc734afc1
commit 9ed0fe840c
4 changed files with 50 additions and 10 deletions

View file

@ -14,7 +14,7 @@
<p class="marginauto">
{{ $t('alternance.body2') }}
</p>
<img class="marginauto" src="../components/images/impactiv.svg" alt="impactiv-logo" width="300">
<img class="marginauto" src="../components/images/impactiv.svg" alt="impactiv-logo" >
</div>
<br>
<h2>{{ $t('alternance.what') }}</h2>
@ -23,7 +23,7 @@
<p>
{{ $t('alternance.what1') }}
</p>
<img class="marginauto" src="../components/images/bt4.png" alt="bt4" width="300">
<img class="marginauto" src="../components/images/bt4.png" alt="bt4" >
</div>
<p>
{{ $t('alternance.what2') }}
@ -45,7 +45,7 @@
{{ $t('alternance.learn2') }}
</p>
<div class="grid">
<img class="marginauto" src="../components/images/debug.png" alt="debug-screen" width="300">
<img class="marginauto" src="../components/images/debug.png" alt="debug-screen" >
<p class="marginauto">
{{ $t('alternance.learn3') }}
</p>
@ -57,7 +57,7 @@
<p>
{{ $t('alternance.learn5') }}
</p>
<img class="marginauto" src="../components/images/mender.png" alt="mender-logo" width="400">
<img class="marginauto" src="../components/images/mender.png" alt="mender-logo">
</div>
<p>
{{ $t('alternance.learn6') }}
@ -78,5 +78,15 @@
</template>
<style scoped lang="scss">
p {
text-align: justify;
}
img {
width: 40dvw;
}
@media screen and (min-width: 900px) {
img {
max-width: 20dvw;
}
}
</style>

View file

@ -43,5 +43,15 @@
</template>
<style scoped lang="scss">
p {
text-align: justify;
}
img {
width: 40dvw;
}
@media screen and (min-width: 900px) {
img {
max-width: 30dvw;
}
}
</style>

View file

@ -6,7 +6,7 @@
<div class="margin">
<h2>{{ $t('sae301.title') }}</h2>
<div class="grid">
<img style="grid-column: 2; grid-row: 1;" src="../components/images/sae301-scheme.jpg" alt="file_scheme" width="500">
<img class="marginauto" style="grid-column: 2; grid-row: 1;" src="../components/images/sae301-scheme.jpg" alt="file_scheme" width="500">
<p class="marginauto" style="grid-column: 1; grid-row: 1;">
{{ $t('sae301.body1') }}
</p>
@ -34,7 +34,7 @@
<div>
<h2>{{ $t('sae301.feelingstitle') }}</h2>
<div>
{{ $t('sae301.feelings') }}
<p>{{ $t('sae301.feelings') }}</p>
</div>
</div>
</div>
@ -43,5 +43,15 @@
</template>
<style scoped lang="scss">
p {
text-align: justify;
}
img {
width: 40dvw;
}
@media screen and (min-width: 900px) {
img {
max-width: 30dvw;
}
}
</style>

View file

@ -43,5 +43,15 @@
</template>
<style scoped lang="scss">
p {
text-align: justify;
}
img {
width: 40dvw;
}
@media screen and (min-width: 900px) {
img {
max-width: 30dvw;
}
}
</style>