• TibiaFace

    Tibiaface | Una comunidad Open Tibia donde encontras : mapas, scripts, Otserver, npc y amigos etc ...

    .
    demo menumenu

    Afiliados



    Votar:

    Adaptar a mi pagina

    Compartir:

    Ver el tema anterior Ver el tema siguiente Ir abajo  Mensaje (Página 1 de 1.)

    1Sưu tầm Adaptar a mi pagina Dom Mar 12, 2023 5:06 pm

    Dragonnixe

    Dragonnixe
    Miembro
    Miembro
    Hola Buenas, quisiera que alguien me ayude a adaptar o me dijera que debo copiar para tener esto mismo en mi web

    Gif referencial

    adjunto el codigo del layout
    Layout

    y este es mi pagina, qusiera ponerla ahi

    Imagen

    se que tiene que ver algo con "slider_bg" pero no se como colocarlo en mi layout, solo pido que se me explique no que se me adapte o algo parecido, gracias! Embarassed

    2 participantes

    2Sưu tầm Re: Adaptar a mi pagina Dom Mar 12, 2023 5:52 pm

    [Admin] God Maya

    [Admin] God Maya
    Administrador
    Administrador
    aqui tienes pegalo donde gustes

    Código:

    <div class="container">
     
      <ul class="slider">
        <li id="slide1">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3947459/car.jpg"/>
        </li>
        <li id="slide2">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3947459/sunset.jpg"/>
        </li>
        <li id="slide3">
          <h1>Ejemplo con otros elementos</h1>
          <p>Esto es un párrafo de ejemplo para comprobar que podemos meter cualquier tipo de elementos en el slider</p>
          <a href="https://kikopalomares.com/">¡Corre a mi web para más contenido!</a>
        </li>
      </ul>
     
      <ul class="menu">
        <li>
          <a href="#slide1">1</a>
        </li>
        <li>
          <a href="#slide2">2</a>
        </li>
        <li>
          <a href="#slide3">3</a>
        </li>
      </ul>
     
    </div>

    y aqui tienes su css

    Código:


    body{
      background-color: lightgrey;
      font-family: sans-serif;
    }

    .container{
      margin: auto;
      background-color: white;
      width: 800px;
      padding: 30px;
    }

    ul, li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    ul.slider{
      position: relative;
      width: 800px;
      height: 300px;
    }

    ul.slider li {
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        width: inherit;
        height: inherit;
        transition: opacity .5s;
        background:#fff;
    }

    ul.slider li img{
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    ul.slider li:first-child {
        opacity: 1; /*Mostramos el primer <li>*/
    }

    ul.slider li:target {
        opacity: 1; /*Mostramos el <li> del enlace que pulsemos*/
    }

    .menu{
      text-align: center;
      margin: 20px;
    }

    .menu li{
      display: inline-block;
      text-align: center;
    }

    .menu li a{
      display: inline-block;
      color: white;
      text-decoration: none;
      background-color: grey;
      padding: 10px;
      width: 20px;
      height: 20px;
      font-size: 20px;
      border-radius: 100%;
    }



    Adaptar a mi pagina YNU5B25
    2 participantes
    http://www.tibiaface.com

    3Sưu tầm Re: Adaptar a mi pagina Dom Mar 12, 2023 6:28 pm

    Dragonnixe

    Dragonnixe
    Miembro
    Miembro
    coloque y lo adapte, pero me salen asi

    [Tienes que estar registrado y conectado para ver este vínculo]

    2 participantes

    4Sưu tầm Re: Adaptar a mi pagina Dom Mar 12, 2023 6:54 pm

    [Admin] God Maya

    [Admin] God Maya
    Administrador
    Administrador
    Dragonnixe escribió:coloque y lo adapte, pero me salen asi

    [Tienes que estar registrado y conectado para ver este vínculo]

    el css no lo esta leyendo

    este es el github del slide

    [Tienes que estar registrado y conectado para ver este vínculo]



    Adaptar a mi pagina YNU5B25
    2 participantes
    http://www.tibiaface.com

    Contenido patrocinado


    2 participantes

    Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje (Página 1 de 1.)

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

     

    BienvenidosTibiaFace es una comunidad de Open Tibia. Para participar debes estar registrado (click para Regístrate).