lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
landing_page/dist/index.html vendored
View file

@ -29,7 +29,7 @@
</div>
<div class="row justify-content-md-center pt-5" style="margin-top: 100px;">
<div class="col col-lg-3">
<a class="custom-link contribute" href="#" title="CONTRIBUTE !">CONTRIBUTE
<a class="custom-link contribute" target="_BLANK" href="https://github.com/thecodingmachine/workadventure" title="CONTRIBUTE !">CONTRIBUTE
</a>
</div>
<div class="col col-lg-3">
@ -40,6 +40,9 @@
</div>
</div>
</div>
<div class="clouds">
<div class="cloud"></div>
</div>
</header>
<div class="section bg-white how-to">
<div class="container-fluid container-lg">
@ -79,7 +82,7 @@
</div>
<div class="bg-gray section used-by">
<div class="container-fluid container-lg">
<h2 class="text-center pb-4">Used by millions of people worldwilde and companies such as :</h2>
<h2 class="text-center pb-4">THEY MAY APPROVE</h2>
<div class="row justify-content-md-center align-items-center">
<div class="col col-md-auto">
<img src="static/images/atari.png">
@ -97,28 +100,32 @@
</div>
</div>
<div class="container-fluid container-lg section quotes">
<h2 class="text-center">People love WorkAdventure</h2>
<h2 class="text-center">Why they loved Work Adventure</h2>
<div class="row justify-content-center">
<div class="col-12 col-md-9">
<div class="quote-item">
<p class="quote">&laquo;&nbsp;Good job boys! You've made 32bit great again&nbsp;&raquo;</p>
<p class="author">Donald T. Whashington DC</p>
<p class="quote">&laquo;&nbsp;Since I see life in 32px, I think I feel happier.&nbsp;&raquo;</p>
<p class="author">Donald, Whashington DC</p>
</div>
<div class="quote-item">
<p class="quote">&laquo;&nbsp;Your characters are so well dressed, who is the creator?&nbsp;&raquo;</p>
<p class="author">Anna W. New York City</p>
<p class="quote">&laquo;&nbsp;For me, who hates hugs, I can't live without it...&nbsp;&raquo;</p>
<p class="author">Anna, New York City</p>
</div>
<div class="quote-item">
<p class="quote">&laquo;&nbsp;I hate you! This rocket app is more powerfull then my missiles&nbsp;&raquo;</p>
<p class="author">Kim J-U. Pyongyang</p>
<p class="quote">&laquo;&nbsp;Par webcam les gens ne me font plus de réflexion sur mes cheveux. Trop cool !&nbsp;&raquo;</p>
<p class="author">Kim. Pyongyang</p>
</div>
<div class="quote-item">
<p class="quote">&laquo;&nbsp;Since it's fun, I scare my colleagues a little less.&nbsp;&raquo;</p>
<p class="author">Emmanuel. France</p>
</div>
</div>
</div>
</div>
<div class="section bg-white footer">
<div class="bg-white footer">
<div class="container-fluid container-lg">
<img src="static/images/Logo TCM.png">
<a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
</div>
</div>
</body>

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;
}