Goodbye Vanilla CSS🫡😸

#Day61 of #100DaysChallenge

Just made this simple landing page today by using Tailwind CSS

tbh the plan was to do this yesterday, but I got so tired with another work, so I ended up creating it this morning. Sorry for the unpunctuality 👍

The website has a vintage vibe with a touch of traditional elements to keep it engaging and fun.

I got the design from Dribbble.com.You can find a lot of nice and beautiful designs there it's a great resource for inspiration

Let's keep pushing forward ⚡️

Live Link

Repo Link

#100daysofcode #coding #projects@DevNerd0

Guys

I've been experiencing some headaches recently and wanted to share what's been going on😕
The pain starts from my neck, moves to the center of my head, stretching my neck helps reduce the pain momentarily, but it comes back after a few minutes It's been really tough this week with this headaches.

If anyone has any advice or suggestions on how to deal with this kind of headache I'd really appreciate it

it's #Day62 of my #100DaysofCode challenge, I made this simple loading animation. In this project I learned how to use SVG for text animation and play around with CSS keyframes to create a smooth loading effect. I didn't know about properties like stroke-width, stroke-dashoffset, stroke-dasharray... before starting, and now I have a full understanding of them,

It's amazing how a few lines of code can bring words to life. Check it out!

Repo_Link


#projects@DevNerd0

Morning 🌞

Here is what I learned from yesterday's project:

Stroke: In SVG it's the outline of a text, It's like the border of the object.

Stroke Width: it defines the thickness of the stroke

Stroke Dasharray: allows us to create dashed lines by defining a pattern of dashes and gaps.

Stroke Dashoffset: used to adjust the starting position of the dash array on the path.

For example:

<noscript width="100" height="100">
  <text x="10" y="50" font-size="30" fill="none" stroke="black" 
        stroke-width="2" stroke-dasharray="5,5" stroke-dashoffset="20">
    Loading...
  </text>
</noscript>

<style>
@keyframes dash {
  0% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

text {
  animation: dash 2s infinite linear;
}
</style>

#Day63 & #Day64 of #100DaysChallenge

Hey guys👋

ohh yeah i was offline for a while due to illness but I’m back now to continue my 100 Days of Code challenge

I've just made 2 nice landing pages and I just used Tailwind CSS because I got bored of writing vanilla CSS cuz tailwind just makes everything faster and more fun😘,
and just added  smooth animations when users scroll up and down, and it's mobile responsive

yeah it was a fun and educational experience, and I’m looking forward to creating more awesome projects in the upcoming days. Thank y'all

Let's keep pushing forward ⚡️


Live Links:

Day 63 Live Link

Day 64 Live Link

Repo Links:

Day 63 Repo Link

Day 64 Repo Link


#100daysofcode #coding #projects@DevNerd0

I've noticed some issues with those projects on mobile devices like the content and animations aren't displaying correctly when scrolling down, I'm using the ScrollReveal library for animations and it's causing problems on mobile the content doesn't show up properly when scrolling down, but starts appearing when scrolling up and just commented out the animation code part

Now, I plan to sleep and get refreshed because I didn't sleep last night Maybe that's the issue 😁 I'll fix it after a little nap

If anyone knows a solution or has experience with ScrollReveal on mobile devices, help me out any tips or advice would be greatly appreciated

Now I’ve decided to disable animations for mobile screens after checking other websites that use ScrollReveal, I found that the content gets really messed up on mobile. It seems the problem is with the library itself. For now, I’ve disabled animations for mobile users but the animation works perfectly on desktop.

For future projects I'll use GSAP to avoid these issues.

Projects Live Links:

Day 63 Live Link

Day 64 Live Link

🔥#Day65 of #100DaysChallenge

Hey guys

for day 65 I've made a cool landing page with smooth animations and a mobile-friendly design

☑️ I added a nice animation when users scroll up and down

☑️ a counting number animation in the "Our Status" section

☑️ a cool hover effect with shadows on the cards plus users can also swipe left and right by grabbing the cards or by clicking the pagination bullets.

It's been an exciting project and the final result looks fantastic check it out and let me know what you think⚡️👍

Live Link


Repo Link

Let's keep pushing forward ⚡️


#projects@DevNerd0

Does anyone know a good free background remover that doesn't decrease image quality I've tried some websites but they either reduce the image quality or require a subnoscription for HD images

Still can't find a nice website that does what I'm looking for, It's really boring doing the designer work😭

Anyways I'm gonna use a low-quality image so today’s project might look a bit low quality