Categoría: HTML

Mini layout simple

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout</title>
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <div id="cabecera">
        <h1>Esto es la cabecera</h1>
    </div>
    <div id="barra">
        <ul>
            <li><a href="">Inicio</a></li>
            <li><a href="">Contacto</a></li>
            <li><a href="">Productos</a></li>
            <li><a href="">faq</a></li>
        </ul>
    </div>
    <div id="contenido">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
    </div>
    <div id="pie">
        <p>(c) Jotapé 2021</p>
    </div>
</body>
</html>

css:

*{
    margin:0;
}
#cabecera{
    background-color: pink;
    height: 150px;
    margin: 0;
    padding: 5px;
}
#barra{
    background-color: turquoise;
    width:100px;
    float:left;
    min-height: 500px;
    padding: 20px;
}
#barra ul{
    list-style: none;
    margin:0;
    padding: 5px;
   
}
#contenido{
    background-color: wheat;
    margin: 0;
    min-height: 500px;
    padding: 20px;
}
#pie{
    background-color: black;
    color: white;
    height: 50px;
    clear:left;
    margin: 0;
}

Semántico:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout</title>
    <link rel="stylesheet" href="css/layout.css">
</head>

<body>
    <header>
        <h1>Esto es la cabecera</h1>
    </header>
    <aside>
        <ul>
            <li><a href="">Inicio</a></li>
            <li><a href="">Contacto</a></li>
            <li><a href="">Productos</a></li>
            <li><a href="">faq</a></li>
        </ul>
    </aside>
    <main>
        <section>
            <h1>Artículo 1</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
                obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
                omnis.</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
                obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
                omnis.</p>
        </section>
        <section>
            <h1>Artículo 2</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
                obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
                omnis.</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
                obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
                omnis.</p>
        </section>
    </main>
    <footer>
        <p>(c) Jotapé 2021</p>
    </footer>
</body>

</html>

*{
    margin:0;
}
header{
    background-color: pink;
    height: 150px;
    margin: 0;
    padding: 5px;
}
header h1{
    text-align: center;
}
aside{
    background-color: turquoise;
    width:100px;
    float:left;
    min-height: 500px;
    padding: 20px;
}
aside ul{
    list-style: none;
    margin:0;
    padding: 5px;
   
}
main{
    background-color: wheat;
    margin: 0;
    min-height: 500px;
    padding: 20px;
}
footer{
    background-color: black;
    color: white;
    height: 50px;
    clear:left;
    margin: 0;
}
section{
    float:left;
    width: 40%;
    margin-left: 10px;
}

Proyecto web

Hay que desarrollar una página web que incluya, al menos los siguientes apartados:

Inicio (descripción de la empresa, fotos)

Servicios (lo que hace la empresa)

Galería de fotos

Equipo

Contacto (dirección, teléfono y mapa)

El diseño puede ser one page o con cinco páginas diferentes. NO SE PUEDEN USAR PLANTILLAS pero sí podemos usar bootstrap y cualquier elemento o animación que consideremos conveniente.

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;
}