Тестовое сообщение

Страница: 1

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

Поделиться12018-11-22 14:27:00

Автор: Michael Lilywhite
Администратор
padlf1\лз: ГАБРИЭЛЬ ДЕВО, 36
человек, полицейский в отделе по делам андроидов;
служить и защищать
Сообщений: 9
Уважение: +0
Последний визит:
2019-01-07 00:42:47

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Код:

какой то код

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

какой то спойлер

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
еще спойлер
в нем цитата в цитате

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Поделиться22018-11-22 16:12:52

Автор: Michael Lilywhite
Администратор
padlf1\лз: ГАБРИЭЛЬ ДЕВО, 36
человек, полицейский в отделе по делам андроидов;
служить и защищать
Сообщений: 9
Уважение: +0
Последний визит:
2019-01-07 00:42:47

Код:

.race {width: 216px !important;
height: 28px;
margin:auto;
border: 1px solid #9c9078;
overflow: hidden}

.racename {width: 216px;
height: 28px;
position: absolute;
background:  radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(239,1,124,0) 100%);;
text-align: center;
font-family: roboto;
font-weight: 300;
color: #fff;
text-shadow: 1px 1px 0 #111, 0 0 3px rgba(255,255,255,1);
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 26px;
margin-top: -28px;
transition: all 1s ease-in-out 0s;
filter: blur(10px);
opacity:0}

.race img {transition: all .5s ease-in-out 0s}

.race:hover img {filter: blur(3px) brightness(.6);
transform: scale(1.3)}

.race:hover .racename {filter: blur(0px);
opacity:1}

Поделиться32018-11-26 02:47:31

Автор: Michael Lilywhite
Администратор
padlf1\лз: ГАБРИЭЛЬ ДЕВО, 36
человек, полицейский в отделе по делам андроидов;
служить и защищать
Сообщений: 9
Уважение: +0
Последний визит:
2019-01-07 00:42:47

Код:

#spiritworkroom {width: 610px;
height: 520px;
background: #cac1b1;
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 #d9d1c3}

.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
}
.spiritfirstpic img {  transition: all .6s linear 0s}
.spiritfirstpic:hover img {filter: grayscale(100%) brightness(.5)}
.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)} 

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


.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;
  width: 196px;}
