PRACTICA #3 DISEÑO RESPONSIVO CON Flexbox - VPD - Unlocked

PRACTICA #3
DISEÑO RESPONSIVO CON Flexbox

PROGRAMACIÓN WEB II (INF- 122)
index.html
<!doctype html>
<html lang="es">
<head> <meta charset="utf-8"/>
<title>Flexbox</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0 minimum-scale=1.0"/>
<link rel="stylesheet" href="fontawesome-free-6.2.0-web/css/brands.min.css"/>
<link rel="stylesheet" href="fontawesome-free-6.2.0-web/css/solid.min.css"/>
<link rel="stylesheet" href="fontawesome-free-6.2.0-web/css/fontawesome.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css"/>
</head>
<body>
<div class="contenedor">
<header>
<div class="logo">
<img src="imagenes/El mundo.png" width="150" alt="">
<a href="#">UMSA en el mundo</a>
</div>
<nav> 


<ul>
<li><a href="#">UMSA</a></li>
<li><a href="#">FACULTADES</a>

<ul>
<li><a href="#">Agronomia</a></li>
<li><a href="#">Ciencias Ecionomicas y Finacieras</a></li>
<li><a href="#">Ciencias Puras y Naturales</a></li>
<li><a href="#">Odontologia</a></li>
<li><a href="#">Tecnologia</a></li>
</ul>

</li>
<li><a href="#">POSTGRADO</a></li>
<li><a href="#">INVESTIGACION</a></li>
<li><a href="#">CONTACTANOS</a></li>
</ul>

</nav>

</header>
<section class="main">
<article>
<h2 class="titulo">UNIVERSIDAD MAYOR DE SAN ANDRÉS</h2>
<h2 class="titulo">INTRODUCCION</h2>
<p>La Universidad Mayor de San Andrés, (también conocida usualmente
por la sigla UMSA) es la principal universidad pública del Estado Plurinacional de
Bolivia, establecida desde 1830 en el departamento de La Paz (sede de gobierno) y
desplegada a lo largo del mismo, en la ciudad capital y sus provincias en 4 Centros
Regionales Universitarios (CRUs) y diversas Sedes Universitarias Locales (SULs). La
UMSA es la segunda universidad más antigua de Bolivia, después de la Universidad San
Francisco Xavier de Chuquisaca (1624) y la más representativa del Sistema de la
Universidad Boliviana.</p>
<p>Es uno de los centros académicos superiores más prestigiosos del país, cuna de
diferentes ideologías y partícipe de muchos movimientos sociales durante los
diferentes periodos de gobierno en la historia de Bolivia, a la vez enseña y factum
de la educación nacional. En el ámbito del alumnado, hasta el año 2016, la
Universidad Mayor de San Andrés tenía en sus aulas alrededor de 74.391 estudiantes,
de los cuales 4013 obtuvieron el título de licenciado o su equivalente (pregrado)
</p>
</article>
<article>
<h2 class="titulo">MISIÓN</h2>
<p>MISIÓN
Formar profesionales altamente calificados, con compromiso y responsabilidad social,
con reflexión y pensamiento crítico, emprendedor y constructor de una sociedad justa
e inclusiva. Promoviendo la innovación integrada al Estado, la sociedad y la
comunidad científica y académica internacional, impulsando la progresiva
transformación en busca de mejora de calidad de vida de la población.
</p>
</article>
<article>
<h2 class="titulo">VISIÓN</h2>
<p>Universidad de investigación, emprendedora e innovadora con
reconocimiento internacional, valorada por su contribución a la generación de
conocimiento y formación de profesionales líderes en la revolución del pensamiento
con responsabilidad y compromiso al servicio de la sociedad.</p>
</article>
</section>
<aside>
<h4 class="titulo">Portal Informativo</h4>
<div class="widget">
<a href="#"><img src="imagenes/DesarrolloS.jpg"></a>
</div>
<a href="#"><img src="imagenes/Monografia.jpg"></a>
</div>
<a href="#"><img src="imagenes/convocatoria01.jpg"></a>
</div>
<a href="#"><img src="imagenes/maestria.jpg"></a>
</div>
</aside>
<footer>
<section class="links">
<a href="https://es-la.facebook.com/"><i class="fa-brands fa-

