DEV Community

0 seconds of 47 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:47
 
Prince
Prince

Posted on

2

Animation with New Logo Unlocked!!!!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Channel Logo</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
      overflow: hidden;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-box {
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #ff416c, #ff4b2b);
      border-radius: 50%;
      box-shadow: 0 0 30px #ff4b2b;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      transition: all 0.7s ease-in-out;
      position: relative;
    }

    .logo-box:hover {
      width: 400px;
      height: 250px;
      border-radius: 30px;
      background: linear-gradient(135deg, #1f1c2c, #928dab);
      box-shadow: 0 0 50px #928dab;
    }

    .logo {
      width: 200px;
      height: 200px;
      background: white;
      border-radius: 50%;
      transition: all 0.7s ease-in-out 0.7s;
      overflow: hidden;
      position: absolute;
    }

    .logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .logo-box:hover .logo {
      right: 30px;
      width: 100px;
      height: 100px;
      top:15px;
      border-radius: 50%;
    }

    .heading {
      font-family: 'Montserrat', sans-serif;
      font-size: 2em;
      font-weight:bolder;
      color: #fff;
      position: absolute;
      left: 30px;
      top: 40px;
      opacity: 0;
      transition: opacity 0.7s ease-in-out 0.3s;
    }

    .logo-box:hover .heading {
      opacity: 1;
    }

    .text {
      font-family: 'Montserrat', sans-serif;
      font-size: 1em;
      color: #ccc;
      position: absolute;
      left: 30px;
      bottom: 40px;
      opacity: 0;
      transition: opacity 0.7s ease-in-out 0.5s;
    }

    .logo-box:hover .text {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="logo-box">
      <div class="heading">Prince_Codes1</div>
      <div class="text">"Transforming lines of code into 
        vibrant digital art – Welcome to Prince_Codes1!"
        <br><br> "Follow us for visually stunning web 
        animations and creative coding tutorials!"
      </div>
      <div class="logo"> <img src="./logo.png" alt=""></div>
    </div>
  </div>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay