< html lang =" es " >
< cabeza >
< juego de caracteres meta =" UTF-8 " >
< meta name =" viewport " content =" ancho=ancho-del-dispositivo, escala-inicial=1.0 " >
< tÃtulo > Diseño web Apock
< enlace rel =" hoja de estilo " tipo =" texto/css " href =" https://necolas.github.io/normalize.css/8.0.1/normalize.css " >
< enlace rel =" hoja de estilo " href =" https://pro.fontawesome.com/releases/v5.10.0/css/all.css " integridad =" sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p " crossorigin =" anónimo " />
< cuerpo >
< tipo de estilo =" texto/css " >
/*=====================================
restablecer estilos
no es necesario que copies esto
====================================*/
html {
-webkit-texto-tamaño-ajuste : 100 % ;
-ms-texto-tamaño-ajuste : 100 % ;
ajuste de tamaño de texto : 100 % ;
altura de lÃnea : 1.4 ;
}
* {
margen : 0 ;
relleno : 0 ;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
tamaño de caja : cuadro de borde;
}
cuerpo {
color : # 404040 ;
familia de fuentes : "Arial" , Segoe UI , Tahoma , sans-serifl , Helvetica Neue , Helvetica;
}
/*=====================================
estilos de la utilidad
Copiar esto
====================================*/
. sección-perfil-usuario . perfil-usuario-cuerpo ,
. seccion-perfil-usuario {
pantalla : flexible;
envoltura flexible : envoltura;
dirección de flexión : columna;
alinear elementos : centro;
}
. sección-perfil-usuario . perfil-usuario-header {
ancho : 100 % ;
pantalla : flexible;
justificar-contenido : centro;
fondo : degradado lineal ( # B873FF , transparente);
margen inferior : 1,25 rem ;
}
. sección-perfil-usuario . perfil-usuario-portada {
pantalla : bloque;
posición : relativa;
ancho : 90 % ;
altura : 17 rem ;
imagen de fondo : gradiente lineal ( 45 grados , # BC3CFF , # 317FFF );
borde-radio : 0 0 20 px 20 px ;
/*
imagen de fondo: url('http://localhost/multimedia/png/user-portada-3.png');
repetición de fondo: sin repetición;
posición de fondo: centro;
tamaño de fondo: portada;
*/
}
. sección-perfil-usuario . perfil-usuario-portada . boton-portada {
posición : absoluta;
arriba : 1 rem ;
derecha : 1 rem ;
borde : 0 ;
borde-radio : 8 px ;
relleno : 12 px 25 px ;
color de fondo : rgba ( 0 , 0 , 0 , .5 );
color : #fff ; _
cursor : puntero;
}
. sección-perfil-usuario . perfil-usuario-portada . boton-portada i {
margen derecho : 1 rem ;
}
. sección-perfil-usuario . perfil-usuario-avatar {
pantalla : flexible;
ancho : 180 pÃxeles ;
altura : 180 pÃxeles ;
alinear elementos : centro;
justificar-contenido : centro;
borde : 7 px sólido #FFFFFF ; _
color de fondo : # DFE5F2 ;
borde-radio : 50 % ;
sombra de caja : 0 0 12 px rgba ( 0 , 0 , 0 , .2 );
posición : absoluta;
abajo : -40 px ;
izquierda : calc ( 50 % - 90 px );
Ãndice z : 1 ;
}
. sección-perfil-usuario . perfil-usuario-avatar img {
ancho : 100 % ;
posición : relativa;
borde-radio : 50 % ;
}
. sección-perfil-usuario . perfil-usuario-avatar . boton-avatar {
posición : absoluta;
izquierda : -2 px ;
arriba : -2 px ;
borde : 0 ;
color de fondo : #fff ;
sombra de caja : 0 0 12 px rgba ( 0 , 0 , 0 , .2 );
ancho : 45 pÃxeles ;
altura : 45 pÃxeles ;
borde-radio : 50 % ;
cursor : puntero;
}
. sección-perfil-usuario . perfil-usuario-cuerpo {
ancho : 70 % ;
posición : relativa;
ancho máximo : 750 px ;
}
. sección-perfil-usuario . perfil-usuario-cuerpo . tÃtulo {
pantalla : bloque;
ancho : 100 % ;
tamaño de fuente : 1,75 em ;
margen inferior : 0,5 rem ;
}
. sección-perfil-usuario . perfil-usuario-cuerpo . texto {
color : # 848484 ;
tamaño de fuente : 0,95 em ;
}
. sección-perfil-usuario . perfil-usuario-footer ,
. sección-perfil-usuario . perfil-usuario-bio {
pantalla : flexible;
envoltura flexible : envoltura;
acolchado : 1,5 rem 2 rem ;
sombra de caja : 0 0 12 px rgba ( 0 , 0 , 0 , .2 );
color de fondo : #fff ;
borde-radio : 15 px ;
ancho : 100 % ;
}
. sección-perfil-usuario . perfil-usuario-bio {
margen inferior : 1,25 rem ;
alineación de texto : centro;
}
. sección-perfil-usuario . lista-datos {
ancho : 50 % ;
estilo de lista : ninguno;
}
. sección-perfil-usuario . lista-datos li {
relleno : 5 px 0 ;
}
. sección-perfil-usuario . lista-datos li > . icono {
margen derecho : 1 rem ;
tamaño de fuente : 1,2 rem ;
alineación vertical : medio;
}
. sección-perfil-usuario . redes-sociales {
posición : absoluta;
derecha : calc ( 0 px - 50 px - 1 rem );
superior : 0 ;
pantalla : flexible;
dirección de flexión : columna;
}
. sección-perfil-usuario . redes-sociales . botones-redes {
borde : 0 ;
color de fondo : #fff ;
decoración de texto : ninguno;
pantalla : en lÃnea-flex;
alinear elementos : centro;
justificar-contenido : centro;
ancho : 50 pÃxeles ;
altura : 50 pÃxeles ;
borde-radio : 50 % ;
color : #fff ; _
sombra de caja : 0 0 12 px rgba ( 0 , 0 , 0 , .2 );
tamaño de fuente : 1,3 rem ;
}
. sección-perfil-usuario . redes-sociales . boton-redes + . botones-redes {
margen superior : 0,5 rem ;
}
. sección-perfil-usuario . boton-redes . facebook {
color de fondo : # 5955FF ;
}
. sección-perfil-usuario . boton-redes . twitter {
color de fondo : # 35E1BF ;
}
. sección-perfil-usuario . boton-redes . instagram {
fondo : gradiente lineal ( 45 grados , # FF2DFD , # 40A7FF );
}
/* adaptacion a dispositivos */
@media ( ancho máximo : 750 px ) {
. sección-perfil-usuario . lista-datos {
ancho : 100 % ;
}
. sección-perfil-usuario . perfil-usuario-portada ,
. sección-perfil-usuario . perfil-usuario-cuerpo {
ancho : 95 % ;
}
. sección-perfil-usuario . redes-sociales {
posición : relativa;
dirección de flexión : fila;
ancho : 100 % ;
izquierda : 0 ;
alineación de texto : centro;
margen superior : 1 rem ;
margen inferior : 1 rem ;
alinear elementos : centro;
justificar-contenido : centro
}
. sección-perfil-usuario . redes-sociales . boton-redes + . botones-redes {
margen izquierdo : 1 rem ;
margen superior : 0 ;
}
}
< sección clase =" sección-perfil-usuario " >
< div class =" perfil-usuario-header " >
< div class =" perfil-usuario-portada " >
< div class =" perfil-usuario-avatar " >
< img src =" http://localhost/multimedia/relleno/img-c9.png " alt =" img-avatar " >
< tipo de boton =" boton " clase =" boton-avatar " >
< i clase =" far fa-image " >
< boton tipo =" boton " clase =" boton-portada " >
< i class =" far fa-image " > Cambiar fondo
< div class =" perfil-usuario-cuerpo " >
< div class =" perfil-usuario-bio " >
< h3 class =" titulo " > MarÃa Alejandra De la Cruz
< p class =" texto " > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
< div class =" perfil-usuario-footer " >
< ul class =" lista-datos " >
< li > < i class =" icono fas fas-map-signs " > Direccion de usuario:
< li > < i class =" icono fas fa-phone-alt " > Teléfono:
< li > < i class =" icono fas fa-maletÃn " > Trabaja en.
< li > < i class =" icono fas fa-building " > Carga
< ul class =" lista-datos " >
< li > < i class =" icono fas fas-map-marker-alt " > Ubicacion.
< li > < i class =" icono fas fa-calendar-alt " > Fecha nacimiento.
< li > < i class =" icono fas fas-user-check " > Registro.
< li > < i class =" icono fas fa-share-alt " > Redes sociales.
< div class =" redes-sociales " >
< a href ="" class =" boton-redes facebook fab fa-facebook-f " > < i class =" icon-facebook " >
< a href ="" class =" boton-redes twitter fab fa-twitter " > < i class =" icon-twitter " >
< a href ="" class =" boton-redes instagram fab fa-instagram " > < i class =" icon-instagram " >
< estilo >
. mensaje a {
color : heredar;
margen derecho : 0,5 rem ;
pantalla : bloque en lÃnea;
}
. mensaje a : hover {
color : # 309B76 ;
transformar : escala ( 1.4 )
}
< div class =" mis-redes " style =" display: block;position: fixed;bottom: 1rem;left: 1rem; opacity: 0.5; z-index: 1000; " >
< p style =" font-size: .75rem; " > Apock gráficos
< div >
< a target =" _blank " href =" https://www.facebook.com/ApockGraficos " > < i class =" fab fa-facebook-square " >
< a target =" _blank " href =" https://twitter.com/ApockGraficos " > < i class =" fab fa-twitter " >
< a target =" _blank " href =" https://www.instagram.com/ApockGraficos " > < i class =" fab fa-instagram " >
< a target =" _blank " href =" https://www.youtube.com/channel/UC15DkMZQ80aoW_Rqk4n2T_w " > < i class =" fab fa-youtube " >