Перейти к содержанию

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

MrHaim

Автор MrHaim
в HTML, CSS, XML

 Поделиться

Рекомендуемые сообщения

MrHaim Специалист

MrHaim

Опубликовано
Опубликовано

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>

 

Ссылка на комментарий
Поделиться на другие сайты
NarcoRP Ученик

NarcoRP

Опубликовано
Опубликовано
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

Ссылка на комментарий
Поделиться на другие сайты
MrHaim Специалист

MrHaim

Опубликовано
  • Автор
Опубликовано
15 минут назад, NarcoRP сказал:

how can i install my forum can you teach me please

I will gladly help you. Send me a private message what you need.

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...