Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
  <div class="colmeia">
    <img src="https://image.flaticon.com/icons/svg/1497/1497536.svg">
  </div>
  <svg width="350px" height="300px" viewBox="0 0 423 311" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

    <path id="path" d="M0 234.209C0 234.209 40.123 150.588 86.9956 147.214C133.868 143.839 136.925 228.661 189.047 229.786C241.17 230.911 291.439 96.6796 330.047 79.7862C368.656 62.8929 353.312 164.928 328.547 162.286C303.783 159.644 270.438 103.803 273.047 63.2862C275.656 22.7699 301.564 2.55319 333.047 0.286205C364.531 -1.98078 419.689 7.80619 421.547 81.2862C423.406 154.766 349.547 309.286 349.547 309.286" transform="translate(0.5 0.5)" id="New-shape" fill="none" stroke="#808080" stroke-width="0.5" />
  </svg>
  <g id="trageto">
    <div class="bee">
      <img class="abelha" src="https://i.pinimg.com/originals/83/ec/d8/83ecd80b9e32f0447f23e5545f8ac420.png">
    </div>
  </g>
  <div class="grama">
    <img class="folhas" src="https://image.flaticon.com/icons/svg/1497/1497189.svg" width="150px" height="100px">
  </div>
<div class="medias">
 <div class="icons-container">
   <a href="https://github.com/gilmara-barros" target="_blank">
     <div class="icon github"></div>
   </a> 
   <a href="https://dribbble.com/Mara-Barros" target="_blank">
     <div class="icon dribbble"></div>
   </a>  
   <a href="https://twitter.com/Mara_barrosc" target="_blank">
     <div class="icon twitter"></div>
   </a> 
   <!--<div class="icon page"></div> -->
  </div> 
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
  background-color: #1d1d1d;
  color: white;
  
  margin: 0;
  padding: 15px;
  
  width: 550px !IMPORTANT;
  height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  top: -15%;
  left: 25%;
}

#logo {
  width: 70%;
  max-width: 250px;
  margin-left: -12%;
}
h2{
  color:
}
h1 { font-weight: 400; }

/* Hide flash at start */
body > * {
  opacity: 0;
}


.bee{
  width:50px;
  height: 50px;
  background: none;
}

.colmeia{
  width: 150px;
  position: relative;
  top: 40%;
  right: 30%;
}
img {
    width: 150px;
}
.abelha{
  width: 50px;
  /*transform: rotate(45deg);*/
  animation: move 3s ease;
}
@keyframes move{
  0%{
    transform: rotate(45deg);
  }
  49%{
    transform: rotate(45deg);
  }
  50%{
    transform:rotate(90deg)
  }
  100%{
    transform:rotate(10deg)
  }
}
.grama{
    position: relative;
    top: -20%;
    left: 20%;
}

.icon{
  width: 25px;
  height: 25px;
  background: blue;
  margin: 5px;
}

