[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
--main-color:#A053FF;
--font-inter:"Inter";
--main-bg:#FFFFFF;
--light-gray-bg:#EEEEEE;
--text-color:#000;
--main-text:"mulish";
--main-font: 400 11px var(--main-text);
--main-border:1px solid #D6D6D6;
--img-shadow: 0px 12px 26px 0px #9F54FC14, 0px 4px 19px 0px #00000017;
--font-pf:"Playfair Display", serif;
}

.mos-chron {
    display:flex;
    flex-direction: column;
    align-items: center;
    width: 669px;
    margin: 10px auto;
}

.mos-chron-title {
    position: absolute;
    background: var(--main-color);
    padding: 8px 20px;
    text-transform: uppercase;
    color: var(--main-bg);
    font: var(--main-font);
    border-radius: 100px;
    margin-top: -18px;
    z-index:2;
}

.mos-chron-wrapper {
border-radius:20px;
padding:10px;
background:var(--main-bg);
    z-index:3;
}

.mos-chron-ep-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.mos-chron-ep-head > img {
width: 40px;
height: 40px;
border-radius: 100px;
object-fit:content;
}

.mos-chron-ep-head > a {
    color: black!important;
    font-family: var(--main-text);
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    position: relative;
}

.mos-chron-ep-head > a::after {
    content: "";
    background: url(https://i.imgur.com/Vtaki0Y.png) center no-repeat, var(--main-bg);
    right: 0px;
    position: absolute;
    width: 24px;
    margin-top: -3px;
    height: 24px;
    border-radius: 100px;
    transition:ease-in-out .4s;
}

.mos-chron-ep-head > a:hover {
    color: black!important;
}

.mos-chron-ep-head > a:hover::after {
    background: url(https://i.imgur.com/2XeEW95.png) center no-repeat, var(--main-color);
}

.mos-chron-wrapper > div {
    padding: 10px;
    border-radius: 20px;
    background: var(--light-gray-bg);
    border: 1px solid var(--light-gray-bg);
    margin-bottom: 7px;
    transition:ease-in-out .4s;
box-shadow: 0px 12px 32px 0px #56565633;

}

.mos-chron-wrapper > div:hover {
    border: 1px solid var(--main-color);
box-shadow: 0px 12px 32px 0px #56565633;

}

.mos-chron-wrapper > div> p {
    font-family: var(--main-text);
    font-size: 11px;
    font-weight: 400;
    text-align: justify;
    color: var(--text-color) !important;
}

.mos-chron-wrapper div p:nth-last-child(2),
.mos-chron-wrapper div p:nth-last-child(1) {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 100px;
    background: var(--main-bg);
    margin-right: 10px;
}

.photo-viewer img {
    cursor: pointer;
}

.vf-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px);
}

.vf-modal img {
    position: absolute;
    max-width: 1100px;
    max-height: 900px;
    top: 50%;
    left: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    border: 2px solid black;
    border-radius:10px;
}

.mos-shop-icons::-webkit-scrollbar {
  width: 2px;
  height: 2px
}

.inv-bag::-webkit-scrollbar,
.mos-shop-bag5 div::-webkit-scrollbar,
.mos-shop-bag4 div::-webkit-scrollbar,
.mos-shop-gifts div::-webkit-scrollbar,
.mod-shop-plaque div::-webkit-scrollbar,
.mos-temp-var6 > p::-webkit-scrollbar,
.mos-soc-photos::-webkit-scrollbar,
.mos-soc-chat-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 4px
}

.inv-bag::-webkit-scrollbar-track:vertical,
.mos-shop-bag5 div::-webkit-scrollbar-track:vertical,
.mos-shop-bag4 div::-webkit-scrollbar-track:vertical,
.mos-shop-gifts div::-webkit-scrollbar-track:vertical,
.mos-shop-icons::-webkit-scrollbar-track:vertical,
.mod-shop-plaque div::-webkit-scrollbar-track:vertical,
.mos-temp-var6 > p::-webkit-scrollbar-track:vertical,
.mos-soc-photos::-webkit-scrollbar-track:vertical,
.mos-soc-chat-wrapper::-webkit-scrollbar-track:vertical {
  background:  #DADADA!important;
  border-radius:5px;
}

.inv-bag::-webkit-scrollbar-thumb:vertical,
.mos-shop-bag5 div::-webkit-scrollbar-thumb:vertical,
.mos-shop-bag4 div::-webkit-scrollbar-thumb:vertical,
.mos-shop-gifts div::-webkit-scrollbar-thumb:vertical,
.mos-shop-icons::-webkit-scrollbar-thumb:vertical,
.mod-shop-plaque div::-webkit-scrollbar-thumb:vertical,
.mos-temp-var6 > p::-webkit-scrollbar-thumb:vertical,
.mos-soc-photos::-webkit-scrollbar-thumb:vertical,
.mos-soc-chat-wrapper::-webkit-scrollbar-thumb:vertical {
  background: var(--main-color) !important;
  border-radius:5px;

}

