Jump to content

[HTML + CSS] Объявления / Информация для вашего сайта

MrHaim
MrHaim
in HTML, CSS, XML

Featured Replies

Posted
comment_193121

ogloszenie.thumb.png.06f69f117fe06c1ed0200eedfc9f9aa6.png

CSS:

Спойлер


/* CSOWY INFORMATOR */

.info_csowicze_background {
    padding: 5px 20px 4px 10px;
    width: 150px;
    font-size: 12px;
    color: #cdcfd2;
    font-weight: 600;
    float: left;
}
.info_csowicze_newsbadge {
    text-transform: uppercase;
    height: 20px;
    line-height: 22px;
    font-size: 11px;
    padding: 0 8px;
    border-radius: 2px;
    font-weight: 500;
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    text-shadow: none;
    letter-spacing: 0;
}
.info_csowicze_redakcja {
    background: #1273ca;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
    -moz-box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
    box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
}
.info_csowicze_info {
    background: #1273ca;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
    -moz-box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
    box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
}
.info_csowicze_Txt {
    padding: 5px 20px 4px 0;
    float: left;
}
.info_csowicze_Txt span {
    font-size: 12px;
    color: #cdcfd2;
    font-weight: 400;
}


.info_csowicze_odnosnik_poo {
    float: right;
    padding: 5px 20px 4px 20px;
}
.info_csowicze_odnosnik_poo span {
    font-size: 12px;
    color: #58B947;
    font-weight: 600;
}
.info_csowicze_odnosnik_poo span:before {
    font: normal 17px 'Font Awesome 5 Free';
    content: "\f0e6";
    color: #58B947;
    text-shadow: 0 0 20px rgba(51,204,204,0.34);
    margin-right: 5px;
}

.info_csowicze_odnosnik_po {
    float: right;
    padding: 5px 20px 4px 20px;
}
.info_csowicze_odnosnik_po span {
    font-size: 12px;
    color: #767c86;
    font-weight: 600;
}
.info_csowicze_odnosnik_po span:before {
    font: normal 17px 'Font Awesome 5 Free';
    content: "\f0e6";
    color: #33CCCC;
    text-shadow: 0 0 20px rgba(51,204,204,0.34);
    margin-right: 5px;
}


.info_csowicze_odnosnik_uslugi {
    float: right;
    padding: 5px 20px 4px 20px;
}
.info_csowicze_odnosnik_uslugi span {
    font-size: 12px;
    color: #767c86;
    font-weight: 600;
}
.info_csowicze_odnosnik_uslugi span:before {
    font: normal 17px 'Font Awesome 5 Free';
    content: "\f1b7";
    color: #FF9933;
    text-shadow: 0 0 20px rgba(255,153,51,0.34);
    margin-right: 5px;
}


.info_csowicze_odnosnik_premium {
    float: right;
    padding: 5px 20px 4px 20px;
}
.info_csowicze_odnosnik_premium span {
    font-size: 12px;
    color: #767c86;
    font-weight: 600;
}
.info_csowicze_odnosnik_premium span:before {
    font: normal 17px 'Font Awesome 5 Free';
    content: "\f155";
    color: #C2185B;
    text-shadow: 0 0 20px rgba(194,24,91,0.34);
    margin-right: 5px;
}

.info_csowicze_odnosnik_rekru {
    float: right;
    padding: 5px 20px 4px 20px;
}
.info_csowicze_odnosnik_rekru span {
    font-size: 12px;
    color: #767c86;
    font-weight: 600;
}
.info_csowicze_odnosnik_rekru span:before {
    font: normal 17px 'Font Awesome 5 Free';
    content: "\f234";
    color: #00C090;
    text-shadow: 0 0 20px rgba(0,192,144,0.34);
    margin-right: 5px;
}
.info_csowicze_odnosnik_typer {
    float: right;
    padding: 5px 20px 4px 20px;
}
.info_csowicze_odnosnik_typer span {
    font-size: 12px;
    color: #8518bc;
    font-weight: 600;
}
.info_csowicze_odnosnik_typer span:before {
    font: normal 17px 'Font Awesome 5 Free';
    content: "\f1e3";
    color: #8518bc;
    text-shadow: 0 0 20px rgba(0,192,144,0.34);
    margin-right: 5px;
}
.ipsClearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.ipsDataItem:first-child {
    border-top: 0;
}

HTML:

Спойлер

