<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<img src="https://support.mimo.org/hc/theming_assets/01HZM5S83BW0QAQ6X8RRY8V5F5" alt="Mimo Logo" width="150">

<h1>Mimo</h1>
<h2>Aspiring Software Developer</h2>
<p>Welcome to my Linktree! Here you'll find all my important links and projects.</p>

<a href="https://github.com/yourprofile" target="_blank"><i class="fab fa-github"></i> GitHub</a>
<a href="https://www.linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="https://twitter.com/yourprofile" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
<a href="https://yourportfolio.com" target="_blank"><i class="fas fa-briefcase"></i> Portfolio</a>
<a href="https://www.youtube.com/c/yourchannel" target="_blank"><i class="fab fa-youtube"></i> YouTube</a>

</body>
</html>

index.html

/* style.css */
body {
  text-align: center;
  background: linear-gradient(to right, slateblue, darkblue);
  color: white;
  font-family: "Trebuchet MS", sans-serif;
}

h2 {
  font-size: 24px;
}

a {
  background: linear-gradient(to right, #6A5ACD, #483D8B);
  color: white;
  font-size: 20px;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  margin: 10px;
  display: block;
}

/* Styling for the profile image */
img {
  border-radius: 75px; /* Adjust to your liking */
  margin-top: 20px; /* Adds spacing above the image */

  /* Animation */
  animation: bounce 2s infinite;
}

/* Keyframes for the bounce effect */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
