Categoría: HTML

Galería imágenes

html:


<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="galeria.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<h1>Galería de imágenes</h1>
<section id="galeria">
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>

<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>

<img src="img/gato.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>

<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>

<img src="img/gato.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>
</section>
</body>
</html>

css:


#galeria{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#galeria figure{
width:30%;
margin:1em 0;
}

#galeria figure img{
width: 100%;
}

@media (max-width: 900px) {
#galeria figure{
width:45%
}
}
@media (max-width: 600px) {
#galeria figure{
width:100%
}
}

Layout media query

Html:


<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layout.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header></header>
<main>
<aside>

</aside>
<section></section>
</main>
<footer></footer>
</body>
</html>

css:


header{
height:10vh;
background-color: #BBBBBB;
}
main{
height:80vh;
display:flex;
}
aside{
background-color: #BBBB66;
flex-grow: 1;
}
section{
background-color: #66BBBB;
flex-grow: 5;
}
footer{
height:10vh;
background-color: #BB66BB;

}
@media (max-width: 800px) {
main{
flex-direction: column;
}
}

Layout One Page

html:


<!DOCTYPE html>

<html>
<head>
<title>One Page design</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<h2>Mi empresa</h2>
<ul>
<li>Fotos</li>
<li>Articulos</li>
<li>Mapa</li>
</ul>
</nav>
<section id="imagen">
<h1>Esto es una empresa que mola</h1>
<img src="img/paisaje.jpg" alt=""/>

</section>
<section id="fotos">
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>

<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>

<img src="img/gato.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>
</section>
<section id="textos">
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
<section id="mapa"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47878.40221632758!2d2.1679048317954788!3d41.40883185920695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4a2efe63f46cd%3A0x2ce5e151b3383c3c!2sNetmind!5e0!3m2!1sca!2ses!4v1525955904487" frameborder="0" style="border:0" allowfullscreen></iframe></section>
</body>
</html>

Css:


*{
font-family:Verdana,serif;
}
body{
margin:0;
}
nav{
position:fixed;
background-color: black;
color:white;
width:100%;
padding:10px;
}
nav ul li {
display: inline-block;
margin-left: 10px;
}
nav ul{
float:right;
position:relative;
right:40px;

}
nav h2{
float:left;
}
#imagen{
position: relative;
z-index: -1;
top:2em;
}
#imagen img{
width:100%;
}
#imagen h1{
font-weight: bold;
font-size: 6em;
text-align: center;
position: absolute;
top:0em;
width:100%;
text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
color: rgba(255,255,255,0.5);
}
#fotos{
margin-top: 20px;

}
#fotos figure img{
width: 100%;
height: auto;
}
#fotos figure{
margin: 2%;
border: 1px solid #ccc;
float: left;
width: 29%;
box-shadow: 10px 10px 5px #AAAAAA;
opacity:.8;
position:relative;
}
#fotos figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
opacity:1;
}
#fotos figcaption{
padding: 15px;
text-align: center;
background-color: white;
}
#textos article{
float:left;
width:45%;
margin:2%;
padding:5em 2em;
box-sizing: border-box;
background: linear-gradient(to bottom, #abbaab,#ffffff);
}
#mapa iframe{
width:100%;
height:20em;
}

 

mascotas

Css:


*{
font-family:Verdana,serif;
}
header,aside,section,footer{
padding:1rem;
}
header{
height:10rem;

background-image: url("img/logo2.png"), url("img/gato.jpg");
background-size:160px 160px, cover;
background-repeat: no-repeat,repeat;

}
aside{
width:15rem;
height:40rem;
background-image:linear-gradient(rgba(200,190,160,1),rgba(200,190,160,.7)),url("img/gato.jpg");
float:left;
}
section{
margin-left:17rem;
background-color: #DCD9D4;
background: linear-gradient(to bottom, #abbaab,#ffffff);
min-height:40rem;
padding:1rem 10rem;
}
footer{
height:3rem;
background-color:black;
color:white;
}

header h1{
font-family: 'Carter One', cursive;
font-size:5rem;
margin:0;
}
aside ul{
list-style-type:none;
padding:0;
}

aside ul li {
padding: 8px 16px;
border: 1px solid #ddd;
background-color:PowderBlue ;
margin-top:.5rem;
}
aside ul li:hover {
background-color:yellowgreen;
}
aside ul li a{
text-decoration:none;
font-size:1.5em;
}
.destacado{
color:yellow;
}
#fotos figure img{
width: 100%;
height: auto;
}
#fotos figure a img{
width: 32px;
position:absolute;
right:5px;
top:5px;
}
#fotos figure{
margin: 20px;
border: 1px solid #ccc;
float: left;
width: 300px;
box-shadow: 10px 10px 5px #AAAAAA;
opacity:.8;
position:relative;
transition: transform 1s;
animation: sombra 2s ease 0s 2 alternate;
}
#fotos figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
opacity:1;
transform:rotate(15deg) scale(1.05);

}
#fotos figcaption{
padding: 15px;
text-align: center;
background-color: white;
opacity:0;
transform:translate(0,-100px);
transition: opacity 1s, transform 2s;
}
#fotos:hover figcaption{
padding: 15px;
text-align: center;

