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>
<div>
<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_02_2400_small.jpg"></b-carousel-slide>
<b-carousel-slide img-src="/img/template/Foto_03_2400_small.jpg"></b-carousel-slide>
<b-carousel-slide img-src="/img/template/Foto_01_2400_small.jpg">
<div class="caption-first-text">{{ $t('auth.left.gratitude') }}</div>
<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>
</div>
</template>
@ -15,6 +24,21 @@ export default {
</script>
<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 {
position: relative;
height: 110%;

View File

@ -13,9 +13,6 @@
<auth-carousel class="carousel" />
</div>
<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-button variant="gradido">
{{ $t('auth.left.learnMore') }}
@ -150,20 +147,10 @@ export default {
}
.bg-txt-box {
margin-top: 317px;
margin-top: 520px;
text-shadow: 2px 2px 8px #000000;
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 {
border-radius: 0% 50% 70% 0% / 50% 70% 70% 50%;

View File

@ -7,11 +7,15 @@
"auth": {
"left": {
"gratitude": "Dankbarkeit",
"dignity": "Würde",
"donation": "Gabe",
"hasAccount": "Du hast schon einen Account?",
"hereLogin": "Hier Anmelden",
"learnMore": "Erfahre mehr …",
"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": {
"aboutGradido": "Über Gradido"

View File

@ -7,11 +7,15 @@
"auth": {
"left": {
"gratitude": "Gratitude",
"dignity": "Dignity",
"donation": "Donation",
"hasAccount": "You already have an account?",
"hereLogin": "Log in here",
"learnMore": "Learn more …",
"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": {
"aboutGradido": "About Gradido"