Staff en línea

Página 1 de 2. 1, 2  Siguiente

[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
[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 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

[ayuda] para terminar una página html 
el Mar Oct 22, 2019 8:42 am
staff


Última edición por Fibo el Mar Oct 22, 2019 1:24 pm, editado 1 vez
Hola, creo que el problema es de configuración del HTML

Revisa estas opciones
[en curso] para terminar una página html 1Uq1qzeh

Deseas utilizar la parte alta y la parte baja de la página de tu foro? NO

Por cierto si es el lugar adecuado para hacer tus dudas de Soporte.

Edito: @iRodrigo te mande un MP, por favor leelo
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

Re: [en curso] para terminar una página html 
el Mar Oct 22, 2019 12:27 pm
Claro @Fibo eso lo sé. Pero necesito la ayuda de como armar el html + css porqué en sí dejo los dos ejemplos de cómo queda.
Y una del problema que queda mal u la otra que estaba modificando.

Sólo me falta que me ayuden a armar bien todo el html
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 1:40 pm
staff
@iRodrigo necesitamos que describa de la mejor manera que es lo que quieres, yo entendí un CSS para mejorar tu página web, pero por favor da más indicaciones precisas (colores, estilos, posición, aspecto, en fin la creatividad es infinita.

Edita el post(y ten cuidado, jeje) y pon esos detalles y pon el link del tema especifico de la página de donde sacaste el codigo(para mejor referencia por cualquier cosa)
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

Re: [en curso] para terminar una página html 
el Mar Oct 22, 2019 2:25 pm
@FIBO

Los elementos están en los códigos, no quiero agregarle más css u otra cosa.

Sólo me falta que el código de html y de css se unan, porqué cuando lo pego en mi foro en modo siemple los html, y le doy a previsualización.
Se ve todo deforme y no tengo conocimiento de html.

Lo saque de Codepen, Wiggly Staff Face/ o User no me acuerdo.
Así se llamaba el proyecto. Saludos!
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 6:41 pm
staff
Hay un conflicto de DIVs. La cantidad de DIV's abierto no es la misma que los DIV's cerrados.

Modificaste eso tu @iRodrigo
?

Manda el codigo original por favor
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

Re: [en curso] para terminar una página html 
el Mar Oct 22, 2019 7:11 pm
No, no lo modifique. Es como digo. Les cambié unas cosas como los nombres y el avatar.
Más que eso no le hice nada a parte de html.
Después en el css le agregue un padding y un border-radius.

@Fibo
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 7:12 pm
staff


Última edición por Fibo el Mar Oct 22, 2019 7:16 pm, editado 2 veces
Incisto, hay errores en la codificacion HTML.
Veo que puedo hacer.

Captura:
[en curso] para terminar una página html PBPycpoh

Mira los codigos rojos indican error.

@iRodrigo
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

Re: [en curso] para terminar una página html 
el Mar Oct 22, 2019 7:13 pm
Dale, espero me que puedas ayudar en eso y unirlos. Ya después usarlo como página en mi foro.

Saludos @Fibo
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 7:22 pm
staff
En el CSS, tambien hay HORRORES.

Edit: Me rindo.


@YoshiGM ¿Puedes ayudarme?
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.