wip #2323 @7

diff --git a/Fluidbook-presentation-p15/bubble.svg b/Fluidbook-presentation-p15/bubble.svg
new file mode 100644 (file)
index 0000000..f514ac3
--- /dev/null
+++ b/Fluidbook-presentation-p15/bubble.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.52 128.58"><defs><style>.cls-1{opacity:0.9;}.cls-2{fill:#193c55;fill-opacity:0.9;}</style></defs><title>bubble</title><g class="cls-1"><g id="bubble_0_Layer0_0_FILL" data-name="bubble 0 Layer0 0 FILL"><path class="cls-2" d="M161.8,235.51Q143,254.29,143,281t18.79,45.44a62,62,0,0,0,45.44,18.79,64,64,0,0,0,38.8-13l25.49,13.08-13.08-25.42a64.3,64.3,0,0,0,9.58-18,63.64,63.64,0,0,0,3.5-20.88q0-26.59-18.85-45.44a61.81,61.81,0,0,0-45.44-18.85Q180.65,216.66,161.8,235.51Z" transform="translate(-143.01 -216.66)"/></g></g></svg>
\ No newline at end of file

diff --git a/Fluidbook-presentation-p15/house.svg b/Fluidbook-presentation-p15/house.svg
new file mode 100644 (file)
index 0000000..1100e7c
--- /dev/null
+++ b/Fluidbook-presentation-p15/house.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.23 60.95"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-linejoin:round;stroke-width:2px;}.cls-1{stroke-linecap:round;}</style></defs><title>house</title><path id="Layer1_0_MEMBER_0_1_STROKES" data-name="Layer1 0 MEMBER 0 1 STROKES" class="cls-1" d="M171.62,307.54h71.23" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_1_1_STROKES" data-name="Layer1 0 MEMBER 1 1 STROKES" class="cls-1" d="M171.62,283l31.93-15.35" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_2_1_STROKES" data-name="Layer1 0 MEMBER 2 1 STROKES" class="cls-1" d="M176.53,280.52v27" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_3_1_STROKES" data-name="Layer1 0 MEMBER 3 1 STROKES" class="cls-1" d="M197.41,248.59l45.44,28.24" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_4_1_STROKES" data-name="Layer1 0 MEMBER 4 1 STROKES" class="cls-1" d="M237.94,273.76v33.78" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_5_1_STROKES" data-name="Layer1 0 MEMBER 5 1 STROKES" class="cls-2" d="M228.11,267.62V256h7.37v16.27" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_6_1_STROKES" data-name="Layer1 0 MEMBER 6 1 STROKES" class="cls-1" d="M230.57,295.25H210.92v12.29h19.65Z" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_7_1_STROKES" data-name="Layer1 0 MEMBER 7 1 STROKES" class="cls-1" d="M220.75,295.25v12.29" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_8_1_STROKES" data-name="Layer1 0 MEMBER 8 1 STROKES" class="cls-1" d="M196.18,290.34H183.9v17.2h12.28Z" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_9_1_STROKES" data-name="Layer1 0 MEMBER 9 1 STROKES" class="cls-1" d="M183.9,285.43h12.28" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_10_1_STROKES" data-name="Layer1 0 MEMBER 10 1 STROKES" class="cls-1" d="M203.55,252.39v55.15" transform="translate(-170.62 -247.59)"/><path id="Layer1_0_MEMBER_11_1_STROKES" data-name="Layer1 0 MEMBER 11 1 STROKES" class="cls-1" d="M216.88,273.15a3.47,3.47,0,0,1-1,2.46,3.54,3.54,0,0,1-2.51,1,3.35,3.35,0,0,1-3.44-3.44,3.45,3.45,0,0,1,3.44-3.5,3.43,3.43,0,0,1,2.51,1A3.34,3.34,0,0,1,216.88,273.15Z" transform="translate(-170.62 -247.59)"/></svg>
\ No newline at end of file

diff --git a/Fluidbook-presentation-p15/index.html b/Fluidbook-presentation-p15/index.html
index 3c970c814bdcd2030289c4ac49eb8e7d53a8c921..0c4726f53c9804337987975fa9881bdfa857234d 100644 (file)
--- a/Fluidbook-presentation-p15/index.html
+++ b/Fluidbook-presentation-p15/index.html
@@ -12,6 +12,7 @@
         <div class="searchbar-nav">
             <span class="searchbar-nav_letter">H</span>
             <span class="searchbar-nav_letters">a</span>
+            <span class="searchbar-nav_word">bitation</span>
         </div>
         <div class="searchbar-dropdown">
             <ul class="searchbar-list">
@@ -25,9 +26,68 @@
         </div>
         <img class="searchbar-loupe" src="search.svg" alt="">
     </div>
-
+    <div class="results">
+        <span class="results-text">8 résultats sur 4 pages</span>
+        <div class="results-cross"></div>
+    </div>
     <div class="magazine">
-        <img class="bigmagazine" src="big_magazine.png" alt="">
+    <img class="bigmagazine" src="big_magazine.png" alt="">
+    </div>
+    <div class="bubble">
+        <div class="bubble-item">
+            <div class="circle circle-1">
+                <img class="circle-img img-med" src="bubble.svg" alt="">
+                <img class="circle-logo logo-med" src="house.svg" alt="">
+            </div>
+        </div>
+        <div class="bubble-item">
+            <div class="circle circle-2">
+                <img class="circle-img img-large" src="bubble.svg" alt="">
+                <img class="circle-logo logo-large" src="house.svg" alt="">
+            </div>
+        </div>
+        <div class="bubble-item">
+            <div class="circle circle-3">
+                <img class="circle-img img-med" src="bubble.svg" alt="">
+                <img class="circle-logo logo-med" src="house.svg" alt="">
+            </div>
+        </div>
+        <div class="bubble-item">
+            <div class="circle circle-4">
+                <img class="circle-img img-med" src="bubble.svg" alt="">
+                <img class="circle-logo logo-med" src="house.svg" alt="">
+            </div>
+        </div>
+        <div class="bubble-item">
+            <div class="circle circle-5">
+                <img class="circle-img img-med img-flip" src="bubble.svg" alt="">
+                <img class="circle-logo logo-med" src="house.svg" alt="">
+            </div>
+        </div>
+        <div class="bubble-item">
+            <div class="circle circle-6">
+                <img class="circle-img img-med img-flip" src="bubble.svg" alt="">
+                <img class="circle-logo logo-med" src="house.svg" alt="">
+            </div>
+        </div>
+        <div class="bubble-item">
+            <div class="circle circle-7">
+                <img class="circle-img img-med img-flip" src="bubble.svg" alt="">
+                <img class="circle-logo logo-med" src="house.svg" alt="">
+            </div>
+        </div>
+        <div class="bubble-item">
+            <div class="circle circle-8">
+                <img class="circle-img img-large img-flip" src="bubble.svg" alt="">
+                <img class="circle-logo logo-large" src="house.svg" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="small">
+    <img class="smallmagazine-1 smallmag" src="image/small-magazine%20(4).png" alt="">
+    <img class="smallmagazine-2 smallmag" src="image/small-magazine%20(3).png" alt="">
+    <img class="smallmagazine-3 smallmag" src="image/small-magazine%20(2).png" alt="">
+    <img class="smallmagazine-4 smallmag" src="image/small-magazine%20(1).png" alt="">
     </div>
     <div class="mouse">
         <img class="mouse-img" src="mouse.svg" alt="">

diff --git a/Fluidbook-presentation-p15/main.js b/Fluidbook-presentation-p15/main.js
index 531d91074ed832c23eeb22c4264a78ad0eb6bcbb..8b4884f95ee2327c7161d0e7c5987010456bc13e 100644 (file)
--- a/Fluidbook-presentation-p15/main.js
+++ b/Fluidbook-presentation-p15/main.js
@@ -1,43 +1,57 @@
 var tl = new TimelineMax();
 
