1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- body{
- padding: 0 2%;
- }
- header{
- .contact{
- z-index: 9999;
- position: fixed;
- top: 20px;
- right: 2%;
- transform: scale(1);
- transition: transform 0.5s ease;
- cursor: pointer;
- &:hover{
- transition: transform 0.5s ease;
- transform: scale(0.9);
- }
- &.open{
- transform: scale(15);
- transition: transform 0.5s ease;
- h3{
- color: transparent;
- transition: visibility 0.5 ease;
- }
- img{
- animation: rotation 12s infinite linear;
- }
- & + .txt{
- position: fixed;
- top: 190px;
- text-align: center;
- line-height: 1.5rem;
- z-index: 9999;
- animation: translateright 1s ease forwards;
- }
- }
- &.close{
- transform: scale(1);
- transition: transform 0.5s 0.1s ease;
- & + .txt{
- position: fixed;
- top: 190px;
- text-align: center;
- line-height: 1.5rem;
- z-index: 9999;
- animation: translateleft 1s ease forwards;
- }
- h3{
- color: white;
- transition: color 0.5s 0.4s ease;
- }
- &:hover{
- transition: transform 0.5s ease!important;
- transform: scale(0.9)!important;
- }
- }
- img{
- animation: rotation 6s infinite linear;
- }
- h3{
- transform: rotate(35deg);
- position: absolute;
- top: 33px;
- left: 20px;
- }
- & + .txt{
- position: fixed;
- right: -200px;
- p{
- }
- }
- }
- h2{
- margin-left: 10px;
- }
- }
- .card{
- width: calc(100% / 3);
- padding: 0 10px;
- line-height: 0.8!important;
- .card-header{
- margin-top: 10px;
- display: inline-flex;
- & > div{
- margin-right: 5px;
- & > a{
- vertical-align: baseline;
- }
- & > time{
- vertical-align: baseline;
- }
- }
- }
- }
|