[html]
<style>
.kenny{
width: 650px;
height: 400px;
background: #4f4f4f;
position: relative;
border: solid 3px #3f3e3e;
box-shadow: inset 0 0 0 1px #656464;
/* margin-left: 9%; */
/* margin-top: 10px; */
}
.kennyexample{
position: relative;
top: -15px;
left: 2px;
padding: 0 0 14px;
margin: 18px 7px 0;
width: 630px;
height: 90px;
overflow: hidden;
overflow-x: auto;
White-space: pre!important;
}
.kennyexampletext{
position: absolute;
top: 277px;
left: 2px;
width: 650px;
text-align: center;
font-family: Alegreya Sans SC;
font-size: 12px;
letter-spacing: 20px;
color: #ccc;
}
.kennyexample img{
height: 80px;
/* mix-blend-mode: overlay; */
opacity: .5;
transition: .5s;
filter: grayscale(1);
}
.kennyexample img:hover{
opacity: 1;
filter: none!important;
}
.kennytabs {
left: 50%;
top: 0px;
position: relative!important;
transform: translateX(-50%);
position: relative;
/* background: white; */
padding: 10px;
padding-bottom: 80px;
width: 90%;
height: 200px;
border-radius: 5px;
min-width: 240px;
}
.kennytabs input[name="tab-control"] { display: none; }
.kennytabs .content section h2, .kennytabs ul li label {
font-family: Alegreya Sans SC;
font-weight: bold;
font-size: 17px;
color: #428bff;
}
.kennytabs ul {
list-style-type: none;
padding-left: 0;
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
.kennytabs ul li {
box-sizing: border-box;
flex: 1;
width: 25%;
padding: 0 10px;
text-align: center;
}
.kennytabs ul li label {
transition: all 0.3s ease-in-out;
color: #8c8d8f;
overflow: hidden;
text-overflow: ellipsis;
display: block;
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
-webkit-touch-callout: none;
}
.kennytabs ul li label svg {
fill: #8c8d8f;
height: 1.2em;
vertical-align: bottom;
margin-right: 0.2em;
transition: all 0.2s ease-in-out;
}
.kennytabs ul li label:hover, .kennytabs ul li label:focus, .kennytabs ul li label:active { outline: 0; color: #a6a6a6; }
.kennytabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #a6a6a6; }
.kennytabs .slider {
position: relative;
width: 33.4%;
transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.kennytabs .slider .indicator {
position: relative;
width: 50px;
max-width: 100%;
margin: 0 auto;
height: 4px;
background: #ff6d47;
border-radius: 1px;
}
.kennytabs .content {
margin-top: 30px;
overflow: auto;
height: 160px;
}
.kennytabs .content section {
display: none;
color: #ccc;
text-align: justify;
animation-name: content;
animation-direction: normal;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
line-height: 1.4;
}
.kennytabs .content section h2 { color: #ff6d47; display: none; }
.kennytabs .content section h2::after {
content: "";
position: relative;
display: block;
width: 30px;
height: 3px;
background: #ff6d47;
margin-top: 5px;
left: 1px;
}
.kennytabs
input[name="tab-control"]:nth-of-type(1):checked
~ ul
> li:nth-child(1)
> label {
cursor: default;
color: #ff6d47;
}
.kennytabs
input[name="tab-control"]:nth-of-type(1):checked
~ ul
> li:nth-child(1)
> label
svg {
fill: #ff6d47;
}
@media (max-width: 600px) {
.kennytabs
input[name="tab-control"]:nth-of-type(1):checked
~ ul
> li:nth-child(1)
> label {
background: rgba(0, 0, 0, 0.08);
}
}
.kennytabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
transform: translateX(0%);
}
.kennytabs
input[name="tab-control"]:nth-of-type(1):checked
~ .content
> section:nth-child(1) {
display: block;
}
.kennytabs
input[name="tab-control"]:nth-of-type(2):checked
~ ul
> li:nth-child(2)
> label {
cursor: default;
color: #ff6d47;
}
.kennytabs
input[name="tab-control"]:nth-of-type(2):checked
~ ul
> li:nth-child(2)
> label
svg {
fill: #ff6d47;
}
@media (max-width: 600px) {
.kennytabs
input[name="tab-control"]:nth-of-type(2):checked
~ ul
> li:nth-child(2)
> label {
background: rgba(0, 0, 0, 0.08);
}
}
.kennytabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider { transform: translateX(100%); }
.kennytabs
input[name="tab-control"]:nth-of-type(2):checked
~ .content
> section:nth-child(2) {
display: block;
}
.kennytabs
input[name="tab-control"]:nth-of-type(3):checked
~ ul
> li:nth-child(3)
> label {
cursor: default;
color: #ff6d47;
}
.kennytabs
input[name="tab-control"]:nth-of-type(3):checked
~ ul
> li:nth-child(3)
> label
svg {
fill: #ff6d47;
}
@media (max-width: 600px) {
.kennytabs
input[name="tab-control"]:nth-of-type(3):checked
~ ul
> li:nth-child(3)
> label {
background: rgba(0, 0, 0, 0.08);
}
}
.kennytabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
transform: translateX(200%);
}
.kennytabs
input[name="tab-control"]:nth-of-type(3):checked
~ .content
> section:nth-child(3) {
display: block;
}
}
.kennytabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
transform: translateX(300%);
}
.kennytabs
input[name="tab-control"]:nth-of-type(4):checked
~ .content
> section:nth-child(4) {
display: block;
}
@keyframes content {
from {
opacity: 0;
transform: translateY(5%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
@media (max-width: 1000px) {
.kennytabs ul li label { white-space: initial; }
.kennytabs ul li label br { display: initial; }
.kennytabs ul li label svg { height: 1.5em; }
}
@media (max-width: 600px) {
.kennytabs ul li label {
padding: 5px;
border-radius: 5px;
}
.kennytabs ul li label span { display: none; }
.kennytabs .slider { display: none; }
.kennytabs .content { margin-top: 20px; }
.kennytabs .content section h2 { display: block; }
}
.kennytabs .content::-webkit-scrollbar{width: 0px; height: 0px; background: transparent;}
.kennyexample::-webkit-scrollbar{background: transparent; height:4px;}
.kennyexample::-webkit-scrollbar-thumb:horizontal { background: #ff6d47!important; border: none!important; box-shadow: none!important; border-radius: 1px!important;}
</style>
<div class="kenny">
<div id="container">
<div class="kennytabs">
<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">
<ul>
<li><label for="tab1" role="button"><br><span>вкладка о1</span></label></li>
<li><label for="tab2" role="button"><br><span>вкладка о2</span></label></li>
<li><label for="tab3" role="button"><br><span>вкладка о3</span></label></li>
</ul>
<div class="slider"> <div class="indicator"></div> </div>
<div class="content">
<section>
По прогнозам в ближайшие несколько дней обещали дождь. Желание быть продуктивным не было от слова совсем, и потому приходилось задерживаться в офисе, чтобы разобраться со всеми бумажками, и не просрать всевозможные дедлайны. Да и дома, знаете, было будто бы чуть напряжённое, чем всегда. Словно какая-то черная кошка пряталась по углам. Недосказанность, непонимание происходящего, и еще много всевозможных "не". Можно ли было меня осуждать за то, что сегодня я задержался слишком уж долго, и возвращался домой посреди ночи? Она волнуется. Я знаю наверняка, что Луна, вероятно, ждала меня, но надеюсь на то, что она уже спит, когда открываю дверь собственным ключом, стараясь не издавать лишнего шума.
В гостиной горит тусклый свет настольной лампы, на столе стоит тарелка с остывшим ужином. Мне станет стыдно, и даже несмотря на то, что я был совершенно не голоден. я все равно суну еду в микроволновку, и только после того, как утихнет еле слышный гул чудо техники, я услышу странный звук сверху, и меня потянет туда невидимой силой. Я не постучу в дверь. Открою ее тио, и скользну в комнату Луны, находя ее спящей, и всхлипывающей. Подушка была мокрой от слез, и не желая того, чтобы она и дальше видела плохие сны, я опущусь рядом с ней на кровать, осторожно касаясь плеча. -Луна? Она откроет глаза, и увидев меня, на долю секунды, будто бы, испугается, а затем, протянув руки, обнимет меня за шею, пряча лицо в моей груди. Ладони скользнут по ее спине, к лопаткам. Легкими поглаживаниями стараюсь успокоить ее, прижму к себе суть крепче, опущусь, зарываясь лицом в ее волосы на макушке. -Это был всего лишь дурной сон, милая. и когда ее пальцы сожмут мою футболку, добавлю: -Я рядом. Не плачь. и мне неизвестно, что ей снилось, да и вряд ли она захочет этим поделиться, но мне хочется верить, что эти слова успокоят ее. Хотя бы немного. Придадут уверенности в том, что она в безопасности. И пусть я не могу защитить Луну в ее снах, но в нашей реальности ей ничего не угрожало, пока она была рядом со мной. Только от себя самого защитить ее у меня не получалось.
</section>
<section>
<h2>вкладка 2</h2>
Делать вид, что, между нами, ничего не происходило — это верно? Думаю, что нет, но на данный момент именно этот вариант кажется самым правильным. Серая безысходность никак не отпускала, и я давно не чувствовал себя так паршиво, как на следующий день. Проснувшись ровно в пять утра, какое-то время я пролежу, смотря в окно, наблюдая за тем, как снаружи шумит дождь, и ветер качает ветви редких деревьев. В доме стояла полнейшая тишина, и от этого еще больше было не по себе. Несмотря на раннее время, я встану, потру плечо, практически зажившее, но предательски ноющее, видимо, на погоду, и наскоро одевшись в домашние штаны и растянутую футболку, спущусь на кухню, включая плиту, и разводя смесь для блинчиков. Радио что-то успокаивающе бормочет, и это отвлекает от тревожных мыслей, помогает забыться на минутку, ровно до тех пор, пока в проходе на кухню не появится хрупкая фигурка Луны. -Привет, солнышко. Садись. на стол опустится тарелка с завтраком, и стакан апельсинового сока. -Как спаслось? и я искренне стараюсь не обращать внимание на то ,с каким непонятливым подозрением смотрит на меня девушка. Просто нужно делать вид, что ничего не произошло. Просто нужно постараться сделать вид, что все по-прежнему, и все, возможно, снова будет хорошо. Возможно. А возможно и нет.
</section>
<section>
<h2>вкладка 3</h2>
-Дай я посмотрю. Луна потянется к моему плечу, уже после того как умоется, и смывая со своего прелестного лица следы ночным слез. -Это необязательно, все в порядке. но она уде потянет мою футболку вверх, стараясь добраться до той части тела, что еще недавно пугала своим состоянием. Я знаю, какой будет ее реакция. Удивление, шок, отрицание, возможно, и я готов к этому. Поэтому на вопрос девушки: -Как это возможно? Лишь пожму плечами. -Особенности организма. Все заживает, как на собаке. Постараюсь улыбнуться расслабленно, надеясь на то, что это как то поможет отпустить эту болезненную тему, но судя по выражению на лице Лу, это вообще не помогает, да и если уж говорить полностью откровенно: сложно было поверить в то, что она так просто смириться с моим волшебным выздоровлением. -Я уже пытался объяснить тебе. но ты не поверила. Думаю нужно немного времени. Тебе чтобы свыкнуться с этим, а мне что бы... Ну что бы... Пожую губы, пытаясь продолжить собственную фразу так, что бы она звучала не по идиотски. -Что бы найти нужные слова для объяснения. Натяну обратно на себя футболку, и взглянув на время цокну языком. Стрелки часов уже давно перевалили за полночь, слишком давно, и за окном начинало рассветать. Только услышав чириканье птиц я почувствую, что на самом деле ужасно устал, держать глаза открытыми станет невероятно тяжело. -Думаю нам стоит немного поспать. но я не успею сделать и шага к лестнице наверх, Луна остановит меня своей тихой просьбой: -Постой. замерев, я внимательно взгляну на нее, а затем переведу взгляд на то что она держит в пальцах, в протянутой ко мне руке. -Нужно тебе это вернуть. перехвачу фотографию, на которой были изображены два счастливых человека. Мы. Фотокарточка ужасного качества, в черно белом цвете, но взглянув на нее на лице непроизвольно появляется улыбка. Возвращаться воспоминаниями в то время, где мы были вместе. не сдерживаемые никакими рамками, влюбленные и счастливые, мне всегда нравилось, и этот раз не оказался исключением. Однако я не стану забирать ее, чтобы спрятать в собственную полку. -оставь себе. Рассмотри ее хорошенько. Вдруг что-нибудь вспомнишь. А затем, сделав шаг ближе, я осторожно коснусь губами ее виска. -Спокойной ночи, милая.
</section>
</div>
</div></div>
<div class="kennyexampletext">
примеры работ
</div>
<div class="kennyexample">
<img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg"> <img src="https://forumupload.ru/uploads/0019/d7/11/26/659785.jpg">
</div>
</div>
[/html]
