соц сеть

Сообщений 1 страница 4 из 4

Поделиться12023-03-29 17:41:06

Автор: live stream
главный админ
Сообщений: 31
Уважение: +3

...

Поделиться22023-03-29 18:18:37

Автор: live stream
главный админ
Сообщений: 31
Уважение: +3

Код:

<!--HTML-->
<lifestagram-main-block>

<lifestagram-block>
<lifestagram-av><img src="https://i.imgur.com/Hsxnwwq.png"></lifestagram-av>
<lifestagram-info-block>
<lifestagram-nick>@nick</lifestagram-nick>
<lifestagram-posts>000</lifestagram-posts>
<lifestagram-followers>000</lifestagram-followers>
<lifestagram-follow>000</lifestagram-follow>
<lifestagram-name>имя фамилия</lifestagram-name>
<lifestagram-pers-info>о себе о себе о себе</lifestagram-pers-info>
</lifestagram-block>
</lifestagram-info-block>

<lifestagram-stories-block>
<stories-block>
<img src="https://i.imgur.com/Hsxnwwq.png">
<stories-name>stories name</stories-name></stories-block>
<stories-block>
<img src="https://i.imgur.com/Hsxnwwq.png">
<stories-name>stories name</stories-name></stories-block>
<stories-block>
<img src="https://i.imgur.com/Hsxnwwq.png">
<stories-name>stories name</stories-name></stories-block>
<stories-block>
<img src="https://i.imgur.com/Hsxnwwq.png">
<stories-name>stories name</stories-name></stories-block>
<stories-block>
<img src="https://i.imgur.com/Hsxnwwq.png">
<stories-name>stories name</stories-name></stories-block>
<stories-block>
<img src="https://i.imgur.com/Hsxnwwq.png">
<stories-name>stories name</stories-name></stories-block>
</lifestagram-stories-block>

<lifestagram-posts-block>

<div class="photo-1"><figure-2 class="effect-text-three">
<img src="https://i.imgur.com/Hsxnwwq.png">
<figcaption><likecom>
<like>000</like> <comm>000</comm>
</likecom></figcaption></figure-2></div>

<div class="photo-1"><figure-2 class="effect-text-three"><img src="https://i.imgur.com/Hsxnwwq.png"><figcaption><likecom>
<like>000</like> <comm>000</comm>
</likecom></figcaption></figure-2></div>

<div class="photo-1"><figure-2 class="effect-text-three"><img src="https://i.imgur.com/Hsxnwwq.png"><figcaption><likecom>
<like>000</like> <comm>000</comm>
</likecom></figcaption></figure-2></div>

<div class="photo-1"><figure-2 class="effect-text-three"><img src="https://i.imgur.com/Hsxnwwq.png"><figcaption><likecom>
<like>000</like> <comm>000</comm>
</likecom></figcaption></figure-2></div>

<div class="photo-1"><figure-2 class="effect-text-three"><img src="https://i.imgur.com/Hsxnwwq.png"><figcaption><likecom>
<like>000</like> <comm>000</comm>
</likecom></figcaption></figure-2></div>

<div class="photo-1"><figure-2 class="effect-text-three"><img src="https://i.imgur.com/Hsxnwwq.png"><figcaption><likecom>
<like>000</like> <comm>000</comm>
</likecom></figcaption></figure-2></div>

</lifestagram-posts-block>

</lifestagram-main-block>

<style>

lifestagram-main-block {
    display: block;
    width: 600px;
    min-height: 300px;
    background-color: #fafafa;
    border: 1px solid #566e8b75;
    margin: auto auto !important;
}

lifestagram-av {
    display: block;
    float: left;
    width: 140px;
    height: 140px;
    margin: 25px 20px 25px 35px !important;
}

lifestagram-av img {
    object-fit: cover;
    width: 140px;
    border-radius: 70px;
}

lifestagram-info-block {
    display: block;
    float: right;
    width: 380px;
    margin: 30px 20px 25px 35px !important;
    color: #000;
}

lifestagram-block {
display: flex;
    width: 600px;
}

lifestagram-nick {
    display: block;
    font-size: 18px;
    font-family: Roboto;
    margin-bottom: 10px !important;
}

lifestagram-posts {
font-size: 12.5px;
    font-family: Segoe UI;
}

lifestagram-posts:after {
content: "публикаций";
margin-left: 5px !important;
font-family: Segoe UI;
}

lifestagram-followers {
margin-left: 10px !important;
font-size: 12.5px;
    font-family: Segoe UI;
}

lifestagram-followers:after {
content: "подписчиков";
margin-left: 5px !important;
font-family: Segoe UI;
}

lifestagram-follow {
margin-left: 10px !important;
font-size: 12.5px;
 font-family: Segoe UI;
}

lifestagram-follow:after {
content: "подписок";
margin-left: 5px !important;
font-family: Segoe UI;
}

