<!--HTML-->
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<style>
   .photo {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
   }
   .photo:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; right: 0; bottom: 2px; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(235, 231, 230, 0.7); /* Полупрозрачный цвет фона */
    color: #10180f; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    font-family: 'Roboto Condensed', sans-serif; /* Гарнитура шрифта */
    font-size: 14px; /* Размер текста подсказки */
    padding-top: 5px; 
   }
  </style>

<center><div style="background: #207472; width: 560px; height: 870px;"><br><br><br>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div style="font-family: Oswald; color: #dcbb46; text-shadow: 6px 6px 0px rgba(0,0,0,0.4); padding-top: 5px; font-size: 53px; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg);">
TO THE MOON AND BACK</div><div style="font-family: Arial;  text-shadow: 3px 3px 0px rgba(0,0,0,0.2); color: #ebe7e6; font-size: 11px; letter-spacing: 3px; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg);"> <b>scott eastwood, richard baker, elsa hosk, marine vacth</b></div>
<div style="border-top: solid #ebe7e6 3px; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg);"></div>
<div style="border-top: solid #1e3831 3px; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg);"></div>
<div style="border-top: solid #10180f; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg);"></div>
<div style="font-family: Oswald;  color: #1e3831; font-size: 20px; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg);"> <b>Mike O'Donnell, Ray Sullivan, Alex O'Donnel, Jess Gardner </b></div>
<div style="background: #dde0e7; margin: 20px; height: 615px;">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<br><img src=http://funkyimg.com/i/29dNQ.gif /><div class="photo" data-title="Рэй Салливан, 17"><img src=http://funkyimg.com/i/29dND.gif /></div><br>

<center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="520" height="10">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#4b1b23" />
    <param name="FlashVars" value="mp3=http://my-files.ru/Save/v185jd/twenty_one_pilots_-_stessed_out_(zaycev.net).mp3" />
</object></center>

<img src=http://funkyimg.com/i/29dLU.gif /><img src=http://funkyimg.com/i/29dM8.gif /><br>
<center><div style="font-family: Arial; font-size: 10px; color: #10180f; margin: 20px;">Мне всегда твердили, что этот праздник сравним со средневековым балом – даже последняя утка пытается хоть на один вечер превратиться в прекрасного лебедя, как в сказке про Золушку. Мне всегда внушали, что в этот праздник я изменю сам себе: я стану говорить иначе, поступать иначе, да даже думать иначе, - что я переосмыслю всю свою жизнь, и на меня наконец таки нагрянет озарение: «Да я же просто мудак!». Мне всегда доказывали, что это самый прекрасный момент юности, когда все улыбаются и приветливо машут рукой, все вежливы и аккуратны, все разбрасываются шутками и сорят умными мыслями, все забывают обиды и накопленную годами злость. Они говорили, что именно в этот вечер я проснусь от – казалось – начинающейся ненависти к людям и распростру объятья новым знакомствам, стану добрее и милее. Так какого черта я хочу сбежать отсюда и в который раз награждаю тебя умоляющим взглядом? Я отлично умею изображать подобные эмоции – ты же знаешь – но все равно не торопишься соглашаться, срезая на корню все мои надежды и мечты на побег, ты называешь это подлым дезертирством. Я выдыхаю, расстегиваю пиджак и запрокидываю голову назад, закрывая глаза. Я не устал, я не нервничаю, я не напряжен, но мне катастрофически не хватает свежего воздуха – пытаюсь скомпенсировать сей недостаток алкоголем. Но, стоит признать, моя жизнь была бы невероятно скучна, если бы в ней не было «вращательного момента» (читай: силы, продвигающей шило в заднице по самые гланды) – тебя, постоянно готового на все, что угодно, твоей сестры, постоянно осаживающей нас, и твоей девушки, постоянно вертящей пальцем у виска в ответ на все наши выходки.</div>
<div style="border-top: solid #dcbb46 5px;"></div>
<div style="font-family: Oswald; color: #ebe7e6; text-shadow: 4px 4px 0px rgba(0,0,0,0.4); padding-top: 5px; font-size: 17px; line-height: 18px">Wish we could turn back time to the good old days<br>
When our momma sang us to sleep but now we're stressed out</div></center>
</div>

<!--HTML-->
<head><link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'>
<style>

