seperate text for slide picture

This commit is contained in:
ogerly 2022-06-21 11:59:36 +02:00
parent f33cd9ed89
commit b5faaabd49
4 changed files with 38 additions and 19 deletions

View File

@ -1,9 +1,18 @@
<template> <template>
<div> <div>
<b-carousel :interval="13000"> <b-carousel :interval="13000">
<b-carousel-slide img-src="/img/template/Foto_01_2400_small.jpg"></b-carousel-slide> <b-carousel-slide img-src="/img/template/Foto_01_2400_small.jpg">
<b-carousel-slide img-src="/img/template/Foto_02_2400_small.jpg"></b-carousel-slide> <div class="caption-first-text">{{ $t('auth.left.gratitude') }}</div>
<b-carousel-slide img-src="/img/template/Foto_03_2400_small.jpg"></b-carousel-slide> <div class="caption-second-text">{{ $t('auth.left.oneGratitude') }}</div>
</b-carousel-slide>
<b-carousel-slide img-src="/img/template/Foto_02_2400_small.jpg">
<div class="caption-first-text">{{ $t('auth.left.dignity') }}</div>
<div class="caption-second-text">{{ $t('auth.left.oneDignity') }}</div>
</b-carousel-slide>
<b-carousel-slide img-src="/img/template/Foto_03_2400_small.jpg">
<div class="caption-first-text">{{ $t('auth.left.donation') }}</div>
<div class="caption-second-text">{{ $t('auth.left.oneDonation') }}</div>
</b-carousel-slide>
</b-carousel> </b-carousel>
</div> </div>
</template> </template>
@ -15,6 +24,21 @@ export default {
</script> </script>
<style> <style>
.carousel-caption {
color: #fff;
top: 317px;
text-shadow: 2px 2px 8px #000000;
font-size: xx-large;
}
.caption-first-text {
font-size: 150%;
}
.caption-second-text {
font-size: 80%;
}
.carousel { .carousel {
position: relative; position: relative;
height: 110%; height: 110%;

View File

@ -13,9 +13,6 @@
<auth-carousel class="carousel" /> <auth-carousel class="carousel" />
</div> </div>
<div class="bg-txt-box position-relative d-none d-lg-block text-center align-self-center"> <div class="bg-txt-box position-relative d-none d-lg-block text-center align-self-center">
<div class="h0 text-white">{{ $t('auth.left.gratitude') }}</div>
<div class="h1 text-white">{{ $t('auth.left.newCurrency') }}</div>
<div class="h2 text-white">{{ $t('auth.left.oneAnotherNature') }}</div>
<b-link :href="`https://gradido.net/${$i18n.locale}`" target="_blank"> <b-link :href="`https://gradido.net/${$i18n.locale}`" target="_blank">
<b-button variant="gradido"> <b-button variant="gradido">
{{ $t('auth.left.learnMore') }} {{ $t('auth.left.learnMore') }}
@ -150,20 +147,10 @@ export default {
} }
.bg-txt-box { .bg-txt-box {
margin-top: 317px; margin-top: 520px;
text-shadow: 2px 2px 8px #000000; text-shadow: 2px 2px 8px #000000;
max-width: 733px; max-width: 733px;
} }
.bg-txt-box > .h0 {
font-size: 4em;
text-shadow: -2px -2px -8px #e4a907;
}
.bg-txt-box .h1,
.bg-txt-box .h2 {
font-size: 1.5em;
text-shadow: -2px -2px -8px #e4a907;
}
.bg-img { .bg-img {
border-radius: 0% 50% 70% 0% / 50% 70% 70% 50%; border-radius: 0% 50% 70% 0% / 50% 70% 70% 50%;

View File

@ -7,11 +7,15 @@
"auth": { "auth": {
"left": { "left": {
"gratitude": "Dankbarkeit", "gratitude": "Dankbarkeit",
"dignity": "Würde",
"donation": "Gabe",
"hasAccount": "Du hast schon einen Account?", "hasAccount": "Du hast schon einen Account?",
"hereLogin": "Hier Anmelden", "hereLogin": "Hier Anmelden",
"learnMore": "Erfahre mehr …", "learnMore": "Erfahre mehr …",
"newCurrency": "Die neue Währung", "newCurrency": "Die neue Währung",
"oneAnotherNature": "FÜR EINANDER, FÜR ALLE, FÜR DIE NATUR" "oneGratitude": "Die neue Währung. Für einander, für alle Menschen, für die Natur.",
"oneDignity": "Wir Schenken einander und Danken mit Gradido.",
"oneDonation": "Du bist ein Geschenk für die Gemeinschaft. 1000 Dank, weil du bei uns bist."
}, },
"navbar": { "navbar": {
"aboutGradido": "Über Gradido" "aboutGradido": "Über Gradido"

View File

@ -7,11 +7,15 @@
"auth": { "auth": {
"left": { "left": {
"gratitude": "Gratitude", "gratitude": "Gratitude",
"dignity": "Dignity",
"donation": "Donation",
"hasAccount": "You already have an account?", "hasAccount": "You already have an account?",
"hereLogin": "Log in here", "hereLogin": "Log in here",
"learnMore": "Learn more …", "learnMore": "Learn more …",
"newCurrency": "The new currency", "newCurrency": "The new currency",
"oneAnotherNature": "FOR EACH OTHER, FOR ALL, FOR NATURE" "oneGratitude": "The new currency. For each other, for all people, for nature.",
"oneDignity": "We give gifts to each other and give thanks with Gradido. ",
"oneDonation": "You are a gift for the community. 1000 thanks because you are with us."
}, },
"navbar": { "navbar": {
"aboutGradido": "About Gradido" "aboutGradido": "About Gradido"