Hope you are taking notes.

While you’re at it, don’t forget this very important one!

body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; background: #000; /* Black background */ color: #fff; /* Text color */ } .reality-meets-art { position: relative; width: 100%; height: 500px; /* Adjust as needed */ } .background-video { width: 100%; height: 100%; object-fit: cover; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* Semi-transparent background covering entire video */ display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .overlay-content { padding: 40px; /* Increased padding */ border-radius: 15px; /* More rounded corners */ width: 80%; /* Adjust width */ max-width: 800px; /* Maximum width for larger screens */ } @media (max-width: 768px) { .overlay-content { width: 90%; /* Adjust width for smaller screens */ padding: 30px; } } @media (max-width: 480px) { .overlay-content { width: 95%; /* Adjust width for mobile screens */ padding: 20px; } } .overlay-content h1 { font-size: 2.5em; margin-bottom: 15px; } .overlay-content p { font-size: 1.2em; }

Where Reality Meets Art

Virtuafame strives to meet head-on the ever-growing demands in today’s entertainment world. Bringing exceptional entertainment and matching that with digital marketing that is vital not only for artists & celebrities but also for businesses of all sizes. An equal level playing field for all straight across the board, resulting in unprecedented results.

body { margin: 0; font-family: Arial, sans-serif; } .grid-container { display: flex; flex-wrap: wrap; } .grid-item { position: relative; flex: 1 1 calc(33.333% – 20px); /* 3 columns */ margin: 10px; overflow: hidden; } .background-video { width: 100%; height: 100%; object-fit: cover; } .overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 2; } .animated-text { font-size: 1.5em; animation: fadeIn 3s ease-in-out infinite; } @keyframes fadeIn { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @media (max-width: 768px) { .grid-item { flex: 1 1 100%; /* Stacks on mobile */ } } /* Text style */ .text-content { color: white; /* White color for text */ text-align: left; /* Text alignment to the left */ padding-left: 15px; /* Adds some padding to the left of the text */ line-height: 1.5; /* Adjust line height for readability */ } /* Italics for subheading */ .subheading { font-style: italic; } AOS.init({ once: true, // Animation only once mirror: false, // No animation on scrolling past anchorPlacement: ‘top-bottom’, // Animates elements as soon as they enter the viewport });