2 года

ЛИСТАТЬ СТРАНИЧКИ НАДО ТУДА >

Код:

<!--HTML--><center> <style>.image.UP,
.image.Down {
  
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
}
.image.UP:hover {
   opacity:0.00;
}
 
div.ImgWrap{border: double 4px #000;
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
   .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */



  </style>
<style type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Oswald|Alegreya:400,700|Varela+Round' rel='stylesheet' type='text/css'>

#capitolcouture {position:absolute; width: 615px; height:650px;}

.slides {    padding: 0;
width: 615px;
height: 650px;
display: block;
margin: 0 auto;
position: relative;
box-shadow: 2px  rgba(0,0,0,0.2)}

.slides * {    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;}

.slides input { display: none; }

.slide-container { display: block; }

.slide {    top: 0;
    opacity: 0;
    width: 590px;
    height: 590px;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;}

.nav label {
    width: 50px;
    height: 100%;
    display: none;
    position: absolute;
  opacity: 0;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 100pt;
    text-align: center;
    line-height: 590px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(225, 224, 224, 0.5);}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(225, 224, 224, 0.8);}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4{
input#img-5:checked ~ .nav-dots label#img-dot-5{
input#img-6:checked ~ .nav-dots label#img-dot-6{
input#img-7:checked ~ .nav-dots label#img-dot-7{
input#img-8:checked ~ .nav-dots label#img-dot-8{
input#img-9:checked ~ .nav-dots label#img-dot-9{
input#img-10:checked ~ .nav-dots label#img-dot-10{
input#img-11:checked ~ .nav-dots label#img-dot-11{
input#img-12:checked ~ .nav-dots label#img-dot-12{
input#img-13:checked ~ .nav-dots label#img-dot-13{
input#img-14:checked ~ .nav-dots label#img-dot-14{
input#img-15:checked ~ .nav-dots label#img-dot-15{
input#img-16:checked ~ .nav-dots label#img-dot-16{
input#img-17:checked ~ .nav-dots label#img-dot-17{
input#img-18:checked ~ .nav-dots label#img-dot-18{
input#img-19:checked ~ .nav-dots label#img-dot-19{
input#img-20:checked ~ .nav-dots label#img-dot-20{
input#img-21:checked ~ .nav-dots label#img-dot-21{
input#img-22:checked ~ .nav-dots label#img-dot-22{
input#img-23:checked ~ .nav-dots label#img-dot-23{
input#img-24:checked ~ .nav-dots label#img-dot-24{
input#img-25:checked ~ .nav-dots label#img-dot-25{
input#img-26:checked ~ .nav-dots label#img-dot-26{
input#img-27:checked ~ .nav-dots label#img-dot-27{
input#img-28:checked ~ .nav-dots label#img-dot-28{
input#img-29:checked ~ .nav-dots label#img-dot-29{
input#img-30:checked ~ .nav-dots label#img-dot-30{
input#img-31:checked ~ .nav-dots label#img-dot-31{
input#img-32:checked ~ .nav-dots label#img-dot-32{
input#img-33:checked ~ .nav-dots label#img-dot-33{
input#img-34:checked ~ .nav-dots label#img-dot-34{
input#img-35:checked ~ .nav-dots label#img-dot-35{
	background: rgba(225, 224, 224, 0.8);
}


