right, left, carousell content box position

This commit is contained in:
ogerly 2022-05-06 08:37:07 +02:00
parent cfcbcc96a7
commit 640fc2858c
3 changed files with 40 additions and 31 deletions

View File

@ -39,24 +39,23 @@ export default {
<style>
.carousel {
position: relative;
height: 100%;
height: 120%;
top: -138px;
bottom: -369px;
}
.carousel-inner {
background-color: brown;
height: 100%;
border-radius: 0 94% 63% 0/0 78% 54% 0;
}
@media screen and (max-width: 1398px) {
.carousel-item {
width: 116%;
top: 101px;
}
}
@media screen and (max-width: 1200px) {
.carousel-item {
width: 129%;
top: 118px;
left: -75px;
}
}
</style>

View File

@ -55,26 +55,28 @@ export default {
bottom: 65px;
width: 100%;
}
/* logo */
.mobil-start-box #img0 {
/* position: absolute;*/
position: absolute;
z-index: 1000;
/* width: 33%; */
min-width: 200px;
max-width: 280px;
}
.mobil-start-box #img1 {
/* position: absolute;*/
position: absolute;
overflow: hidden;
height: 100%;
/* width: 100%;*/
width: 100%;
z-index: 10;
}
.mobil-start-box #img2 {
/*position: absolute;*/
/*width: 49%;*/
height: 14%;
z-index: 1;
position: absolute;
min-width: 220px;
max-width: 300px;
height: auto;
z-index: 100;
}
.mobil-start-box #img3 {
width: 115%;

View File

@ -4,9 +4,9 @@
<div>
<auth-header class="auth-header" />
<div class="left-content-box">
<div class="bg-img-box d-none d-lg-block">
<carousel class="d-block w-100 h-100" />
<div class="left-content-box d-none d-lg-block">
<div class="bg-img-box">
<carousel class="carousel" />
</div>
<div class="w-100 bg-txt-box d-none d-lg-block text-center align-self-center">
<div class="h0">{{ $t('auth.left.gratitude') }}</div>
@ -112,13 +112,32 @@ export default {
}
</script>
<style lang="scss">
/* left */
.left-content-box {
position: fixed;
max-width: 484px;
background-color: aquamarine;
width: 40%;
/* background-color: aquamarine; */
top: 0px;
bottom: 0px;
}
.bg-img-box {
/* background-color: red; */
position: absolute;
top: 0px;
bottom: 0px;
/* margin-top: -308px;
margin-left: -118px;
position: absolute;
top: 33px;
bottom: -228px;
min-width: 86%;
max-width: 800px;
/* background-color: bisque; */
/* border-radius: 0% 48% 74% 0%/59% 70% 73% 47%; */
}
/* right */
.right-content-box {
max-width: 640px;
}
@ -136,17 +155,6 @@ export default {
z-index: 999;
}
.bg-img-box {
margin-top: -308px;
margin-left: -118px;
position: absolute;
top: 33px;
bottom: -228px;
min-width: 86%;
max-width: 800px;
/* background-color: bisque; */
/* border-radius: 0% 48% 74% 0%/59% 70% 73% 47%; */
}
.bg-txt-box {
position: relative;
margin-top: 317px;