PersonalWebsite/css/experience.css

131 lines
2.3 KiB
CSS
Raw Normal View History

/*!
* 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
*/
2020-03-19 21:01:26 +00:00
#section3 {
background-color: #53bf65;
2020-03-18 14:18:32 +00:00
}
2020-03-19 21:01:26 +00:00
.content > div {
display: none;
padding: 20px 25px 5px;
}
2020-03-18 14:18:32 +00:00
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 {
display: block;
}
2020-03-19 21:01:26 +00:00
.tab {
2020-03-18 14:18:32 +00:00
display: block;
float: left;
clear: left;
2020-03-19 21:01:26 +00:00
margin: 0px;
width: 14%;
left: 0;
2020-03-18 14:18:32 +00:00
overflow: hidden;
2020-03-19 21:01:26 +00:00
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;
2020-03-19 21:01:26 +00:00
}
.ratiobtn:checked + .tab {
border-left-color: aqua;
transition: border-left-color 500ms;
2020-03-18 14:18:32 +00:00
}
2020-03-19 21:01:26 +00:00
.content {
2020-03-18 14:18:32 +00:00
position: relative;
float: left;
width: 80%;
2020-03-19 21:01:26 +00:00
top: -200px;
height: 260px;
background-color: #357840;
color: white;
border-radius: 5mm;
2020-03-18 14:18:32 +00:00
}
2020-03-20 14:28:22 +00:00
2020-03-19 21:01:26 +00:00
.ratiobtn {
display: none;
2020-03-18 14:18:32 +00:00
}
2020-03-19 21:01:26 +00:00
#experiencecontentcontainer {
margin-top: 100px;
}
2020-03-20 14:28:22 +00:00
.experiencetitle {
2020-03-19 21:01:26 +00:00
font-size: x-large;
}
2020-03-20 14:28:22 +00:00
.companyname {
2020-03-19 21:01:26 +00:00
color: aqua;
2020-03-18 14:18:32 +00:00
}
2020-03-18 15:02:43 +00:00
2020-03-20 14:28:22 +00:00
.experienceworktext {
2020-03-19 21:01:26 +00:00
margin-top: 5mm;
font-size: large;
2020-03-18 15:02:43 +00:00
}
/* Screen smaller than 600px -- general small width screens */
@media screen and (max-width: 1200px) {
#section3 {
height: 100%;
2020-03-20 17:08:15 +00:00
min-height: 700px;
}
2020-03-20 15:41:20 +00:00
.tab {
display: inline;
2020-03-20 15:41:20 +00:00
width: auto;
/*float: left;*/
2020-03-20 15:41:20 +00:00
margin: 2px;
border: 0.5mm solid hsla(0, 100%, 50%, 0);
padding: 2px 2px 2px 0;
clear: none;
margin-bottom: 20px;
}
2020-03-20 15:41:20 +00:00
#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;
2020-03-20 15:41:20 +00:00
background-color: #146d23;
transition: border-left-color 500ms;
}
}