.cccover {width: 460px; position: relative; top: 45%; font:400 65px Alegreya, serif; text-align: center; color: #e4e0e1; line-height: 100%; overflow:hidden; z-index: 9}
.cccovertitle {width: 480px; position: relative; top: 65%; font:400 65px Alegreya, serif; text-align: center; color: white; line-height: 100%; overflow:hidden; letter-spacing: 3px; z-index: 9}

.slide h1 {
    width: 400px;
    margin-top: 240px;
    overflow: hidden;
    text-align: center;
    font: 300 11px Open Sans Condensed, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    word-spacing: 5px;
    color: white;
    z-index: 2;}
.slide h1:before,
.slide h1:after {
    border-top: 1px solid white;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;}
.slide h1:before {
    right: 1em;
    margin-left: -50%;}
.slide h1:after {
    left: 1em;
    margin-right: -50%;}

.slide h2 {
    width: 400px;
    margin-top: 300px;
    overflow: hidden;
    text-align: center;
    font: 300 11px Open Sans Condensed, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    word-spacing: 5px;
    color: #e4e0e1;
    z-index: 2;}
.slide h2:before,
.slide h2:after {
    border-top: 1px solid #e4e0e1;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;}
.slide h2:before {
    right: 1em;
    margin-left: -50%;}
.slide h2:after {
    left: 1em;
    margin-right: -50%;}

.ccpage1 {font: 11px arial; text-align: justify; padding: 5px 0px; overflow:hidden}
.ccpage1:first-letter { padding: 5px; margin-bottom: 0px; margin-right: 4px; float: left; color: black; font: 35px oswald; line-height: 20px; text-transform: uppercase; text-align: center;}
</style>

<div id=capitolcouture">
<ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
    <div class="slide">
<div style="background-image: url(http://s8.uploads.ru/WqlMf.png);  width: 615px; height: 650px;">




</div>
        </div>
    <div class="nav">
    	<label for="img-15" class="prev">‹</label>
    	<label for="img-2" class="next">›</label>
    </div>
    </li>
<ul class="slides">
     <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
<div style="background-image: url(http://sd.uploads.ru/FTS6a.png);  width: 615px; height: 650px;">
</div>
        </div>
    <div class="nav">
        <label for="img-1" class="prev">‹</label>
    	<label for="img-3" class="next">›</label>
    </div>
    </li>

<ul class="slides">
     <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
<div style="background-image: url(http://s8.uploads.ru/EZRMJ.png);  width: 615px; height: 650px;">
</div>
        </div>
    <div class="nav">
        <label for="img-2" class="prev">‹</label>
    	<label for="img-4" class="next">›</label>
    </div>
    </li>

<ul class="slides">
     <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
<div style="background-image: url(http://s8.uploads.ru/nUFoI.png);  width: 615px; height: 650px;">
</div>
        </div>
    <div class="nav">
        <label for="img-3" class="prev">‹</label>
    	<label for="img-5" class="next">›</label>
    </div>
    </li>

<ul class="slides">
     <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
<div style="background-image: url(http://s3.uploads.ru/p3Vm9.png);  width: 615px; height: 650px;">
</div>
        </div>
    <div class="nav">
        <label for="img-4" class="prev">‹</label>
    	<label for="img-6" class="next">›</label>
    </div>
    </li>
</div>

Дальше должен был быть миллион страниц с кучей гифок, но получилось так, что в момент их создания я осознал, что это всё выглядит по-другому, нежели себе представлял и думал. Будет, в какой области подлатать собственные навыки, чеб в следующий раз не было такой резкой внезапности. Поэтому решил, что лучше будет если покажу всё просто. Без всяких фотошопов, надеясь, что твои глаза нормально воспримут цвета и не ослепнут. Я знаю, что ты визуал, ты сама об этом неоднократно говорила. Знаю, что ты любишь смотреть и представлять что-то, воспроизводя определённую картинку. Поэтому хочется дарить твоему взгляду то, что может эту картинку дополнить, позволить фантазии разбушеваться ещё сильнее и хочется попробовать соединить два мира посредством подбора нужных кадров.

Я запланировал ещё несколько вещей, на которые требуется чуть больше времени, ибо желаю воплотить всё в живую по уму и не оплошать в каких-то мелочах. Тебя заклинаю только чутка подождать и подкопить интерес. Ты всегда здорово ловишь волну идей, подхватываешь налету и так совсем не каждый умеет, перестроиться на чью-то волну, да ещё и заточить под это дело свою доску для сёрфинга. Но у нас это выходит очень крутяк, чему безмерно рад. Думаю, даже если нас когда-то не будут связывать посты и ворох персонажей, то я бы всё равно хотел, чтобы ты осталась в моей жизни и я по-прежнему желал тебе хотя бы доброго утра и желал приятных снов.

Думаю, что 15 сентября можно официально объявить праздничным днём, потому что в этот день я нашёл то, что очень долго искал в лице тебя. Всякие неурядицы, порой, случающиеся, считаю само собой разумеющимся, ведь нужно как-то отдавать долг за такую принцессу, как ты, которую следует бесконечно оберегать. Пусть она и говорит, что со всем справится сама и всем даст с ноги в качан, если надо, во что я искренне верю.

С двумя годами тебя, рыжик, и со всеми последующими следом зимами, вёснами, осенями и летами тоже.

P.S. ГН и БДО не хило обломали мои планы, но я дождусь. когда они настроят свои сервера, чтобы продолжать творить тёмные дела

r & co

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

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

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

2 года

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

Поделиться12018-09-14 14:38:40