.dribbble{
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM0NDRCNTQ7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7ZmlsbDojNzZFQ0ZGO30KCS5zdDN7ZmlsbDojRTRFN0U3O30KCS5zdDR7ZmlsbDojRkY2OTdCO30KCS5zdDV7ZmlsbDojNjU5RUM5O30KCS5zdDZ7ZmlsbDojNDQ0QjU0O30KCS5zdDd7ZmlsbDojQTRGNEM0O30KCS5zdDh7ZmlsbDojMDZBMThDO30KCS5zdDl7ZmlsbDojOEZFNUI1O30KCS5zdDEwe29wYWNpdHk6MC41O2ZpbGw6IzA2QTE4Qzt9Cgkuc3QxMXtvcGFjaXR5OjAuNTt9Cgkuc3QxMntmaWxsOiNGRkRCQUI7fQoJLnN0MTN7ZmlsbDojRDE4NjY5O30KCS5zdDE0e2ZpbGw6I0ZDRjA5RDt9Cgkuc3QxNXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQoJLnN0MTZ7ZmlsbDojRURFQ0VCO30KCS5zdDE3e2ZpbGw6IzRGQkJDNjt9Cgkuc3QxOHtkaXNwbGF5Om5vbmU7fQoJLnN0MTl7ZGlzcGxheTppbmxpbmU7ZmlsbDojNUVDOEQzO30KCS5zdDIwe2Rpc3BsYXk6aW5saW5lO30KCS5zdDIxe2ZpbGw6I0VENzRBNTt9Cgkuc3QyMntmaWxsOiNDMTI3NjI7fQo8L3N0eWxlPjxnPjxjaXJjbGUgY2xhc3M9InN0MjEiIGN4PSI2NCIgY3k9IjY0IiByPSI0NSIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzQsNDIuMWMtMC43LDAtMS40LTAuMi0xLjktMC43Yy0xLjMtMS4xLTEuNS0yLjktMC40LTQuMkMzOS43LDI3LjUsNTEuNSwyMiw2NCwyMmMxLjcsMCwzLDEuMywzLDMgICBzLTEuMywzLTMsM2MtMTAuNywwLTIwLjgsNC44LTI3LjcsMTMuMUMzNS43LDQxLjgsMzQuOCw0Mi4xLDM0LDQyLjF6Ii8+PC9nPjxwYXRoIGNsYXNzPSJzdDIyIiBkPSJNMTA4LjcsNjUuNmwtNy41LTIuMWMtOC44LTIuNS0xNy45LTIuOC0yNi42LTFjLTEuMS0yLjYtMi4zLTUuMi0zLjYtNy44YzEwLjItNC45LDE5LjQtMTEuOCwyNy4xLTIwLjUgIGMxLjEtMS4yLTMuNC01LjItNC41LTRjLTcuMiw4LjItMTUuOCwxNC42LTI1LjMsMTkuMWMtMi44LTUuMi01LjgtMTAuMi05LjEtMTVjLTAuOS0xLjQtMi44LTEuNy00LjItMC44Yy0xLjQsMC45LTEuNywyLjgtMC44LDQuMiAgYzMuMSw0LjUsNS45LDkuMiw4LjUsMTRjLTkuOCwzLjgtMjAuNSw1LjYtMzEuNCw1LjFjLTEuNy0wLjEtMy4xLDEuMi0zLjEsMi45Yy0wLjEsMS43LDEuMiwzLjEsMi45LDMuMWMxLjIsMCwyLjQsMC4xLDMuNiwwLjEgIGMxMC43LDAsMjEuMS0yLDMwLjgtNS44YzEuMSwyLjMsMi4yLDQuNiwzLjIsN2MtMi44LDAuOS01LjYsMi04LjQsMy40QzQ3LjcsNzMuOSwzOCw4NC44LDMzLjEsOTguMWMtMC42LDEuNiw1LjIsMy4zLDUuNiwyLjEgIGM1LjYtMTUuMSwxNy45LTI2LDMyLjQtMzAuNWM0LjUsMTEuNCw3LjcsMjMuMiw5LjUsMzUuMmMwLjIsMS41LDYuMiwwLjcsNS45LTAuOWMtMS44LTEyLjItNS4xLTI0LjItOS42LTM1LjggIGM3LjMtMS40LDE1LjEtMS4xLDIyLjYsMWw3LjUsMi4xQzEwOC42LDcxLjgsMTEwLjMsNjYsMTA4LjcsNjUuNnoiLz48Zz48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNy4xIiBjeT0iNTEuMiIgcj0iMyIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNjQsMTEyYy0yNi41LDAtNDgtMjEuNS00OC00OHMyMS41LTQ4LDQ4LTQ4YzQuOSwwLDkuNywwLjcsMTQuMywyLjJjNy40LDIuMywxNC4yLDYuNCwxOS43LDExLjkgICBDMTA3LDM5LjEsMTEyLDUxLjIsMTEyLDY0QzExMiw5MC41LDkwLjUsMTEyLDY0LDExMnogTTY0LDIyYy0yMy4yLDAtNDIsMTguOC00Miw0MnMxOC44LDQyLDQyLDQyYzIzLjIsMCw0Mi0xOC44LDQyLTQyICAgYzAtMTEuMi00LjQtMjEuOC0xMi4zLTI5LjdjLTQuOC00LjgtMTAuOC04LjQtMTcuMi0xMC40QzcyLjUsMjIuNiw2OC4zLDIyLDY0LDIyeiIvPjwvZz48L3N2Zz4=');
}
.github{
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM0NDRCNTQ7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7ZmlsbDojNzZFQ0ZGO30KCS5zdDN7ZmlsbDojRTRFN0U3O30KCS5zdDR7ZmlsbDojRkY2OTdCO30KCS5zdDV7ZmlsbDojNjU5RUM5O30KCS5zdDZ7ZmlsbDojNDQ0QjU0O30KCS5zdDd7ZmlsbDojQTRGNEM0O30KCS5zdDh7ZmlsbDojMDZBMThDO30KCS5zdDl7ZmlsbDojOEZFNUI1O30KCS5zdDEwe29wYWNpdHk6MC41O2ZpbGw6IzA2QTE4Qzt9Cgkuc3QxMXtvcGFjaXR5OjAuNTt9Cgkuc3QxMntmaWxsOiNGRkRCQUI7fQoJLnN0MTN7ZmlsbDojRDE4NjY5O30KCS5zdDE0e2ZpbGw6I0ZDRjA5RDt9Cgkuc3QxNXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQoJLnN0MTZ7ZmlsbDojRURFQ0VCO30KCS5zdDE3e2ZpbGw6IzRGQkJDNjt9Cgkuc3QxOHtkaXNwbGF5Om5vbmU7fQoJLnN0MTl7ZGlzcGxheTppbmxpbmU7ZmlsbDojNUVDOEQzO30KCS5zdDIwe2Rpc3BsYXk6aW5saW5lO30KCS5zdDIxe2ZpbGw6I0VENzRBNTt9Cgkuc3QyMntmaWxsOiNDMTI3NjI7fQo8L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xMDQuMSw0Mi4yYy0wLjgtNC45LTIuMS03LjQtNS4xLTEwLjhjMC41LTMuMywwLjYtNi42LDAuMi05LjljLTAuMS0wLjgtMC4yLTEuNS0wLjMtMi4zICAgYy0wLjItMS4yLTAuNS0yLjQtMC44LTMuNkw5OCwxNWMwLTAuMi0wLjEtMC4zLTAuMi0wLjVjMCwwLTAuMS0wLjEtMC4xLTAuMWMtMC4xLTAuMS0wLjEtMC4yLTAuMi0wLjNjMC0wLjEtMC4xLTAuMS0wLjEtMC4xICAgYy0wLjEtMC4xLTAuMS0wLjItMC4yLTAuMmMwLDAtMC4xLTAuMS0wLjEtMC4xYy0wLjEtMC4xLTAuMi0wLjEtMC4zLTAuMmMwLDAtMC4xLTAuMS0wLjEtMC4xYy0wLjEtMC4xLTAuMy0wLjEtMC40LTAuMiAgIGMwLDAsMCwwLTAuMSwwYy0wLjItMC4xLTAuMy0wLjEtMC41LTAuMWMwLDAtMC4xLDAtMC4yLDBjLTAuMSwwLTAuMiwwLTAuMywwYzAsMCwwLDAtMC4xLDBjLTAuMiwwLTAuNCwwLTAuNywwLjFMOTQsMTMuMyAgIGMtMS4zLDAuMy0yLjUsMC43LTMuNywxLjJDODguNSwxNS4yLDg2LjcsMTYsODUsMTdjLTEuNywxLTMuMywyLjEtNC45LDMuM2MtMi41LTAuNy01LjEtMS4zLTcuOC0xLjZjLTIuNy0wLjQtNS41LTAuNi04LjQtMC42ICAgcy01LjcsMC4yLTguNCwwLjZjLTIuNywwLjQtNS4zLDAuOS03LjgsMS42QzQ2LjMsMTkuMSw0NC43LDE4LDQzLDE3Yy0xLjctMS0zLjUtMS44LTUuMy0yLjVjLTEuMi0wLjUtMi41LTAuOS0zLjctMS4ybC0wLjYtMC4yICAgQzMzLjEsMTMsMzIuOSwxMywzMi43LDEzYzAsMCwwLDAtMC4xLDBjLTAuMSwwLTAuMiwwLTAuMywwYzAsMC0wLjEsMC0wLjEsMGMtMC4yLDAtMC4zLDAuMS0wLjUsMC4xYzAsMCwwLDAsMCwwICAgYy0wLjEsMC4xLTAuMywwLjEtMC40LDAuMmMwLDAtMC4xLDAuMS0wLjEsMC4xYy0wLjEsMC4xLTAuMiwwLjEtMC4zLDAuMmMwLDAtMC4xLDAuMS0wLjEsMC4xYy0wLjEsMC4xLTAuMiwwLjEtMC4yLDAuMiAgIGMwLDAtMC4xLDAuMS0wLjEsMC4xYy0wLjEsMC4xLTAuMSwwLjItMC4yLDAuM2MwLDAtMC4xLDAuMS0wLjEsMC4xQzMwLjEsMTQuNywzMCwxNC45LDMwLDE1bC0wLjIsMC42Yy0wLjUsMS45LTAuOSwzLjktMS4xLDUuOCAgIGMtMC4xLDAuNy0wLjEsMS4zLTAuMiwycy0wLjEsMS4zLTAuMSwyYzAsMiwwLjIsNCwwLjUsNS45Yy0xLjksMi4xLTMuMSwzLjktMy45LDYuMWMtMC41LDEuMy0wLjksMi44LTEuMiw0LjcgICBjLTAuMywxLjUtMC40LDMuMS0wLjQsNC42djBsMCwwYzAsMTAsNS4yLDE5LjEsMTMuNSwyNC4yYzEuMiwwLjcsMi40LDEuNCwzLjgsMS45QzQ3LjIsNzUuNiw1NS4xLDc3LDY0LDc3czE2LjgtMS40LDIzLjItNC4xICAgYzEuMy0wLjUsMi42LTEuMiwzLjgtMS45YzguMy01LjEsMTMuNS0xNC4yLDEzLjUtMjQuMkMxMDQuNSw0NS4zLDEwNC40LDQzLjcsMTA0LjEsNDIuMnoiLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNODcsMTA5Yy0xLjEsMC0yLTAuOS0yLTJsMC03YzAtMTEuNi05LjQtMjEtMjEtMjFjLTguNCwwLTE1LjYsNC45LTE4LjksMTJoLTUuMmMtMi42LDAtNS0xLjQtNi4zLTMuNSAgIGwtMS45LTMuMmMtMi0zLjItNC44LTUuOC04LjItNy4zbC0zLjEtMS41Yy0xLjUtMC43LTMuMy0wLjEtNCwxLjVjLTAuNywxLjUtMC4xLDMuMywxLjUsNGwzLjEsMS41YzIuMywxLjEsNC4zLDIuOCw1LjYsNWwxLjksMy4yICAgYzIuNCw0LDYuOCw2LjQsMTEuNCw2LjRoMy40Yy0wLjEsMS0wLjIsMi0wLjIsM2wwLDdjMCwxLjEtMC45LDItMiwyYy0xLjcsMC0zLDEuMy0zLDNzMS4zLDMsMywzYzQuNCwwLDgtMy42LDgtOGwwLTcgICBjMC00LjksMi40LTkuMiw2LTEydjE2LjljMCwzLjgtMS41LDcuMy00LjEsMTBjLTEuMiwxLjItMS4yLDMuMSwwLDQuMmMwLjYsMC42LDEuNCwwLjksMi4xLDAuOXMxLjUtMC4zLDIuMS0wLjkgICBjMy44LTMuOCw1LjktOC44LDUuOS0xNC4yVjg1LjNjMS0wLjIsMi0wLjMsMy0wLjNzMiwwLjEsMywwLjN2MTkuNmMwLDUuNCwyLjEsMTAuNCw1LjksMTQuMmMwLjYsMC42LDEuNCwwLjksMi4xLDAuOSAgIHMxLjUtMC4zLDIuMS0wLjljMS4yLTEuMiwxLjItMy4xLDAtNC4yYy0yLjctMi43LTQuMS02LjItNC4xLTEwVjg4YzMuNiwyLjcsNiw3LjEsNiwxMmwwLDdjMCw0LjQsMy42LDgsOCw4YzEuNywwLDMtMS4zLDMtMyAgIFM4OC43LDEwOSw4NywxMDl6Ii8+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTk0LDU0LjRjMC0wLjQsMC0wLjgsMC0xLjF2MGMwLTktNy4zLTE2LjMtMTYuMy0xNi4zSDUwLjNjLTksMC0xNi4zLDcuMy0xNi4zLDE2LjN2MGMwLDAuNCwwLDAuOCwwLDEuMSAgICBjMC40LDYuOSw1LjUsMTIuNSwxMi4yLDE0LjRDNTEuNSw3MC4yLDU3LjUsNzEsNjQsNzFzMTIuNS0wLjgsMTcuOC0yLjJDODguNCw2Ni45LDkzLjUsNjEuMyw5NCw1NC40eiIvPjwvZz48Zz48Y2lyY2xlIGNsYXNzPSJzdDYiIGN4PSI0NyIgY3k9IjU1IiByPSI0LjUiLz48L2c+PGc+PGNpcmNsZSBjbGFzcz0ic3Q2IiBjeD0iODEiIGN5PSI1NSIgcj0iNC41Ii8+PC9nPjwvZz48L3N2Zz4=')
}
.twitter{ background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM0NDRCNTQ7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7ZmlsbDojNzZFQ0ZGO30KCS5zdDN7ZmlsbDojRTRFN0U3O30KCS5zdDR7ZmlsbDojRkY2OTdCO30KCS5zdDV7ZmlsbDojNjU5RUM5O30KCS5zdDZ7ZmlsbDojNDQ0QjU0O30KCS5zdDd7ZmlsbDojQTRGNEM0O30KCS5zdDh7ZmlsbDojMDZBMThDO30KCS5zdDl7ZmlsbDojOEZFNUI1O30KCS5zdDEwe29wYWNpdHk6MC41O2ZpbGw6IzA2QTE4Qzt9Cgkuc3QxMXtvcGFjaXR5OjAuNTt9Cgkuc3QxMntmaWxsOiNGRkRCQUI7fQoJLnN0MTN7ZmlsbDojRDE4NjY5O30KCS5zdDE0e2ZpbGw6I0ZDRjA5RDt9Cgkuc3QxNXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQoJLnN0MTZ7ZmlsbDojRURFQ0VCO30KCS5zdDE3e2ZpbGw6IzRGQkJDNjt9Cjwvc3R5bGU+PGc+PGc+PHBhdGggY2xhc3M9InN0MiIgZD0iTTEwMC4yLDQyLjVjLTAuNCwwLjQtMC43LDEtMC42LDEuNmMwLjEsMS45LDIuNiw0Ny40LTQ1LjcsNTguOGMtMC4yLDAtMTkuNCw0LTM2LTQuMmM3LTAuMiwxNy4xLTIsMjQuMS05LjkgICAgYzAuNS0wLjYsMC43LTEuNCwwLjMtMi4yYy0wLjMtMC43LTEtMS4yLTEuOC0xLjJjMCwwLDAsMCwwLDBjLTAuMSwwLjEtMTAuNiwwLTE1LjUtMTBjMS45LDAuMSw0LjMsMCw2LjMtMC45ICAgIGMwLjgtMC40LDEuMy0xLjIsMS4yLTJjLTAuMS0wLjktMC43LTEuNi0xLjYtMS43Yy0wLjUtMC4xLTEyLjMtMi43LTEzLjktMTUuNWMxLjgsMC44LDQuMSwxLjQsNi4zLDEuMWMwLjgtMC4xLDEuNC0wLjcsMS42LTEuNCAgICBjMC4yLTAuOCwwLTEuNi0wLjYtMi4xYy0wLjUtMC40LTExLjUtMTAuMi02LjMtMjIuOWM1LjcsNiwyMi41LDIxLjQsNDIuOSwyMC4zYzAuNiwwLDEuMS0wLjMsMS41LTAuOGMwLjQtMC41LDAuNS0xLjEsMC4zLTEuNyAgICBjLTAuNC0xLjUtMC42LTMuMS0wLjYtNC43YzAtMTAuNCw4LjMtMTguOSwxOC42LTE4LjljNSwwLDkuNywyLDEzLjIsNS42YzAuNCwwLjQsMC45LDAuNiwxLjQsMC42YzIuMSwwLDUuNi0wLjIsOS42LTEuOCAgICBjLTEuMSwxLjQtMi44LDMuMS01LjMsNS4xYy0wLjcsMC41LTEsMS41LTAuNiwyLjNjMC4zLDAuOCwxLjIsMS4zLDIsMS4zYzAuNSwwLDIuOS0wLjIsNS42LTAuOEMxMDUsMzcuOSwxMDMsMzkuOSwxMDAuMiw0Mi41eiIvPjwvZz48Zz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzIuMSw2NS4xYzAuOC0wLjEsMS40LTAuNywxLjYtMS40YzAuMi0wLjgsMC0xLjYtMC42LTIuMWMtMC41LTAuNC0xMS41LTEwLjItNi4zLTIyLjkgICAgIGM1LjcsNiwyMi41LDIxLjQsNDIuOSwyMC4zYzAuNiwwLDEuMS0wLjMsMS41LTAuOGMwLjQtMC41LDAuNS0xLjEsMC4zLTEuN2MtMC40LTEuNS0wLjYtMy4xLTAuNi00LjdjMC0xMC40LDguMy0xOC45LDE4LjYtMTguOSAgICAgYzMuMywwLDE0LjItMywxNS4zLTQuNGMtNCwxLjYtNy41LDEuOC05LjYsMS44Yy0wLjUsMC0xLTAuMi0xLjQtMC42Yy0zLjUtMy42LTguMi01LjYtMTMuMi01LjZDNzAuMywyNC4xLDYyLDMyLjUsNjIsNDIuOSAgICAgYzAsMS42LDAuMiwzLjIsMC42LDQuN2MwLjEsMC42LDAsMS4yLTAuMywxLjdjLTAuNCwwLjUtMC45LDAuOC0xLjUsMC44Yy0yMC40LDEuMi0zNy4yLTE0LjMtNDIuOS0yMC4zICAgICBjLTUuMiwxMi42LDUuOCwyMi40LDYuMywyMi45YzAuNiwwLjUsMC44LDEuMywwLjYsMi4xYy0wLjIsMC44LTAuOSwxLjMtMS42LDEuNGMtMi4zLDAuMy00LjUtMC4zLTYuMy0xLjEgICAgIGMxLjEsOC41LDYuNiwxMi41LDEwLjQsMTQuM2MtMC43LTEuNi0xLjItMy4zLTEuNS01LjRDMjcuNSw2NC44LDI5LjgsNjUuNSwzMi4xLDY1LjF6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MC4xLDgzLjRjMC44LTAuNCwxLjMtMS4yLDEuMi0yYy0wLjEtMC45LTAuNy0xLjYtMS42LTEuN2MtMC4zLTAuMS01LTEuMS04LjgtNC45Yy0xLjgsMC43LTQsMC44LTUuOSwwLjcgICAgIGMyLjUsNS4xLDYuNSw3LjcsOS44LDguOUMzNi41LDg0LjMsMzguNSw4NC4xLDQwLjEsODMuNHoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTUwLjgsOTcuN2MwLjUtMC42LDAuNy0xLjQsMC4zLTIuMmMtMC4zLTAuNy0xLTEuMi0xLjgtMS4yYzAsMCwwLDAsMCwwYy0wLjEsMC01LDAtOS43LTMuMiAgICAgYy02LjgsNS45LTE1LjUsNy40LTIxLjgsNy42YzguNSw0LjIsMTcuOCw1LjIsMjQuNyw1LjJDNDUuNSwxMDIuNCw0OC40LDEwMC40LDUwLjgsOTcuN3oiLz48L2c+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yNC4yLDU1LjhjLTAuNywwLTEuNC0wLjItMi0wLjdjLTAuNS0wLjUtMTMuMS0xMS43LTcuMS0yNi4zYzAuNC0wLjksMS4yLTEuNiwyLjItMS44YzEtMC4yLDIsMC4xLDIuNywwLjkgICAgYzE2LjcsMTcuNSwzMi4zLDE5LjUsMzkuMywxOS40Yy0wLjMtMS40LTAuNC0yLjgtMC40LTQuMmMwLTEyLDkuNy0yMS45LDIxLjYtMjEuOWM1LjcsMCwxMSwyLjIsMTUsNi4yYzYuNy0wLjQsMTAuNy0zLjcsMTAuOC0zLjcgICAgYzEuMy0xLjEsMy4yLTAuOSw0LjIsMC4zYzEuMSwxLjMsMC45LDMuMi0wLjMsNC4yYy0wLjIsMC4yLTUuOCw0LjktMTUsNS4yYy0wLjEsMC0wLjEsMC0wLjIsMGMtMS4zLDAtMi42LTAuNi0zLjUtMS41ICAgIGMtMi45LTMtNi45LTQuNy0xMS4xLTQuN0M3MiwyNy4xLDY1LDM0LjIsNjUsNDIuOWMwLDEuMywwLjIsMi43LDAuNSw0YzAuNCwxLjUsMC4xLDMtMC44LDQuMmMtMC45LDEuMi0yLjMsMi0zLjgsMiAgICBjLTE4LDEtMzMuMi05LjktNDEuNC0xNy40Yy0wLjYsOC40LDYuMywxNC41LDYuNiwxNC44YzEuMiwxLjEsMS40LDMsMC4zLDQuMkMyNS45LDU1LjQsMjUsNTUuOCwyNC4yLDU1Ljh6IE05NS45LDI3LjYgICAgQzk1LjksMjcuNiw5NS45LDI3LjYsOTUuOSwyNy42Qzk1LjksMjcuNiw5NS45LDI3LjYsOTUuOSwyNy42eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNOTkuNiw0Ny4xYy0xLDAtMi0wLjUtMi42LTEuNWMtMC44LTEuNC0wLjMtMy4zLDEuMS00LjFjNS40LTMuMSwxMS0xMC4yLDExLjEtMTAuM2MxLTEuMywyLjktMS41LDQuMi0wLjUgICAgYzEuMywxLDEuNSwyLjksMC41LDQuMmMtMC4zLDAuMy02LjQsOC4xLTEyLjgsMTEuOEMxMDAuNiw0Ni45LDEwMC4xLDQ3LjEsOTkuNiw0Ny4xeiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMzAuOCw3My43Yy0wLjIsMC0wLjQsMC0wLjYtMC4xYy0wLjYtMC4xLTE0LjQtMy4yLTE2LjMtMTguMWMtMC4yLTEuNiwxLTMuMSwyLjYtMy40YzEuNi0wLjIsMy4xLDEsMy40LDIuNiAgICBjMS40LDEwLjcsMTEuMiwxMi45LDExLjYsMTNjMS42LDAuMywyLjcsMS45LDIuMywzLjZDMzMuNCw3Mi44LDMyLjIsNzMuNywzMC44LDczLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik00MC41LDg4LjVMNDAuNSw4OC41Yy0xLjcsMC4xLTMuOC0wLjQtNS4xLTAuOGMtNC4xLTEuMi05LjgtNC0xMy4xLTExYy0wLjctMS41LTAuMS0zLjMsMS40LTQgICAgYzEuNS0wLjcsMy4zLTAuMSw0LDEuNGMzLjgsNy45LDExLjksOC4zLDEyLjYsOC40YzEuNy0wLjEsMy4yLDEuMywzLjIsM0M0My41LDg3LjEsNDIuMSw4OC41LDQwLjUsODguNXogTTM4LjgsODIuOSAgICBDMzguOCw4Mi45LDM4LjgsODIuOSwzOC44LDgyLjlDMzguOCw4Mi45LDM4LjgsODIuOSwzOC44LDgyLjl6IE0zOC44LDgyLjlDMzguOCw4Mi45LDM4LjgsODIuOSwzOC44LDgyLjkgICAgQzM4LjgsODIuOSwzOC44LDgyLjksMzguOCw4Mi45eiBNMzguOCw4Mi45QzM4LjgsODIuOSwzOC44LDgyLjksMzguOCw4Mi45QzM4LjgsODIuOSwzOC44LDgyLjksMzguOCw4Mi45eiBNMzguOCw4Mi45ICAgIEMzOC44LDgyLjksMzguOCw4Mi45LDM4LjgsODIuOUMzOC44LDgyLjksMzguOCw4Mi45LDM4LjgsODIuOXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0NiIgZD0iTTQwLjYsOTVjLTAuMiwwLTAuNCwwLTAuNi0wLjFjLTAuMiwwLTAuNC0wLjEtMC42LTAuMmMtMC4yLTAuMS0wLjQtMC4yLTAuNS0wLjNjLTAuMi0wLjEtMC4zLTAuMi0wLjUtMC40ICAgIGMtMC4xLTAuMS0wLjMtMC4zLTAuNC0wLjVjLTAuMS0wLjItMC4yLTAuMy0wLjMtMC41Yy0wLjEtMC4yLTAuMS0wLjQtMC4yLTAuNmMwLTAuMi0wLjEtMC40LTAuMS0wLjZjMC0wLjIsMC0wLjQsMC4xLTAuNiAgICBjMC0wLjIsMC4xLTAuNCwwLjItMC42YzAuMS0wLjIsMC4yLTAuNCwwLjMtMC41YzAuMS0wLjIsMC4yLTAuMywwLjQtMC41YzAuMS0wLjEsMC4zLTAuMywwLjUtMC40YzAuMi0wLjEsMC4zLTAuMiwwLjUtMC4zICAgIGMwLjItMC4xLDAuNC0wLjEsMC42LTAuMmMwLjQtMC4xLDAuOC0wLjEsMS4yLDBjMC4yLDAsMC40LDAuMSwwLjYsMC4yYzAuMiwwLjEsMC40LDAuMiwwLjUsMC4zYzAuMiwwLjEsMC4zLDAuMiwwLjUsMC40ICAgIHMwLjMsMC4zLDAuNCwwLjVzMC4yLDAuMywwLjMsMC41YzAuMSwwLjIsMC4xLDAuNCwwLjIsMC42YzAsMC4yLDAuMSwwLjQsMC4xLDAuNmMwLDAuMiwwLDAuNC0wLjEsMC42YzAsMC4yLTAuMSwwLjQtMC4yLDAuNiAgICBjLTAuMSwwLjItMC4yLDAuNC0wLjMsMC41cy0wLjIsMC4zLTAuNCwwLjVjLTAuMSwwLjEtMC4zLDAuMy0wLjUsMC40Yy0wLjIsMC4xLTAuMywwLjItMC41LDAuM2MtMC4yLDAuMS0wLjQsMC4xLTAuNiwwLjIgICAgQzQxLDk0LjksNDAuOCw5NSw0MC42LDk1eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMTcuOSwxMDEuN2MtMS42LDAtMy0xLjMtMy0yLjljMC0xLjcsMS4zLTMsMi45LTMuMWM1LjMtMC4xLDEwLjEtMS4yLDE0LjEtMy4xYzEuNS0wLjcsMy4zLTAuMSw0LDEuNCAgICBjMC43LDEuNSwwLjEsMy4zLTEuNCw0QzI5LjcsMTAwLjMsMjQuMSwxMDEuNSwxNy45LDEwMS43QzE3LjksMTAxLjcsMTcuOSwxMDEuNywxNy45LDEwMS43eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNDIuMywxMDYuOWMtMywwLTYuNC0wLjItMTAtMC43Yy0xLjYtMC4yLTIuOC0xLjgtMi41LTMuNGMwLjItMS42LDEuOC0yLjgsMy40LTIuNWMxMC44LDEuNiwyMC0wLjMsMjAuMS0wLjMgICAgQzk5LDg5LjEsOTYuNyw0Ni4xLDk2LjYsNDQuM2MtMC4xLTEuNywxLjEtMy4xLDIuOC0zLjJjMS43LTAuMSwzLjEsMS4xLDMuMiwyLjhjMC4xLDIsMi43LDQ5LjktNDgsNjEuOSAgICBDNTQuMiwxMDUuOSw0OS4zLDEwNi45LDQyLjMsMTA2Ljl6Ii8+PC9nPjwvZz48L3N2Zz4=')
}

.medias{
    display: flex;
    width: 140px;
    background: NONE;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    /*box-shadow: inset 0px 0px 4px 0px #280648d6;*/
  position: relative;
    left: -80%;
    top: 15%;
}
.icons-container {
    display: inline-flex;
}
              
            
!

JS

              
                gsap.set("body > *", {autoAlpha: 1});

const tl = gsap.timeline({delay: 0.5});

gsap.registerPlugin(MotionPathPlugin);

gsap.to("#trageto", {
  duration: 8, 
  repeat: -1,
  repeatDelay: 3,
  yoyo: true,
  ease: "ease-in",
  motionPath:{
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.5]
  }
});
              
            
!
999px

Console