#background_ {
background: #27061c;
width: 600px;
height: 1000px;
}

#mainname1, #mainname2, #mainmane{
position: relative;
overflow: hidden;
float: center;
}

#mainname {
height: 120px;
}

#mainname1 {
z-index: 1;
font-family: Oswald;
color: #f4c951;
text-shadow: 7px 7px 0px rgba(0,0,0,0.9);
padding-top: 5px;
font-size: 75px;
left: -35px;
}

#mainname2 {
z-index: 2;
//font-family: 'Reenie Beanie', cursive;
font-family: 'Waiting for the Sunrise', cursive;
color: #84285b;
text-shadow: 3px 3px 0px rgba(0,0,0,0.6);
font-size: 35px;
position:relative;
left: 150px;
top: -60px;
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}

#poem {
font-family: Oswald; 
text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
color: #fbfbfb;
font-size: 10px;
letter-spacing: 3px;
float: center;
}

#lines {
width: 600px;
color:#fbfbfb;
overflow: hidden;
float: center;
}

#names, #names_alt {
position: relative;
}

#names {
z-index: 1;
font-family: Arial;
color: #fbfbfb;
font-size: 11px;
letter-spacing: 3px;
float: center;
}

#names_alt {
z-index: 2;
font-family: Oswald;
color: #f4c951;
text-shadow: 3px 3px 0px rgba(0,0,0,0.6);
font-size: 15px;
letter-spacing: 1px;
}

#content1, #text1 {
position: relative;
overflow: hidden;
float: center;
}

#content1 {
height: 200px;
}

#text1 {
z-index: 2;
font-family: 'Waiting for the Sunrise', cursive;
color: #84285b;
text-shadow: 3px 3px 0px rgba(0,0,0,0.6);
font-size: 32px;
position:relative;
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
line-height: 30px;
}

#downpart {
position: relative;
overflow: hidden;
}

.poster{
    position:relative;
}

.descr{
    display:none;
    margin-left:-150px;
    padding:10px;
    margin-top:17px;
    background:#fbfbfb;
    height:200px;
    -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    box-shadow:0 5px 5px rgba(0,0,0,0.3);
}
.poster:hover .descr{
    display:block;
    position:absolute;
    top:120px;
    z-index:9999;
    width:400px;
}

</style></head>

<body><center><div id="background_"><br><br><br>

<div id="names"><b>scott eastwood, richard baker, elsa hosk, marine vacth<br>
<font color="#84285b">as</font></b>
<div id="names_alt">Mike O'Donnell, Ray Sullivan, Alex O'Donnel, Jess O'Donnell</div>
--------------------------------------------------------------------------<br></div>
<div style="border-top: solid #fbfbfb 3px; width: 600px"></div>
<div id="lines">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
<div style="border-top: solid #fbfbfb 3px;"></div>

<div id="mainname"><div id="mainname1">STITCHES</div><div id="mainname2">i'll be needed stitches</div></div>

<div style="border-top: solid #fbfbfb 3px; width: 600px"></div>
<div id="lines">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
<div style="border-top: solid #fbfbfb 3px;"></div>

<div id="poem"> i thought that I've been hurt before, but no<br> 
one's ever left me quite this sore. your<br>
words cut deeper than a knife, now<br>
I need someone to breathe me<br>
back to life<br></div>


<div id="content1"><img style="border: 2px solid #fbfbfb; border-radius:50%;" src=http://funkyimg.com/i/2aadt.gif />&nbsp;&nbsp;&nbsp;<img style="border: 2px solid #fbfbfb; border-radius:50%;" src=http://funkyimg.com/i/2aacQ.gif%0B />&nbsp;&nbsp;&nbsp; <img style="border: 2px solid #fbfbfb; border-radius:50%;" src=http://funkyimg.com/i/2aadu.gif />&nbsp;&nbsp;&nbsp;<img style="border: 2px solid #fbfbfb; border-radius:50%;" src=http://funkyimg.com/i/2aaeU.gif />&nbsp;&nbsp;&nbsp;<div id="text1">friendship created at the school,<br>does not mean the friendship to end</div></div>

<center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="600" height="10">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#050303" />
    <param name="FlashVars" value="mp3=http://my-files.ru/Save/zj8rg0/m.i.a._-_paper_planes_ost_farcry_3_(zaycev.net).mp3" />
