lunes, 20 de diciembre de 2021
viernes, 17 de diciembre de 2021
Solución CSS22
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Hotel</title>
<style>
p{
margin: 0; padding: 0; border: 0; outline: 0;
}
div img{
width:100%;height:100%;
}
body{
background-color:#f2f2f2;
}
.redes{
float:left;width:38px;height:38px;
}
.hotel{
width:33.3%;float:left;
}
.foto{
height:250px;border: 4px solid #C5F7CA; border-radius: 10px 10px 10px 10px;overflow:hidden;margin:10px 3px 0px 3px;box-shadow: black 3px 3px 3px;
}
.foto:hover{border: 4px solid #FC7C7C;box-shadow: #B57575 4px 4px 3px;
}
.des{
padding:10px;
}
#contenedor{
width:95%;height:100%;position:absolute;left:2.5%;
}
#cabecera{
background-color:#fafafa;border: 4px solid #fff; height:140px;
border-radius: 15px 15px 15px 15px;
}
#logo{
float:left;width:80px;height:60px;
}
#redes{
float:right;width:200px;height:40px;top:20px;
}
#nombre{
width:100%;height:80px;text-align:center;color: red; text-shadow: black 3px 3px 3px;font-size:4em;top:60px;float:left;
}
#pie{
width:100%;text-align:center;font-size:1.5em;float:left;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<div id="logo">
<img src="./img/logo.gif">
</div>
<div id="redes">
<div class="redes"><img src="./img/redes1.jpg"></div>
<div class="redes"><img src="./img/redes2.jpg"></div>
<div class="redes"><img src="./img/redes3.jpg"></div>
<div class="redes"><img src="./img/redes4.jpg"></div>
<div class="redes"><img src="./img/redes5.jpg"></div>
</div>
<div id="nombre">
<p>Grupo de Hoteles Victor</p>
</div>
</div>
<div>
<div class="hotel">
<div class="foto"><!-- http://www.greatsmallhotels.com/es/costa-brava-hoteles-boutique/hostal-spa-empuries -->
<a href="./playa.html"><img src="./img/playa.jpg"></a>
</div>
<div class="des">
<p>El Hostal Empúries es una casa de huéspedes, con un espíritu de la sostenibilidad y respeto por el entorno, situada en el corazón de la Costa Brava. Tiene una ubicación excepcional, detrás de las ruinas del primer asentamiento griego en la Península Ibérica y dominando una de las playas de Cataluña más bellas. El Hostal Empúries siempre se intenta superar para ofrecer una estancia del más alto nivel mientras interactúa respetuosamente con su entorno natural. Los servicios y edificios del Hostal Empúries se integran en el ciclo biólogico de un entorno natural único. Con su diseño auténtico y de elegantes líneas, conservando su significado histórico, el Hostal Empúries ofrece una oportunidad perfecta para descansar el cuerpo y el alma en interiores e instalaciones completamente modernizados. Puede disfrutar del centro de bienestar, de restaurantes de comida orgánica, inicitivas ecologistas, zona para niños y programa de solidaridad. El edificio principal, que cuenta con una extensa historia de hospitalidad, fue construido para acomodar a los arqueólogos que habian venido a excavar las cercanas ruinas griegas y romanas descubiertas a principios de 1900. Al igual que los grandes monasterios y otros edificios históricos, este especial hotel fue construido en etapas y pasó por diferentes manos, pero todavía, aislado en la costa, disfruta de la misma maravillosa ubicación que tenía el día que se colocó la primera piedra, a comienzos del siglo pasado.
</p>
</div>
</div>
<div class="hotel">
<div class="foto">
<a href="./montana.html"><img src="./img/montana.jpg"></a>
</div>
<div class="des">
<p>Típica masia Catalana situada en una zona de gran belleza en la comarca del Alt Empordà. Disponemos de 8 habitaciones de 2 a 4 personas, cada una de ellas identificada con el nombre de plantas y árboles autóctonos. También tiene a su disposición Can Fernando, un espacio independiente que consta de una habitación quádruple y una habitación doble con baño, además de una sala muy confortable.</p>
</div>
</div>
<div class="hotel">
<div class="foto">
<a href="./barcelona.html"><img src="./img/barcelona.jpg"></a>
</div>
<div class="des">
<p>Hotel en un edificio histórico declarado patrimonio cultural de Barcelona. El H10 Racó del Pi se encuentra en el corazón de Barcelona, en su famoso Barrio Gótico. H10 Racó del Pi goza de una ubicación ideal para disfrutar de la zona más viva y ambientada de la ciudad, en plena Ciutat Vella, una zona llena de tiendas, bares y restaurantes, cerca de los lugares más históricos e interesentes de Barcelona.</p>
</div>
</div>
</div>
<div id="pie">
<p>Copyright 2001-2020 Copyright .es - All Rights Reserved</p>
</div>
</div>
</body>
</html>
CSS22
Hay que intentar representar la imagen inferior. Para ello hay que tener en cuenta que cuando pasemos por encima de cada imagen el borde cambiará. Para realizar este ejercicio hay que revisar las siguientes propiedades:
box-shadow, border-radius y text-shadow
Típica masia Catalana situada en una zona de gran belleza en la comarca del Alt Empordà. Disponemos de 8 habitaciones de 2 a 4 personas, cada una de ellas identificada con el nombre de plantas y árboles autóctonos. También tiene a su disposición Can Fernando, un espacio independiente que consta de una habitación quádruple y una habitación doble con baño, además de una sala muy confortable.
Hotel en un edificio histórico declarado patrimonio cultural de Barcelona. El H10 Racó del Pi se encuentra en el corazón de Barcelona, en su famoso Barrio Gótico. H10 Racó del Pi goza de una ubicación ideal para disfrutar de la zona más viva y ambientada de la ciudad, en plena Ciutat Vella, una zona llena de tiendas, bares y restaurantes, cerca de los lugares más históricos e interesentes de Barcelona.
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>
<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>
Solución CSS16
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Animales</title>
<style>
body {
padding: 0 50px;
background-color:#61A6DF ;
font-family: sans-serif;
text-align: justify;
}
h1 {
color:#7C9691;
margin: 0;
font-size: 3rem;
text-align: center;
text-shadow: 3px 3px black;
}
h2 {
margin: 0;
color:#7C9691;
font-size: 3rem;
text-shadow: 3px 3px black;
}
strong {
padding: 0px 10px;
background-color: white;
color: red;
}
i {
font-weight: bold;
text-decoration: underline;
}
img {
border: 5px solid #7C9691;
padding: 10px;
}
img.izquierda {
float: left;
margin-right: 10px;
}
img.derecha {
float: right;
margin: 20px 0px 0px 20px;
}
.flota {
float: left;
width: 35%;
}
.flota2 {
width: 20%;
float: left;
margin: 0% 5% 1%;
}
hr {
clear: both;
width: 66%;
height: 10px;
border: black 1px solid;
border-radius: 5px;
margin: 40px auto;
background-color: #7C9691 ;
}
</style>
</head>
<body>
<h1>Coleoptera</h1>
<p>Los coleópteros (<i>Coleoptera</i>) (del griego <i>κολεός koleos</i>: «caja o estuche», <i>πτερον pteron</i>: «ala»), comúnmente conocidos como escarabajos, son un orden de insectos con unas 375 000 especies descritas; tiene tantas especies como las plantas vasculares o los hongos y 66 veces más especies que los mamíferos.</p>
<p>Contiene <strong>más especies que cualquier otro orden</strong> en todo el reino animal, seguido por los lepidópteros (mariposas y polillas), himenópteros (abejas, avispas y hormigas) y dípteros (moscas, mosquitos).</p>
<hr>
<h2>Escarabeidos</h2>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Scarabaeus_laticollis_2.jpg" alt="Escarabeidos" title="Escarabeidos" width="200" class="izquierda">
Los escarabeidos son otra de las grandes familias coleópteros con casi 30 000 especies, algunas de las cuales pueden alcanzar los 18 cm de longitud y se cuentan entre los insectos actuales más voluminosos, como el escarabajo Goliat y el escarabajo hércules.</p>
<p><strong>Presentan una enorme diversidad</strong>, tanto en aspecto como en modos de vida; algunos son coprófagos, como los escarabajos peloteros, o se alimentan de madera en descomposición, como los escarabajos rinoceronte, o de flores u hojas, como el Mayate, etc.</p>
<p>Los cetónidos y rutélidos son muy apreciados por los coleccionistas, dada su gran belleza..</p>
<hr>
<h2><img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Lampyris_noctiluca.jpg" alt="Luciérnagas" title="Luciérnagas" width="150" class="derecha">
Luciérnagas</h2>
<p>Los lampíridos o luciérnagas, de las que se conocen más de 2000 especies, son coleópteros capaces de emitir luz.12 Mientras los machos alcanzan un desarrollo completo y pueden volar, las hembras conservan un aspecto larvario, con élitros reducidos a escamas.</p>
<p>Las hembras se iluminan para atraer a los machos que vuelan por encima; generan pulsos de luz mediante un órgano especial situado en la parte inferior del abdomen, en intervalos de 6 a 8 segundos; cada especie emite la luz con esquemas definidos de variación en los intervalos y el <strong>número de destellos</strong>. Las larvas se alimentan de pequeños caracoles y babosas..</p>
<hr>
<h2>Mariquitas</h2>
<p class="flota">Los coccinélidos, conocidos vulgarmente como mariquitas, son una familia compuesta por unas 4.500 especies, que no suelen sobrepasar los 10 mm de longitud; tienen el cuerpo redondeado y convexo y presentan coloraciones vistosas, generalmente manchas negras sobre fondo rojo o amarillo; estos colores advierten de su <i>desagradable sabor a sus depredadores</i> (pájaros sobre todo)..</p>
<p class="flota2"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/BIEDRONA.JPG" alt="Mariquitas" title="Mariquitas" width="200"></p>
<p class="flota">Las larvas, muy móviles, viven sobre la vegetación donde devoran pulgones, cochinillas y otros insectos dañinos lo que ayuda a regular las poblaciones de estas plagas; los adultos también son depredadores de insectos plaga. Por tales motivos, los coccinélidos se usan en el control biológico, que consiste en la <strong>eliminación de diversas plagas</strong> por la acción de sus enemigos naturales.</p>
<hr>
</body>
</html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Animales</title>
<style>
body {
padding: 0 50px;
background-color:#61A6DF ;
font-family: sans-serif;
text-align: justify;
}
h1 {
color:#7C9691;
margin: 0;
font-size: 3rem;
text-align: center;
text-shadow: 3px 3px black;
}
h2 {
margin: 0;
color:#7C9691;
font-size: 3rem;
text-shadow: 3px 3px black;
}
strong {
padding: 0px 10px;
background-color: white;
color: red;
}
i {
font-weight: bold;
text-decoration: underline;
}
img {
border: 5px solid #7C9691;
padding: 10px;
}
img.izquierda {
float: left;
margin-right: 10px;
}
img.derecha {
float: right;
margin: 20px 0px 0px 20px;
}
.flota {
float: left;
width: 35%;
}
.flota2 {
width: 20%;
float: left;
margin: 0% 5% 1%;
}
hr {
clear: both;
width: 66%;
height: 10px;
border: black 1px solid;
border-radius: 5px;
margin: 40px auto;
background-color: #7C9691 ;
}
</style>
</head>
<body>
<h1>Coleoptera</h1>
<p>Los coleópteros (<i>Coleoptera</i>) (del griego <i>κολεός koleos</i>: «caja o estuche», <i>πτερον pteron</i>: «ala»), comúnmente conocidos como escarabajos, son un orden de insectos con unas 375 000 especies descritas; tiene tantas especies como las plantas vasculares o los hongos y 66 veces más especies que los mamíferos.</p>
<p>Contiene <strong>más especies que cualquier otro orden</strong> en todo el reino animal, seguido por los lepidópteros (mariposas y polillas), himenópteros (abejas, avispas y hormigas) y dípteros (moscas, mosquitos).</p>
<hr>
<h2>Escarabeidos</h2>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Scarabaeus_laticollis_2.jpg" alt="Escarabeidos" title="Escarabeidos" width="200" class="izquierda">
Los escarabeidos son otra de las grandes familias coleópteros con casi 30 000 especies, algunas de las cuales pueden alcanzar los 18 cm de longitud y se cuentan entre los insectos actuales más voluminosos, como el escarabajo Goliat y el escarabajo hércules.</p>
<p><strong>Presentan una enorme diversidad</strong>, tanto en aspecto como en modos de vida; algunos son coprófagos, como los escarabajos peloteros, o se alimentan de madera en descomposición, como los escarabajos rinoceronte, o de flores u hojas, como el Mayate, etc.</p>
<p>Los cetónidos y rutélidos son muy apreciados por los coleccionistas, dada su gran belleza..</p>
<hr>
<h2><img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Lampyris_noctiluca.jpg" alt="Luciérnagas" title="Luciérnagas" width="150" class="derecha">
Luciérnagas</h2>
<p>Los lampíridos o luciérnagas, de las que se conocen más de 2000 especies, son coleópteros capaces de emitir luz.12 Mientras los machos alcanzan un desarrollo completo y pueden volar, las hembras conservan un aspecto larvario, con élitros reducidos a escamas.</p>
<p>Las hembras se iluminan para atraer a los machos que vuelan por encima; generan pulsos de luz mediante un órgano especial situado en la parte inferior del abdomen, en intervalos de 6 a 8 segundos; cada especie emite la luz con esquemas definidos de variación en los intervalos y el <strong>número de destellos</strong>. Las larvas se alimentan de pequeños caracoles y babosas..</p>
<hr>
<h2>Mariquitas</h2>
<p class="flota">Los coccinélidos, conocidos vulgarmente como mariquitas, son una familia compuesta por unas 4.500 especies, que no suelen sobrepasar los 10 mm de longitud; tienen el cuerpo redondeado y convexo y presentan coloraciones vistosas, generalmente manchas negras sobre fondo rojo o amarillo; estos colores advierten de su <i>desagradable sabor a sus depredadores</i> (pájaros sobre todo)..</p>
<p class="flota2"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/BIEDRONA.JPG" alt="Mariquitas" title="Mariquitas" width="200"></p>
<p class="flota">Las larvas, muy móviles, viven sobre la vegetación donde devoran pulgones, cochinillas y otros insectos dañinos lo que ayuda a regular las poblaciones de estas plagas; los adultos también son depredadores de insectos plaga. Por tales motivos, los coccinélidos se usan en el control biológico, que consiste en la <strong>eliminación de diversas plagas</strong> por la acción de sus enemigos naturales.</p>
<hr>
</body>
</html>
Suscribirse a:
Entradas (Atom)