<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
    <link rel="stylesheet" href="/style.css">
    
<style>
  
  #bot-details-page .btn-like {
  font: 600 50px "Karla", sans-serif;
    animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
  }
  #bot-details-page a{
  color: #c8d0e8
  }
  
  #bot-details-page strong {
    color: #d63737;
    font-weight: 500000;
    font-size: 150%;
}
  
 #bot-details-page .longdescription .content {
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2), 0px 0px 8px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: linear-gradient(110deg, #5792e1 60%, #304da4 60%);
}
  
#bot-details-page .bot-name {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
    .btn-orange {
      animation: colorchange 50s; 
      -webkit-animation: colorchange 50s; 
    }

   @keyframes colorchange
    {
      0%   {background: red;}
      25%  {background: yellow;}
      50%  {background: blue;}
      75%  {background: green;}
      100% {background: red;}
    }

   @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: red;}
      25%  {background: yellow;}
      50%  {background: blue;}
      75%  {background: green;}
      100% {background: red;}
    }
    
   @keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
    
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

#bot-details-page .bot-img {
    animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


.bot-img img {
    background: transparent;
}

.output {
  display:flex;
  flex-direction:row;
  width:75%;
  margin:0 auto;
  justify-content:space-around
}

.columns .bot-img {
    box-shadow: none !important;
}

.item-one {
  margin-right:auto
}


.gone:target {
  animation: key 1s ;
  opacity:1;
  display:block;
  
}

.gone {
  display:none;
  background-color:lightblue;
  width:75%;
  margin:0 auto;
}

@keyframes key {
  from{
    transform:scale(0.1);
    opacity:0;
  }
  to {
    transform:scale(1);
    opacity:1
  }
}


:root {
  background-color:lightblue
}

h1 ~ p {
  color:red
}

.gone:first-child{
  color:green
}

.gone:last-child{
  color:yellow
}

</style>
    
    
    <script src="/script.js" defer></script>
  </head>  
  <body>
  <br>
 
  <p style="text-align:center;">Video Demos</p>     <hr>
  <br><br>
     <p style="text-align:center;">Find Characters</p>
<div style="text-align:center"> 
<video width="550" height="400"  loop muted controls>
  <source type="video/mp4" src="https://i.imgur.com/HzufcpD.mp4" title="Catch/View/Data Loomians!">
</video>
  </div>
  <br><br>
  <br>
    <p style="text-align:center;">Command showcase</p>
  <div style="text-align:center"> 
<video width="550" height="400" loop muted controls>
  <source type="video/mp4" src="https://i.imgur.com/7U7WI3i.mp4" title="Sell/Buy Loomians!">
</video>
  </div>
    <br>
    <div class="output">
      </div>
      <ul>
        <br>
        <br>
        <br><br><br><br>
  <p style="text-align:center;"><b><strong>Loomicord</strong></b></p>
        <hr>
        <li  style="text-align:center; list-style: none;"><a href="#c-a">Info</a></li>
        <li  style="text-align:center; list-style: none;"><a href="#c-b">Commands</a></li>
        <li  style="text-align:center; list-style: none;"><a href="#c-c">Contact</a></li>
      </ul>
    </div>
    <div class="parent-gone">
    <div id="c-a" class="gone">
      <h1>
        Info
      </h1>
      <p>
        Loomicord allows you to collect characters from your favorite games, anime, shows, and more. Collect hundreds of them and battle in PVP or trade them off! Can you collect them all?
      </p>
    </div>
    <div id="c-b" class="gone">
      <h1>
        Commands
      </h1>
      <ul style="list-style-type:disc;">
  <li>;help</li>
  <li>;find</li>
  <li>;trade</li>
  <li>;battle</li>
  <li>;daily</li>
  <li>;characterse</li>
  <li>;info</li>
  <li>;sell</li>
  <li>;profile</li>
  <li>;settings</li>
  <li>;favorite</li>
  <li>;shop</li>
  <li>;event</li>
  <li>;quest</li>
  <li>;chest</li>
</ul>  
    </div>
    <div id="c-c" class="gone">
    </div>
    </div>
  </body>
</html>





    
    
<a href="https://top.gg/bot/685337576810610734" >
  <img src="https://top.gg/api/widget/upvotes/685337576810610734.svg" alt="Loomian Loomicord 3.0" />
</a>

Loomicord

A gotcha bot made for catching loomians from loomian legacy allowing you to catch them all!

Voting for Loomicord

Do you want to support us?