facebook"></i></a>
<a href="https://twitter.com/?lang=es"><i class="fa-brands fa-
twitter"></i></a>
<a href="https://www.instagram.com/"><i class="fa-brands fa-
instagram"></i></a>
<a href="https://www.google.com/?hl=es"><i class="fa-brands fa-
google"></i></a>
</section>
<div class="links">
<a href="#"><i class="fa-solid fa-phone"></i></a>
<a href="#"><i class="fa-solid fa-envelope"></i></a>
</div>
</footer>
</div>
</body>
</html>
estilos.css
/* CSS Document */
* {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
box-sizing: border-box;/*Tamano de caja; Le dice al navegador que tenga en cuenta
cualquier borde y relleno en los valores que especifique para el ancho y la altura de
un elemento*/
}
.contenedor {
width:100%; /*Ancho de la pagina*/
max-width:1000px; /*Ancho maximo*/
margin:auto; /*Para centrar nuestra pagina WEB*/
text-align:justify;
/* Flexbox */ /*el contenedor es padre de todos los hijos (header, footer, etc)*/
display:flex;/*Para utilizar esta metodologia de maquetacion Flexbox*/
flex-direction: row; /*Define la direccion de los elementos hijos en filas*/
flex-wrap: wrap;/*Ordena los elementos en varias lineas (row; filas), si un
elemento no cave se pone debajo del otro*/
/*flex-flow:row wrap; Simplicado*/
}
body {
background:#006699;
}
/*Por que en header; header es elemento hijo del contenedor pero en padre del
elemento hijo menu de navegacion*/
header {
background:#0000CC;
width:100%;
padding:20px;
/* Flexbox */
display: flex; /*Ponemos un display-flex porque header va ser un elemento
padre*/
justify-content:space-between;/*Distribuir el espacio libre adicional sobrante a
lo largo del eje principal*/
align-items:center;
flex-direction:row; /*pone los elemento en linea (Fila)*/
flex-wrap:wrap; /*Si un elemento no cave se pone debajo del otro*/
}
header .logo {
color:#fff;
font-size:30px;
}
header .logo img {

width:50px;
vertical-align: top;
}
header .logo a {
color:#fff;
text-decoration: none;
line-height:50px;
}
/*aplicamos flex a nav porque nav sera un elemento padre y los enlaces seran
elementos hijo*/
header nav {
width:50%;
/* Flexbox */
display:flex;
flex-wrap:wrap;
align-items:center;
}
header nav ul a { /*afecta al elemento <a> no al nav*/

display:block;
color:#fff;
text-decoration:none;
/*font-weight:400;*/
font-size:10px;
padding:10px;
letter-spacing:1px;
/* Flexbox */ /*como a es elemento hijo de nav podemos aplicar propiedades de
Flexbox*/
/*flex-grow:1; para que los elementos se dimensionen para abarcar el 100%*/
}
/* items del menu */

header nav ul li {
position:relative;
float:left;
margin:0;
padding:0;
list-style: none;
}
/* items del menu */
/* efecto al pasar el raton por los items del menu */
header nav li:hover {
background:#5b78a7;
border: 1px solid rgba(255, 255, 255, 1);
transition: all 0.5s ease 0s;
}
/* efecto al pasar el raton por los items del menu */
/* menu desplegable */
header nav ul ul {
display:none; /*Escondemos los enlaces del submenu con display: none y luego los
mostramos aplicando display: block con el selector :hover*/
position:absolute;
top:100%;
left:0;
background:#0099FF;
padding:0;
}
/* items del menu desplegable */
header nav ul ul li {
float:none; /*Para que nuestros enlaces aparezcan de forma vertical y no horizontal
como en el menu principal, aplicaremos la regla CSS de float: none*/
width:150px
}
/* enlaces de los items del menu desplegable */

header nav ul ul a {
line-height:120%;
padding:10px 15px;
}
/* items del menu desplegable al pasar el raton */

