blakesantanamax
активисты недели
nc-17, real-life, apocalypse

VANCOUVER

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

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


Вы здесь » VANCOUVER » Личные дневники » Лофт


Лофт

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

1

[html]<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/mAQ5ds7.png"></div>
    <div class="spiritfirsttitle">ваша Макс
      <subtitle>ну что?! ...поехали</subtitle></div>
    <div class="spiritfirsttext"><subtitle>тут постараюсь выкладывать полезную и не только хд информацию для игры</subtitle>
      <about>мои схроны; жилища, которые облюбовала; полезная информация, которая может быть нужна для поселений </about></div>
  </div>
 
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">охотничий дом</label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">заброшенный завод</label>

    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">бла-бла-бла</label>

    <section id="content-tab1">
        <p>
<img src="https://i.imgur.com/ty5BY1U.jpg">
<br>не далеко от собственных угодий, есть совершенно потрясающее место. Купаться исключительно в то время, когда нет царапин и ран.

<img src="https://i.imgur.com/PJOdVvY.jpg">
<br>дом, милый дом. Столько сил вложено в него. Аккуратно тем, кто захочет прийти без приглашения - ловушек больше, чем думаете...

<img src="https://i.imgur.com/6UK765Z.jpg">
<br>забавно, что стала ценить, что имею лишь после того, как почти всё потеряла.

<img src="https://i.imgur.com/CdGS8CN.jpg">
<br>то, что спасает меня от перегрузок, делая жизнь немного комфортнее.

<img src="https://i.imgur.com/dV2q2vR.jpg">
<br>не люблю эту комнату...слишком много воспоминаний связано с ним.

<img src="https://i.imgur.com/XqZRYjd.jpg">
<br>а это место — моя гордость, кухня!

<img src="https://i.imgur.com/3x3dKSC.jpg">
<br>спуск вниз, про это место не знает никто, кроме меня и брата.

<img src="https://i.imgur.com/E70ai1v.jpg">
<br>даже вино в запасах есть

<img src="https://i.imgur.com/rF9XgWl.jpg">
<br>и снова запасы... и еще много, с тем учетом, что я больше пополняю к зиме

<img src="https://i.imgur.com/s5IAeGy.jpg">
<br>лыжи, куда я от этого денусь???

<img src="https://i.imgur.com/M8epy4m.jpg">
<br>любимый уголок брата, ну и теперь — это мой уголок☻

<img src="https://i.imgur.com/mvRmvkM.jpg">
<br>недалеко от кухни, снова запасы, но уже те, которые не прячу

<img src="https://i.imgur.com/x7GQ80B.jpg">
<br>ух уж эти тарелки... пришлось сбегать в библиотеку, чтобы понять, почему не работали солнечные панели. Лень — двигатель прогресса.
<img src="https://i.imgur.com/MOQYW8m.jpg">
<br>гостевая

<img src="https://i.imgur.com/UZzkzkJ.jpg">
<br>любимое место для пятой точки ♥

<img src="https://i.imgur.com/d1c4Bmr.jpg">
<br>почти добрались до моей комнаты, но там еще небольшой лабиринт

<img src="https://i.imgur.com/KIv78cX.jpg">
<br>моя серенькая комнатка, но до боли теплая и своя... надо шкурку светлую надыбать

<img src="https://i.imgur.com/7l8C3gA.jpg">
<br>люблю я это дело

<img src="https://i.imgur.com/GFD4ZdP.jpg">
<br>а это вдвойне
<img src="https://i.imgur.com/2BopjdX.jpg">
<br>кабинет... там сижу иногда летом и смотрю в окно. Там еще растут розы, посаженные матерью.

<img src="https://i.imgur.com/5cN0Z09.jpg">
<br>тут храню запасы топлива, и пару байков

        </p>
    </section> 
    <section id="content-tab2">
        <p>
пока пусто

        </p>
    </section>
    <section id="content-tab3">
        <p>
пока пусто
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)}

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}

.tabs {
padding: 0px;
margin: 0 auto;
}