<div class="ipsResponsive_hidePhone ipsResponsive_hideTablet">
<div class="ipsWidget ipsWidget_vertical ipsBox">
            <ul class="ipsDataList ipsDataList_reducedSpacing">
                <h3 class="ipsType_reset ipsWidget_title">Ogłoszenia</h3>
                    <li class="ipsDataItem">
                        <div class="ipsPad_half ipsClearfix">
                            <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Redakcja</span></div>
                            <div class="info_csowicze_Txt"><span>
                               <div class="info_csowicze_odnosnik_poo"> <span style="color: rgb(88, 185, 71);font-weight: 600;">Zgłoś się</span> do wywiadu. </div>
                            </div>
                            <div class="info_csowicze_odnosnik_poo"><span><time title="Kliknij by się zgłosić"><a href="https://csowicze.pl/topic/52016-zgłoś-się-do-wywiadu/">Zgłaszam się</a></time></span> <a href="https://csowicze.pl/topic/53738-wywiad-z-jess/" title="Wywiad z Jessa">[Aktualny wywiad]</a></div>
                        </div>
                    </li>
                
                <!--<li class="ipsDataItem">
                        <div class="ipsPad_half ipsClearfix">
                            <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Redakcja</span></div>
                            <div class="info_csowicze_Txt"><span>
                               <div class="info_csowicze_odnosnik_po"> <span style="color: rgb(51,204,204);font-weight: 600;">#1</span> P&O Radziuu</div>
                            </div>
                            <div class="info_csowicze_odnosnik_po"><span><time title="Kliknij by zadać pytanie"><a href="https://csowicze.pl/topic/53820-01-po-radziuu/?tab=comments#comment-255615">Zadaj pytanie naszemu administratorowi!</a></time></span></div>
                        </div>
                    </li> -->
                
              <li class="ipsDataItem">
                        <div class="ipsPad_half ipsClearfix">
                            <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Usługi</span></div>
                            <div class="info_csowicze_Txt"><span>
                               <div class="info_csowicze_odnosnik_uslugi"> <span style="color: rgb(255,153,51);font-weight: 600;">Nie kupuj kota w worku!</span> Przetestuj za darmo usługi na serwerach przez 3 dni. </span></div>
                            </div>
                            <div class="info_csowicze_odnosnik_uslugi"><span><time title="Kliknij by przetestować usługę"><a href="https://csowicze.pl/topic/51062-przetestuj-vipa-klasę-premium-na-csowicze">Sprawdzam</a></time></span> 
                        </div>
                    </li>
              
               <li class="ipsDataItem">
                        <div class="ipsPad_half ipsClearfix">
                            <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Premium</span></div>
                            <div class="info_csowicze_Txt"><span>
                               <div class="info_csowicze_odnosnik_premium"> <span style="color: rgb(194,24,91);font-weight: 600;">Sponsor, Donator, Vip... Chciałbyś nimi zostać?</span> Sprawdź cennik oraz uprawnienia. </span></div>
                            </div>
                            <div class="info_csowicze_odnosnik_premium"><span><time title="Kliknij by sprawdzic opis premium"><a href="https://csowicze.pl/premium">Chce premium!</a></time></span> 
                        </div>
                    </li>
                 
                  <li class="ipsDataItem">
                        <div class="ipsPad_half ipsClearfix">
                            <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Rekrutacja</span></div>
                            <div class="info_csowicze_Txt"><span>
                               <div class="info_csowicze_odnosnik_rekru"> <span style="color: rgb(0,192,144);font-weight: 600;">Poszukujemy osób na konkretne stanowiska!</span> Aplikuj i zostań jednym z nas. </span></div>
                            </div>
                            <div class="info_csowicze_odnosnik_rekru"><span><time title="Kliknij by dołączyć do ekipy"><a href="https://csowicze.pl/forum/18-rekrutacja/">Aplikuje</a></time></span> 
                        </div>
                    </li>
  <li class="ipsDataItem">
                        <div class="ipsPad_half ipsClearfix">
                            <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Liga typera</span></div>
                            <div class="info_csowicze_Txt"><span>
                               <div class="info_csowicze_odnosnik_typer"> <span style="color: #8518bc;font-weight: 600;">Typuj</span> razem z nami!  </div>
                            </div>
                            <div class="info_csowicze_odnosnik_typer"><span><time title="Kliknij by przejść do działu typera"><a href="https://csowicze.pl/forum/1297-liga-typera/">Typuje</a></time></span> 
                        </div>
                    </li>
            </ul>
        </div>

