Код:
<!--HTML-->
<div class="bankW">
<div class="bank_title">istore</div>
<center><div class="slid"><input type="radio" name="newq " checked="checked" id="c1"><label for="c1" id="bank_but"><span class="lnr lnr-smartphone"></span></label><input type="radio" name="newq " id="c2"><label for="c2" id="bank_but"><span class="lnr lnr-diamond"></span></label><input type="radio" name="newq " id="c3"><label for="c3" id="bank_but"><span class="lnr lnr-gift"></span></label><input type="radio" name="newq " id="c4"><label for="c4" id="bank_but"><span class="lnr lnr-download"></span></label><input type="radio" name="newq " id="c5"><label for="c5" id="bank_but"><span class="lnr lnr-phone-handset"></span></label><input type="radio" name="newq " id="c6"><label for="c6" id="bank_but"><span class="lnr lnr-exit-up"></span></label>
<br><br>
<div class="banko1">
<div class="bank-item"><div class="bank-icon"><span class="lnr lnr-plus-circle"></span></div>
<div class="bank-bloc">
<div class="bank_name">заработать</div>
<p>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
</div>
</div>
<div class="bank-item"><div class="bank-icon"><span class="lnr lnr-circle-minus"></span></div>
<div class="bank-bloc">
<div class="bank_name">потратить</div>
<p>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
<b>100$</b> »» Таким образом начало повседневной работы по формированию позиции.<br>
<b>100$</b> »» В формировании дальнейших направлений развития.<br>
<b>100$</b> »» Информационно-пропагандистское обеспечение нашей деятельности требуют <br>
</p>
</div>
</div>
</div>
<div class="banko1">
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Apps-accessories-text-editor-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» короткое описание того, что нужно сделать, чтобы получить эту награду. поле тут если что растягивается, поэтому пишите сколько угодно текста.
</p>
</div>
</div>
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Apps-addressbook-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» короткое описание того, что нужно сделать, чтобы получить эту награду. поле тут если что растягивается, поэтому пишите сколько угодно текста. Задача организации, в особенности же консультация с широким активом играет важную роль в формировании модели развития.
</p>
</div>
</div>
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Actions-mail-outbox-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» С другой стороны новая модель организационной деятельности играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.
</p>
</div>
</div>
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Apps-emerillon-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» Их разнообразный и богатый опыт реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития.
</p>
</div>
</div>
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Apps-ubuntu-software-centerA-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» С другой стороны новая модель организационной деятельности играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.
</p>
</div>
</div>
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Places-folder-grey-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» С другой стороны новая модель организационной деятельности играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.
</p>
</div>
</div>
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Apps-accessories-text-editor-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» короткое описание того, что нужно сделать, чтобы получить эту награду. поле тут если что растягивается, поэтому пишите сколько угодно текста.
</p>
</div>
</div>
<div class="awardo-item"><div class="awardo-icon"><img src="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/128/Apps-addressbook-icon.png"></div>
<div class="awardo-bloc">
<p>
<b>название награды</b> »» короткое описание того, что нужно сделать, чтобы получить эту награду. поле тут если что растягивается, поэтому пишите сколько угодно текста. Задача организации, в особенности же консультация с широким активом играет важную роль в формировании модели развития.
</p>
</div>
</div>
</div>
<div class="banko01">
<div class="gifto-item"><div class="gifto-icon"><span class="lnr lnr-sync"></span></div>
<div class="gifto-bloc">
<p>
<table layout=fixed width=100%>
<tr>
<td><div id="b_gift"><img src="http://s9.uploads.ru/nDiOC.png"><br>
<b>#1</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/H6uLJxp.png"><br>
<b>#2</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/Xe3fnlE.png"><br>
<b>#3</b></div></td>
<td><div id="b_gift"><img src="http://sh.uploads.ru/1NzcD.png"><br>
<b>#4</b></div></td>
</tr>
<tr>
<td><div id="b_gift"><img src="http://i.imgur.com/8pXIHxh.png"><br>
<b>#5</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/qzbxuZE.png"><br>
<b>#6</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/sE3wprJ.png"><br>
<b>#7</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/aIQDMLk.png"><br>
<b>#8</b></div></td>
</tr>
<tr>
<td><div id="b_gift"><img src="http://sd.uploads.ru/cdEMu.png"><br>
<b>#9</b></div></td>
<td><div id="b_gift"><img src="http://s8.uploads.ru/nesh1.png"><br>
<b>#10</b></div></td>
<td><div id="b_gift"><img src="http://s0.uploads.ru/nAJGp.png"><br>
<b>#11</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/BdXrV3A.png"><br>
<b>#12</b></div></td>
</tr>
</table>
</p>
</div>
</div>
<div class="gifto-item"><div class="gifto-icon"><span class="lnr lnr-music-note"></span></div>
<div class="gifto-bloc">
<p>
<table layout=fixed width=100%>
<tr>
<td><div id="b_gift"><img src="http://s9.uploads.ru/nDiOC.png"><br>
<b>#1</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/H6uLJxp.png"><br>
<b>#2</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/Xe3fnlE.png"><br>
<b>#3</b></div></td>
<td><div id="b_gift"><img src="http://sh.uploads.ru/1NzcD.png"><br>
<b>#4</b></div></td>
</tr>
<tr>
<td><div id="b_gift"><img src="http://i.imgur.com/8pXIHxh.png"><br>
<b>#5</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/qzbxuZE.png"><br>
<b>#6</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/sE3wprJ.png"><br>
<b>#7</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/aIQDMLk.png"><br>
<b>#8</b></div></td>
</tr>
<tr>
<td><div id="b_gift"><img src="http://sd.uploads.ru/cdEMu.png"><br>
<b>#9</b></div></td>
<td><div id="b_gift"><img src="http://s8.uploads.ru/nesh1.png"><br>
<b>#10</b></div></td>
<td><div id="b_gift"><img src="http://s0.uploads.ru/nAJGp.png"><br>
<b>#11</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/BdXrV3A.png"><br>
<b>#12</b></div></td>
</tr>
</table>
</p>
</div>
</div>
<div class="gifto-item"><div class="gifto-icon"><span class="lnr lnr-star"></span></div>
<div class="gifto-bloc">
<p>
<table layout=fixed width=100%>
<tr>
<td><div id="b_gift"><img src="http://s9.uploads.ru/nDiOC.png"><br>
<b>#1</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/H6uLJxp.png"><br>
<b>#2</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/Xe3fnlE.png"><br>
<b>#3</b></div></td>
<td><div id="b_gift"><img src="http://sh.uploads.ru/1NzcD.png"><br>
<b>#4</b></div></td>
</tr>
<tr>
<td><div id="b_gift"><img src="http://i.imgur.com/8pXIHxh.png"><br>
<b>#5</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/qzbxuZE.png"><br>
<b>#6</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/sE3wprJ.png"><br>
<b>#7</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/aIQDMLk.png"><br>
<b>#8</b></div></td>
</tr>
<tr>
<td><div id="b_gift"><img src="http://sd.uploads.ru/cdEMu.png"><br>
<b>#9</b></div></td>
<td><div id="b_gift"><img src="http://s8.uploads.ru/nesh1.png"><br>
<b>#10</b></div></td>
<td><div id="b_gift"><img src="http://s0.uploads.ru/nAJGp.png"><br>
<b>#11</b></div></td>
<td><div id="b_gift"><img src="http://i.imgur.com/BdXrV3A.png"><br>
<b>#12</b></div></td>
</tr>
</table>
</p>
</div>
</div>
</div>
<div class="banko1">
4</div>
<div class="banko1">
5</div>
<div class="banko1">
6</div>
</div></center></div>
<style>
.bankW {
width: 565px;
background-image: url(https://forumstatic.ru/files/0012/80/31/92056.png);
margin: auto;
height: 681px;
}
.bank_title {
font-family: bebasneueregular;
font-weight: normal;
color: white;
width: 276px;
text-align: center;
margin-top: 38px!important;
font-size: 16px;
letter-spacing: 1px;
text-shadow: 0 0 2px #fdfdfd;
margin-left: 47px;
position: absolute;
}
#bank_but {
display: inline-block;
background: #804758;
text-align: center;
width: 19px;
font-family: bebasneueregular!important;
font-size: 15px;
color: white;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #7f3b50;
cursor: pointer;
padding: 6px 3px 4px 3px;
margin-left: -24px!important;
background-color: #945266;
border: 1px dotted #a56477;
box-shadow: inset 0 0 8px #00000085;
}
#bank_but:hover { border: 1px dotted #6d7684!important;
background: #3d4d63!important;
-webkit-transition: .6s all;
-moz-transition: .6s all;
-ms-transition: .6s all;
-o-transition: .6s all;
transition: .6s all;
}
.slid label {
cursor: pointer;
margin-left: 26px;
margin-right: 33px;}
.slid > div, .slid > input {
display: none;
}
.slid {
width: 500px;
text-align: right;
margin-left: 70px !important;
margin-top: 31px!important;
position: absolute;
}
.slid input[type="radio"]:checked + label {}.slid > input:nth-of-type(1):checked ~ div:nth-of-type(1),.slid > input:nth-of-type(2):checked ~ div:nth-of-type(2),.slid > input:nth-of-type(3):checked ~ div:nth-of-type(3),.slid > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.slid > input:nth-of-type(5):checked ~ div:nth-of-type(5), .slid > input:nth-of-type(6):checked ~ div:nth-of-type(6) {display: block; text-align: justify}
.banko1 {
position: absolute;
width: 509px;
height: 542px;
overflow: auto;
margin-top: 13px;
margin-left: -45px;
padding-right: 8px;
}
.banko01 {
position: absolute;
width: 509px;
height: 538px;
overflow: auto;
margin-top: 13px;
margin-left: -45px;
padding-right: 8px;
}
.bank {
width: 600px;
border: 1px solid #e0e0e0;
font-family: 'PT Sans', sans-serif;
padding: 10px;
background: #fcfcfc;
position: bankive;
margin: auto;
}
.bank h1 {
margin: 0 0 30px;
font-family: 'Playfair Display', serif;
border: 1px solid #000;
font-family: 'Montserrat', sans-serif;
font-size: 25px;
text-transform: uppercase;
text-align: center;
}
.bank-item {
display: flex;
margin-bottom: 11px;
background-color: #ffffff54;
border: 1px solid white;
padding: 9px;
}
.bank-item:nth-child(even) {
flex-direction: row-reverse;
}
.bank-icon {
border: 4px solid #ffffff;
margin-right: 20px;
background-image: url(https://forumstatic.ru/files/0012/80/31/99755.png);
box-shadow: inset 0 0 3px white;
color: white;
text-shadow: 1px 0 #0000009e;
font-size: 49px;
padding: 16px;
padding-top: 84px;
}
.bank-item:nth-child(even) .bank-icon {
margin-right: 0px;
margin-left: 20px;
}
.bank-bloc {
display: flex;
flex-direction: column;
height: 238px;
align-self: center;
}
.bank-item:nth-child(even) .bank-bloc {
padding-left: 10px;
border-right: 0;
padding-right: 0;
}
.bank-bloc h2 {
font-family: 'Montserrat', sans-serif;
margin: 0;
font-size: 25px;
text-transform: lowercase;
font-weight: 900;
letter-spacing: -1px;
line-height: 120%;
}
.bank-bloc h3 {
margin: 0 0 10px;
font-size: 9px;
text-transform: uppercase;
font-weight: normal;
line-height: 11px;
color: #536374;
background-color: #f5f5f5;
padding: 2px 4px 2px 4px;
margin-top: 4px;
border: 1px solid white;
box-shadow: 0 0 2px #00000033;
}
.bank-bloc p {
margin: 0;
font-size: 11px;
flex: 1;
overflow: auto;
text-align: left;
padding-right: 6px!important;
line-height: 150%!important;
margin-left: -1px!important;
width: 380px;
color: #617283;
}
.bank-bloc p::-webkit-scrollbar { width: 2px;}
.bank-bloc p::-webkit-scrollbar-track { background-color: #efefef; border: none!important;}
.bank-bloc p::-webkit-scrollbar-thumb { background-color: #ccc; border: none!important;}
.bank-credit {
position: absolute;
bottom: -18px;
left: 0;
}
.bank-credit a {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ccc!important;
text-decoration: none!important;
}
.bank_name {
letter-spacing: 2px;
font-size: 16px;
font-family: bebasneueregular;
color: grey;
}
.awardo-item {
display: flex;
margin-bottom: 2px;
background-color: #ffffff54;
border: 1px solid white;
padding: 9px;
}
.awardo-icon {
border: 4px solid #ffffff;
margin-right: 20px;
background-image: url(https://forumstatic.ru/files/0012/80/31/99755.png);
box-shadow: inset 0 0 3px white;
color: white;
text-shadow: 1px 0 #0000009e;
font-size: 49px;
padding: 10px;
}
.awardo-icon img {width: 40px;}
.awardo-bloc {
display: flex;
flex-direction: column;
align-self: center;
padding-right: 10px;
}
.awardo-bloc h2 {
font-family: 'Montserrat', sans-serif;
margin: 0;
font-size: 25px;
text-transform: lowercase;
font-weight: 900;
letter-spacing: -1px;
line-height: 120%;
}
.awardo-bloc p {
margin: 0;
font-size: 11px;
flex: 1;
overflow: auto;
text-align: left;
padding-right: 6px!important;
line-height: 150%!important;
margin-left: -1px!important;
width: 372px;
color: #617283;
}
.awardo-bloc p::-webkit-scrollbar { width: 2px;}
.awardo-bloc p::-webkit-scrollbar-track { background-color: #efefef; border: none!important;}
.awardo-bloc p::-webkit-scrollbar-thumb { background-color: #ccc; border: none!important;}
.awardo-credit {
position: absolute;
bottom: -18px;
left: 0;
}
.gifto-item {
display: flex;
margin-bottom: 11px;
background-color: #ffffff54;
border: 1px solid white;
padding: 9px;
}
.gifto-icon {
border: 4px solid #ffffff;
margin-right: 20px;
background-image: url(https://forumstatic.ru/files/0012/80/31/74749.png);
box-shadow: inset 0 0 3px white;
color: white;
text-shadow: 1px 0 #0000009e;
font-size: 23px;
padding: 16px;
font-family: bebasneueregular;
font-weight: normal;
padding-top: 130px;
}
.gifto-bloc {
display: flex;
flex-direction: column;
align-self: center;
padding-right: 10px;
}
.gifto-bloc h2 {
font-family: 'Montserrat', sans-serif;
margin: 0;
font-size: 25px;
text-transform: lowercase;
font-weight: 900;
letter-spacing: -1px;
line-height: 120%;
}
.gifto-bloc p {
margin: 0;
font-size: 11px;
flex: 1;
overflow: auto;
text-align: left;
padding-right: 6px!important;
line-height: 150%!important;
margin-left: -1px!important;
width: 365px;
color: #617283;
}
.gifto-bloc p::-webkit-scrollbar { width: 2px;}
.gifto-bloc p::-webkit-scrollbar-track { background-color: #efefef; border: none!important;}
.gifto-bloc p::-webkit-scrollbar-thumb { background-color: #ccc; border: none!important;}
.gifto-credit {
position: absolute;
bottom: -18px;
left: 0;
}
#b_gift {
text-align: center;
padding: 4px 0px 4px 0px;
border: 4px solid #ffffff;
box-shadow: inset 0 0 33px white;
font-size: 10px;
color: #2a3d56;
background-color: #ededed;
font-family: arial;
line-height: 150%;
}
</style>