-tl.from(".mouse-img",1,{opacity:0, top:180, left:200, transform:"rotate(-30deg)"});
+tl.from(".mouse-img",0.7,{opacity:0, top:180, left:200, transform:"rotate(-30deg)"});
 
+ tl.to(".mouse-img",0.1,{display:'none'});
+ tl.to(".mouse-click",0.1,{display: 'block'});
 
+ tl.from(".stroke-1",0.1,{width:0, right: 100,opacity: 0},0.9);
+ tl.to(".stroke-1",0.1,{width:0, right: 100,opacity: 0},1);
+ tl.from(".stroke-2",0.1,{width:0, right: 100,opacity: 0},0.9);
+ tl.to(".stroke-2",0.1,{width:0, right: 100,opacity: 0},1);
+ tl.from(".stroke-3",0.1,{width:0, right: 100,opacity: 0},0.9);
+ tl.to(".stroke-3",0.1,{width:0, right: 100,opacity: 0},1);
+ tl.from(".stroke-4",0.1,{width:0, left: 100,opacity: 0},0.9);
+ tl.to(".stroke-4",0.1,{width:0, left: 100,opacity: 0},1);
+ tl.from(".stroke-5",0.1,{width:0, left: 100,opacity: 0},0.9);
+ tl.to(".stroke-5",0.1,{width:0, left: 100,opacity: 0},1);
+ tl.from(".stroke-6",0.1,{width:0, left: 100,opacity: 0},0.9);
+ tl.to(".stroke-6",0.1,{width:0, left: 100,opacity: 0},1);
+ tl.to(".mouse-click",0.1,{display: 'none'});
+ tl.to(".mouse-img",0.1,{display:'block'});
+ tl.from(".bar",0.3,{display:'none'});
+ tl.to(".mouse-img",0.1,{opacity:0});
+ tl.to(".bar",0,{display:'none',left:172});
+ tl.from(".searchbar-nav_letter",0.2,{display:'none'});
+ tl.to(".bar",0.1,{display:'block'});
+ tl.to(".bar",0,{display:'none',left:186});
+ tl.from(".searchbar-nav_letters",0.2,{display:'none'});
+ tl.to(".bar",0.1,{display:'block'});
+ tl.fromTo(".searchbar-dropdown",0.3,{height:0},{height: 165});
+ tl.from(".searchbar-list",0.05,{display:'none',opacity:0},"-=0.05");
+ tl.fromTo(".mouse-img",0.5,{top: 100,left:238,transform: 'rotate(-32deg)'}, {opacity:1, left:238, top:140, delay:0.6});
+ tl.to(".first",0.3,{background: "#133950",color: "#F3F3F3"},"-=0.25");
+ tl.to(".mouse-click",0,{display:'none',top:146.5,left:240,transform:'rotate(-32deg)'});
+ tl.to(".mouse-img",0.1,{display:'none'});
+ tl.to(".mouse-click",0.1,{display:'block'});
+ tl.to(".mouse-click",0.1,{display: 'none'});
+ tl.to(".mouse-img",0.8,{display:'block'});
+ tl.to(".mouse-img",0.1,{display:'none'});
+ tl.to(".first",0.3,{background: "#F3F3F3",color: "#133950"},'=-0.1');
+tl.to(".searchbar-nav_word",0.3,{opacity:1});
+ tl.to(".searchbar-list",0.1,{opacity:0,display:'none'});
+ tl.to(".searchbar-dropdown",0.4,{height:0});
+ tl.to(".bigmagazine",0.5,{left:140,opacity:0,display:'none'});
+ tl.from(".results",0.5,{opacity:0,top:100,display:'none'},"-=0.2");
+ tl.staggerFrom(".smallmag",0.5,{opacity:0,display:'none',left:-100},0.2);
 