</div>

 

  • Цитата
    comment_193123
    4 часа назад, MrHaim сказал:

    anuncio.thumb.png.06f69f117fe06c1ed0200eedfc9f9aa6.png

    CSS:

      Contenido del show


    /* INFORMACION CASUAL */

    .info_csowicze_background {
        relleno: 5px 20px 4px 10px;
        ancho: 150px;
        tamaño de fuente: 12px;
        color: #cdcfd2;
        peso de fuente: 600;
        flotador izquierdo;
    }
    .info_csowicze_newsbadge {
        transformación de texto: mayúsculas;
        altura: 20px;
        altura de línea: 22px;
        tamaño de fuente: 11px;
        relleno: 0 8px;
        borde-radio: 2px;
        peso de fuente: 500;
        pantalla: bloque en línea;
        color: #ffffff;
        alineación vertical: medio;
        sombra de texto: ninguno;
        espaciado entre letras: 0;
    }
    .info_csowicze_redakcja {
        fondo: #1273ca;
        -webkit-caja-sombra: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
        -moz-box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
        sombra de caja: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
    }
    .info_csowicze_info {
        antecedentes: #1273ca;
        -webkit-caja-sombra: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
        -moz-box-shadow: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
        sombra de caja: 0px 0px 20px 0px rgba(18, 115, 202, 0.37);
    }
    .info_csowicze_Txt {
        relleno: 5px 20px 4px 0;
        flotador izquierdo;
    }
    .info_csowicze_Txt span {
        tamaño de fuente: 12px;
        color: #cdcfd2;
        peso de fuente: 400;
    }


    .info_csowicze_odnosnik_poo {
        flotador: derecha;
        relleno: 5px 20px 4px 20px;
    }
    .info_csowicze_odnosnik_poo span {
        tamaño de fuente: 12px;
        color: #58B947;
        peso de fuente: 600;
    }
    .info_csowicze_odnosnik_poo span:before {
        fuente: normal 17px 'Font Awesome 5 Free';
        contenido: "\f0e6";
        color: #58B947;
        sombra de texto: 0 0 20px rgba(51,204,204,0.34);
        margen derecho: 5px;
    }

    .info_csowicze_odnosnik_po {
        flotador: derecha;
        relleno: 5px 20px 4px 20px;
    }
    .info_csowicze_odnosnik_po span {
        tamaño de fuente: 12px;
        color: #767c86;
        peso de fuente: 600;
    }
    .info_csowicze_odnosnik_po span:before {
        fuente: normal 17px 'Font Awesome 5 Free';
        contenido: "\f0e6";
        color: #33CCCC;
        sombra de texto: 0 0 20px rgba(51,204,204,0.34);
        margen derecho: 5px;
    }


    .info_csowicze_odnosnik_uslugi {
        flotador: derecha;
        relleno: 5px 20px 4px 20px;
    }
    .info_csowicze_odnosnik_uslugi span {
        tamaño de fuente: 12px;
        color: #767c86;
        peso de fuente: 600;
    }
    .info_csowicze_odnosnik_uslugi span:before {
        fuente: normal 17px 'Font Awesome 5 Free';
        contenido: "\f1b7";
        color: #FF9933;
        sombra de texto: 0 0 20px rgba(255,153,51,0.34);
        margen derecho: 5px;
    }


    .info_csowicze_odnosnik_premium {
        flotador: derecha;
        relleno: 5px 20px 4px 20px;
    }
    .info_csowicze_odnosnik_premium span {
        tamaño de fuente: 12px;
        color: #767c86;
        peso de fuente: 600;
    }
    .info_csowicze_odnosnik_premium span:before {
        fuente: normal 17px 'Font Awesome 5 Free';
        contenido: "\f155";
        color: #C2185B;
        sombra de texto: 0 0 20px rgba(194,24,91,0.34);
        margen derecho: 5px;
    }

    .info_csowicze_odnosnik_rekru {
        flotador: derecha;
        relleno: 5px 20px 4px 20px;
    }
    .info_csowicze_odnosnik_rekru span {
        tamaño de fuente: 12px;
        color: #767c86;
        peso de fuente: 600;
    }
    .info_csowicze_odnosnik_rekru span:before {
        fuente: normal 17px 'Font Awesome 5 Free';
        contenido: "\f234";
        color: #00C090;
        sombra de texto: 0 0 20px rgba(0,192,144,0.34);
        margen derecho: 5px;
    }
    .info_csowicze_odnosnik_typer {
        flotador: derecha;
        relleno: 5px 20px 4px 20px;
    }
    .info_csowicze_odnosnik_typer span {
        tamaño de fuente: 12px;
        color: #8518bc;
        peso de fuente: 600;
    }
    .info_csowicze_odnosnik_typer span:before {
        fuente: normal 17px 'Font Awesome 5 Free';
        contenido: "\f1e3";
        color: #8518bc;
        sombra de texto: 0 0 20px rgba(0,192,144,0.34);
        margen derecho: 5px;
    }
    .ipsClearfix:después de {
        visibilidad: oculto;
        bloqueo de pantalla;
        tamaño de fuente: 0;
        contenido: " ";
        Limpia los dos;
        altura: 0;
    }
    .ipsDataItem:primer hijo {
        borde superior: 0;
    }

    HTML:

      Contenido del show

    <div class="ipsResponsive_hidePhone ipsResponsive_hideTablet">
    <div class="ipsWidget ipsWidget_vertical ipsBox">
                <ul class="ipsDataList ipsDataList_reducedSpacing">
                    <h3 class="ipsType_reset ipsWidget_title">Ogłoszenia</h3>
                        <li class="ipsDataItem">
                            <div class="ipsPad_half ipsClearfix">
                                <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Redakcja</span></div>
                                <div class="info_csowicze_Txt"><span>
                                   <div class="info_csowicze_reference_poo"> <span style="color: rgb(88, 185, 71);font-weight: 600;">Envíe</span> a la entrevista. </div>
                                </div>
                                <div class="info_csowicze_poo_reference"><span><time title="Haga clic para aplicar"><a href="https://csowicze.pl/topic/52016-report- -for -entrevista/">Estoy aplicando</a></time></span> <a href="https://csowicze.pl/topic/53738-interview-with-jess/" title="Entrevista con Jessa">[Entrevista actual]</a></div>
                            </div>
                        </li>
                    
                    <!--<

                                <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Oficina editorial</span></div> < div class="
                                info_csowicze_Txt"><span>
                                   <div class="info_csowicze_reference_po"> <span style= " color: rgb(51,204,204);font-weight: 600;">#1</span> P&O Radziuu</div> </div>
                                <
                                div class="info_csowicze_reference_reference"><span><time title="Haga clic para enviar pregunta"><a href="https://csowicze.pl/topic/53820-01-po-radziuu/?tab=comments#comment-255615">¡Haz una pregunta a nuestro administrador!</a></time></span></div>
                            </div>
                        </li> -->
                    
                  <li class="ipsDataItem">
                            <div class="ipsPad_half ipsClearfix">
                                <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Servicios</span></div>
                                <div class="info_csowicze_Txt" ><span>
                                   <div class="info_csowicze_uslugi_reference"> <span style="color: rgb(255,153,51);font-weight: 600;">¡No compre un gato de un empujón!</span> Servidor de prueba servicios gratis por 3 días. </span></div>
                                </div>
                                <div class="info_csowicze_odnosnik_uslugi"><span><time title="Haga clic para probar el servicio"><a href="https://csowicze.pl/topic/51062-testuj-vipa-klasę-premium-na- csowicze ">Comprobar</a></time></span> 
                            </div>
                        </li>
                  
                   <li class="ipsDataItem">
                            <div class="ipsPad_half ipsClearfix">
                                <div class="info_csowicze_background">< span class="info_csowicze_redakcja info_csowicze_newsbadge">Premium</span></div>
                                <div class="info_csowicze_Txt"><span>
                                   <div class="info_csowicze_odnosnik_premium"> <span style="color: rgb(194,24,91);font-weight: 600;">Patrocinador, Donante, Vip... ¿Te gustaría convertirte en uno?</span > Consultar lista de precios y permisos. </span></div>
                                </div>
                                <div class="info_csowicze_premium_link"><span><time title="Haga clic para comprobar la descripción premium"><a href="https://csowicze.pl/premium" >¡Quiero premium!</a></time></span> 
                            </div>
                        </li>
                     
                      <li class="ipsDataItem">
                            <div class="
                                <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Reclutamiento</span></div> <
                                div class="info_csowicze_Txt"><span>
                                   <div class="info_csowicze_recruitment_reference"> <span style=" color: rgb(0,192,144);font-weight: 600;">¡Buscamos personas para puestos específicos!</span> Postula y conviértete en uno de nosotros. </span></div>
                                </div>
                                <div class="info_csowicze_recruitment_link"><span><time title="Haga clic para unirse al equipo"><a href="https://csowicze. 


      <li class="ipsDataItem">
                            <div class="ipsPad_half ipsClearfix">
                                <div class="info_csowicze_background"><span class="info_csowicze_redakcja info_csowicze_newsbadge">Liga typera</span></div>
                                <div class="info_csowicze_Txt "><span>
                                   <div class="info_csowicze_odnosnik_typer"> <span style="color: #8518bc;font-weight: 600;">Typuj</span> razem z nami! </div>
                                </div>
                                <div class="info_csowicze_odnosnik_typer"><span><título de tiempo=" 
                            </div>
                        </li>
                </ul>
            </div>

    </div>

     

    how can i install my forum can you teach me please

  • Цитата

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.