extended boundaries

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » extended boundaries » расширь границы » !

!

Страница:   1 … 7 8 9

Сообщений 241 страница 242 из 242

241

[object Object]

Код:
[html]<section class="chat-wrapper">
<div class="soc-avatars">
<!----- ссылка на профиль, аватар и ник ---> 
<a href="https://prime.rusff.me/profile.php?id=309"><img src="https://i.imgur.com/g55M5rz.jpeg" alt="avatar" /> <span data-title='online'>@nessykim</span></a>
</div>

<div class='chwrap'><div class="soc-chat-wrapper"> 
<!----- правое сообщение, дата в data-msgtime ---> 
<p class="right-msg" data-msgtime="18 december, 12:19"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
oh my god ㅤㅤ</p>

<p class="right-msg" data-msgtime="18 december, 12:19"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
инес...ㅤㅤㅤㅤ</p>

<p class="right-msg" data-msgtime="18 december, 12:20"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
ладно я пытаюсь не смотреть вниз... этот дурак всех осуждает, но с тобой в нашем пространстве ему придётся смириться</p>

<p class="right-msg" data-msgtime="18 december, 12:21"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
поэтому я тебя обожаю, ты всегда задаёшь правильные вопросы и ответ положительный, таки нашёл</p>

<p class="right-msg" data-msgtime="18 december, 12:23"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
ты любишь фруктовый салат?? 🍌🍑 между прочим полезно для здоровья</p>

<p class="right-msg" data-msgtime="18 december, 12:24"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
я тебе не верю после всего что было между нами!</p>

<p class="right-msg" data-msgtime="18 december, 12:25"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
обещаю тебе французский завтрак в следующий мой выходной, говорят, я неплохо готовлю 🥐</p>

<p class="right-msg" data-msgtime="18 december, 12:26"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
но это правда, милая
<br>только пожалуйста, не плачь, испорть моё постельное каким-то другим способом</p>

<p class="right-msg" data-msgtime="18 december, 12:26"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
чувствую себя самым счастливым мужчиной на свете</p>

<p class="right-msg" data-msgtime="18 december, 12:28"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
безусловно, твой кофе довёл мою кофейную душу до оргазма, я серьёзно. но чёрт возьми, это было бы лучшее утро и ещё будет, пока я просто помечтаю. отправь мне фото своего завтра и... бедра! кажется, в моём холодильнике должен быть абрикосовый джем. или клубничный. надеюсь, хлеб не покрылся плесенью. я покупал его в корейском магазине</p>

<p class="right-msg" data-msgtime="18 december, 12:29"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
переживаешь за меня? буду тебя ждать</p>

<p class="right-msg" data-msgtime="18 december, 12:31"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
этот приём с фотоотчётом совершенно незаконный и небезопасный</p>

<p class="right-msg" data-msgtime="18 december, 12:38"> 
<img src='https://i.imgur.com/Fvjlyjb.jpeg' class='msg-av'>
а потом мы пошли бы в душ вместе и провели бы там замечательно время, это моё идеальное продолжение</p>

<br>
</div><div class="write-msg"></div></div>

</section>[/html][object Object]

0

242

[html]
<div class="playlist__main">
 
<playlist__title> 
  Spring<br> <item>Playlist</item>
</playlist__title>

