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?

[Atharva3296]

Hi! I’d like to contribute to this project. Could you please assign this issue to me? Working on it will help me improve my skills.