[html]
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"><link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Comfortaa:wght@300&display=swap" rel="stylesheet">
<style>
#season {height: 500px; width: 550px; margin: auto; position: relative; background: #e0e0e0}
#season .topbit {height: 390px; width: 550px; border-bottom: 1px solid #daad38; position: absolute; box-sizing: border-box}
#season .topbit .imgbit {height: 100%; width: 200px; border-right: 1px solid #daad38; box-sizing: border-box; position: absolute}
#season .topbit .imgbit img {height: 100%; width: 100%; object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); position: absolute}
#season .topbit .imgbit scr {height: 100%; width: 100%; position: absolute; background: #85660c; mix-blend-mode: screen}
#season .btmbit {width: 550px; height: 110px; position: absolute; bottom: 0}
#season .btmbit .gifbit {height: 100%; width: 200px; border-left: 1px solid #daad38; box-sizing: border-box; position: absolute; right: 0}
#season .btmbit .gifbit img {height: 100%; width: 100%; object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); position: absolute}
#season .btmbit .gifbit scr {height: 100%; width: 100%; position: absolute; background: #85660c;; mix-blend-mode: screen}
#season .btmbit .namebit {display: flex; width: 350px; position: absolute; left: 0; flex-direction: column; justify-content: center; font-family: Amatic SC; font-weight: bold; height: 100%; padding: 0 30px; text-align: right; box-sizing: border-box; text-transform: uppercase; font-size: 30px; color: #daad38}
#season .btmbit .namebit span {color: #555; font-size: 11px; letter-spacing: 1px; border-bottom: 4px solid #ccc; padding-bottom: 5px}
#season .btmbit .namebit bit {margin-bottom: 5px;}
#season .txtbit {height: 340px; width: 350px; box-sizing: border-box; border: 25px solid transparent; position: absolute; right: 0; bottom: 0; font-family: roboto mono; font-size: 11px; color: #333; line-height: 1.6; overflow: auto; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; transition: 0.4s ease; opacity: 0; text-align: justify; border-right: 10px solid transparent; padding-right: 10px}
#season .togglebit {height: 50px; width: 350px; border-bottom: 1px solid #daad38; position: absolute; right: 0;}
#season input {display: none}
#season #seasont+label {height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #daad38; position: absolute; right: 0; top: 0; font-size: 10px; z-index: 8}
#season #seasont+label span {height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; position: absolute; text-align: center}
#season #seasont:hover+label {color: #555; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2)}
#seasont:checked+label ~ #about {opacity: 0;}
#seasont:checked+label ~ #relations {opacity: 1; z-index: 5}
#seasont+label ~ #about {opacity: 1; z-index: 5}
#seasont+label ~ #relations {opacity: 0}
#season .ttlbit {height: 50px; width: 300px; box-sizing: border-box; position: absolute; padding-left: 25px; line-height: 50px; font-family: Comfortaa; color: #333; text-transform: uppercase; font-size: 12px; font-weight: 900; right: 50px; text-align: left; letter-spacing: 1px; opacity: 0; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; transition: 0.4s ease;}
#season .txtbit .header {font-family: Playfair Display; color: #333; border-bottom: 1px solid #daad38; text-transform: uppercase; font-weight: 700; padding-bottom: 5px; letter-spacing: 1px; margin: 10px 0}
#season .txtbit .header:nth-child(1) {margin-top: 0}
#season .txtbit::-webkit-scrollbar {width: 7px}
#season .txtbit::-webkit-scrollbar-thumb {background: #ccc}
#season .txtbit::-webkit-scrollbar-track {background: #e0e0e0; border: none!important}
</style>
<div id="season">
<div class="topbit">
<input type="checkbox" id="seasont">
<label for="seasont">
<span class="th th-diagonal-resize"></span>
</label>
<div class="imgbit">
<img src="https://i.imgur.com/Uml2pQp.png">
<scr></scr>
</div>
<div class="togglebit"></div>
<div class="ttlbit" id="about">• ключевая информация:</div>
<div class="txtbit" id="about"><div class="header">стилист, визажист, мастер маникюра, парикмахер, бьюти-блоггер;</div>
<p>алёна с детства интересуется модой. ворует мамины каблуки (есть фотографии), неаккуратно красит губы подсохшей помадой (бабушка перепутала вишнёвый с кровью, потеряла очки, и ругалась потом ещё долго, очень). так, что так отпечатывается на губах. потому что у алёны есть только вечно работающая мама, уставшая бабушка, постоянно тяжело вздыхающая, глядя на дочь, редкие красивые мамины вещи, которые та надевает только по праздникам, и приятно пахнущие коробочки и тюбики, что хранятся в маминой спальне на стареньком трюмо — легко достать, если подставить табуретку.
<p>алёна мучает маму вопросами, когда та изредка берёт её на колени. любопытства ей не занимать.
<p>а это что, мам? а это для чего? а почему это так пахнет? а это что такое? а вон там что стоит?
<p>засыпающая мама шёпотом рассказывает ей про помаду, тушь и туалетную воду, а потом зовёт бабушку и та укладывает алёну спать. рассказы редко появляющейся дома матери интереснее бабушкиных сказок.
<p>в шестнадцать алёна ворует мамину помаду и красит губы уже аккуратно, ровно. на выпускной алёна шьёт платье сама. перешивает одно из маминых старых под модный фасон, значительно укоротив юбку. а после идёт учиться на парикмахера и работает за копейки, делает скучные однообразные стрижки.
<p>алёна чахнет. алёне скучно. алёна недовольна своей жизнью и провинциальной действительностью. алёне этого мало. алёна уезжает в большой город, в москву. обещает высылать маме деньги.
<p>думает, всё изменится. думает, что сможет мир перевернуть. думает, справится. и снова работает в парикмахерской за копейки. перемены так и не приходят.
<p>света, подруга алёны, выходит замуж. алёна делает ей причёску и свадебный макияж. света крутится перед зеркалом, оставаясь очень собой довольна. света рассказывает об этом друзьям. так у алёны появляется подработка. она заканчивает сначала одни курсы, потом другие. теперь алёна мастер маникюра и визажист, позже она начинает называть себя стилистом.
<p>алёна заводит инстаграм, выкладывает туда свои работы: пошитые платья, причёски, дизайн маникюра, идеи для макияжа, сама являясь мастером, фотографом и моделью. всё даётся нелегко, учиться приходится на собственных ошибках, но алёна и не думает сдаваться так легко. количество подписчиков растёт, алёна начинает записывать видео на youtube. поначалу качества звука в них нет и прилагается отвратительный свет, но день за днём и год за годом алёна это меняет и улучшает. делает более аккуратные склейки при монтаже, хорошо сводит звук.
<p>жизнь алёны меняется, пусть и не сразу.
</div>
</div>
<div class="btmbit">
<div class="gifbit">
<img src="https://i.imgur.com/2oS4JgE.jpg">
<scr></scr>
</div>
<div class="namebit">алёна
<bit><span> 30-32 • валентина зеляева</span></bit>
</div>
</div>
</div>
<a href="http://neversleeps.rusff.me/viewtopic.php?pid=5684#p5684"><div style="width: 550px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">мечтательница</div></a>
[/html]
Отредактировано mad marge (29-01-2021 08:12:03)