Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding LP details : animations, effect, styles

Browse source
This commit is contained in:
Hugo Averty 2020-06-01 20:29:14 +02:00
parent ee394296ea
commit fe05f43001
2 changed files with 68 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

68
landing_page/src/sass/styles.scss
View file

@ -22,11 +22,10 @@
}
header {
background: #28A7FC url("../images/header.png") no-repeat bottom;
background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
background-size: 100%;
height: 37rem;
background-attachment: fixed;
background-position: 0px 67%;
position: relative;
.section{
position: relative;
}
@ -52,8 +51,35 @@ header {
}
}
}
.clouds {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 162px;
overflow: hidden;
width: 100%;
z-index: 1;
.cloud {
background: url('../images/cloud.png') repeat-x;
height: 162px;
width: 4000px;
-webkit-animation-name: prop-600;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
}
}
}
@-webkit-keyframes prop-600 {
0% {
-webkit-transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-400px);
}
}
.custom-link{
font-family: "VCR OSD Mono";
font-size: 18px;
@ -72,21 +98,15 @@ header {
bottom: -24px;
padding: 20px;
text-align: center;
transition: all 0.5s ease;
-webkit-transition: all 500ms cubic-bezier(0.000, 0, 1.000, 1); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650);
-moz-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650);
-o-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650);
transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
-webkit-transition-timing-function: cubic-bezier(0.000, 0, 1.000, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650);
-moz-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650);
-o-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650);
transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
z-index: 2;
transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
//transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
&:hover {
transform: scale(1.1);
color: white;
font-size: 24px;
padding: 12px;
text-decoration: none;
}
&.contribute {
background-image: url('../images/btn-bg-2.png');
@ -152,6 +172,11 @@ img{
height: 100%;
margin: 0 auto;
padding: 20px;
transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
border-radius: 10px;
&:hover {
transform: scale(1.1);
}
.step-image {
position: relative;
&:after {
@ -162,6 +187,7 @@ img{
position: absolute;
bottom: -25px;
left: 25px;
border-radius: 10px;
}
img {
width: 100%;
@ -188,12 +214,14 @@ img{
&.quotes{
h2{
font-size: 2rem;
font-family: 'Karmatic Arcade';
font-size: 34px;
margin: 40px 0;
}
.quote-item{
padding: 1rem 0;
text-align: right;
text-align: center;
.quote{
font-size: 1.5rem;
margin-right: 3rem;
@ -201,9 +229,13 @@ img{
letter-spacing: 2px;
}
.author{
font-size: 1rem;
letter-spacing: 0px;
}
}
}
}
.footer {
padding: 2rem;
}