Staff en línea

Página 2 de 2. Precedente  1, 2

[en curso] para terminar una página html
Tema iniciado por y Añadir a favoritos

[en curso] para terminar una página html 
el Lun Oct 21, 2019 10:50 pm


Última edición por iRodrigo el Mar Oct 22, 2019 1:28 pm, editado 1 vez
Recuerdo del primer mensaje :

[problema]URL:: https://lucianomicle.foroactivo.com/h3-staff
Versión de mi foro:: PhpBB3
Navegador:: Google Chrome
Descripcion del problema: Hola, no creo que sea el foro indicado para comentar del problema de HTML, en sí cree uno para que indique los staff y queda así como el problema que dejo en la imagen. Saque los códigos desde Codepen que elegí un tema, y lo edite a mi manera, en sí desde mi panel de administración de ForoActivo (en mi foro).
Quiero agregar una página que indique los staff pero queda mal, todavía no me guié mejor con el tema de HTML y los CSS.
Dejaré los códigos a ver si alguien me puede ayudar a que quede terminado y listo para agregarlo en la página y que se muestre como quiero:
[en curso] para terminar una página html - Página 2 EkppInFh

Dejo los códigos:
HTML
Código:
<div class="staff-cards">
  <div class="staff-card">
    <div class="bogglehead">
      <img class="head" src="">
      <img class="face" src="https://i13.servimg.com/u/f13/19/81/07/80/1-7516.jpg">
    </div>
    <div class="name">Luciano Micle</div>
    <div class="title">Administrador - Fundador</div>
  </div>
  <div class="staff-card">
    <div class="bogglehead">
      <img class="head" src="">
      <img class="face" src="https://i13.servimg.com/u/f13/19/81/07/80/3-2615.gif">
    </div>
    <div class="name">Fantasma</div>
    <div class="title">Moderador - Colaborador</div>
  </div> 
 
</div>

CSS
Código:
body {
  font-family: sans-serif;
  background-color: lightgrey;
}
.staff-cards {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.staff-card {
  position: relative;
  width: 250px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 25px;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.5);
  margin: 30px;
  .bogglehead {
    width: 200px;
    height: 200px;
    img {
      width: 170px;
      position: absolute;
      padding: 15px;
      border: 1px solid #fff;
      border-radius: 100%;     
    }
    .face:hover{
      -webkit-animation-name: wiggle;
      -ms-animation-name: wiggle;
      -ms-animation-duration: 500ms;
      -webkit-animation-duration: 500ms;
      -webkit-animation-iteration-count: 1;
      -ms-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease-in-out;
      -ms-animation-timing-function: ease-in-out;
    }
  }
  .name {
    width: 100%;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
  }
  .title {
    color: #636363;
  }
}

@keyframes wiggle {
  0% {transform: rotate(4deg);}
  25% {transform: rotate(-2deg);}
  50% {transform: rotate(2deg);}
  75% {transform: rotate(-0.5deg);}
  100% {transform: rotate(0deg);}
}

iRodrigo
iRodrigo

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

145


Puntos :

178


Me gusta :

11


ingreso :

06/09/2019


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://lucianomicle.foroactivo.com/

Volver arriba Ir abajo

Re: [en curso] para terminar una página html 
el Mar Oct 22, 2019 8:31 pm
💔😞

Espero puedan ayudarme.
iRodrigo
iRodrigo

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

145


Puntos :

178


Me gusta :

11


ingreso :

06/09/2019


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://lucianomicle.foroactivo.com/

Volver arriba Ir abajo

Re: [en curso] para terminar una página html 
el Mar Oct 22, 2019 9:17 pm
Veamos, no es tan complicada la cosa...

Código:
img.face {
    max-width: 120px;
    border-radius: 100px;
}

Así logras que se vean pequeños y redondeados.
En la consola me arroja un montón de errores en el CSS porque tienes atributos inválidos con corchetes "]" y el PA no puede interpretarlos.

YoshiGM
YoshiGM

¿Que estoy pensando? :

#CelebrandoMiCumple [table class=fecha_up][td]Se modifico:5/11/19 - 9:09 hrs. [/td][/table]


Banner en temas :

https://i.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1257


Puntos :

1674


Me gusta :

249


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


https://www.yoshifansclub.net/forum

Volver arriba Ir abajo

Re: [en curso] para terminar una página html 
el Miér Oct 23, 2019 2:34 pm
Alguna novedad por el trabajo de HTML y CSS? Esperó las respuesta.
iRodrigo
iRodrigo

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

145


Puntos :

178


Me gusta :

11


ingreso :

06/09/2019


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://lucianomicle.foroactivo.com/

Volver arriba Ir abajo

Re: [en curso] para terminar una página html 
el Miér Oct 23, 2019 3:17 pm
staff
Tus codigos son un desastre.
Mando a Papelera
Fibo
Fibo

¿Que estoy pensando? :

Nuestra filosofía http://bit.ly/OpenSourcephpBB3 [table class=fecha_up][td]Se modifico:9/11/19 - 15:53 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/zVxw0kMh.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

616


Puntos :

896


Me gusta :

156


ingreso :

11/09/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.