first commit

style/style.css

@@ -0,0 +1,580 @@
+html{
+  width: 10000px;
+  height: 5000px;
+}
+
+body{
+  cursor: -webkit-grab;
+  cursor: grab;
+  /* margin-left: 200px; */
+}
+
+/* start */
+@-webkit-keyframes dash {
+  from {
+    stroke-dashoffset: 3000;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes dash {
+  from {
+    stroke-dashoffset: 3000;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+p, a{
+  font-size: 18px;
+  line-height: 26px;
+  color: black;
+  font-family: 'Montserrat-Regular';
+}
+
+a{
+  font-family: 'Montserrat-SemiBold';
+  color: #35b8c8ff;
+}
+
+h4{
+  font-size: 42px;
+  line-height: 42px;
+  color: black;
+  font-family: 'Montserrat-SemiBold';
+  margin: 0;
+}
+
+/* Yes_non */
+.buttons{
+  width: 95px;
+  height: 95px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  border-radius: 95px;
+  background-color: yellow;
+  -webkit-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+.buttons:hover{
+  -webkit-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+  -webkit-box-shadow: 5px 5px;
+  box-shadow: 5px 5px;
+  cursor: pointer;
+}
+
+#y p, #n p{
+  font-size: 30px;
+  margin: auto;
+}
+
+section{
+  position: relative;
+}
+
+.section{
+  position: absolute;
+}
+
+.section .illu{
+  z-index: 0;
+}
+
+.section .y_n{
+  z-index: 1;
+}
+
+.block{
+  position: relative;
+  display: flex;
+}
+
+.block #y, .block #n{
+  position: absolute;
+}
+
+.tracer-n, .tracer-y{
+  position: absolute;
+}
+
+/* ////////start////////  */
+#start{
+  top: 3900px;
+  left: 2180px;
+  z-index: 20;
+}
+
+#start #y{
+  top: 450px;
+  left: 650px;
+}
+
+#start #n{
+  top: 50px;
+  left: 640px;
+}
+
+#start .tracer-y{
+  position: absolute;
+  top: -80px;
+  left: 770px;
+}
+
+#start .tracer-n{
+  position: absolute;
+  top: -500px;
+  left: 715px;
+}
+
+#start #y:hover ~ .tracer-y path{
+  stroke-dasharray: 3000;
+  stroke-dashoffset: 0;
+  -webkit-animation: dash 5s linear;
+          animation: dash 5s linear;
+}
+
+/* ////////angoisses//////// */
+#angoisses{
+  top: 3810px;
+  left: 4400px;
+  z-index: 19;
+}
+
+#angoisses #y{
+  top: 340px;
+  left: 230px;
+}
+
+#angoisses #n{
+  top: 550px;
+  left: 200px;
+}
+
+#angoisses .tracer-n{
+  top: 450px;
+  left: 340px;
+}
+
+#angoisses .tracer-y{
+  top: -420px;
+  left: 280px;
+}
+
+/* ////////coeur//////// */
+#coeur{
+  top: 3130px;
+  left: 5700px;
+  z-index: 18;
+}
+
+#coeur .tracer-n{
+  top: -400px;
+  left: 240px;
+}
+
+/* ////////summo//////// */
+#sumo{
+  top: 4200px;
+  left: 6710px;
+  z-index: 18;
+}
+
+#sumo .tracer-y{
+  top: -950px;
+  left: 200px;
+}
+
+/* ////////voyance//////// */
+#voyance{
+  top: 2630px;
+  left: 7220px;
+}
+
+#voyance #y{
+  top: 425px;
+  left: 600px;
+}
+
+#voyance #n{
+  top: 525px;
+  left: 655px;
+}
+
+#voyance .tracer-n{
+  top: 630px;
+  left: 540px;
+}
+
+#voyance .tracer-y{
+  top: -370px;
+  left: 640px;
+}
+
+/* ////////parlons-en//////// */
+#parlons_en{
+  top: 3970px;
+  left: 8400px;
+}
+
+#parlons_en .block{
+  flex-flow: row-reverse;
+}
+
+#parlons_en .txt{
+  width: 400px;
+  margin-top: 270px;
+}
+
+#parlons_en h4{
+  -webkit-transform: rotate(-15deg);
+          transform: rotate(-15deg);
+  margin-bottom: 70px;
+  margin-left: -10px;
+}
+
+/* ////////ampoule//////// */
+#ampoule{
+  top: 1908px;
+  left: 8425px;
+  z-index: 17;
+}
+
+#ampoule .block{
+  flex-direction: column;
+}
+
+#ampoule #y{
+  top: 250px;
+  left: -200px;
+}
+
+#ampoule #n{
+  top: 200px;
+  left: -100px;
+}
+
+#ampoule .tracer-n{
+  top: -990px;
+  left: -760px;
+}
+
+#ampoule .tracer-y{
+  top: 10px;
+  left: -1760px;
+}
+
+#ampoule .txt{
+  width: 250px;
+}
+
+/* ////////besoin//////// */
+#besoin{
+  top: 1778px;
+  left: 6225px;
+}
+
+#besoin #y{
+  top: 250px;
+  left: -200px;
+}
+
+#besoin #n{
+  top: 200px;
+  left: -100px;
+}
+
+#besoin .tracer-y{
+  top: 230px;
+  left: -1350px;
+}
+
+/* ////////genie//////// */
+#genie{
+  top: 248px;
+  left: 7500px;
+  z-index: 17;
+}
+
+#genie .block{
+  flex-flow: row-reverse;
+}
+
+#genie .illu{
+  margin-left: -130px;
+  margin-top: 70px;
+}
+
+#genie #y {
+  top: 600px;
+  left: -300px;
+}
+
+#genie #n{
+  top: 400px;
+  left: -300px;
+}
+
+#genie .tracer-n{
+  top: 220px;
+  left: -1623px;
+}
+
+#genie .tracer-y{
+  top: 620px;
+  left: -2680px;
+}
+
+#genie .txt{
+  margin-top: 300px;
+  margin-left: -150px;
+  width: 400px;
+}
+
+#genie h4{
+  -webkit-transform: rotate(-15deg);
+          transform: rotate(-15deg);
+  margin-bottom: 70px;
+  margin-left: -10px;
+}
+
+/* ////////bah_alors//////// */
+#bah_alors{
+  top: 500px;
+  left: 5050px;
+  z-index: 17;
+}
+
+#bah_alors #y {
+  top: 600px;
+  left: -300px;
+}
+
+#bah_alors #n{
+  top: 400px;
+  left: -300px;
+}
+
+#bah_alors .txt{
+  margin-top: 80px;
+  margin-left: 80px;
+  width: 500px;
+}
+
+#bah_alors h4, #bah_alors p:nth-of-type(1) {
+  -webkit-transform: rotate(-15deg);
+          transform: rotate(-15deg);
+  margin-bottom: 70px;
+  margin-left: -10px;
+  margin: 0 0 0 -10px;
+}
+
+#bah_alors p:nth-of-type(1){
+  font-family:'Montserrat-SemiBold';
+  margin-left: 2px;
+}
+
+#bah_alors p:nth-of-type(2){
+  margin-top: 100px;
+}
+
+#bah_alors .tracer-y{
+  top: 450px;
+  left: -290px;
+}
+
+/* ////////et_maintenant//////// */
+#et_maintenant{
+  top: 1450px;
+  left: 4320px;
+}
+
+#et_maintenant #y {
+  top: 260px;
+  left: 85px;
+}
+
+#et_maintenant #n{
+  top: 405px;
+  left: 85px;
+}
+
+#et_maintenant .tracer-y{
+  top: 100px;
+  left: -1210px;
+}
+
+#et_maintenant .tracer-n{
+  top: 450px;
+  left: -1970px;
+}
+
+/* ////////pouce//////// */
+#pouce{
+  top: 1350px;
+  left: 2730px;
+}
+
+#pouce #y {
+  top: 355px;
+  left: 230px;
+  z-index: 17;
+}
+
+#pouce #n{
+  top: 355px;
+  left: 85px;
+  z-index: 17;
+}
+
+#pouce .txt{
+  top: -40px;
+  left: 240px;
+  width: 300px;
+}
+
+#pouce h4{
+  -webkit-transform: rotate(-15deg);
+          transform: rotate(-15deg);
+}
+
+#pouce .tracer-y{
+  top: 360px;
+  left: 275px;
+  z-index: 16;
+}
+
+#pouce .tracer-n{
+  top: 370px;
+  left: -1680px;
+  z-index: 16;
+}
+
+/* ////////koala//////// */
+#koala{
+  top: 1600px;
+  left: 600px;
+}
+
+#koala #y {
+  top: 355px;
+  left: 230px;
+}
+
+#koala #n{
+  top: 355px;
+  left: 85px;
+}
+
+#koala .tracer-y{
+  top: 360px;
+  left: 275px;
+}
+
+#koala .tracer-n{
+  top: 370px;
+  left: -1680px;
+}
+
+/* ////////chevalier//////// */
+#chevalier{
+  top: 2410px;
+  left: 1900px;
+  z-index: 16;
+}
+
+#chevalier #y {
+  top: 500px;
+  left: -150px;
+}
+
+#chevalier #n{
+  top: 500px;
+  left: -300px;
+}
+
+#chevalier .tracer-y{
+  top: 610px;
+  left: -960px;
+}
+
+#chevalier .tracer-n{
+  top: 530px;
+  left: -1180px;
+}
+
+/* ////////sy_mettre//////// */
+#sy_mettre{
+  top: 2900px;
+  left: 580px;
+}
+
+#sy_mettre .txt{
+  width: 590px;
+}
+
+#sy_mettre h4{
+  -webkit-transform: rotate(-15deg);
+          transform: rotate(-15deg);
+  margin-left: -260px;
+}
+
+#sy_mettre p{
+  margin-top: 55px;
+}
+
+/* ////////etoile//////// */
+#etoile{
+  top: 3920px;
+  left: 630px;
+  z-index: 14;
+}
+
+#etoile #y {
+  top: 220px;
+  left: 400px;
+}
+
+#etoile #n{
+  top: 390px;
+  left: 20px;
+}
+
+#etoile .tracer-y{
+  top: -1020px;
+  left: 500px;
+}
+
+#etoile .tracer-n{
+  top: -2000px;
+  left: -590px;
+}
+
+#etoile .txt{
+  margin-top: 210px;
+  margin-left: -240px;
+  background: white;
+  width: 300px;
+  height: 100px;
+  z-index: 1;
+}
+
+/* ////////center//////// */
+#center{
+  top: 2230px;
+  left: 3660px;
+}
+
+#center .tracer-y{
+  top: -1020px;
+  left: 500px;
+}
+
+#center .tracer-n{
+  top: -2000px;
+  left: -590px;
+}