<!
DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<title> PROYECTO HTML5 </title>
<!-- El comando title se usa antes de la etiqueta meta -->
<meta charset="utf-8">
<meta name="description" content="Prueba HTML5">
<meta name="keywords" content="HTML5, ejemplo, prueba, código">
<link rel="icon" href="../fotos/[Link]" type="image/png" sizes="16x16">
<link rel="stylesheet" href="../estilos/[Link]">
</head>
<body bgcolor="#E2EFBC">
<header>
<h1 id="webname"><a id="toindex" href="[Link]">Hellowork</a></h1>
<nav class="barrasuperior">
<br>
<form class="barrasuperior" method="get" enctype="text/plain">
<button type="button" name="morecontent" list="morecontent"><input
name="morecontent" type="image" src="../fotos/[Link]"
width="16"></input></button>
<input type="search" id="bsearch" name="bing" name="barrasuperior"
value="Buscar" autocomplete="on" placeholder="Buscar"></input><button
id="Index"type="button" name="barrasuperior"><a
href="[Link]">Inicio</a></button>
<button type="button" name="barrasuperior"><a href="[Link]">
Fotos</a></button><button id="publications" type="button" name="barrasuperior"><a
href="[Link]"> Publicaciones</a></button>
<button id="contact" type="button" name="barrasuperior"><a
href="[Link]"> Contacto</a></button><button id="login" type="button"
name="barrasuperior"><a target="_blank" href="[Link]"> Login</a></button>
<button id="changecolor" name="barrasuperior" type="button"><input
id="changecolor" type="image" src="../fotos/[Link]" width="19"></input></button>
</form>
<br>
</nav>
</header>
<br>
<main>
<h2 id="welcome"><i>Bienvenidos</i></h2>
<style>
#welcome{
color: #6A4393;
font-family: goodpeople;
font-size: 65px;
text-shadow: 1px 2px 8px #C64BCC;
transform:
scale(1, 2)
rotate(359deg)
skewX(340deg)
skewY(3deg);
}
</style>
<br>
<section id="img_index">
<figure>
<blockquote><img src="../fotos/[Link]" width="567" height="279"
alt="Imagen de programación en codigo.">
</blockquote>
<div class="box_txt">
<div class="content_sup"></div>
<div class="content_inf">
<blockquote><span>Recuperada de <a id="link_imagen_index"
href="[Link]
idioma-con-cursos-para-programar/">culturacolectiva</a> con fines educativos.
</span>
</blockquote>
</div>
</figure>
</div>
</section>
<style>
img{
border: 5px double #919331;
outline: 5px groove #919331;
outline-offset: 10px;
border-radius: 10px;
}
span{
color: #42FFFC;
}
#link_imagen_index:link{
color: #7DCB44;
}
#img_index{
position: relative;
width: 567px;
height: 300px;
overflow: hidden;
display: inline;
}
.box_txt{
width: 547px;
height: 100px;
top: 207px;
left: 95px;
position: absolute;
margin-left: 10px;
overflow: hidden;
}
.content_sup{
width: 547px;
height: 50px;
}
.content_inf{
width: 547px;
height: 25px;
background-color: rgba(129, 129, 129, 0.3);
text-align: center;
}
</style>
<hr align="left" color="Gray" width="100%">
<!-- Cuerpo de la página-->
<details style="display: flex;">
<summary class="el-sum-1"><b>2021</b></summary>
<div class="original">
<div class="lateralizq">
<section>
<form id="autores" class="Autor" name="Autor">
<ol type="1" start="4" reversed>
<li><div class="Autor"> <b>Autor:</b> Stephen King </div></li>
<li><div class="Autor"> <b>Autor:</b> Pittacus Lore </div></li>
<li><div class="Autor"> <b>Autor:</b> Haruki Murakami </div></li>
<li><div class="Autor"> <b>Autor:</b>Casandra Clare </div></li>
<li><div class="Autor"> <b>Autor:</b><input name="Autor"
type="text" disabled></input></div></li>
</ol>
<article>
<dl id="citas">
<dt>IT</dt>
<dd>Tras lustros de tranquilidad y lejania una antigua promesa
infantil les hace volver al lugar en el que vivieron su infancia y juventud como
una terrible pesadilla.</dd>
<dt>Carrie</dt>
<dd>Sus compañeros se burlan de ella, pero Carrie tiene un don.
Puede mover cosas con su mente. Este es su poder y su gran
problema.</dd>
<dt>El Resplandor</dt>
<dd>Al escritor Jack Torrance le es ofrecido un empleo como
cuidador del hotel Overlook durante el invierno junto a su familia.</dd>
<dt>Misery</dt>
<dd>Paul Sheldon es un famoso escritor de novelas románticas
ambientadas en la época victoriana, cuyo personaje principal se llama Misery
Chastain.
</dd>
</dl>
</article>
</div>
<div class="lateralbar">
<h4>Barra lateral</h4>
<aside>
<iframe src="[Link]
frameborder="0" allowtransparency="true" style="width: 70%; min-height: 100px;
border: 0;"></iframe>
</aside>
<aside>
Cita del artículo uno
</aside>
<aside>
Cita del artículo dos
</aside >
<aside>
<span> “Carecer de libros propios <br> es el colmo de la miseria".<br>
Benjamin Franklin </span>
</aside>
<aside>
<a
href="[Link]
ping="[Link]
load>
Haz click aqui <br> para descargar.</a></aside>
<hr align="left" color="Gray" width="100%">
</div>
</section>
</div>
</details>
<details>
<summary class="el-sum-1"><b>Comentarios</b></summary>
<section>
<p><textarea id="comentario" name="comentario" cols="125" rows="5"
spellcheck="true" placeholder="Comentar"></textarea></p>
<button type="button" name="comentar"><input type="image"
name="Comentar" src="../fotos/[Link]" width="28"></input></button>
</section>
</details>
</main>
<!-- Pie de pagina-->
<footer id="footer" align="center">
<hr align="left" color="Gray" width="100%">
<address> Quito, Ecuador</address>
<address>Gmail: <a target="_blank"
href="[Link]
<address>Numero de contacto:<a target="_blank"
href="[Link] </a></address>
<br>
<small>Cambiar color:<input id="color" type="color" name="cambiarcolor"
value="#6DD5E4"></input></small> <button type="button"
name="Cambiar">Cambiar</button>
<br>
<small>© Derechos Reservados 2021</small>
</footer>
</body>
<script>
function cambiarColor1() {
[Link] = "#AAF8E6";
}
[Link]("click", cambiarColor1);
</script>
</html>