Трубы.Соревнование.

Поделиться12019-02-02 18:58:52

Администратор
Автор: Onychomys
⚜🏆⚜:
Позитив: [+85771/-1]
Сообщений: 17393

Свернутый текст

[html]

<div class="accordion">

<div class="box a1"> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/685882.gif" alt= "Фото" width="auto" height="30" /> <br><img src="https://forumupload.ru/uploads/0019/3c/8c/2/781281.gif" alt= "Фото" width="auto" height="135" />
<div class="image_1">
<div class="text"> <a title="Переход в профиль" href="https://domkyznechik.ru/viewtopic.php?pid=444022#p444022" target="_blank">Поздравляем</a>
<center><a title="Переход в профиль" href="https://domkyznechik.ru/profile.php?id=12" target="_blank"> Эля 🏆 30626</a></center>
</div>
</div>
</div>

<div class="box a2"> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/83374.gif" alt= "Фото" width="auto" height="30" /> <br><img src="https://forumupload.ru/uploads/0019/3c/8c/2/781281.gif" alt= "Фото" width="auto" height="100" />
<div class="image_2">
<div class="text">

<p>

1. Заявляемся любым словом : кручу, участвую, буду и т.д.<br>
2. Цель-за одну игру,набрать как можно больше очков.<br> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/235625.png" alt= "Аватар" width="100%" height="50" /><br> Внимание, нужны очки одной игры, за один жетон в трубах. <br>

</p>
</div>
</div>
</div>

<div class="box a3"> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/823861.gif" alt= "Фото" width="auto" height="30" /> <br><img src="https://forumupload.ru/uploads/0019/3c/8c/2/781281.gif" alt= "Фото" width="auto" height="75" />
<div class="image_3">
<div class="text">

<p>
По окончанию соревнования , требуется выложить скрин.<br> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/235625.png" alt= "Аватар" width="100%" height="50" /><br>
Выложить скрин с итогом можно до 10 утра следующего дня после окончания мини игр. <br> Присоединиться разрешается в любой момент, хоть за 10 минут до окончания соревнования .<br>
</p>
</div>
</div>
</div>

<div class="box a4"> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/66840.gif" alt= "Фото" width="auto" height="30" /> <br><img src="https://forumupload.ru/uploads/0019/3c/8c/2/781281.gif" alt= "Фото" width="auto" height="100" />
<div class="image_4">
<div class="text">

<p> <center><a title="Переход в тему" href="https://domkyznechik.ru/viewtopic.php?id=125&p=12#p393780" target="_blank"> Рекорд принадлежит - @Sashulya 32932 </a> </center> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/122611.jpg" alt= "Аватар" width="200" height="auto" /><br>
<img src="https://forumupload.ru/uploads/0019/3c/8c/2/235625.png" alt= "Аватар" width="100%" height="50" /><br>

</p>
</div>
</div>
</div>

<div class="box a5"> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/313192.gif" alt= "Фото" width="auto" height="30" /> <br><img src="https://forumupload.ru/uploads/0019/3c/8c/2/781281.gif" alt= "Фото" width="auto" height="180" />
<div class="image_5">
<div class="text">

<p>
За участие полагаются подарки 🎁, а победителю в десять раз больше 🎁🎁🎁х10 и Великая Шишка<br> <img src="https://forumupload.ru/uploads/0019/3c/8c/2/235625.png" alt= "Аватар" width="100%" height="50" /><br>
УДАЧИ<br>
</p>
</div>
</div>
</div>

</div>
<style>

@import url("https://fonts.googleapis.com/css?family=Fjalla+One");
@import url("https://fonts.googleapis.com/css?family=Exo+2");
html {
height: 100vh;
}
body {
padding: 0;
margin: 0;
font-family: "Fjalla One", sans-serif;

}
.accordion {
max-width: 990px;
background: rgba(0, 0, 0, 0.1);
height: 300px;
margin: 20px auto;
display: flex;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
flex-direction: row;
cursor: pointer;
margin-bottom: 100px;
}
.box {
position: relative;
height: 100%;
flex: 1;
background-position: left;
background-size: cover;
transition: 0.7s;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
}
.box:hover {
flex: 7;
height: 400px;
}
.a1 {
background-image: url("https://forumupload.ru/uploads/0019/3c/8c/3/855629.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
color: #fff;
font-size: 1.2rem;
transition: all .3s cubic-bezier(.8,.16,.42,.89);

}
.a2 {
background-image: url("https://forumupload.ru/uploads/0019/3c/8c/2/732979.gif?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
color: #fff;
font-size: 1.2rem;

}
.a3 {
background-image: url("https://forumupload.ru/uploads/0019/3c/8c/2/924096.gif?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
color: #fff;
font-size: 1.2rem;
}
.a4 {
background-image: url("https://forumupload.ru/uploads/0019/3c/8c/2/803356.gif?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
color: #fff;
font-size: 1.2rem;
}
.a5 {
background-image: url("https://forumupload.ru/uploads/0019/3c/8c/2/60271.gif?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
color: #fff;
font-size: 1.2rem;

}
p {
font-weight: normal;
font-family: "Exo 2", sans-serif;
}
.text {
position: absolute;
bottom: 0;
opacity: 0;
padding: 10px;
}
.box:hover .text {
opacity: 1;
}
h1 {
width: 250px;
text-align: center;
margin: 100px auto 20px auto;
}
@media screen and (max-width: 800px) {
body {
margin: 0;
}
.accordion {
flex-direction: column;
height: 700px;
box-shadow: none;
}
.box {
box-shadow: none;
}
.box:hover {
flex: 7;
}
}