Improve banner design

[amyyalex]

The current banner in the project serves as a vital element but may benefit from enhancements to improve its visual appeal, messaging, or functionality. This task aims to elevate the banner's overall quality and effectiveness.

Tasks:

• Refine the visual aesthetics, retaining the colour scheme and layout.
• Add animation or interactive elements to make the banner more engaging.
• Enhance the banner's responsiveness across different screen sizes and devices.

Acceptance Criteria:

• Improved banner design is visually appealing and grabs user attention effectively.
• Any text or call-to-action within the banner is retained, clear and easily readable.
• Banner enhancements do not negatively impact page load times or usability.

[thekain9]

Hi there! I would love to contribute to this project and bring my design skills to help refine the aesthetics of the banner. If you could assign me this project I would love to help!

• Manu

[amyyalex]

Hi @thekain9 I appreciate your interest in contributing your design skills to refine the banner aesthetics. I'll definitely assign this project to you, and I'm excited to see your creative input and ideas.

[thekain9]

Amazing thank you! :)

[zealshah29]

Hi, so I came across this issue. I am currently looking forward to contribute to good first issues. I have experience in UI UX design, html and css. If the given issue is not closed yet and if there's any way I could help to contribute, do let me know.

Thanks, Zeal Shah

[amyyalex]

Hi @zealshah29 Nice! Sure, you can go on and pull out your creative. The banner currently have a simple animation but still open to being more refined. Can't wait to see what you come up with! xx

[zealshah29]

Great, thanks :) Can you assign me this project?

[adelanaofficial]

Hello Amy, could you kindly assign this task to me?

Thank you!

[zehor-l]

Hello, added a simple hover effect to each span element to make them more interactive:

const boxContainer = document.getElementById('boxContainer');

// Enhancements: // 1. Added hover effect to elements // 2. Placeholder for responsive design

// Create 'infi' elements for (let set = 0; set < 2; set++) { const infiDiv = document.createElement('div'); infiDiv.classList.add('infi');

for (let i = 0; i <= 20; i++) {
    const span = document.createElement('span');
    span.style.setProperty('--i', i);
    infiDiv.appendChild(span);
}

boxContainer.appendChild(infiDiv);

}

// Add hover effect document.querySelectorAll('.infi span').forEach(span => { span.addEventListener('mouseenter', () => span.style.transform = 'scale(1.1)'); span.addEventListener('mouseleave', () => span.style.transform = 'scale(1)'); });

// Ensure responsiveness window.addEventListener('resize', () => { // Add responsive handling code here });

[Silvia-Wachira]

Hello I would love to work on this project

[lauradowell]

Hi! I would love to contribute to this, I have a design background. Could you assign this to me?