.tabs>label {
	display: inline-grid;
	margin: 0 -3px 0px;
	padding: 10px 0px;
	font-weight: 600;
	text-align: center;
	color: #4a4b69;
	background: #d9d1c3;
  width: 195px;
  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: 189px;
height: 3px;
background: #4a4b69;
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: #4a4b69;}
.tabs>label:hover {
	color: #4a4b69;
	cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
	color: #7e3535;
  background: #c9c1b3;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 189px;
height: 3px;
background: #7e3535;
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;
}

Код:

<div class="creatbox">
  <div class="creatleftpic"><img src="https://via.placeholder.com/80x400"></div>
    <div class="creatrighttpic"><img src="https://via.placeholder.com/80x400"></div>
  <div class="creattitle"><title>название темы</title>
  <div class="creatname">michael lilywhite</div>
     <div class="creatcont">
    <div class="creatava"><img src="https://via.placeholder.com/120x120"></div>
       <div class="creatabout"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem ligula, vehicula et egestas at, hendrerit quis lectus. Morbi eleifend tincidunt purus, id vestibulum diam gravida nec. Nullam quis aliquam mi. Duis sollicitudin, ligula a viverra commodo, erat lectus fringilla metus, quis suscipit nunc nisl vitae nunc. Maecenas auctor vestibulum tincidunt. Vestibulum sit amet placerat purus. Suspendisse luctus bibendum luctus. Praesent mattis quam eu malesuada iaculis.
</div>
     <div class="creattext"> 
Donec semper consectetur velit, a lacinia mi egestas quis. Nullam blandit, eros vitae ullamcorper venenatis, elit ligula hendrerit odio, ut mattis libero risus quis leo. Integer finibus velit quis augue venenatis, eget fringilla mi scelerisque. Cras faucibus consectetur odio, sit amet molestie dolor ullamcorper ultricies. Nunc aliquam vehicula nisl, a mollis ligula tempor vel. Nulla facilisi. Pellentesque blandit dolor in arcu dictum, ac dignissim neque bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nec orci consequat massa facilisis porttitor eget id tortor. Nam et urna scelerisque, faucibus leo vitae, vulputate urna. Suspendisse dictum enim id viverra pharetra. Donec quis nulla nunc. Vestibulum iaculis tellus in libero viverra, vitae consectetur libero sagittis. </div>
  </div>
  </div>

  </div>

Код:

.creatbox {background: rgba(255,255,255,.2);
width: 600px;
height: 410px;
margin: auto;
box-shadow: 0 0 0 1px #b1a28b, 0 0 0 4px #bdada0, 0 0 0 6px #9d8d78}

.creatleftpic {float: left;
margin: 5px 0 0 5px;
border: 1px solid #ad9d89;}

.creatrighttpic {float: right;
margin: 5px 5px 0 0px;
border: 1px solid #ad9d89;}

.creattitle {
position: absolute;
margin-top: 5px;
margin-left: 90px;
width: 420px;
text-align: center;
color: #4b4c6a;
height: 20px;
text-transform: uppercase;
font-family: Cormorant Unicase;
font-size: 20px}

.creattitle title:after {content: "";
display: block;
background: #9c9078;
height: 1px;
width: 50%;
margin-top:6px;
margin-left: 103px;
}

.creatname {
margin-top: 5px;
width: 420px;
text-align: center;
color: #444;
height: 20px;
text-transform: lowercase;
font-family: pt sans;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px}

.creatname:before {content: "by ";
font-weight: lighter;
font-size: 8px;
letter-spacing: 0}

.creattitle title {
text-transform: uppercase;
font-family: Cormorant Unicase;
letter-spacing: 2px;
font-size: 20px;
display: block}

.creatcont {border: 1px solid #ad9d89;
height: 344px;
overflow-y: auto;
  background: rgba(255,255,255,.4);
}

.creatava img {box-shadow: 0 0 0 1px #999, 0 0 0 6px #c8c8c7, 0 0 0 7px #ad9d89, 0 2px 2px 6px rgba(0,0,0,.2)}

.creatava {width: 120px;
height: 120px;
float: right;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px}

.creatabout {font-family: open sans;
color: #333;
font-size: 11px;
text-transform: none;
line-height: 16px;
text-align: justify;
margin: 10px 10px 10px 10px;}

.creatabout:after {content: "";
display: block;
background: #9c9078;
height: 1px;
width: 100%;
margin-top:6px;}

.creattext {font-family: open sans;
color: #333;
font-size: 11px;
text-transform: none;
line-height: 16px;
text-align: justify;
margin: 10px 10px 10px 10px;}

Поделиться42018-11-26 14:47:28

Автор: Michael Lilywhite
Администратор
padlf1\лз: ГАБРИЭЛЬ ДЕВО, 36
человек, полицейский в отделе по делам андроидов;
служить и защищать
Сообщений: 9
Уважение: +0
Последний визит:
2019-01-07 00:42:47

Код:

<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="http://s7.uploads.ru/kjKor.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>
 
    <section id="content-tab1">
        <p>Для заполнения можно использовать html-теги. Найти некоторые из них можно, например, <a href="https://zarabotat-na-sajte.ru/uroki-html/osnovnie-tegi-html.html">вот тут</a>.
        </p>

 <p class="prusheenblock"><name>имя персонажа</name>
   <img src="https://via.placeholder.com/100x100">
<txt>Donec semper consectetur velit, a lacinia mi egestas quis. Nullam blandit, eros vitae ullamcorper venenatis, elit ligula hendrerit odio, ut mattis libero risus quis leo. Integer finibus velit quis augue venenatis, eget fringilla mi scelerisque. Cras faucibus consectetur odio, sit amet molestie dolor ullamcorper ultricies. Nunc aliquam vehicula nisl, a mollis ligula tempor vel. Nulla facilisi. Pellentesque blandit dolor in arcu dictum, ac dignissim neque bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nec orci consequat massa facilisis porttitor eget id tortor. Nam et urna scelerisque, faucibus leo vitae, vulputate urna. Suspendisse dictum enim id viverra pharetra. Donec quis nulla nunc. Vestibulum iaculis tellus in libero viverra, vitae consectetur libero sagittis. </txt>
   <game><a href="ссылка">название эпизода</a> [дата игры]</game>
      <game><a href="ссылка">название эпизода</a> [дата игры]</game>
      <game><a href="ссылка">название эпизода</a> [дата игры]</game>
      </p>
       <p class="prusheenblock"><name>имя персонажа</name>
<txt>Donec semper consectetur velit, a lacinia mi egestas quis. Nullam blandit, eros vitae ullamcorper venenatis, elit ligula hendrerit odio, ut mattis libero risus quis leo. Integer finibus velit quis augue venenatis, eget fringilla mi scelerisque. Cras faucibus consectetur odio, sit amet molestie dolor ullamcorper ultricies. Nunc aliquam vehicula nisl, a mollis ligula tempor vel.</txt>
      </p>

    </section>  
    <section id="content-tab2">
        <p>
Тут можно написать, какие у вас с кем отношения.
        </p>
    </section> 
</div>
  </div>
</div>
<div class="clearer"></div>

Страница: 1

back to the future

Меню навигации

Пользовательские ссылки

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

Тестовое сообщение

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

Поделиться12018-11-22 14:27:00

Поделиться22018-11-22 16:12:52

Поделиться32018-11-26 02:47:31

Поделиться42018-11-26 14:47:28