12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- // home
- body{
- &> .blog{
- header{
- width: 100%;
- height: 100vh;
- display: inline-flex;
- flex-direction: column;
- & > section{
- position: relative;
- height: 50vh;
- min-height: 250px;
- &.works-mea{
- display: inline-flex;
- flex-wrap: wrap;
- // margin-bottom: 70px;
- align-items: flex-end;
- height: 100%;
- .card{
- line-height: 0.8!important;
- .card-header{
- margin-top: 10px;
- }
- }
- }
- }
- h1{
- font-size: 11.2vw;
- line-height: 7vw!important;
- }
- h2{
- font-size: 3.7vw;
- }
- nav{
- margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
- transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
- }
- .scroll{
- width: 50px;
- height: 15px;
- margin: 0 auto 10px auto;
- overflow: hidden;
- position: relative;
- & > p:nth-child(1){
- text-align: center;
- position: absolute;
- top: -20px;
- animation: translatep1 2s infinite linear;
- }
- & > p:nth-child(2){
- text-align: center;
- position: absolute;
- top: -20px;
- animation: translatep1 2s infinite linear;
- animation-delay: 1s;
- }
- }
- }
- }
- }
- // page
- body{
- & > .item{
- header{
- height: 100px;
- position: relative;
- nav{
- position: absolute;
- margin-top: 50px; /* poussé de la moitié de hauteur de viewport */
- transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
- }
- h1{
- color: black;
- }
- h2{
- display: none;
- }
- .scroll{
- display: none;
- }
- }
- }
- }
|