<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.your-income-payslip {
width: 100%;
background-color: #eeeeee;
padding: 40px;
}
.your-income-payslip ul{ list-style-type: none;}
.your-income-payslip ul li{
display: inline-block;
padding: 5px 15px;
transition:all ease 0.4s;
cursor: pointer;
}
.your-income-payslip ul li:nth-child(1){ border-left: 5px solid #12ba8d; box-shadow: inset 0 0 0 0 #12ba8d;}
.your-income-payslip ul li:nth-child(1):hover{ box-shadow: inset 200px 0 0 0 #12ba8d; color: #fff;}
.your-income-payslip ul li:nth-child(2){ border-left: 5px solid #f5ac0f; box-shadow: inset 0 0 0 0 #f5ac0f;}
.your-income-payslip ul li:nth-child(2):hover{ box-shadow: inset 200px 0 0 0 #f5ac0f; color: #fff;}
.your-income-payslip ul li:nth-child(3){ border-left: 5px solid #f86679; box-shadow: inset 0 0 0 0 #f86679;}
.your-income-payslip ul li:nth-child(3):hover{ box-shadow: inset 200px 0 0 0 #f86679; color: #fff;}
.your-income-payslip ul li:nth-child(4){ border-left: 5px solid #00b0d9; box-shadow: inset 0 0 0 0 #00b0d9;}
.your-income-payslip ul li:nth-child(4):hover{ box-shadow: inset 200px 0 0 0 #00b0d9; color: #fff;}
.your-income-payslip ul li:nth-child(5){ border-left: 5px solid #d95700; box-shadow: inset 0 0 0 0 #d95700;}
.your-income-payslip ul li:nth-child(5):hover{ box-shadow: inset 200px 0 0 0 #d95700; color: #fff;}
.your-income-payslip-image {position: relative;}
.your-income-payslip-image-main { position: relative; width: 100%;}
.your-income-payslip-image-body img:nth-child(1) { position: absolute; top:57%; right:2.5%; display: none;}
.your-income-payslip-image-body img:nth-child(2) { position: absolute; bottom:3.2%; right:2%; display: none; }
.your-income-payslip-image-body img:nth-child(3) { position: absolute; top:61%; right:2.5%; display: none;}
.your-income-payslip-image-body img:nth-child(4) { position: absolute; top:26%; right:2%; display: none;}
.your-income-payslip-image-body img:nth-child(5) { position: absolute; bottom:5%; right:33%; display: none;}
.your-income-payslip2 {
width: 100%;
background-color: #eeeeee;
padding: 40px;
}
.your-income-payslip2 ul{ list-style-type: none;}
.your-income-payslip2 ul li{
display: inline-block;
padding: 5px 15px;
transition:all ease 0.4s;
cursor: pointer;
}
.your-income-payslip2 ul li:nth-child(1){ border-left: 5px solid #12ba8d; box-shadow: inset 0 0 0 0 #12ba8d;}
.your-income-payslip2 ul li:nth-child(1):hover{ box-shadow: inset 260px 0 0 0 #12ba8d; color: #fff;}
.your-income-payslip2 ul li:nth-child(2){ border-left: 5px solid #f86679; box-shadow: inset 0 0 0 0 #f86679;}
.your-income-payslip2 ul li:nth-child(2):hover{ box-shadow: inset 200px 0 0 0 #f86679; color: #fff;}
.your-income-payslip2-image {position: relative;}
.your-income-payslip2-image-main { position: relative; width: 100%;}
.your-income-payslip2-image-body img:nth-child(1) { position: absolute; top:5%; right:2%; display:none;}
.your-income-payslip2-image-body img:nth-child(2) { position: absolute; bottom:6%; left:3%; display:none;}
.budgeting2-acord { margin:0 auto; width:100%; }
.budgeting2-acord .tab { position:relative; width:100%; overflow:hidden; }
.budgeting2-acord input { position:absolute; opacity:0; z-index:-1; }
.budgeting2-acord label { position:relative; display:block; background:#fff; font-weight:bold; line-height:2; cursor:pointer; padding:7px 15px; color:#171717;
font-size:18px; transition:0.4s all; margin:7px 0px; border-bottom:1px solid #eee;}
.budgeting2-acord label:hover {background:#fafafa; border-radius:10px; border-bottom:1px solid #fff; }
.budgeting2-acord .tab-cont { max-height:0px; overflow:hidden; background:#f7f7f7; transition:all 1s; padding:0px 20px; border-radius:10px; }
.budgeting2-acord .tab-cont .tab-cont1 {padding:20px 0px;}
.budgeting2-acord input:checked ~ .tab-cont { max-height:10000px; transition:all 3s; }
.budgeting2-acord label::after { position:absolute; right:15px; top:-22px; display:block; width:15px; height:15px; line-height:3; text-align:center; font-size:30px; color:#9a9a9a; }
.budgeting2-acord input[type=checkbox] + label::after { content:"+"; }
.budgeting2-acord input[type=checkbox]:checked + label::after { content:"-"; }
.budgeting2-acord input:checked ~ label:hover {background:none;}
.budgeting2-acord input:checked ~ label {border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="budgeting2-acord">
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs" checked>
<label for="tab-one" class="signika-font">1. Continued business justification</label>
<div class="tab-cont">
<div class="tab-cont1">
<div class="budgeting2_new">
<div class="your-income-payslip">
<ul>
<li>Gross earnings </li>
<li>Net earnings </li>
<li>Income tax paid </li>
<li>National Insurance paid </li>
<li>How you were paid </li>
</ul>
<div class="your-income-payslip-image">
<div class="your-income-payslip-image-main">
<img src="content\lessons\53\images\payslip.jpg">
</div>
<div class="your-income-payslip-image-body">
<img src="content\lessons\53\images\payslip1-1.png">
<img src="content\lessons\53\images\payslip1-3.png">
<img src="content\lessons\53\images\payslip1-2.png">
<img src="content\lessons\53\images\payslip1-4.png">
<img src="content\lessons\53\images\payslip1-5.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two" class="signika-font">1. Continued business justification</label>
<div class="tab-cont">
<div class="tab-cont1">
<div class="budgeting2_new">
<div class="your-income-payslip2">
<ul>
<li>Your National Insurance number </li>
<li>Your tax code </li>
</ul>
<div class="your-income-payslip2-image">
<div class="your-income-payslip2-image-main">
<img src="content\lessons\53\images\payslip.jpg">
</div>
<div class="your-income-payslip2-image-body">
<img src="content\lessons\53\images\payslip1-6.png">
<img src="content\lessons\53\images\payslip1-7.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.