opacity:1;
transform:translate(0);
}
@keyframes sombra{
from{transform:rotate(0);}
to {transform:rotate(180deg);}
}

#productos {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#productos td, #productos th {
border: 1px solid #ddd;
padding: 8px;
}

#productos tr:nth-child(even){background-color: #f2f2f2;}

#productos tr:hover {background-color: #ddd;}

#productos th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}

nav ul li{
display: inline-block;
padding:10px;
color:white;
}
nav ul{
background-color: grey;
margin:0;
}

index


<!DOCTYPE html>
<html>

<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
</head>

<body>

<header>
<h1>La web de los gatitos </h1>
</header>

<main>

<aside>
<ul>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="prod.html">Productos</a></li>
<li><a href="tienda.html">Tienda</a></li>
</ul>
</aside>

<section>
<h2>Bienvenido a la web de los gatitos 你好 Голя أولا</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<video width="640" height="480" controls>
<source src="img/gato.mp4" type="video/mp4">
El navegador no soporta vídeos.
</video>
</section>

</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>



<!DOCTYPE html>
<html>

<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">

</head>

<body>

<header>
<h1>La web de los gatitos </h1>
</header>

<main>

<aside>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="prod.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>

<section id="fotos">

<h2>Fotos tiernas</h2>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/perro2.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>

</section>

</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>

Fotos con logo facebook


<!DOCTYPE html>
<html>

<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">

</head>

<body>

<header>
<h1>La web de los gatitos </h1>
</header>

<main>

<aside>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="prod.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>

<section id="fotos">

<h2>Fotos tiernas</h2>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/perro2.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>

</section>

</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>

*{
font-family:Verdana,serif;
}
header,aside,section,footer{
padding:1rem;
}
header{
height:10rem;

background-image: url("img/logo2.png"), url("img/gato.jpg");
background-size:160px 160px, cover;
background-repeat: no-repeat,repeat;

}
aside{
width:15rem;
height:40rem;
background-image:linear-gradient(rgba(200,190,160,1),rgba(200,190,160,.7)),url("img/gato.jpg");
float:left;
}
section{
margin-left:17rem;
background-color: #DCD9D4;
background: linear-gradient(to bottom, #abbaab,#ffffff);
min-height:40rem;
padding:1rem 10rem;
}
footer{
height:3rem;
background-color:black;
color:white;
}

header h1{
font-family: 'Carter One', cursive;
font-size:5rem;
margin:0;
}
aside ul{
list-style-type:none;
padding:0;
}

aside ul li {
padding: 8px 16px;
border: 1px solid #ddd;
background-color:PowderBlue ;
margin-top:.5rem;
}
aside ul li:hover {
background-color:yellowgreen;
}
aside ul li a{
text-decoration:none;
font-size:1.5em;
}
.destacado{
color:yellow;
}
#fotos figure img{
width: 100%;
height: auto;
}
#fotos figure a img{
width: 32px;
position:absolute;
right:5px;
top:5px;
}
#fotos figure{
margin: 20px;
border: 1px solid #ccc;
float: left;
width: 300px;
box-shadow: 10px 10px 5px #AAAAAA;
opacity:.8;
position:relative;
}
#fotos figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
opacity:1;
}
#fotos figcaption{
padding: 15px;
text-align: center;
background-color: white;
}

#productos {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#productos td, #productos th {
border: 1px solid #ddd;
padding: 8px;
}

#productos tr:nth-child(even){background-color: #f2f2f2;}

#productos tr:hover {background-color: #ddd;}

#productos th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}

nav ul li{
display: inline-block;
padding:10px;
color:white;
}
nav ul{
background-color: grey;
margin:0;
}

 

Vídeo de fondo


<!DOCTYPE html>

