En esta tarea solo s nos pide diseñar cajas según el ejemplo que está en la tarea 4.1 del curso ya mencionado.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Práctica 4.1</title>
    <link rel="stylesheet" href="estilos_P4.1.css">
</head>
<body>
 <h1>Práctica 4.1 Int. Al Desarrollo Web Responsive</h1> 
 <div class="contenedor1">
     <h2>Contenedor Principal</h2>
     <div class="header">
        <h2>Encabezado</h2>
        <P>Esta es la practica No.4.1 del Curso:</P>
        <p>Introducción al Desarrollo Web Resposive con HTML y CSS</p>
     </div>
     <div class="articuloPrincipal">
        <h2>Articulo Principal</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident, itaque quidem molestiae molestias tempora corporis. Eos, eum eaque doloribus dolorem mollitia dolor. Fugit voluptatem voluptate, quae a sunt saepe molestias.
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam iure nostrum aspernatur nihil corporis voluptatum excepturi qui sed consequuntur officiis esse rem minus suscipit, nam dignissimos omnis perspiciatis atque necessitatibus!
        </p>
     </div>
     <div class="articulo1">
        <h2>Articulo 1</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore culpa suscipit dolorem excepturi dolores ipsa asperiores odio beatae fuga laboriosam. Dolores, doloribus dolorem vitae architecto provident voluptatem harum earum totam.

        </p>
     </div>
     <div class="articulo2">
        <h2>Articulo 2</h2>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores eligendi quas ad in. Culpa, ad? Tempore rem minus libero voluptatibus provident aliquid, nulla rerum ducimus officia quam eveniet, exercitationem eos?
        </p>
     </div>
     <div class="articulo3">
        <h2>Articulo 3</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis maxime hic dolorem, nobis nostrum ullam, natus temporibus provident, voluptas quas architecto! Sed provident, dicta commodi accusamus quibusdam distinctio ipsam!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis eligendi molestias aliquam dolores mollitia impedit voluptatibus ex harum, dolor libero ab quasi, optio sequi ipsum. Architecto provident obcaecati ipsam non.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est nostrum libero quod, itaque aut a dolorum. Aliquid fugiat necessitatibus alias, doloremque quisquam autem corporis voluptatem, in tempore vero fugit similique!
        </p>
     </div>
     <div class="footer1">
         <h2>Footer 1</h2>
         Web Desings: Allendi Manuel Concepción 
         Tel. 809-775-9263
         Email: allendimanuel29@gmail.com
     </div>
     <div class="footer2">
        <h2>Footer 2</h2>
        <p>Todos los derechos reservados</p>
     </div>

 </div>  
</body>
</html>

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*{
    box-sizing: border-box;
    
}


.header {
    background-color:rgb(76, 206, 238);
    position: absolute;
    left: 10px;;
    top: 0px;
    height: 50px;
    width: 98%;
    border: solid:white;
    border-radius: 3px;
    color: white;
       
    

}
.articuloPrincipal {
    background-color: rgb(116, 170, 214);
    height: 35%;
    width: 98%;
    position: absolute;
    left: 10px;;
    top: 60px;
}
.articulo1 {
    background-color: rgb(116, 170, 214);
    height: 15%;
    width: 48%;
    position: absolute;
    float: left;
    left: 10px;
    top: 295px;
      
}
.articulo2 {
    background-color:  rgb(116, 170, 214);
    height: 15%;
    width: 48%;
    position: absolute;
    float: right;
    right: 10px;;
    top: 295px;
    margin-left: 5px;    
}
.articulo3 {
    background-color:  rgb(116, 170, 214);rgb(184, 22, 143);
    height: 20%;
    width: 98%;
    position: absolute;
    left: 0;
    top: 415px;
    margin-left: 10px;
    margin-right: 10px;
    
}
.footer1 {
    position:absolute;
    bottom: 5px;
    left: 0;
    background-color: rgb(76, 206, 238);
    height: 10%;
    width: 48%;
    color: white;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;

     
}
.footer2 {
    background-color: rgb(76, 206, 238);
    height: 10%;
    width: 48%;
    position:absolute;
    bottom: 5px;
    right: 0;
    color: white;
    text-align: center;
    margin-right: 10px;
    margin-left: 10;
     
}
h2 {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgb(12, 12, 12);
    font-size: 24;
    font-weight: bold;
}
p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    color: floralwhite;
    font-weight: bold;
}
div {
    padding: 20px 30px 10px 15;
}

0 comentarios

Entra o únete Gratis para comentar

Seguro que tienes mucho que decir, te estamos esperando.

Comenta en el foro

Únete Gratis y aprende con profesionales creativos como tú

Únete Gratis con tu email

Al hacer clic en "Únete Gratis" certifico que tengo 16 años o más y acepto las Condiciones de Uso, la Política de Privacidad, la Política de Cookies y recibir novedades y promociones.

Iniciado por

allendimanuel

Se unió en noviembre de 2021

Santo Domingo, República Dominicana

1 tema
8 comentarios

Otros temas en este foro

Curso de PhoneGap : desarrollo móvil con HTML

Si tienes conociemientos básicos de HTML y JavaScript y quieres aprender a desarrollar aplicac...

por Usuario desconocido, el 03.08.2012 a las 11:49
- 0
- 0
Curso de html para email responsive

Hola gente! No se si este tema se ha tocado en otro sitio, he buscado y lo que encontré es del añ...

por zael
- 3
- 4
Curso de desarrollo web con HTML5 y CSS3

Buenos días a tod@s. Desde Imagina Formación os queremos informar que ya tenemos abiertas las co...

por Usuario desconocido, el 27.07.2012 a las 11:16
- 0
- 0
¿Formación HTML y CSS?

Hola, estoy intentando hacer un curso/master o lo que sea sobre programación de webs (html5, Css,...

por descodificate
- 0
- 6
¿Estudiar Bellas Artes es una perdida de tiempo?

Hola, soy nuevo y me gustaría pedir vuestra opinión. He empezado bellas artes en la universidad d...

por oscarvelena
- 57
- 25
ES RENTABLE LA MEMBRESIA PLUS?

Hola a todos, llevo un buen tiempo en domestika y ya llevo 103 cursos comprados. Pero me encuentr...

por lilypanama24
- 32
- 23

Tarea 4.1 Curso Int. Al Desarrollo Web Responsive con HTML y CSS

0 comentarios

Entra o únete Gratis para comentar

Categorías

Áreas

Software

Listas

Último post del blog

0 comentarios

Entra o únete Gratis para comentar