<div class="minimal-player">
   
    <div class="player-header">
        <img src="https://via.placeholder.com/100x100/ffbb00/000000?text=Cover" alt="Album Cover" class="album-cover">
       
        <div class="track-info">
            <h2 class="track-title">Gone Gone Gone</h2>
            <p class="track-artists">David Guetta, Teddy Swims, Tones And I</p>
        </div>
       
        <div class="broadcast-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="2"></circle>
                <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
            </svg>
        </div>
    </div>

    <div class="progress-section">
        <span class="time">02:01</span>
       
        <div class="progress-bar">
            <div class="progress-fill"></div>
            <div class="progress-thumb"></div>
        </div>
       
        <span class="time">03:19</span>
    </div>

    <div class="controls-section">
        <button class="control-btn icon-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="16 3 21 3 21 8"></polyline>
                <line x1="4" y1="20" x2="21" y2="3"></line>
                <polyline points="21 16 21 21 16 21"></polyline>
                <line x1="15" y1="15" x2="21" y2="21"></line>
                <line x1="4" y1="4" x2="9" y2="9"></line>
            </svg>
        </button>

        <button class="control-btn">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                <polygon points="19 20 9 12 19 4 19 20"></polygon>
                <polygon points="10 20 0 12 10 4 10 20"></polygon>
            </svg>
        </button>

        <button class="control-btn play-pause-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                <rect x="6" y="4" width="4" height="16"></rect>
                <rect x="14" y="4" width="4" height="16"></rect>
            </svg>
        </button>

        <button class="control-btn">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                <polygon points="5 4 15 12 5 20 5 4"></polygon>
                <polygon points="14 4 24 12 14 20 14 4"></polygon>
            </svg>
        </button>

        <button class="control-btn icon-btn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <rect x="8" y="5" width="14" height="2"></rect>
                <rect x="8" y="11" width="14" height="2"></rect>
                <rect x="8" y="17" width="14" height="2"></rect>
                <circle cx="4" cy="6" r="1.5"></circle>
                <circle cx="4" cy="12" r="1.5"></circle>
                <circle cx="4" cy="18" r="1.5"></circle>
            </svg>
        </button>
    </div>

</div>
 
<div class="songs__block">
   
<str__first>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

</str__first>
   
<str__second>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

<song__box>
<img src="https://images.genius.com/992df11e9fe7c51d00e7ebebf4ec57c1.1000x1000x1.png" class="cover">
<song__name>here comes the sun </song__name>
<artist__name>the beatles</artist__name>
</song__box>

</str__second>

</div>
 
</div>

<style>
.playlist__main {
    width: 640px;
    height: auto;
    margin: auto;
    background: url(https://i.imgur.com/v8OvMOS.png);
   background-size: 100%;
  padding: 18px 0;
}

playlist__title {
    display: block;
    text-align: center;
    font-size: 48px;
    font-family: 'Viaoda Libre';
    color: #fff;
    /* text-shadow: 2px 1px 0px #33365a; */
    -webkit-text-stroke: 1px #3d3f57c4;
}

playlist__title > item {
    position: relative;
    top: -28px;
    left: 10px;
    font-style: italic;
}

.songs__block {
      display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}

str__first, str__second  {
      display: flex;
}

str__second {
 
}

song__box {
    display: flex;
    width: 100px;
    height: 180px;
    flex-direction: column;
    border: 1px solid #000;
    margin: 10px !important;
    background: #fff;
}

song__box img {
      width: 100px;
}

.minimal-player {
    max-width: 450px;
    padding: 20px;
    color: #616284;
    margin: -20px auto 10px auto;
}

.player-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 25px;
}

.album-cover {
    width: 65px;
    height: 65px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.track-info {
    flex: 1;
}

.track-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.track-artists {
    font-size: 0.9rem;
    font-weight: 400;
    color: #333333;
    margin: 0;
}

.broadcast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.time {
    font-size: 0.8rem;
    font-weight: 500;
}

.progress-bar {
    flex: 1;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    border-radius: 2px;
}

.progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 45%;
    background-color: #111111;
    border-radius: 2px;
}

.progress-thumb {
    position: absolute;
    left: 45%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #111111;
    border-radius: 50%;
}

.controls-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.control-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s;
}

.control-btn:hover {
    opacity: 0.7;
}

.icon-btn {
    color: #444444;
}

.play-pause-btn {
    width: 55px;
    height: 55px;
    background-color: rgba(0, 0, 0, 0.45);     
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
</style>
[/html]

0

Страница:   1 … 7 8 9

Вы здесь » extended boundaries » расширь границы » !

Рейтинг форумов | Создать форум бесплатно