lifestagram-name {
display: block;
    font-family: Roboto;
    font-size: 13px;
    margin: 10px 0px 5px 0px !important;
}

lifestagram-pers-info {
    font-size: 12px;
    font-family: Segoe UI;
    width: 230px;
    display: block;
}

lifestagram-nick:after {
    content: "";
    background-image: url(https://i.imgur.com/qL86THx.png);
    background-size: 100%;
    width: 80px;
    height: 20px;
    position: relative;
    left: 10px;
    display: inline-block;
    top: 5px;
    cursor: pointer;
}

lifestagram-stories-block {
    display: flex;
    float: left;
    width: 600px;
    height: 50px;
    margin: 20px 0px 28px 0px !important;
    justify-content: center;
}

lifestagram-stories-block img {
    object-fit: cover;
    width: 50px;
    border-radius: 50px;
    box-shadow: 0 0 0 1px #fafafa, 0 0 0 2px #c9c9c9;
    margin-left: 15px !important;
}

stories-name {
    display: block;
    font-family: 'Roboto';
    text-align: center;
    margin: 5px 5px 0px 8px !important;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    width: 64px;
}

stories-block {
    display: block;
}

lifestagram-posts-block {
    /* display: block; */
    width: 580px;
    /* margin: 0px auto 20px auto !important; */
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    padding: 0px 0px 20px 12px;
    /* background: #888; */
    align-content: stretch;
    justify-content: center;
}

.photo-1 img, lifestagram-posts-block img {
    object-fit: cover;
    width: 160px;
    object-fit: cover;
    /* padding: 8px; */
}

.photo-1 {
padding: 8px;
}

lifestagram-posts-block:before {
content: "";
    background-image: url(https://i.imgur.com/xpvq70A.png);
    background-size: 100%;
    width: 580px;
    display: block;
    height: 38px;
    border-top: 1px solid #e6e1e1;
    position: relative;
    left: -2px;
}


/* Эффект при наведении */

figure-2.effect-text-three {
	background: #000;
        width: 160px;
        height: 160px;
        display: block;
}

figure-2.effect-text-three img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
        cursor: pointer;
}

figure-2.effect-text-three:hover img {
	opacity: 0.4;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure-2.effect-text-three likecom {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    position: relative;
    top: -90px;
    font-size: 13px;
    font-family: Helvetica;
    font-weight: bold;
    color: #fff;
}

figure-2.effect-text-three:hover likecom {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

comm, like {
    display: inline-block;
    padding: 5px;
}

like:before {
content: "";
    background-image: url(https://i.imgur.com/IrIKi8B.png);
    background-size: 100%;
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    left: -5px;
}
     
comm:before {
content: "";
    background-image: url(https://i.imgur.com/1qWs71V.png);
    background-size: 100%;
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    left: -5px;
}
</style>

Поделиться32023-03-29 21:22:42

Автор: live stream
главный админ
Сообщений: 31
Уважение: +3

Код:

<!--HTML-->
<post-main-block>

<post-photo><img src="https://i.imgur.com/XqH1zj7.png"></post-photo>

<post-block>
<post-av><img src="https://i.imgur.com/XqH1zj7.png"></post-av><post-nick>@nick</post-nick>

<post-comment-block>
<post-scroll>
<post-comment><pn>@nick</pn> bla bla bla bla</post-comment>
<post-comment><pn>@nick</pn> bla bla bla bla </post-comment>
</post-scroll>
</post-comment-block>

<bottom-block>

<post-likes>000</post-likes>
<post-date>00 дата</post-date>

</bottom-block>

</post-block>


</post-main-block>

<style>

post-main-block {
    display: block;
    width: 600px;
    height: 340px;
    background: #fafafa;
    margin: auto auto !important;
    border: 1px solid #566e8b75;
}

post-photo {
    display: block;
    float: left;
}

post-photo img {
    object-fit: cover;
    width: 340px;
    height: 340px;
}

post-block {
display: block;
    float: right;
    width: 248px;
}

post-av {
float: left;
    margin: 10px 0px 10px 0px !important;
}

post-av img {
    object-fit: cover;
    width: 45px;
    height: 45px;
    border-radius: 50px;
}

post-nick {
display: block;
    float: left;
    font-size: 16px;
    font-family: 'Roboto';
    margin: 20px 0px 10px 10px !important;
    width: 180px;
}

post-comment-block {
    display: flex;
    float: right;
    flex-direction: column;
    width: 240px;
    height: 140px;
    padding-top: 10px;
}

post-scroll {
    width: 230px;
    overflow: auto;
}

post-comment {
    display: block;
    width: 200px;
    margin-bottom: 10px !important;
    font-family: Helvetica;
}

pn {
    color: #566e8b;
    font-size: 12px;
    font-weight: bold;
}

bottom-block {
    display: block;
    width: 248px;
    height: 97px;
    float: right;
    padding-top: 3px;
}

bottom-block:before {
content: "";
    background-image: url(https://i.imgur.com/gQ1Efq0.png);
    width: 248px;
    height: 30px;
    display: block;
    background-size: 100%;
    margin-left: -5px;
    border-top: 1px solid #ddd;
}

bottom-block:after{
content: "";
    background-image: url(https://i.imgur.com/Hl7Aqxz.png);
    width: 248px;
    height: 30px;
    display: block;
    background-size: 100%;
    margin-left: -5px;
    border-top: 1px solid #ddd;
}

post-likes {
    display: block;
    font-size: 13px;
    font-family: Segoe UI;
    margin: 8px 0px 5px 4px !important;
}

post-likes:after {
content: "отметок «нравится»";
margin-left: 5px;
}

post-date {
    font-family: Segoe UI;
    color: #afafaf;
    text-transform: uppercase;
    margin: 5px 0px 13px 4px !important;
    display: block;
}

post-comment, post-likes, post-nick {
color: #000;
}

post-scroll::-webkit-scrollbar {
    width: 3px;
    height: 2px;
}

post-scroll::-webkit-scrollbar-thumb {
    background-color: #566e8b !important;
}

post-scroll::-webkit-scrollbar-track  {
    background-color: #a4b2c2;
}

</style>

Поделиться42023-03-30 00:48:35

Автор: live stream
главный админ
Сообщений: 31
Уважение: +3

Код:

<!--HTML-->
<stories-block-main>

<img src="https://i.imgur.com/MNfHDri.jpg">

<stloading><span></span></stloading>

<stories-av-nick>
<img src="https://i.imgur.com/XqH1zj7.png">
<stories-nick>@nick</stories-nick><stories-time>00 ч.</stories-time>
</stories-av-nick>

<stories-bottom>
<stories-nick-bottom>
nick
</stories-nick-bottom>
</stories-bottom>

</stories-block-main>

<style>

stories-block-main {
    margin: auto auto !important;
    display: block;
    width: 300px;
    height: 460px;
    position: relative;
    font-family: Helvetica;
    background-color: #2c2c2c;
    border-radius: 20px;
}

stories-block-main img {
    width: 300px;
    height: 460px;
    object-fit: cover;
    border-radius: 20px;
}

stories-av-nick {
    display: block;
    width: 300px;
    position: absolute;
    height: 70px;
    top: 25px;
}

stories-av-nick:before {
    background-image: url(https://i.imgur.com/tWTR9wh.png);
    background-size: 100%;
    width: 280px;
    height: 17px;
    display: block;
    position: relative;
    top: -10px;
    left: 10px;
    content: "";
}

stories-time:after {
content: "";
background-image: url(https://i.imgur.com/HA5AAiv.png);
    display: inline-block;
    background-size: 100%;
    width: 80px;
    height: 27px;
    position: relative;
    top: 23px;
    float: right;
    margin-right: 5px;
}

stories-av-nick img {
   object-fit: cover;
    width: 45px;
    height: 45px;
    display: inline-block;
    border-radius: 50px;
    margin: 0px 5px 0px 16px !important;
}

stories-nick {
font-size: 14px;
    color: #fff;
    position: relative;
    top: -15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    max-width: 110px;
    display: inline-block;
}

stories-time {
    font-size: 12px;
    color: #e1e1e1;
    position: relative;
    top: -18px;
    margin-left: 5px !important;
}

stories-bottom {
    display: block;
    width: 300px;
    height: 62px;
    position: absolute;
    bottom: 0px;
    background: url(https://i.imgur.com/9aMFaIf.png);
    background-size: 100%;
}

stories-nick-bottom {
    color: #fff;
    text-align: center;
    width: 160px;
    display: block;
    position: relative;
    top: 20px;
    font-size: 13px;
    left: 28px;
text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

stories-nick-bottom:before {
content: "ответьте";
} 

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}
 
@-moz-keyframes scroll {
    0% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -moz-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}
 
@keyframes scroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0)
    }
}
 
stloading {
display: block;
    position: absolute;
    top: 20px;
    font-size: 0;
    left: 10px;
    width: 280px;
    overflow: hidden;
    border-radius: 10px;
    z-index: 1;
}
 
stloading span {
    display: inline-block;
    -webkit-animation: scroll 5s infinite linear;
    -moz-animation: scroll 5s infinite linear;
    animation: scroll 5s infinite linear;
    width: 300px;
    height: 3px;
    background: #fff;
    border-radius: 10px;
    animation-direction: reverse;
}

</style>

moi test

Меню навигации

Пользовательские ссылки

Информация о пользователе

соц сеть

Сообщений 1 страница 4 из 4

Поделиться12023-03-29 17:41:06

Поделиться22023-03-29 18:18:37

Поделиться32023-03-29 21:22:42

Поделиться42023-03-30 00:48:35