header nav ul li:hover ul {
display:block;
}
/* menu desplegable */
.main {
background:#fff;
padding:20px;
flex:1 1 70%; /*1; la proporcion cuanto crecera el elemento, 1; cla proporcion
cuanto se encogeria, 70%; seria el ancho (width)*/
/*flex:1;*/ /*que el elmento main se va estirar en la proporcion que los demas*/
}
.main article {
margin-bottom: 20px;
padding-bottom:20px;
border-bottom:1px solid #000;
padding:2px;
}
.main article h2{

text-align:right;
}
.main article:nth-last-child(1){ /*Le indico que al ultimo articulo no lo vas aplicar
ni margin ni el padding ni el borde :nth-last-child(1)*/
margin-bottom: 0;
padding-bottom: 0;
border-bottom:none;
}
p::before
{ content: '\A';
white-space: pre;
}
aside {
background:#e67e22;
padding:20px;
/*FLEX porque es elemento hijo*/
flex:1 1 30%; /*Si cresca si se encoja y que tenga un tamano de 30%*/
/*flex:0 0 300px;*/ /*el aside no qureremos que crescas no queremos que te
encojas vas a tener un tamano fijo de 300px*/
/*Porque tambien es elemento padre*/

display: flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:flex-start; /*Para que los elementos se pongan al inicio con
flex-end; hasta abajo o center*/
}
aside .widget {
background: #d35400;
height:150px;
margin:10px;
}
/*Imagenes*/
.widget img { /*Imagen centrada*/

display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
border-radius: 8px;
border: 2px solid darkblue;
}
.widget img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* Para IE8 y anteriores */
transition:all .5s ease-in-out;
-webkit-transform:scale(1.1);transform:scale(1.1);
}
footer {
background:#666666;
width: 100%;
padding:20px;
/* Flexbox */
display: flex; /*porque es un elemento padre*/
flex-wrap:wrap;
justify-content:space-between;
}
footer .links {
display:flex;
flex-wrap:wrap;
}
footer .links a img {

flex-grow:1; /*para que los elementos hijo a, abarquen el 100%*/
width:40px;
height:40px;
color:#fff;
padding:10px;
text-align: center;
}
footer .links a:hover {

background:#333333;
}
footer .social a {
color:#fff;
text-decoration: none;
padding:10px;
display: inline-block;/*lo ponemos porque no tenemos nada de flexbox en el
elemento social, para que un elemento se ponga al lado del otro*/
}
footer i{
padding:10px;
}
@media screen and (max-width: 800px) { /*Cuando llegue un dispositivo movil de 800px
que los elementos dentro de .contenedor pasen a columna, es adaptable para
dispositivos moviles*/
.contenedor {
flex-direction:column; /*Todos los elementos pasaran a se columna en el
elemento .contenedor. Recordar que le pusimos con flexbox en el elemento .contenedor:
flex-flow:row wrap; row; fila*/
}
header {
flex-direction:column; /*Tambien en el elemento header*/
padding:0;
}
header .logo {
margin:20px 0;
}
header nav {
width: 100%;
}
aside {
flex-direction:row; /*Cambiamos los elementos a filas (row)*/
flex:0;
}
aside .widget {
flex-grow:1; /*y para que los elementos sean el mismo ancho ponemos flex-
grow:1*/
}
}
@media screen and (max-width: 600px) { /*Para dispositivos moviles de 600px*/
aside {
flex-direction:column;/*Cambiar la direccion de los elemntos dentro de aside
a columna*/
Justify-content:center;
}
footer {
justify-content:space-around; /*Los elemntos de footer espaciado centrado*/
}
}
Resultado

PRACTICA #3 DISEÑO RESPONSIVO CON Flexbox - VPD - Unlocked

Cargado por

Copyright:

Formatos disponibles

PRACTICA #3 DISEÑO RESPONSIVO CON Flexbox - VPD - Unlocked

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PRACTICA #3 DISEÑO RESPONSIVO CON Flexbox - VPD - Unlocked

Cargado por

Copyright:

Formatos disponibles

PRACTICA #3

DISEÑO RESPONSIVO CON Flexbox

<a href="https://es-la.facebook.com/"><i class="fa-brands fa-

header .logo img {

header nav ul a { /afecta al elemento <a> no al nav/

/* items del menu */

/* items del menu desplegable */

/* enlaces de los items del menu desplegable */

/* items del menu desplegable al pasar el raton */

.main article h2{

/Porque tambien es elemento padre/

.widget img { /Imagen centrada/

footer .links a img {

footer .links a:hover {

También podría gustarte