You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.8 KiB
Svelte
127 lines
2.8 KiB
Svelte
<script></script>
|
|
|
|
<div class="container">
|
|
<div class="highlight eutanasia">
|
|
<picture>
|
|
<source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
|
|
<source srcset="high-eutanasia.jpg">
|
|
<img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
|
|
</picture>
|
|
<div class="card">
|
|
<div class="text">
|
|
<h2>Ley de Eutanasia</h2>
|
|
<h3>Resuelve tus dudas</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight testamento-vital">
|
|
<picture>
|
|
<source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
|
|
<source srcset="high-eutanasia.jpg">
|
|
<img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
|
|
</picture>
|
|
<div class="card">
|
|
<div class="text">
|
|
<h2>Testamento vital</h2>
|
|
<h3>Decide hasta el final</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight asociate">
|
|
<picture>
|
|
<source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
|
|
<source srcset="high-eutanasia.jpg">
|
|
<img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
|
|
</picture>
|
|
<div class="card">
|
|
<div class="text">
|
|
<h2>Asóciate a DMD</h2>
|
|
<h3>Ayúdanos a defender tus derechos</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
h2 {
|
|
font-size: 2rem;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
text-align: right;
|
|
}
|
|
h3 {
|
|
font-size: 1.2rem;
|
|
font-weight: 300;
|
|
text-align: right;
|
|
}
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-gap: 1rem;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.highlight {
|
|
padding: 0;
|
|
color: white;
|
|
box-shadow: 0 0 4px 0px rgba(0,0,0,0.5);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.highlight picture {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.highlight .card {
|
|
position: absolute;
|
|
display: grid;
|
|
padding: 1rem;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
.highlight.eutanasia {
|
|
grid-column: 1/3;
|
|
}
|
|
.highlight.testamento-vital {
|
|
grid-column: 3/4;
|
|
}
|
|
.highlight.asociate {
|
|
grid-column: 4/5;
|
|
}
|
|
|
|
.eutanasia .card {
|
|
background: linear-gradient(120deg, #006e7fcc 0%, #006e7fff 100%);
|
|
}
|
|
.testamento-vital .card {
|
|
background: linear-gradient(120deg, #e08115cc 0%, #e08115 100%);
|
|
}
|
|
|
|
.asociate .card {
|
|
grid-column: 4/5;
|
|
background: linear-gradient(120deg, #B30F1Dcc 0%, #B30F1D 100%);
|
|
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.highlight.eutanasia, .highlight.testamento-vital, .highlight.asociate {
|
|
grid-column: 1/2;
|
|
margin-left: -8px;
|
|
}
|
|
.highlight {
|
|
height: 100px;
|
|
}
|
|
}
|
|
</style> |