Commit 0eed360a authored by Athanasios's avatar Athanasios
Browse files

Optimize card appearance

parent c947b8b0
...@@ -11,6 +11,8 @@ html(lang="de") ...@@ -11,6 +11,8 @@ html(lang="de")
.title-container { .title-container {
position: relative; position: relative;
color: white; color: white;
height: 60%;
overflow: hidden;
} }
.card-title-bottom-left { .card-title-bottom-left {
position: absolute; position: absolute;
...@@ -23,8 +25,19 @@ html(lang="de") ...@@ -23,8 +25,19 @@ html(lang="de")
padding: 5px padding: 5px
} }
.card-img-top { .card-img-top {
height: 15vw; height: 100%;
object-fit: cover; position: absolute;
top: 0;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
.card-img-bg {
background-size: cover;
filter: blur(30px);
width: 100%;
height: 100%;
} }
body body
div(class="container") div(class="container")
...@@ -52,6 +65,7 @@ html(lang="de") ...@@ -52,6 +65,7 @@ html(lang="de")
div(class="card-deck py-4 col-sm") div(class="card-deck py-4 col-sm")
div(class="card width_18" style="transform: rotate(0);") div(class="card width_18" style="transform: rotate(0);")
div(class="title-container") div(class="title-container")
div(class="card-img-bg" style=`background-image: url(${item.logo});`)
h5(class="card-title-bottom-left") #{item.name} h5(class="card-title-bottom-left") #{item.name}
img(class="card-img-top", src=item.logo) img(class="card-img-top", src=item.logo)
div(class="card-body") div(class="card-body")
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment