Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- font-family: 'Teko';
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- height: 100%;
- padding: 0;
- margin: 0;
- font-size: 2em;
- box-sizing: border-box;
- background: #833ab4;
- background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
- background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
- color: #fff;
- }
- html {
- box-sizing: border-box;
- height: 100%;
- }
- small {
- opacity: .4;
- }
- h1 {
- color: #fff;
- text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
- text-align: center;
- margin-bottom: 0;
- font-size: 2em;
- line-height: 1.3em;
- font-weight: bold;
- margin-top: 0.67em;
- }
- .container {
- margin-bottom: 20px;
- margin-top: 10px;
- min-width: 320px;
- max-width: 500px;
- }
- p {
- margin: 0 0 20px;
- line-height: 1.5;
- font-weight: 300;
- }
- .content {
- background: #fff;
- color: #373737;
- backface-visibility: hidden;
- overflow: hidden;
- }
- .content > div {
- display: none;
- padding: 20px 25px 5px;
- }
- input {
- display: none;
- }
- label {
- display: inline-block;
- padding: 15px 25px;
- font-weight: 600;
- text-align: center;
- border-bottom: 1px solid transparent;
- transition: all .3s ease-out 0.1s;
- }
- label:hover {
- color: #fff;
- cursor: pointer;
- }
- input:checked + label {
- background: #ffffff;
- color: #fd7034;
- border-bottom: 1px solid;
- }
- #tab-1:checked ~ .content #content-1,
- #tab-2:checked ~ .content #content-2,
- #tab-3:checked ~ .content #content-3,
- #tab-4:checked ~ .content #content-4 {
- display: block;
- animation-name: inUp;
- animation-timing-function: ease-in-out;
- animation-duration: .6s;
- }
- @media screen and (max-width: 400px) { label {padding: 15px 10px;} }
- @keyframes inUp {
- 0%{
- opacity: 0;
- transform: translateY(100px)
- }
- 90%{
- transform: translateY(-10px)
- }
- 100% {
- opacity: 1;
- transform: translateY(0)
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment