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

Front modification for landing page integration

Browse source
This commit is contained in:
Hugo Averty 2020-06-01 18:47:54 +02:00
parent 2d20302ab2
commit ee394296ea
11 changed files with 151 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,12 +12,21 @@
font-weight: normal;
src: local('04b03'), url('../fonts/04B_03.woff') format('woff');
}
@font-face {
font-family: 'Karmatic Arcade';
src: url('../fonts/ka1.ttf') format('truetype');
}
@font-face {
font-family: 'VCR OSD Mono';
src: url('../fonts/VCR_OSD.ttf') format('truetype');
}
header {
background: url("../images/header.png") no-repeat;
background: #28A7FC url("../images/header.png") no-repeat bottom;
background-size: 100%;
height: 28rem;
height: 37rem;
background-attachment: fixed;
background-position: 0px 67%;
.section{
position: relative;
}
@ -28,38 +37,71 @@ header {
top: 0;
left: 0;
right: 0;
height: 33rem;
.logo{
margin: 1rem 0;
}
.title {
padding: 5rem 0;
color: black;
h1 {
font-family: 'Karmatic Arcade';
font-size: 44px;
margin-bottom: 20px;
}
}
}
}
.custom-link{
font-family: "VCR OSD Mono";
font-size: 18px;
letter-spacing: 3,75;
color: white;
display: block;
margin: 0 auto;
width: 250px;
height: 80px;
height: 64px;
background-image: url('../images/btn-bg.png');
background-repeat: no-repeat;
background-size: 100%;
position: relative;
position: absolute;
left: 0;
right: 0;
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 */
&:hover {
transform: scale(1.1);
color: white;
}
&.contribute {
background-image: url('../images/btn-bg-2.png');
}
&.light{
background-image: url('../images/btn-bg-light.png');
}
&::after{
/*&::after{
content: "";
position: absolute;
background-size: 60%;
width: 100%;
height: 100%;
}
}*/
&.start::after{
background: url("../images/start.png") no-repeat center center;
@ -80,6 +122,20 @@ img{
.bg-gray{
background-color: #3b3b3b !important;
}
.credits {
text-align: center;
h2{
padding: 1rem 0;
margin: 0;
min-height: 6rem;
font-family: 'Karmatic Arcade';
font-size: 34px;
margin-bottom: 20px;
}
p {
}
}
.section{
padding-top: 2rem;
padding-bottom: 5rem;
@ -91,16 +147,35 @@ img{
}
&.how-to{
padding: 175px 0;
.image-item{
height: 100%;
max-width: 300px;
margin: 0 auto;
background-color: #f9dcb0;
padding: 1rem;
padding: 20px;
.step-image {
position: relative;
&:after {
content:"";
height: 100%;
width: 100%;
background: #dcdcdc;
position: absolute;
bottom: -25px;
left: 25px;
}
img {
width: 100%;
z-index: 2;
position: relative;
}
}
h2{
padding: 1rem 0;
margin: 0;
min-height: 6rem;
font-family: 'Karmatic Arcade';
font-size: 22px;
margin-bottom: 20px;
}
}
}