</object></center>

<div style="float: left; width: 250px; margin-left:20px;"><div class="poster">
<div class="descr">
<div id="mainname1">Ray Sullivan</div><br>
<a href="#">Интересная ссылка</a>
</div><img src="http://45.media.tumblr.com/6f2ec7afeb1aa66132ae57050c272c79/tumblr_nwa9trk85q1rulh0co2_250.gif"">
</div></div>

<div style="float: right; width:250px;"><div class="poster">
<div class="descr">
<div id="mainname1">Ray Sullivan</div><br>
<a href="#">Интересная ссылка</a>
</div><img src="http://45.media.tumblr.com/6f2ec7afeb1aa66132ae57050c272c79/tumblr_nwa9trk85q1rulh0co2_250.gif"">
</div></div>
</div></center></body>

<!--HTML-->
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<style>
#description {
background: #efeeec;
background-image: url(http://img01.deviantart.net/5e6e/i/2010/201/8/a/rice_paper_texture_by_maplerose_stock.jpg);
width: 500px;
height: 320px;
border: dashed 1px #000000;
position: relative;
top: 20px;
}

#description1 {
background: #efeeec;
background-image: url(http://img01.deviantart.net/5e6e/i/2010/201/8/a/rice_paper_texture_by_maplerose_stock.jpg);
width: 520px;
height: 420px;
position: relative;
}

#names_1 {
font-family: 'Waiting for the Sunrise', cursive;
color: #fff;
z-index: 2;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
font-size: 45px;
text-align: center;
line-height: 30px;
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
top: -15px;
position: relative;
}

#rules {
color: #000000;
font-family: 'Playfair Display', serif;
font-size: 20px;
}

#rules1 {
color: #000000;
font-family: 'Playfair Display', serif;
font-size: 10px;
text-align: justify;
margin: 15px;
vertical-align: middle;
}

</style>

<center>

<img src=http://67.media.tumblr.com/6c3e9d16c520d01f7bcf6b2007269628/tumblr_njrg1wQW7t1rj4v9oo7_r1_250.gif /><img src=http://funkyimg.com/i/2cmYH.gif />

<div id="description1"><div id="names_1">Ezra Harvey, Alma Fransson,<br> Tara King & Eric Barton</div>
<div id="description"><div id="rules"><center><b>ПРАВИЛА ИГРЫ</b><br></center></div>
<div id="rules1">1. В игре могут участвовать от трех игроков. Чем больше людей, тем больше времени займет ваша игра.<br> 
2. Не выбирать одинаковое задание два раза подряд.<br>
3. Решите, что вы будете и не будете делать, чтобы это не обсуждать в процессе игры.<br>
4. Если по ходу игры вы не хотите задавать свои вопросы, вы можете попросить других участников помочь вам с вопросом. Вы можете сотрудничать с другими игроками, если не можете придумать вопрос или действие, однако спросите у них разрешение.<br>
5. Если вы собираетесь играть по порядку, сделайте это следующим образом: первый игрок будет задавать вопрос человеку, сидящему от него слева. Или же выберите человека, который будет задавать первый вопрос (первый игрок), он будет первым крутить бутылочку. На кого укажет бутылочка (второй игрок), тот и должен будет ответить на вопрос или выполнить действие.<br>
6. Следующим игроком будет человек, который только что ответил на вопрос или выполнил задание. Этот игрок должен задать вопрос соседнему игроку или раскрутить бутылочку, чтобы определить следующего игрока. Продолжайте вести игру по этому принципу, начиная каждый раз с вопроса.<br>
7. Не делайте ничего противозаконного или угрожающего здоровью. Если кто-то не хочет выполнять действие, все игроки загадывают ему свои желания, а он должен выбрать, какое будет выполнять. Подумайте хорошо, стоит ли выбирать другое действие, так как оно может оказаться еще хуже.</div>
</div></div>

<div><center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="520" height="10">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#000000" />
    <param name="FlashVars" value="mp3=http://my-files.ru/Save/zj8rg0/m.i.a._-_paper_planes_ost_farcry_3_(zaycev.net).mp3" />
</object></center></div>
<img src=http://funkyimg.com/i/2cmXC.gif /><img src=http://funkyimg.com/i/2cmXD.gif />



</center>