.tabs>section {
display: none;
padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

@keyframes fadeIn {
from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
}
to {
    transform: translate(0px,0);
}
}

.tabs>input {
display: none;
position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
color: #888;
cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>[/html]

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

https://i.imgur.com/aMuKC9H.gif
𝓗и𝒌оль спасибо за красоту

+1

2

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>#ship9 {
--sh1: 120px;   /* ширина и минимальная высота картинки */
--sh2: #6d888e;   /* цвет описания персонажа */
}
#ship9 {max-width:700px; display:block; position:relative; overflow:hidden; width:100%; height:auto; box-sizing:border-box;}
#ship9 * {box-sizing:border-box;}
.shipp {display:grid; grid-template-columns: calc(var(--sh1) + 20px) auto auto; grid-template-rows: auto auto; width: 100%; margin-bottom: 20px;}
.shipp:last-child {margin-bottom: 0px;}
.kartin {grid-row-start: 1; grid-row-end:3; grid-column-start:1; grid-column-end:2; display:block; width: var(--sh1); min-height: var(--sh1); height:auto; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; grid-row-start: 1; grid-row-end:2;}
/*** ИМЯ ПЕРСОНАЖА ***/
.namep {grid-column-start:2; grid-column-end:3; place-self: center left; font-family: 'Oswald', Tahoma, sans-serif; font-size:22px;}
.shipp > p {grid-row-start: 2; grid-row-end:3; grid-column-start:2; grid-column-end:4; align-self: start; padding:0 8px 0 0 !important; margin:10px auto 6px 0px !important; overflow:auto; line-height:130% !important; text-align: justify; font-family: Tahoma, Arial, sans-serif; max-height:70px;}
.shipp *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.shipp *::-webkit-scrollbar-thumb {background: var(--sh2);} /*shipovnik*/
.shipp *::-webkit-scrollbar-corner {background: transparent;}
</style>
<div id="ship9"><!-- START -->

   <!-- ПЕРСОНАЖ -->
<div class="shipp"><div class="kartin" style="background-image:url(ссылка на картинку с внешностью)"></div>
   <div class="namep"><a href="ссылка на профиль персонажа">Имя Персонажа</a></div>
   <p>
Отношения
   </p></div>

   <!-- ПЕРСОНАЖ -->
<div class="shipp"><div class="kartin" style="background-image:url(ссылка на картинку с внешностью)"></div>
   <div class="namep"><a href="ссылка на профиль персонажа">Имя Персонажа</a></div>
   <p>
Отношения
   </p></div>
<!-- END --></div>[/html]

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

https://i.imgur.com/aMuKC9H.gif
𝓗и𝒌оль спасибо за красоту

0

3

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>windmills</span>
      <em>How Do Windmills Work?</em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">Imagination rules the world</span>
        <div>Устройство для преобразования кинетической энергии ветрового потока в механическую энергию вращения ротора с последующим её преобразованием в электрическую энергию. Ветер раскручивает ротор. Выработанное электричество подаётся через контроллер на аккумуляторы. Инвертор преобразует напряжение на контактах аккумулятора в пригодное для использования.
Состоит из следующих деталей:
Фундамент
Силовой шкаф, включающий силовые контакторы и цепи управления
Башня
Лестница
Поворотный механизм
Гондола
Электрический генератор
Система слежения за направлением и скоростью ветра (анемометр)
Тормозная система
Трансмиссия
Лопасти (как правило, три, поскольку роторы с двумя лопастями подвергаются большим нагрузкам в момент, когда пара лопастей вертикальна, а больше трёх лопастей создают избыточное сопротивление воздуха)
Система изменения угла атаки лопасти
Обтекатель
Система пожаротушения
Телекоммуникационная система для передачи данных о работе ветрогенератора
Система молниезащиты
Привод питча</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #EAD807;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://i.imgur.com/l31LsMF.jpg);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

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

https://i.imgur.com/aMuKC9H.gif
𝓗и𝒌оль спасибо за красоту

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»



Вы здесь » VANCOUVER » Личные дневники » Лофт