<div class="container">
<div class="radios">
<div>
<input id="bio1" name=button type="radio" class="open" checked>
<label for="bio" class="overlay">
<div class="circle"></div>
<span class=text>Bio</span>
</label>
<div id=biopanel class="panel">
<span class=inner-text>Saumitra Bose</span>
</div>
</input>
</div>
<div>
<input id="contact1" name=button type="radio" class=open>
<label for="contact">
<div class=circle> </div>
<span class=text>Contact</span>
</label>
<div id=contactpanel class="panel"><span class=inner-text>Don't call me</span></div>
</input>
</div>
<div>
<input id="work1" name=button type="radio" class=open>
<label for="work1">
<div class=circle> </div>
<span class=text>Work</span>
</label>
<div id=workpanel class="panel">
<span class=inner-text>Nothing to see here</span> </div>
</input>
</div>
</div>
</div>
<div class=bg></div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
background: linear-gradient(90deg, #fff 50%, #314547 50.1%);
}
.bg {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: linear-gradient(90deg, #fff 50%, #314547 50.1%);
z-index: 1;
display: block;
}
.buttons {
display: block;
position: absolute;
margin: 0 auto;
}
.container {
display: block;
position: absolute;
left: 8%;
top: 50%;
-moz-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
height: 80%;
width: 70%;
max-height: 250px;
z-index: 5;
background-color: none;
}
.radios {
position: absolute;
display: block;
height: 100%;
width: 100%;
margin-top: 0 auto;
background-color: none;
}
input[type="radio"] {
opacity: 0;
cursor: pointer;
display: block;
width: 30px;
height: 30px;
position: absolute;
outline: none;
left: 0;
z-index: 7;
}
input[type="radio"]:checked + label .circle:before {
background: #385053;
}
input[type="radio"]:checked:hover + label .circle:before {
background: #00b285;
}
input[type="radio"]:checked ~ .panel {
background: #385053;
width: 100%;
left: 20%;
margin-left: 20px;
}
@media (max-width: 640px) {
input[type="radio"]:checked ~ .panel {
left: 0%;
}
}
input[type="radio"]:checked ~ .panel .inner-text {
width: 80%;
}
input[type="radio"]:hover + label .circle {
border-color: #00b285;
}
input[type="radio"] ~ .panel {
float: left;
clear: both;
display: block;
position: absolute;
left: 500%;
height: 100%;
width: 0%;
overflow: hidden;
z-index: 9;
background: transparent;
}
@media (max-width: 640px) {
input[type="radio"] ~ .panel {
top: 58%;
}
}
input[type="radio"] ~ .panel .inner-text {
float: left;
color: white;
display: block;
background: #385053;
width: 0%;
z-index: 10;
overflow: hidden;
margin-left: 2%;
margin-top: 2%;
font-family: 'Open Sans';
font-size: 1em;
}
input[type="radio"] + label {
float: left;
clear: both;
position: absolute;
left: 0;
background-color: white;
}
input[type="radio"] + label .text {
position: absolute;
display: block;
left: 50px;
top: 5px;
float: left;
color: #314547;
font-family: 'Open Sans';
font-size: 25px;
}
.circle {
transition: border-color 0.25s linear;
-webkit-transition: border-color 0.25s linear;
-moz-transition: border-color 0.25s linear;
-o-transition: border-color 0.25s linear;
-ms--transition: border-color 0.25s linear;
content: '';
position: absolute;
left: 0;
height: 30px;
width: 30px;
display: block;
background-color: white;
border-radius: 50%;
border-color: #314547;
border-style: solid;
border-width: 5px;
}
.circle:before {
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
-ms--transition: background 0.25s linear;
display: block;
position: relative;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 20px;
width: 20px;
content: '';
background: transparent;
border-radius: 50%;
}
#bio1 {
top: 0px;
}
#bio1 + label {
top: 0px;
}
#contact1 {
top: 50px;
}
#contact1 + label {
top: 50px;
}
#work1 {
top: 100px;
}
#work1 + label {
top: 100px;
}