con seccion que hace dmd

main
borjarobert 4 years ago
parent 1c60eba0fc
commit 1777aed195

@ -45,7 +45,7 @@
<style>
h2 {
font-size: 2rem;
font-size: 1.6rem;
text-transform: uppercase;
font-weight: 800;
text-align: right;
@ -62,7 +62,7 @@
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1rem;
min-height: 180px;
min-height: 150px;
}
.highlight {
@ -129,7 +129,7 @@
}
h2 .hide {
display: inline;
font-size: 2rem;
font-size: 1.6rem;
}
}
</style>

@ -1,4 +1,100 @@
<script></script>
<div class="container">
</div>
<div class="intro">
<h2>¿Qué hace DMD?</h2>
<p>Luchamos por la despenalización de la muerte asistida. Queremos que puedas decidir en libertad sobre tu final, que se respeten tus valores y no tengas que recurrir ni al exilio ni a la clandestinidad para morir en paz.</p>
</div>
<div class="video-stats">
<div class="video">
</div>
<div class="stats">
<div class="label">
Metroscopia, 2019 (87%)
</div>
<progress max="100" value="87">
Metroscopia
</progress>
<div class="label">
IPSOS MORI, 2018 (85%)
</div>
<progress max="100" value="85">
IPSOS MORI
</progress>
<div class="label">
CIS, 2011 (73%)
</div>
<progress max="100" value="73">
CIS
</progress>
</div>
</div>
</div>
<style>
h2 {
color: rgb(179,15,29);
font-size: 2rem;
box-shadow: 0 3px 0 0 firebrick;
margin: 2rem auto;
text-transform: uppercase;
font-weight: 900;
}
p {
margin: 1rem auto;
font-size: 1.3rem;
font-weight: 400;
color: rgb(179,15,29);
}
.label {
padding: 0 1rem;
}
.container {
margin: 2rem auto;
}
.video-stats {
display: grid;
grid-template-columns: 3fr 2fr;
grid-gap: 1rem;
}
.video {
grid-column: 1/2;
grid-row: 1/2;
margin: 2rem auto;
background-color: grey;
height: 400px;
width: 100%;
}
.stats {
grid-row: 1/2;
grid-column: 2/3;
background: white;
margin: 2rem 0;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 100%;
padding: 1rem;
background-color: #eee;
border: none;
}
@media (max-width: 768px) {
p {
padding: 0 0.5rem;
}
.video-stats {
grid-template-columns: 1fr;
}
.video {
grid-row: 1/2;
}
.stats {
grid-column: 1/2;
grid-row: 2/3;
}
}
</style>

@ -35,6 +35,7 @@ import News from "$lib/News.svelte";
display: block;
position: relative;
min-height: 6rem;
margin: 0 auto;
}
footer {
min-height: 6rem;

Loading…
Cancel
Save