Line 41: | Line 41: | ||
<style> | <style> | ||
+ | |||
.container0 { | .container0 { | ||
width: 100%; | width: 100%; | ||
Line 57: | Line 58: | ||
.bedroom-floor { | .bedroom-floor { | ||
height: 100%; | height: 100%; | ||
− | + | ||
} | } | ||
.floor-inner { | .floor-inner { | ||
− | + | ||
vertical-align: middle; | vertical-align: middle; | ||
− | + | text-align: center; | |
− | + | width: 100%; | |
− | width: | + | |
height: 94%; | height: 94%; | ||
min-height: 400px; | min-height: 400px; | ||
Line 72: | Line 72: | ||
} | } | ||
− | + | .fone { | |
− | + | position: absolute; | |
− | max- | + | width: 80%; |
− | + | height: auto; | |
− | top: | + | max-width: 100%; |
− | left: | + | max-height: 100%; |
+ | |||
+ | top: 15%; | ||
+ | left: 10%; | ||
} | } | ||
+ | .ftwo { | ||
+ | position: absolute; | ||
+ | width: 60%; | ||
+ | height: auto; | ||
+ | max-width: 100%; | ||
+ | max-height: 100%; | ||
+ | top: 15%; | ||
+ | left: 20%; | ||
+ | box-shadow: 0 12px 15px rgba(0,0,0,.10); | ||
+ | |||
+ | } | ||
+ | .fthree { | ||
+ | position: absolute; | ||
+ | width: 60%; | ||
+ | height: auto; | ||
+ | max-width: 100%; | ||
+ | max-height: 100%; | ||
+ | top: 15%; | ||
+ | left: 20%; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ffour { | ||
+ | position: absolute; | ||
+ | width: 15%; | ||
+ | height: auto; | ||
+ | max-width: 100%; | ||
+ | max-height: 100%; | ||
+ | top: 15%; | ||
+ | left: 55%; | ||
+ | |||
+ | } | ||
+ | .ffive { | ||
+ | position: absolute; | ||
+ | width: 30%; | ||
+ | height: auto; | ||
+ | max-width: 100%; | ||
+ | max-height: 100%; | ||
+ | top: 15%; | ||
+ | left: 30%; | ||
+ | |||
+ | } | ||
+ | |||
.bathroom-wall { | .bathroom-wall { | ||
Line 312: | Line 358: | ||
> | > | ||
− | <!-- Scene 1 | + | <!-- Scene 1 --> |
<div class="scene" | <div class="scene" | ||
data-2700="top: 0%" | data-2700="top: 0%" | ||
Line 323: | Line 369: | ||
<div class="bedroom-floor"> | <div class="bedroom-floor"> | ||
<div class="floor-inner"> | <div class="floor-inner"> | ||
− | <img src=" | + | <img src="assets/img/home/fig1.png" class="fone" |
data-="display:none;" | data-="display:none;" | ||
− | data- | + | data-100="display:block; opacity:0;" |
− | data- | + | data-700="display:block; opacity:1; " |
data-3600="display:block; opacity:1; " | data-3600="display:block; opacity:1; " | ||
data-3700="display:block; opacity:0; " | data-3700="display:block; opacity:0; " | ||
> | > | ||
+ | <img src="assets/img/home/fig2.png" class="ftwo" | ||
+ | |||
+ | data-="display:none;" | ||
+ | data-600="display:block; opacity:1;top:100%;" | ||
+ | data-1000="display:block; opacity:1; top:25%;" | ||
+ | data-1300="display:block; opacity:1; top:25%;" | ||
+ | data-1700="display:block; opacity:1; top:-100%;" | ||
+ | |||
+ | > | ||
+ | <img src="assets/img/home/fig2.gif" class="fthree" | ||
+ | |||
+ | data-="display:none;" | ||
+ | data-1200="display:block; opacity:1;top:120%;" | ||
+ | data-2000="display:block; opacity:1; top:40%;" | ||
+ | |||
+ | |||
+ | |||
+ | > | ||
+ | <img src="assets/img/home/fig3.png" class="ffour" | ||
+ | |||
+ | data-="display:none;" | ||
+ | data-1700="display:block; opacity:1;top:120%;" | ||
+ | data-2300="display:block; opacity:1; top:50%;" | ||
+ | > | ||
+ | <img src="assets/img/home/fig4.png" class="ffive" | ||
+ | |||
+ | data-="display:none;" | ||
+ | data-2300="display:block; opacity:1;top:100%;" | ||
+ | data-2500="display:block; opacity:1; top:20%;" | ||
+ | > | ||
+ | |||
Revision as of 04:13, 26 October 2020