miércoles, 15 de diciembre de 2021

Solución CSS18

<!DOCTYPE html>
<html lang="es">
<head>
<title>Cajas rotadas</title>
<style>
a{
    text-decoration:none;
    color:#000;
    }

p,h1,h2,h3{
    padding: 0px;
    margin: 0px;
    }

body{
    text-align:center;
    }

#contenedor{
    width:1150px;
    margin:10px auto;}

section{
    float:left;
    width:50%;
    background-color:#eee;
    }

article{
width:400px;
height:200px;
background-color:#efe;
border-radius:50px;
margin:30px auto;
padding:30px;
}

#seccion1 article{
transform:rotate(10deg);
}

#seccion1 article:hover{
transform:scale(1.1,1.1) rotate(5deg);
background-color:#ddf;
}


#seccion2 article{
transform:rotate(-10deg);
}

#seccion2 article:hover{
transform:scale(1.1,1.1) rotate(-5deg);
background-color:#ddf;
}
</style>
</head>
<body>
<div id="contenedor">
<section id="seccion1">
<article>
<a href="http://www.lavanguardia.com/index.html"><h1>China construye casas con una impresora 3D </h1></a>
<p>Las maquinas que utiliza la empresa asiatica Winsun pueden fabricar hasta diez viviendas de 200 metros cuadrados en un solo dia</p>
</article>
<article>
<a href="http://www.lavanguardia.com/index.html"><h1>El Gobierno rechazará las solicitudes de exploración de hidrocarburos y ‘fracking’</h1></a>
                <p>El Consejo de Ministros ha aprobado el acuerdo de Declaración ante la Emergencia Climática y Ambiental en España, mediante el cual se compromete a adoptar 30 líneas de acción prioritarias – cinco de ellas en los primeros 100 días– para combatir el cambio climático con políticas transversales. El Ejecutivo no autorizará nuevos permisos para la exploración de hidrocarburos y cierre el paso a la fractura hidráulica (fracking).</p>
            </article>
        </section>
        <section id="seccion2">
                <article>
<a href="http://www.lavanguardia.com/index.html"><h1>Catalunya se prepara para una “segunda fase” del temporal</h1></a>
<p>La borrasca Gloria , que está afectando a toda España de una manera u otra, entra en una nueva fase. Así lo ha descrito el conseller de Interior de la Generalitat, Miquel Buch, quien ha avisado de que el viento irá menguando, aunque aun estará presente, y que la lluvia irá cogiendo mucha importancia.</p>
</article>
<article>
<a href="http://www.lavanguardia.com/index.html"><h1>Irán confirma que se dispararon dos misiles contra el avión ucraniano</h1></a>
<p>La Organización de la Aviación Civil de Irán ha confirmado que dos misiles fueron disparados contra el avión ucraniano derribado por las Fuerzas Amadas iraníes el pasado día 8, causando la muerte de las 176 personas que viajaban a bordo, tal y como ha informado EFE.</p>
</article>
</section>
</div>
</body>
</html>