diff --git a/css/saoulbonmonsieur.css b/css/saoulbonmonsieur.css
index 8ad4486..4bd27ec 100644
--- a/css/saoulbonmonsieur.css
+++ b/css/saoulbonmonsieur.css
@@ -6,16 +6,28 @@
}
.presentation {
- overflow: visible;
+ overflow: hidden;
+ width: 100%;
+ height: 30rem;
+ display: flex;
+}
+
+.presentation-text {
+ margin: 14rem 2rem;
+ padding: 0 0 0 2rem;
+ width: 100%;
+}
+
+.presentation-img {
width: 100%;
height: 100%;
}
.photosaoul {
- width: 30%;
- height: 30%;
+ max-width: inherit;
+ height: inherit;
float: right;
z-index:10;
- rotate: 0deg;
- margin-right: -30rem;
+ display: none;
+ margin-top: auto;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index a781067..6224a4a 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,13 @@
-
Saoul Bonmonsieur
-

-
+
+
Saoul Bonmonsieur
+
+
+
+

+
diff --git a/js/index.js b/js/index.js
index 2d151ca..fb92672 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,10 +1,21 @@
var saoulAnimation = anime({
targets: '.photosaoul',
- autoplay: false,
- rotate: -30,
- translateX: -380,
+ easing: 'easeOutQuint',
+ translateX: [
+ {value: 0, duration: 100, delay: 0 },
+ {value: "100%", duration: 600, delay: 100 }
+ ],
+ rotate : [
+ {value: 0, duration: 100, delay: 0 },
+ {value: 30, duration: 600, delay: 100 }
+ ],
+ begin: function () {
+ document.getElementsByClassName("photosaoul")[0].style.display = "flex";
+ },
});
+saoulAnimation.reverse()
+
function superAnim() {
- saoulAnimation.restart();
+ saoulAnimation.restart()
}
\ No newline at end of file