123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- // home
- body {
- .blog {
- margin: 0 10px;
- header {
- height:100vh;
- width: calc(100% - 20px);
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-line-pack: distribute;
- align-content: space-around;
- & > div{
- position: fixed;
- width: calc(100% - 20px);
- &.head{
- z-index: 999;
- padding-top: 4vw;
- h2 {
- margin-left: 8px;
- position: absolute;
- left: 0;
- }
- &::after {
- display: block;
- content: " ";
- width: 0%;
- height: 1px;
- background: black;
- }
- }
- &.works-mea {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -ms-flex-item-align: end;
- align-self: flex-end;
- height: calc(100% - 20px);
- -webkit-box-align: end;
- -ms-flex-align: end;
- align-items: flex-end;
- .card{
- &:nth-child(2){
- margin:0 10px;
- }
- &:not(:nth-child(2)){
- margin: 0;
- }
- }
- }
- &.scroll{
- bottom: 0;
- text-align: center;
- }
- }
- }
- &.down{
- header{
- height: 5rem;
- .head{
- padding:0;
- -webkit-transition: all 1s 0.9s ease;
- transition: all 1s 0.9s ease;
- &::after{
- -webkit-animation: showborder 2.5s 1.5s ease forwards;
- animation: showborder 2.5s 1.5s ease forwards;
- }
- h2{
- opacity: 0;
- left: -40%;
- -webkit-transition: left 3s linear, opacity 0.3s 0.1s ease;
- transition: left 3s linear, opacity 0.3s 0.1s ease;
- }
- }
- .card{
- &:nth-child(1){
- -webkit-animation: translateY 1s ease forwards;
- animation: translateY 1s ease forwards;
- }
- &:nth-child(2){
- -webkit-animation: translateY 1.3s ease forwards;
- animation: translateY 1.3s ease forwards;
- }
- &:nth-child(3){
- -webkit-animation: translateY 1.6s ease forwards;
- animation: translateY 1.6s ease forwards;
- }
- }
- .scroll{
- opacity: 0;
- -webkit-transition: all 1s ease;
- transition: all 1s ease;
- }
- }
- }
- }
- }
- .contact{
- width: 90px;
- height: auto;
- z-index: 999;
- position: fixed;
- top: 0px;
- right: 0px;
- -webkit-transition: width 0.5s ease;
- transition: width 0.5s ease;
- cursor: pointer;
- &:hover{
- width: 80px;
- -webkit-transition: width 0.5s ease;
- transition: width 0.5s ease;
- }
- svg{
- cursor: pointer;
- -webkit-animation: rotation 6s infinite linear;
- animation: rotation 6s infinite linear;
- }
- h3{
- color: white;
- -webkit-transform: rotate(35deg);
- transform: rotate(35deg);
- position: absolute;
- top: 35px;
- left: 19px;
- }
- .txt{
- position: fixed;
- right: -200px;
- }
- &.open{
- -webkit-transform: scale(15);
- transform: scale(15);
- height: auto;
- -webkit-transition: -webkit-transform 0.5s ease;
- transition: -webkit-transform 0.5s ease;
- transition: transform 0.5s ease;
- transition: transform 0.5s ease, -webkit-transform 0.5s ease;
- h3{
- color: transparent;
- left: 500px;
- -webkit-transition: visibility 0.5 ease left 1s ease;
- transition: visibility 0.5 ease left 1s ease;
- }
- svg{
- -webkit-animation: rotation 12s infinite linear;
- animation: rotation 12s infinite linear;
- }
- .txt{
- position: fixed;
- color: white;
- -webkit-transform: scale(0.1);
- transform: scale(0.1);
- top: -10px;
- right: -20px;
- text-align: center;
- line-height: 1.5rem;
- z-index: 9999;
- }
- }
- &.close{
- -webkit-transform: scale(1);
- transform: scale(1);
- -webkit-transition: -webkit-transform 0.5s 0.1s ease;
- transition: -webkit-transform 0.5s 0.1s ease;
- transition: transform 0.5s 0.1s ease;
- transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
- & + .txt{
- top: 190px;
- text-align: center;
- line-height: 1.5rem;
- z-index: 9999;
- -webkit-animation: translateleft 1s ease forwards;
- animation: translateleft 1s ease forwards;
- }
- h3{
- -webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
- transition: color 0.5s 0.5s ease, left 0.5s ease;
- }
- &:hover{
- -webkit-transition: -webkit-transform 0.5s ease!important;
- transition: -webkit-transform 0.5s ease!important;
- transition: transform 0.5s ease!important;
- transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
- -webkit-transform: scale(0.9)!important;
- transform: scale(0.9)!important;
- }
- }
- }
- // page
- body {
- #page-wrapper.item {
- header {
- border-bottom: 1px solid black;
- position: fixed;
- height: 5rem;
- background: white;
- top: 0;
- left: 10px;
- right: 10px;
- z-index: 999;
- h1 {
- color: black;
- line-height: 5rem;
- }
- h2, .scroll {
- display: none;
- }
- }
- }
- }
|