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

Adding pixel style on step images

Browse source
This commit is contained in:
Hugo Averty 2020-06-02 12:55:16 +02:00
parent e1b280e8b6
commit 92215128b7
7 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
landing_page/dist/index.html vendored
View file

@ -58,6 +58,9 @@
</div>
</div>
</div>
<div class="clouds clouds-2">
<div class="cloud"></div>
</div>
<div class="clouds">
<div class="cloud"></div>
</div>
@ -68,19 +71,19 @@
<div class="col-12 col-md-4 text-center my-3 my-md-0">
<div class="image-item">
<h2>Choose your map</h2>
<div class="step-image"><img src="static/images/Bitmap3.png"></div>
<div class="step-image"><img src="static/images/step 1.png"></div>
</div>
</div>
<div class="col-12 col-md-4 text-center my-3 my-md-0">
<div class="image-item">
<h2>Select your character</h2>
<div class="step-image"><img src="static/images/Bitmap2.png"></div>
<div class="step-image"><img src="static/images/step 2.png"></div>
</div>
</div>
<div class="col-12 col-md-4 text-center my-3 my-md-0">
<div class="image-item">
<h2>Let's go explore and talk&nbsp;!</h2>
<div class="step-image"><img src="static/images/bitmap.png"></div>
<div class="step-image"><img src="static/images/step 3.png"></div>
</div>
</div>
</div>
@ -149,7 +152,7 @@
</div>
<div class="col-6 col-md-6 my-3 my-md-0 floppy">
<img src="static/images/floppy.png" />
<div>Soon available on floppy !<br/><span>otherwise it's open source and on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
<div>Soon available on floppy !<br/><span>otherwise, open source and on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
</div>
</div>
<div class="container-fluid container-lg">

BIN
landing_page/dist/static/images/.DS_Store vendored Normal file
View file

Binary file not shown.

BIN
landing_page/dist/static/images/step 1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
landing_page/dist/static/images/step 2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
landing_page/dist/static/images/step 3.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
landing_page/src/images/bg-step.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

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

@ -66,6 +66,14 @@ header {
overflow: hidden;
width: 100%;
z-index: 1;
&.clouds-2 {
bottom: 25px;
.cloud {
transform: translateX(50px);
-webkit-animation-duration: 80s;
opacity: .6;
}
}
.cloud {
background: url('../images/cloud.png') repeat-x;
height: 162px;
@ -194,7 +202,7 @@ img{
.step-image {
position: relative;
&:after {
transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
content:"";
height: 100%;
width: 100%;
@ -202,13 +210,12 @@ img{
position: absolute;
bottom: -25px;
left: 25px;
border-radius: 10px;
background: url('../images/bg-step.png') no-repeat bottom right;
}
img {
width: 100%;
z-index: 2;
position: relative;
border-radius: 10px;
}
}
h2{
@ -240,7 +247,6 @@ img{
text-align: center;
.quote{
font-size: 1.5rem;
margin-right: 3rem;
margin-bottom: 0.5rem;
letter-spacing: 2px;
}