Код:
<!--HTML-->
<div class="jobsW">
<div class="jobs_title">биржа труда</div>
<center><div class="slid"><input type="radio" name="newq " checked="checked" id="c1"><label for="c1" id="jobs_but"><span class="lnr lnr-home"></span></label><input type="radio" name="newq " id="c2"><label for="c2" id="jobs_but"><span class="lnr lnr-magic-wand"></span></label><input type="radio" name="newq " id="c3"><label for="c3" id="jobs_but"><span class="lnr lnr-drop"></span></label><input type="radio" name="newq " id="c4"><label for="c4" id="jobs_but"><span class="lnr lnr-alarm"></span></label><input type="radio" name="newq " id="c5"><label for="c5" id="jobs_but"><span class="lnr lnr-neutral"></span></label><input type="radio" name="newq " id="c6"><label for="c6" id="jobs_but"><span class="lnr lnr-hand"></span></label>
<br><br>
<div class="jobso1">
<div class="jobs-item"><div class="jobs-icon"><span class="lnr lnr-magic-wand"></span></div>
<div class="jobs-bloc">
<div class="jobs_name">НАЗВАНИЕ МЕСТА/CФЕРЫ</div>
<h3>
описание что это вообще такое
</h3>
<p>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
</p>
</div>
</div>
<div class="jobs-item"><div class="jobs-icon"><span class="lnr lnr-exit-up"></span></div>
<div class="jobs-bloc">
<div class="jobs_name">НАЗВАНИЕ МЕСТА/CФЕРЫ</div>
<h3>
описание что это вообще такое
</h3>
<p>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
</p>
</div>
</div>
<div class="jobs-item"><div class="jobs-icon"><span class="lnr lnr-warning"></span></div>
<div class="jobs-bloc">
<div class="jobs_name">НАЗВАНИЕ МЕСТА/CФЕРЫ</div>
<h3>
описание что это вообще такое
</h3>
<p>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
</p>
</div>
</div>
<div class="jobs-item"><div class="jobs-icon"><span class="lnr lnr-volume-high"></span></div>
<div class="jobs-bloc">
<div class="jobs_name">НАЗВАНИЕ МЕСТА/CФЕРЫ</div>
<h3>
описание что это вообще такое
</h3>
<p>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
</p>
</div>
</div>
<div class="jobs-item"><div class="jobs-icon"><span class="lnr lnr-question-circle"></span></div>
<div class="jobs-bloc">
<div class="jobs_name">НАЗВАНИЕ МЕСТА/CФЕРЫ</div>
<h3>
описание что это вообще такое
</h3>
<p>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
</p>
</div>
</div>
<div class="jobs-item"><div class="jobs-icon"><span class="lnr lnr-star-half"></span></div>
<div class="jobs-bloc">
<div class="jobs_name">НАЗВАНИЕ МЕСТА/CФЕРЫ</div>
<h3>
описание что это вообще такое
</h3>
<p>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
<b>должность</b> »» <a href="ССЫЛКА НА ПРОФИЛЬ">name surname</a><br>
</p>
</div>
</div>
</div>
<div class="jobso1">
2</div>
<div class="jobso1">
3</div>
<div class="jobso1">
4</div>
<div class="jobso1">
5</div>
<div class="jobso1">
6</div>
</div></center>
</div>
<style>
.jobsW {
width: 565px;
background-image: url(https://i.imgur.com/7dlkzn7.png);
margin: auto;
height: 681px;
}
.jobs_title {
font-family: bebasneueregular;
font-weight: normal;
color: white;
width: 165px;
text-align: center;
top: 38px!important;
position: sticky;
font-size: 16px;
letter-spacing: 1px;
text-shadow: 0 0 2px #fdfdfd;
margin-left: 47px;
}
#jobs_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;
}
#jobs_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: 14px!important;
}
.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}
.jobso1 {
position: absolute;
width: 509px;
height: 542px;
overflow: auto;
margin-top: 13px;
margin-left: -45px;
padding-right: 8px;}
.jobs {
width: 600px;
border: 1px solid #e0e0e0;
font-family: 'PT Sans', sans-serif;
padding: 10px;
background: #fcfcfc;
position: jobsive;
margin: auto;
}
.jobs 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;
}
.jobs-item {
display: flex;
margin-bottom: 11px;
background-color: #ffffff54;
border: 1px solid white;
padding: 9px;
}
.jobs-item:nth-child(even) {
flex-direction: row-reverse;
}
.jobs-icon {
border: 4px solid #ffffff;
margin-right: 20px;
background-image: url(https://i.imgur.com/3t56HEx.png);
box-shadow: inset 0 0 3px white;
color: white;
text-shadow: 1px 0 #0000009e;
font-size: 49px;
padding: 16px;
padding-top: 23px;
}
.jobs-item:nth-child(even) .jobs-icon {
margin-right: 0px;
margin-left: 20px;
}
.jobs-bloc {
display: flex;
flex-direction: column;
height: 100px;
align-self: center;
padding-right: 10px;
}
.jobs-item:nth-child(even) .jobs-bloc {
padding-left: 10px;
border-right: 0;
padding-right: 0;
}
.jobs-bloc h2 {
font-family: 'Montserrat', sans-serif;
margin: 0;
font-size: 25px;
text-transform: lowercase;
font-weight: 900;
letter-spacing: -1px;
line-height: 120%;
}
.jobs-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;
}
.jobs-bloc p {
margin: 0;
font-size: 10px;
flex: 1;
overflow: auto;
text-align: justify;
padding-right: 6px!important;
line-height: 130%!important;
margin-left: -1px!important;
width: 355px;
color: #617283;
}
.jobs-bloc p::-webkit-scrollbar { width: 2px;}
.jobs-bloc p::-webkit-scrollbar-track { background-color: #efefef; border: none!important;}
.jobs-bloc p::-webkit-scrollbar-thumb { background-color: #ccc; border: none!important;}
.jobs-credit {
position: absolute;
bottom: -18px;
left: 0;
}
.jobs-credit a {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ccc!important;
text-decoration: none!important;
}
.jobs_name {
letter-spacing: 2px;
font-size: 16px;
font-family: bebasneueregular;
color: grey;
}
</style>
