< html lang =" es " > < cabeza > < juego de caracteres meta =" UTF-8 " > < 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-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 " > < i class =" icon-facebook " > < i class =" icon-twitter " > < 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 ) }

Apock gráficos < div > < i class =" fab fa-facebook-square " > < i class =" fab fa-twitter " > < i class =" fab fa-instagram " > < i class =" fab fa-youtube " >