PersonalWebsite/css/experience.css
2020-03-20 18:08:15 +01:00

131 lines
2.3 KiB
CSS

/*!
* experience.css - https://heili.eu
* Licensed under the MIT license - http://opensource.org/licenses/MIT
* E-mail: lukas.heiligenbrunner@gmail.com
* Copyright (c) 2020 Lukas Heiligenbrunner
*/
#section3 {
background-color: #53bf65;
}
.content > div {
display: none;
padding: 20px 25px 5px;
}
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 {
display: block;
}
.tab {
display: block;
float: left;
clear: left;
margin: 0px;
width: 14%;
left: 0;
overflow: hidden;
margin-right: 6mm;
border: 6mm solid hsla(0, 100%, 50%, 0);
padding-left: 2mm;
border-left-color: #357840;
transition: border-left-color 500ms;
border-bottom-right-radius: 5mm;
border-top-right-radius: 5mm;
}
.tab:hover {
color: aqua;
background-color: #357840;
transition: background-color 500ms;
cursor: pointer;
}
.ratiobtn:checked + .tab {
border-left-color: aqua;
transition: border-left-color 500ms;
}
.content {
position: relative;
float: left;
width: 80%;
top: -200px;
height: 260px;
background-color: #357840;
color: white;
border-radius: 5mm;
}
.ratiobtn {
display: none;
}
#experiencecontentcontainer {
margin-top: 100px;
}
.experiencetitle {
font-size: x-large;
}
.companyname {
color: aqua;
}
.experienceworktext {
margin-top: 5mm;
font-size: large;
}
/* Screen smaller than 600px -- general small width screens */
@media screen and (max-width: 1200px) {
#section3 {
height: 100%;
min-height: 700px;
}
.tab {
display: inline;
width: auto;
/*float: left;*/
margin: 2px;
border: 0.5mm solid hsla(0, 100%, 50%, 0);
padding: 2px 2px 2px 0;
clear: none;
margin-bottom: 20px;
}
#tab1 + .tab {
margin-left: 15px;
}
#tab4 + .tab {
float: none;
display: block;
}
.content {
position: static;
display: block;
float: none;
width: auto;
height: 350px;
}
.ratiobtn:checked + .tab {
color: aqua;
background-color: #146d23;
transition: border-left-color 500ms;
}
}