All solutions

[🔮] E-Commerce Interactive + 🔥GSAP Animations

❤️ Hello F.E.M community! this my solution details for "E-Commerce Interactive"

[🔰] In Responsive

• From +280px
• Mobile +280px Desktop +1000px

[🌎] Created With

• React as framework
• GSAP for smooth animating🔥
• Responsive Components & Texts
• Three super smooth sliders🦊

Because of beginning animations, The screenshot may look different from the original view, If it is, visit the live site!

[⬇️] Any feedbacks or suggestions

[🎄]

❤️ Hello to the F.E.M community! this my solution details for "interactive cards"

[🔰] In Responsive

• From +375px

• Mobile +375px Desktop +1000px

[🌎] Created With

• React as framework

• GSAP for smooth animating🔥

[⬇️] Any feedbacks or suggestions

[🔮]

[🔰] Responsive

• Range 375px+
• Mobile 375px Desktop 800px+

[🌎] With

• URL validation
• all styled with CSS
• Semantic HTML5 markups and accessibility

[💖] I will be very happy to read your feedback!

[🎄]

[🌎] A small project to get familiar with API.

• I had problems with promises and fetches and this project helped me to improve on these issues

[🎄]

[🔰] Responsive

• Range 208px+
• Mobile 375px Desktop 800px+

[🌎] With

• Regex for validation
• No libraries and queries, all styled with CSS
• Semantic HTML5 markups and accessibility

[💖] I will be very happy to read your feedback!

🎄 Project

• Responsive for mobile & desktop, range 160px+

🔎 Questions

It was my first landing page project, and I think I made some accessibility mistakes

1. For menu button, I used a div, with three spans inside it. The reason of doing that's to make animated toggle button. Should I put "aria-hidden=true" for the spans (they're just some lines) while I putted an "aria-label" for the parent tag?

<div aria-label="open menu" class="buttons-countainer">
  <div class="lines">
    <span class="line upper-line"></span>
    <span class="line middle-line"></span>
    <span class="line bottom-line"></span>
  </div>
</div>

1. I know that any image content should have an aria-label. But how about the other contents? should we use labels for them?

[🎄]

Responsive

• mobile 180px+
• laptops 1024px+
• Large screens 1920px+

Any Feedback's Welcome

[🎈]

Responsive

• 1440px & 375px

Specially

• A little animated with CSS keyframes
• Regex used for validation

Tricks

• Putted aria-label to explain image only contents
• Used data- attributes to change styles just by CSS and call them with Javascript

[🎈]

| Responsive

• Used rem units with base 16px, on 1440px & 800px
• Response Range : +200px

[🎈] | Responsive

• Desktop 1440px & mobile 375px

[🎈]

| Responsive

• Desktop 1440px & Mobile 375px