Subsecretaría de Educación Media Superior

Dirección General de Educación Tecnológica Industrial

Desarrolla Aplicaciones Web con

Conexión a Bases de Datos

Actividad 2.5.
DOCUMENTAR CÓDIGO
Ponce Zavala Ángel Alfredo
5; H
Liz Ariana Nieto Díaz
FECHA DE ENTREGA SAN LUIS POTOSI A 19/11/2020

Código style.css
/*Ponce Zavala Ángel Alfredo 5; H*/

/*Reset REMS*/

html{

font-size: 62.5%;/*Reset para Rems -62.5% =10px de 16px*/

/*FUNTES

body{

font-family: 'Lato', sans-serif; /*Tipografia usada en el proyeto importada de

Google Fonts*/

font-size: 1.6rem; /*Tamaño de Letra*/

line-height: 2; /*Interlineado de dos*/

/*GLOBALES*/

.contenedor{

max-width: 120rem; /* Ancho máximo de un elemento */

margin: 0 auto ; /* Margen alrededor de los elementos,en este caso el

navegador calcula el margen */

/*definiion de estilos*/

h1{

font-size: 3.6rem; /*Tamaño de Letra*/

h2{

font-size: 3.4rem; /*Tamaño de Letra*/

h3{
 font-size: 3rem; /*Tamaño de Letra*/

h4{

font-size: 2.6rem; /*Tamaño de Letra*/

/*Utilidades Framework*/

img{

max-width: 100%; /* Ancho máximo de un elemento */

.seccion {

margin-top: 2rem; /* Margen superior de un elemento */

margin-bottom: 2rem; /* Margen inferior de un elemento */

.fw-300{ /*Sirve para quitar enfasis*/

font-weight: 300;

.centrar-texto{

text-align: center; /*Alineamineto del texto*/

.d-block{

display: block !important; /*!important toma como prioridad este valor*/

/*Botones*/

.boton {

color: white; /* Color que asignaremos al boton */

 font-weight: 700 ; /* Especifica el grosor de la letra */

text-decoration: none; /* Tipo de decoracion en la linea del texto */

font-size: 1.8rem; /*Tamaño de Letra*/

padding: 1rem 3rem; /*Espacio entre el contenido del elemento y su borde */

margin-top: 3rem; /* Margen superior de un elemento */

display: inline-block; /*Establece los tipos de visualización interna y externa

de un elemento*/

text-align: center; /*Alineamineto del texto*/

.boton-amarillo{

background-color: yellow; /*Define el color de fondo de un elemento*/

.boton-verde {

background-color: green; /*Define el color de fondo de un elemento*/

/*header*/

.site-header.inicio{

background-image: url(../img/header.jpg); /*Establece la imagen de fondo */

background-position: center; /*Posiciona una imagen de fondo dentro de su

contenedor*/

background-size: cover; /*Define el tamaño de la imagen*/

height: 100vh; /*Especifica la altura del area de contenido de un elemento*/

min-height: 60rem; /*Define la altura mínima de un elemento*/

.contenido.header{

height: 100%; /*Especifica la altura del area de contenido de un elemento*/

 display: flex; /*Establece los tipos de visualización interna y externa de un
elemento*/

align-items: center; /*Establece el valor align-self sobre todos los

descendientes directos de un grupo*/

padding-top: 3rem; /*Establece el espacio de relleno requerido en la parte

superior del elemento*/

.contenido-header h1{

color: white; /*Define el color que quiera asignar*/

padding-bottom: 2rem; /*Establece el espacio de relleno requerido en la parte

inferior del elemento*/

max-width: 60rem; /* Ancho máximo de un elemento */

line-height: 2;

.barra{

display: flex; /*Establece los tipos de visualización interna y externa de un

elemento*/

justify-content: space-between; /*Define cómo el navegador distribuye el

espacio entre y alrededor de los items*/

align-items: center; /*Establece el valor align-self sobre todos los

descendientes directos de un grupo*/

padding-top: 3rem; /*Establece el espacio de relleno requerido en la parte

superior del elemento*/

.navegador{

color: #ffffff; /*Define el color que quiera asignar*/

text-decoration: none; /* Tipo de decoracion en la linea del texto */

font-size: 1.2rem; /*Tamaño de Letra*/

 margin-right: 1.3rem; /*Establece el margen derecho de un elemento*/

.navegador a:hover{

color: orangered; /*Define el color que quiera asignar*/

.navegador a:last-of-type{

margin:0; /* Margen alrededor de los elementos*/

/*Sirve para columnas*/

.iconos-nosotros {

display: flex; /*Establece los tipos de visualización interna y externa de un

elemento*/

.icono{

flex-basis: calc(33.3%-1rem); /*Operacion para dividir la pantalla*/

text-align: center; /*Alineamineto del texto*/

.icono.h3 {

text-transform:uppercase; /*Cambia las letras minusculas a mayusculas*/

.contenedor-anuncios {

display: space-between; /*Separacion entre las imagenes y textos*/

.anuncio{

flex-basis: calc(33.3%-1rem); /*Operacion para dividir la pantalla*/

border-style: solid; /*Propiedades deñ borde*/

 border-color: #b5b5b5; /*Establece el color al borde*/

border-width: 2px; /*Establece el ancho de los cuatro bordes de un elemento

*/

background: #f5f5f5; /*Define los efectos de fondo de los elementos*/

.contenido-anuncio{

/*

padding-top: 2rem;

padding-right:4rem;

padding-bottom:2rem;

padding-left: 4rem;

Mas simple

padding:2rem 4rem;

*/

padding:3rem; /*Espacio entre el contenido del elemento y su borde */

/*

.contenido-anuncio h3{

margin:0;

.contenido-anuncio p{

margin:0;

*/

.precio{

color: #71b100; /*Define el color que quiera asignar*/

 font-weight: 700; /*Especifica el peso o grueso de la letra*/

.ver-todas{

display: flex; /*Separacion entre las imagenes y textos*/

justify-content: flex-end; /*Alinecacion de contendios al final*/

.imagen-contacto{

background-image: url(../img/encuentra.jpg);

background-position: center; /*Posiciona una imagen de fondo dentro de su

contenedor*/

background-size: cover; /*Define el tamaño de la imagen*/

height: 400px; /*Especifica la altura del area de contenido de un elemento*/

display:flex; /*Separacion entre las imagenes y textos*/

align-items:center; /*Establece el valor align-self sobre todos los descendientes

directos de un grupo*/

.contenido-contacto{

flex:1; /*ndica la capacidad de un elemento flexible para alterar sus dimensiones

y llenar el espacio disponible*/

coLor:#ffffff /*Define el color que quiera asignar*/

.contenido-contacto p{

font-size:1.8 rem; /*Tamaño de Letra*/}