-tl.to(".mouse-img",0.1,{display:'none'});
-tl.to(".mouse-click",0.1,{display: 'block'});
+$(".bubble-item").each(function (i) {
+   var circle = $(this).find('.circle');
+    var logo = $(this).find('.circle-logo');
 
-tl.from(".stroke-1",0.1,{width:0, right: 100,opacity: 0},1.2);
-tl.to(".stroke-1",0.1,{width:0, right: 100,opacity: 0},1.3);
-tl.from(".stroke-2",0.1,{width:0, right: 100,opacity: 0},1.2);
-tl.to(".stroke-2",0.1,{width:0, right: 100,opacity: 0},1.3);
-tl.from(".stroke-3",0.1,{width:0, right: 100,opacity: 0},1.2);
-tl.to(".stroke-3",0.1,{width:0, right: 100,opacity: 0},1.3);
-tl.from(".stroke-4",0.1,{width:0, left: 100,opacity: 0},1.2);
-tl.to(".stroke-4",0.1,{width:0, left: 100,opacity: 0},1.3);
-tl.from(".stroke-5",0.1,{width:0, left: 100,opacity: 0},1.2);
-tl.to(".stroke-5",0.1,{width:0, left: 100,opacity: 0},1.3);
-tl.from(".stroke-6",0.1,{width:0, left: 100,opacity: 0},1.2);
-tl.to(".stroke-6",0.1,{width:0, left: 100,opacity: 0},1.3);
-
-tl.to(".mouse-click",0.1,{display: 'none'});
-tl.to(".mouse-img",0.1,{display:'block'});
-tl.from(".bar",0.3,{display:'none'});
-tl.to(".mouse-img",0.4,{opacity:0});
-tl.from(".searchbar-nav_letter",0.2,{display:'none', delay: 0.3});
-tl.fromTo(".bar",0.1,{display:'none'},{left:180,display:'block'});
-tl.to(".bar",0.1,{left:190});
-tl.from(".searchbar-nav_letters",0.2,{display:'none'});
-tl.fromTo(".searchbar-dropdown",0.4,{height:0},{height: 165});
-tl.from(".searchbar-list",0.1,{display:'none'},"-=0.05");
-tl.fromTo(".mouse-img",1,{top: 100,left:238,transform: 'rotate(-32deg)'}, {opacity:1, left:238, top:140});
-tl.to(".first",0.3,{background: "#133950",color: "#F3F3F3"},"-=0.7");
-tl.to(".mouse-click",0,{display:'none',top:146.5,left:240,transform:'rotate(-32deg)'});
-tl.to(".mouse-img",0.1,{display:'none'});
-tl.to(".mouse-click",0.1,{display:'block'});
-tl.to(".mouse-click",0.1,{display: 'none'});
-tl.to(".mouse-img",0.1,{display:'block'});
-tl.to(".first",0.3,{background: "#F3F3F3",color: "#133950"});
-tl.to(".mouse-img",0.1,{display:'none'});
-tl.to(".searchbar-list",0.1,{opacity:0,display:'none'});
-tl.to(".searchbar-dropdown",0.4,{height:0});
\ No newline at end of file
+   setTimeout(function () {
+       tl.to(circle,0.05,{transform:'scale(1)',display:'block'});
+       tl.to(logo,0.1,{opacity:1});
+       console.log(i);
+   }, i*50);
+});