</style>

<section class="mos-chron">
<div class="mos-chron-title">Хронология</div>
<div class="mos-chron-wrapper">

<!--- блок с эпизодом --->
<div>
<div class="mos-chron-ep-head">
<img src="https://t3.ftcdn.net/jpg/05/85/86/44/360_F_585864419_kgIYUcDQ0yiLOCo1aRjeu7kRxndcoitz.jpg" alt="ep-image" />
<a href="#">Название эпизода</a>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit. In vulputate condimentum bibendum. Nulla vehicula vel nisi et vehicula. Cras ut tellus ut felis gravida ullamcorper. Nulla quis quam nec arcu consequat mollis. Phasellus finibus odio non tellus molestie dapibus.</p>

<p>13.10.2024 15.00-23.00</p>
<p> nickname & nickname </p>

</div>
<!--- КОНЕЦ блок с эпизодом --->

<!--- блок с эпизодом --->
<div>
<div class="mos-chron-ep-head">
<img src="https://t3.ftcdn.net/jpg/05/85/86/44/360_F_585864419_kgIYUcDQ0yiLOCo1aRjeu7kRxndcoitz.jpg" alt="ep-image" />
<a href="#">Название эпизода</a>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit. In vulputate condimentum bibendum. Nulla vehicula vel nisi et vehicula. Cras ut tellus ut felis gravida ullamcorper. Nulla quis quam nec arcu consequat mollis. Phasellus finibus odio non tellus molestie dapibus.</p>

<p>13.10.2024 15.00-23.00</p>
<p> nickname & nickname </p>

</div>
<!--- КОНЕЦ блок с эпизодом --->

</div>
</section>[/html]

<!-- ШАБЛОНЫ стили by Vandra -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001c/3c/64/13442.css" />
<style>

Подпись автора

Текст Текст Текст

[html]<style>
.mos-soc-wrapper {
width:320px;
    height: 500px;
    position:relative;
margin:auto;
border-radius:20px;
    background: var(--light-gray-bg);
}

.mos-soc {
background: var(--main-bg);
    border-radius: 20px;
    height: 470px;
    box-shadow: 0px 4px 32.8px 0px #56565640;
}

.mos-soc-head {
height:150px;
position:relative;
    padding: 20px 0 0 0;
}

.mos-soc-header {
    top: 0px;
    width: 320px;
     height: 150px;
    position: absolute;
    z-index: 0;
    object-fit: cover;
    filter: brightness(0.6);
    border-radius: 18px 18px 20px 20px;
}

.mos-soc-nick {
    display: flex;
    justify-content: center;
    align-items: center;
    width:320px;
}

.mos-soc-nick > div {
    width: fit-content;
    display: flex;
    margin: auto;
    backdrop-filter: blur(7px);
    border-radius: 20px;
    background: #FFFFFF29;
    color: var(--main-bg) !important;
    font: var(--main-font);
    text-transform: lowercase;
    justify-content: center;
    align-items: center;
}

.mos-soc-nick > div > p {
padding:0px!important;
    display: flex;
    margin: auto;
    color: var(--main-bg) !important;
    justify-content: center;
    align-items: center;
}

.mos-soc-nick > div > p::after{
    content: "";
    width: 30px;
    height: 20px;
    margin-left: 25px;
    background: url(https://i.imgur.com/J50CbkT.png) center no-repeat;
}

.mos-soc-parameters {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    padding: 28px 7px 7px 7px;
}

.mos-soc-parameters > p {
    display: flex;
    flex-direction: column;
    color: var(--main-bg) !important;
    font: 300 9px var(--main-text);
    padding: 0px 11px !important;
    letter-spacing: .5px;
}

.mos-soc-parameters  > p > span {
    font: 700 10px var(--main-text);
}

.mos-soc-parameters > img {
width:60px;
height:60px;
object-fit:cover;
border-radius:50%;
}

.mos-soc-photos {
    display: flex;
    gap: 10px;
    padding: 10px;
    height: 275px;
    overflow: auto;
    margin-top: 3px;
}

.mos-soc-photos img {
  width: 100%;
  height: auto;
  display: block;
}

.mos-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mos-soc-photos img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius:20px;
}

