Posts

FLOATING TEXT

Image
 FLOATING TEXT IN HTML. If you are begginer and want to learn html very easily. The you are at right place I have written notes for HTML only at rs50 for begginers. Now here is the code <!DOCTYPE html> <html> <head>   <style>     body {       background-color: #f2f2f2;       font-family: Arial, sans-serif;     }     .floating-text {       position: absolute;       animation: float 5s infinite;       font-size: 24px;       color: #ffffff;       background-color: #ff6b6b;       padding: 10px 20px;       border-radius: 5px;       box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);     }     @keyframes float {       0% {         transform: translateX(0px) translateY(0px);       }       50% {    ...

Loading HTML

Image
 LOADING ANIMATION IN HTML BY MUBASHIR  OWNER'S IG:the_mq_verse_ For More Html Projects IG: atomic_freelancer Here is this code. You can simply learn it or Copy it. <!DOCTYPE html> <html> <head>   <style>     /* Define keyframes for loading animation */     @keyframes loading {       0% { width: 0%; }       100% { width: 100%; }     }     /* Apply styles for loading container */     .loading-container {       width: 200px;       height: 20px;       border: 1px solid #ccc;       overflow: hidden;     }     /* Apply styles for loading bar */     .loading-bar {       width: 0%;       height: 100%;       background-color: #007bff;       animation-name: loading;       animation-duration: 2s;       ...