diff --git a/Fluidbook-presentation-p15/style.css b/Fluidbook-presentation-p15/style.css
index 16510856a9acc58797a5d7f76d96ccc21261e6ea..d5e61f578a31665eb2b362610217677149441fd7 100644 (file)
--- a/Fluidbook-presentation-p15/style.css
+++ b/Fluidbook-presentation-p15/style.css
@@ -27,7 +27,7 @@
   .searchbar-nav_letter {
     font-family: typo;
     position: relative;
-    top: 4px;
+    top: 2px;
     left: 10px;
     color: #133950;
     font-weight: 900;
@@ -35,11 +35,20 @@
   .searchbar-nav_letters {
     font-family: typo;
     position: relative;
-    top: 4px;
+    top: 2px;
     left: 6px;
     color: #133950;
     font-weight: 900;
     font-size: 20px; }
+  .searchbar-nav_word {
+    font-family: typo;
+    font-size: 20px;
+    position: relative;
+    color: #133950;
+    font-weight: 900;
+    left: 1px;
+    top: 2px;
+    opacity: 0; }
 .searchbar-dropdown {
   width: 283px;
   height: 165px;
@@ -94,52 +103,52 @@
   left: 12px;
   transform: rotate(-36deg); }
   .stroke-1 {
-    width: 5px;
+    width: 10px;
     background: #133950;
     position: absolute;
     top: 114.5px;
     left: 110px;
-    height: 0.25px;
+    height: 0.75px;
     transform: rotate(-5deg); }
   .stroke-2 {
-    width: 5px;
+    width: 10px;
     background: #133950;
     position: absolute;
-    top: 110px;
-    left: 107px;
-    height: 0.25px;
+    top: 108px;
+    left: 106px;
+    height: 0.75px;
     transform: rotate(-51deg); }
   .stroke-3 {
-    width: 5px;
+    width: 10px;
     background: #133950;
     position: absolute;
-    top: 119px;
-    left: 109.5px;
-    height: 0.25px;
+    top: 122px;
+    left: 110.5px;
+    height: 0.75px;
     transform: rotate(28deg); }
   .stroke-4 {
-    width: 5px;
+    width: 10px;
     background: #133950;
     position: absolute;
     top: 114.5px;
-    left: 94px;
-    height: 0.25px;
+    left: 89px;
+    height: 0.75px;
     transform: rotate(4deg); }
   .stroke-5 {
-    width: 5px;
+    width: 10px;
     background: #133950;
     position: absolute;
-    top: 110px;
-    left: 96px;
-    height: 0.25px;
+    top: 108px;
+    left: 93px;
+    height: 0.75px;
     transform: rotate(40deg); }
   .stroke-6 {
-    width: 5px;
+    width: 10px;
     background: #133950;
     position: absolute;
-    top: 119px;
-    left: 95px;
-    height: 0.25px;
+    top: 122px;
+    left: 91px;
+    height: 0.75px;
     transform: rotate(140deg); }
 
 .bar {
@@ -150,12 +159,146 @@
   position: absolute;
   left: 156px;
   top: 103px;
-  animation: FadeBar 600ms infinite;
-  transition: all 600ms cubic-bezier(1, 0, 0, 1); }
+  animation: FadeBar 1s infinite;
+  transition: all 1s cubic-bezier(1, 0, 0, 1); }
 @keyframes FadeBar {
   0% {
     opacity: 0; }
   100% {
     opacity: 1; } }
+.results {
+  position: absolute;
+  background: #75BD89;
+  top: 157px;
+  left: 89px;
+  width: calc(427px - 36px);
+  padding: 0px 20px 0px 16px;
+  height: 47px;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between; }
+  .results-text {
+    color: white;
+    font-family: typo;
+    font-weight: 900;
+    font-size: 18px; }
+  .results-cross {
+    width: 2px;
+    height: 21px;
+    background: white;
+    transform: rotate(45deg); }
+    .results-cross::after {
+      width: 2px;
+      height: 21px;
+      content: "";
+      display: block;
+      background: white;
+      transform: rotate(-90deg); }
+
+.smallmagazine-1 {
+  position: absolute;
+  top: 244px;
+  left: 89px;
+  width: 211px; }
+
+.smallmagazine-2 {
+  position: absolute;
+  top: 244px;
+  left: 313px;
+  width: 211px; }
+
+.smallmagazine-3 {
+  position: absolute;
+  top: 395px;
+  left: 84px;
+  width: 211px; }
+
+.smallmagazine-4 {
+  position: absolute;
+  top: 396px;
+  left: 314px;
+  width: 211px;
+  /* */ }
+
+.circle {
+  z-index: 20;
+  display: none;
+  transform: scale(0); }
+
+.circle-logo {
+  opacity: 0;
+  /* */ }
+
+.circle-1 {
+  position: absolute;
+  top: 194px;
+  left: 28px;
+  transform-origin: bottom right; }
+
+.img-med {
+  width: 90px; }
+
+.logo-med {
+  width: 53px;
+  position: absolute;
+  top: 20px;
+  left: 18px; }
+
+.circle-2 {
+  position: absolute;
+  top: 205px;
+  left: 142px;
+  transform-origin: bottom right; }
+
+.img-large {
+  width: 126px;
+  top: 5px;
+  left: 42px; }
+
+.logo-large {
+  width: 74px;
+  position: absolute;
+  top: 30px;
+  left: 25px; }
+
+.circle-3 {
+  position: absolute;
+  top: 338px;
+  left: 20px;
+  transform-origin: bottom right; }
+
+.circle-4 {
+  position: absolute;
+  top: 427px;
+  left: 159px;
+  transform-origin: bottom right; }
+
+.circle-5 {
+  position: absolute;
+  top: 215px;
+  left: 343px;
+  transform-origin: bottom left; }
+
+.img-flip {
+  transform: scaleX(-1); }
+
+.circle-6 {
+  position: absolute;
+  top: 209px;
+  left: 439px;
+  transform-origin: bottom left; }
+
+.circle-7 {
+  position: absolute;
+  top: 273px;
+  left: 500px;
+  transform-origin: bottom left; }
+
+.circle-8 {
+  position: absolute;
+  top: 375px;
+  left: 356px;
+  transform-origin: bottom left; }
 
 /*# sourceMappingURL=style.css.map */

diff --git a/Fluidbook-presentation-p15/style.css.map b/Fluidbook-presentation-p15/style.css.map
index 342e5ecf30cea496969656f8457b18311c3c7953..417deec0d82917b4b9c7fffbb963778ea618aad6 100644 (file)
--- a/Fluidbook-presentation-p15/style.css.map
+++ b/Fluidbook-presentation-p15/style.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["style.sass"],
 "names": [],
 "file": "style.css"

diff --git a/Fluidbook-presentation-p15/style.sass b/Fluidbook-presentation-p15/style.sass
index b6c7b185e7c6ed24fd9f7a3a0d404b34934156eb..38f5faa5a0188c22b28207239cba738be4cb393b 100644 (file)
--- a/Fluidbook-presentation-p15/style.sass
+++ b/Fluidbook-presentation-p15/style.sass
@@ -4,6 +4,8 @@
 $searchbar-bg : #F3F3F3
 $darkblue: #133950
 $bar : #0C2C45
+$result: #75BD89
+$circle : rgba(25, 60, 85, 0.9)
 @font-face
   font-family: "typo"
   src: url("font.woff") format('woff')
@@ -11,7 +13,7 @@ $bar : #0C2C45
 .container
   width: 601px
   height: 583px
-  //background-image: url("bg.png")
+  //background-image: url("image/bg-circle.png")
   position: relative
 #canva
   position: absolute
@@ -30,7 +32,7 @@ $bar : #0C2C45
     &_letter
       font-family: typo
       position: relative
-      top: 4px
+      top: 2px
       left: 10px
       color: $darkblue
       font-weight: 900
@@ -38,11 +40,21 @@ $bar : #0C2C45
     &_letters
       font-family: typo
       position: relative
-      top: 4px
+      top: 2px
       left: 6px
       color: $darkblue
       font-weight: 900
       font-size: 20px
+    &_word
+      font-family: typo
+      font-size: 20px
+      position: relative
+      color: $darkblue
+      font-weight: 900
+      left: 1px
+      top: 2px
+      opacity: 0
+
   &-dropdown
     width: 283px
     height: 165px
@@ -96,53 +108,52 @@ $bar : #0C2C45
   left: 12px
   transform: rotate(-36deg)
   &-1
-    width: 5px
+    width: 10px
     background: $darkblue
     position: absolute
     top: 114.5px
     left: 110px
-    height: 0.25px
+    height: 0.75px
     transform: rotate(-5deg)
   &-2
-    width: 5px
+    width: 10px
     background: $darkblue
     position: absolute
-    top: 110px
-    left: 107px
-    height: 0.25px
+    top: 108px
+    left: 106px
+    height: 0.75px
     transform: rotate(-51deg)
   &-3