.mos-soc-nick > div {
    padding: 7px 10px 7px !important;
    position: relative;
    border-radius: 20px;
    color: var(--main-bg) !important;
    font: var(--main-font);
    text-transform: lowercase;
}

.mos-soc-nick::before {
    content: "";
    background: url(https://i.imgur.com/X5v9G3u.png) center no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 14px;
}

.mos-soc-nick::after {
    content: "";
    background: url(https://i.imgur.com/RfGR8XY.png) center no-repeat;
    width: 3px;
    height: 20px;
    position: absolute;
    right: 23px;
}

.mos-soc-menu {
    position: absolute;
    background: url(https://i.imgur.com/em8TV3h.png) center no-repeat;
    width: 320px;
    height: 30px;
    bottom: 0px;
}

</style>

<section class="mos-soc-wrapper">
<div class="mos-soc">
<div class="mos-soc-head">
<img class="mos-soc-header" src="https://www.everwallpaper.co.uk/cdn/shop/collections/3D_Wallpaper.jpg?v=1660209305" alt="header"></img>
<div class=mos-soc-nick><div><p>@Nickname</p></div></div>

<div class="mos-soc-parameters">
<img src="https://store-images.s-microsoft.com/image/apps.28293.14416131676512756.84314783-1c86-4403-b991-2e1da8525703.0dbed0c5-75f5-4c15-9b43-ea96f1670b4f" alt="avatar" />
<p><span>9999</span>posts</p>
<p><span>54.2m</span>followers</p>
<p><span>2314</span>following</p>
</div>

<div class="mos-soc-photos photo-viewer">
<img src="https://images.pexels.com/photos/2486168/pexels-photo-2486168.jpeg" alt="avatar" />
<img src="https://i.ebayimg.com/images/g/n8IAAOSwltRkNCSF/s-l1200.png" alt="avatar" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/025/067/762/small_2x/4k-beautiful-colorful-abstract-wallpaper-photo.jpg" alt="avatar" />
<img src="https://w0.peakpx.com/wallpaper/40/935/HD-wallpaper-nature-beautiful.jpg" alt="avatar" />
<img src="https://images.pexels.com/photos/2486168/pexels-photo-2486168.jpeg" alt="avatar" />
<img src="https://i.ebayimg.com/images/g/n8IAAOSwltRkNCSF/s-l1200.png" alt="avatar" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/025/067/762/small_2x/4k-beautiful-colorful-abstract-wallpaper-photo.jpg" alt="avatar" />
<img src="https://w0.peakpx.com/wallpaper/40/935/HD-wallpaper-nature-beautiful.jpg" alt="avatar" />
</div>

</div>

<div class="mos-soc-menu"></div>
</div>

</section>[/html]

Подпись автора

Текст Текст Текст

[html]

<style>
.mos-ep-wrapper {
  background: var(--light-gray-bg);
  border-radius: 20px;
  z-index: 5;
  position: relative;
  overflow: hidden;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 10px;
box-shadow: 0px 4px 19px 0px #00000017;

}

.mos-ep-wrapper > img {
  width: 648px;
  height: 250px;
  object-fit: cover;
  border: 1px solid #EEEEEE;
  border-radius: 20px;
  box-shadow: 0px 4px 19px 0px #00000017;
  grid-column: 1 / -1;
}

.mos-ep-wrapper p:nth-child(2),
.mos-ep-wrapper p:nth-child(3) {
    background: var(--main-bg);
    margin: 0;
    padding: 5px 10px;
    text-align: center;
    border-radius: 10px;
    width: fit-content;
    font: var(--main-font);
    color: var(--text-color);
}

.mos-ep-wrapper p:nth-child(2) {
  grid-column: 1;
  display: flex;
  justify-content: center;
  align-items: center;
    justify-self: flex-end;
}

.mos-ep-wrapper p:nth-child(3) {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mos-ep-wrapper p:nth-child(4) {
    grid-column: 1 / -1;
    font: 400 10px var(--main-text);
    color: var(--text-color);
    text-align: justify;
    padding: 0 10px 10px;
}

</style>

<section class="mos-chron">
<div class="mos-chron-title">Длинное название эпизода</div>
<div class="mos-ep-wrapper">
<img src="https://i.ebayimg.com/images/g/n8IAAOSwltRkNCSF/s-l1200.png" alt="episode header">
<p>13.10.2024 15.00-23.00</p>
<p>nickname & nickname</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit. In vulputate condimentum bibendum. Nulla vehicula vel nisi et vehicula. Cras ut tellus ut felis gravida ullamcorper. Nulla quis quam nec arcu consequat mollis. Phasellus finibus odio non tellus molestie dapibus.

</p>

</div>

</section>[/html]

Отредактировано Anakin Skywalker (2024-11-19 20:47:40)

Подпись автора

Текст Текст Текст

[hideprofile][html]<style>

.mos-gifts-wrapper {
width:650px;
height:fit-content;
background:var(--light-gray-bg);
position:relative;
padding: 20px 10px 20px 10px;
border-radius: 20px;
    margin: auto;
box-shadow: 0px 4px 32.8px 0px #5656561A;

}

.mos-gifts-title {
    width: 650px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.mos-gifts-title p {
    font: 700 24px var(--font-inter);
    color: var(--text-color) !important;
    padding: 0px !important;
}

.mos-gifts-title span {
    width: 454px;
    font: 400 10px var(--main-text);
    color: var(--text-color);
}

.mos-gifts-container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: auto;
    gap: 5px;
}

.mos-gifts-gift {
    width: 100px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background:#F5F5F5;
    padding:6px;
    border-radius:5px;
}
.mos-gifts-biggift > p:first-child,
.mos-gifts-gift > p:first-child {
    border-radius: 10px;
    background: var(--light-gray-bg);
    width: 100%;
    color: var(--main-color);
    font: 700 12px var(--font-inter);
    display: flex;
    padding: 0px !important;
    justify-content: center;
    align-items: center;
}

.mos-gifts-biggift > p:first-child {
width:86px;
}

.mos-gifts-gift > p:nth-child(2) {
    width: 90px;
    height: 80px;
    font: 400 10px var(--main-text);
    color: #737373;
    padding-top: 7px !important;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.mos-gifts-gift > p > img {
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 5px;
    align-self: center;
}

.mos-gifts-gift > p > span {

}

.mos-gifts-biggift {
    margin: 5px auto;
    width: 637px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F5F5F5;
    padding: 6px;
    border-radius: 5px;
}

.mos-gifts-biggift > p {
padding:0px!important;
}

.mos-gifts-biggift > p > img {
padding:10px 0 3px 0!important;
}

.mos-gifts-title > img {
    padding-left: 30px;
}

</style>

<section class="mos-gifts-wrapper">

<div class="mos-gifts-title">
<p>Сентябрь</p>
<img src="https://i.imgur.com/l02HP2h.png" alt="gift" />
<span>
Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании модели развития.
</span>
</div>

<div class="mos-gifts-container">

<div class="mos-gifts-gift">
<p>1</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>2</p>
<p>
<img src="https://i.ebayimg.com/images/g/n8IAAOSwltRkNCSF/s-l1200.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-gift">
<p>3</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>4</p>
<p>
<img src="https://i.imgur.com/l02HP2h.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-gift">
<p>5</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>6</p>
<p>
<img src="https://i.imgur.com/l02HP2h.png" alt="gift" />
</p>
</div>

</div>

<div class="mos-gifts-biggift">
<p>7</p>
<p>
<img src="https://i.imgur.com/nKUvGFw.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-container">

<div class="mos-gifts-gift">
<p>1</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>2</p>
<p>
<img src="https://i.ebayimg.com/images/g/n8IAAOSwltRkNCSF/s-l1200.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-gift">
<p>3</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>4</p>
<p>
<img src="https://i.imgur.com/l02HP2h.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-gift">
<p>5</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>6</p>
<p>
<img src="https://i.imgur.com/l02HP2h.png" alt="gift" />
</p>
</div>

</div>

<div class="mos-gifts-biggift">
<p>7</p>
<p>
<img src="https://i.imgur.com/nKUvGFw.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-container">

<div class="mos-gifts-gift">
<p>1</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>2</p>
<p>
<img src="https://i.ebayimg.com/images/g/n8IAAOSwltRkNCSF/s-l1200.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-gift">
<p>3</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>4</p>
<p>
<img src="https://i.imgur.com/l02HP2h.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-gift">
<p>5</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>6</p>
<p>
<img src="https://i.imgur.com/l02HP2h.png" alt="gift" />
</p>
</div>

</div>

<div class="mos-gifts-biggift">
<p>7</p>
<p>
<img src="https://i.imgur.com/nKUvGFw.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-container">

<div class="mos-gifts-gift">
<p>1</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

<div class="mos-gifts-gift">
<p>2</p>
<p>
<img src="https://i.ebayimg.com/images/g/n8IAAOSwltRkNCSF/s-l1200.png" alt="gift" />
</p>
</div>

<div class="mos-gifts-gift">
<p>3</p>
<p>
Значимость этих проблем настолько очевидна
</p>
</div>

</div>

</div>
</section>[/html]

Подпись автора

Текст Текст Текст