<html>
<head>
<title>Vídeo pantalla completa</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
section {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<video autoplay muted loop>
<source src="img/rain.mp4" type="video/mp4">
El navegador no soporta vídeos.
</video>
<section>
<h1>Contenido</h1>
<p>Lorem ipsum...</p>

</section>
</body>
</html>

Fotos


<!DOCTYPE html>
<html>

<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
</head>

<body>

<header>
<h1>La web de los gatitos </h1>
</header>

<main>

<aside>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="fotos.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>

<section>

<h2>Fotos tiernas</h2>
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>
<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>
<img src="img/perro2.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>

</section>

</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>

*{
font-family:Verdana,serif;
}
header,aside,section,footer{
padding:1rem;
}
header{
height:10rem;
background-color:lightgreen;
}
aside{
width:15rem;
height:40rem;
background-color:#fae596;
float:left;
}
section{
margin-left:17rem;
background-color:#BBBBBB;
min-height:40rem;
padding:1rem 10rem;
}
footer{
height:3rem;
background-color:black;
color:white;
}

header h1{
font-family: 'Carter One', cursive;
font-size:5rem;
margin:0;
}
aside ul{
list-style-type:none;
padding:0;
}

aside ul li {
padding: 8px 16px;
border: 1px solid #ddd;
background-color:PowderBlue ;
margin-top:.5rem;
}
aside ul li:hover {
background-color:yellowgreen;
}
aside ul li a{
text-decoration:none;
font-size:1.5em;
}
.destacado{
color:yellow;
}
figure img{
width: 100%;
height: auto;
}
figure{
margin: 20px;
border: 1px solid #ccc;
float: left;
width: 300px;
box-shadow: 10px 10px 5px #AAAAAA;
}
figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
}
figcaption{
padding: 15px;
text-align: center;
background-color: white;
}

Layout Semántico


<!DOCTYPE html>
<html>

<head>
<title></title>

<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
</head>

<body>

<header>
<h1>La web de los gatitos</h1>
</header>

<main>

<aside>
<ul>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="fotos.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>

<section>
<h2>Bienvenido a la web de los gatitos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="gato.jpg" alt="gato">
</section>

</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>



*{
font-family:Verdana,serif;
}
header,aside,section,footer{
padding:1rem;
}
header{
height:10rem;
background-color:lightgreen;
}
aside{
width:15rem;
height:40rem;
background-color:#fae596;
float:left;
}
section{
margin-left:17rem;
background-color:#BBBBBB;
min-height:40rem;
padding:1rem 10rem;
}
footer{
height:3rem;
background-color:black;
color:white;
}

header h1{
font-family: 'Carter One', cursive;
font-size:5rem;
margin:0;
}
aside ul{
list-style-type:none;
padding:0;
}

aside ul li {
padding: 8px 16px;
border: 1px solid #ddd;
background-color:PowderBlue ;
margin-top:.5rem;
}
aside ul li:hover {
background-color:yellowgreen ;

}
aside ul li a{
text-decoration:none;
font-size:1.5em;
}

Tabla con formato

table{
border:2px solid grey;
width:100%;

}
th, tfoot{
background-color:black;
color:yellow;
}
.ciudad{
background-color:lightgreen;
}
.pares{
background-color:#BBBBBB;
}

<table>
<tr>
<th colspan="3">Ventas</th>
</tr>
<tr>
<td rowspan="2" class="ciudad">BCN</td>
<td >Ana</td>
<td>10</td>
</tr>
<tr class="pares">
<td>Rosa</td>
<td>20</td>
</tr>
<tr>
<td rowspan="2" class="ciudad">GIR</td>
<td >Juan</td>
<td>30</td>
</tr>
<tr class="pares">
<td>Eva</td>
<td>40</td>
</tr>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>100</td>
</tr>
</tfoot>
</table>

Ejemplos tablas


<table border=1>

<tr><th colspan="3">Ventas</th>
</tr>
<tr><td>Empleado</td><td>Enero</td><td>Febrero</td></tr>
<tr><td>Ana</td><td>10</td><td>10</td></tr>
<tr><td>Rosa</td><td>20</td><td>10</td></tr>

</table>

<table border="1">
<tr>
<th colspan="3">Ventas</th>
</tr>
<tr>
<td rowspan="2">BCN</td>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td>Rosa</td>
<td>20</td>
</tr>
<tr>
<td rowspan="2">GIR</td>
<td>Juan</td>
<td>30</td>
</tr>
<tr>
<td>Eva</td>
<td>40</td>
</tr>
</table>