-    width: 5px
+    width: 10px
     background: $darkblue
     position: absolute
-    top: 119px
-    left: 109.5px
-    height: 0.25px
+    top: 122px
+    left: 110.5px
+    height: 0.75px
     transform: rotate(28deg)
-
   &-4
-    width: 5px
+    width: 10px
     background: $darkblue
     position: absolute
     top: 114.5px
-    left: 94px
-    height: 0.25px
+    left: 89px
+    height: 0.75px
     transform: rotate(4deg)
   &-5
-    width: 5px
+    width: 10px
     background: $darkblue
     position: absolute
-    top: 110px
-    left: 96px
-    height: 0.25px
+    top: 108px
+    left: 93px
+    height: 0.75px
     transform: rotate(40deg)
   &-6
-    width: 5px
+    width: 10px
     background: $darkblue
     position: absolute
-    top: 119px
-    left: 95px
-    height: 0.25px
+    top: 122px
+    left: 91px
+    height: 0.75px
     transform: rotate(140deg)
 .bar
   width: 2px
@@ -152,11 +163,126 @@ $bar : #0C2C45
   position: absolute
   left: 156px
   top: 103px
-  animation: FadeBar 600ms infinite
-  transition: all 600ms cubic-bezier(1, 0, 0, 1)
+  animation: FadeBar 1s infinite
+  transition: all 1s cubic-bezier(1, 0, 0, 1)
 
   @keyframes FadeBar
     0%
       opacity: 0
     100%
       opacity: 1
+.results
+  position: absolute
+  background: $result
+  top: 157px
+  left: 89px
+  width: calc(427px - 36px)
+  padding: 0px 20px 0px 16px
+  height: 47px
+  border-radius: 2px
+  display: flex
+  align-items: center
+  justify-content: space-between
+  &-text
+    color: white
+    font-family: typo
+    font-weight: 900
+    font-size: 18px
+  &-cross
+    width: 2px
+    height: 21px
+    background: white
+    transform: rotate(45deg)
+    &::after
+      width: 2px
+      height: 21px
+      content: ""
+      display: block
+      background: white
+      transform: rotate(-90deg)
+.smallmagazine-1
+  position: absolute
+  top: 244px
+  left: 89px
+  width: 211px
+.smallmagazine-2
+  position: absolute
+  top: 244px
+  left: 313px
+  width: 211px
+.smallmagazine-3
+  position: absolute
+  top: 395px
+  left: 84px
+  width: 211px
+.smallmagazine-4
+  position: absolute
+  top: 396px
+  left: 314px
+  width: 211px
+  /**/
+.circle
+  z-index: 20
+  display: none
+  transform: scale(0)
+.circle-logo
+  opacity: 0
+  /**/
+.circle-1
+  position: absolute
+  top: 194px
+  left: 28px
+  transform-origin: bottom right
+.img-med
+  width: 90px
+.logo-med
+  width: 53px
+  position: absolute
+  top: 20px
+  left: 18px
+.circle-2
+  position: absolute
+  top: 205px
+  left: 142px
+  transform-origin: bottom right
+.img-large
+  width: 126px
+  top: 5px
+  left: 42px
+.logo-large
+  width: 74px
+  position: absolute
+  top: 30px
+  left: 25px
+.circle-3
+  position: absolute
+  top: 338px
+  left: 20px
+  transform-origin: bottom right
+.circle-4
+  position: absolute
+  top: 427px
+  left: 159px
+  transform-origin: bottom right
+.circle-5
+  position: absolute
+  top: 215px
+  left: 343px
+  transform-origin: bottom left
+.img-flip
+  transform: scaleX(-1)
+.circle-6
+  position: absolute
+  top: 209px
+  left: 439px
+  transform-origin: bottom left
+.circle-7
+  position: absolute
+  top: 273px
+  left: 500px
+  transform-origin: bottom left
+.circle-8
+  position: absolute
+  top: 375px
+  left: 356px
+  transform-origin: bottom left
\ No newline at end of file