Dev Nerd
Ir al canal en Telegram
545
Suscriptores
Sin datos24 horas
-17 días
-1130 días
Archivo de publicaciones
545
it's my #Day70 of #100DaysOfCode Project
A simple landing page for beauty products with tailwind and js
✅ Mobile responsive
✅ Clean design
✅ Integrated product demo video
✅ Testimonials section
Yeah it has no that much features cuz I didn't trust Ethiopian electricity😁 .. I was worried like it will go out again .. so I made it fast and kept it simple
Check it out👍
Live Link
Repo Link
#projects@DevNerd0
#100DaysChallenge #coding
545
Hey guys
Sorry for the being off .. we lost electricity yesterday but the lights are back on now⚡️
I've just made up simple project quickly for the missed challenge from yesterday and am gonna post it rn⚡️👍
545
guys searching for assets like imgs, icons.. that looks perfect and fit the design is really a though process🤦♂ i was downloading and coding the design from the dribbble.com and the designers doesn't share their assets .. like not even the figma link🤷♂..
But we have to keep pushing⚡️
If anyone has tips please share them👍
545
Repost from Exodus | Creative PM
"የጥበብ መጀመሪያ እግዚአብሔርን መፍራት ነው፤ ሰነፎች ግን ጥበብንና ተግሣጽን ይንቃሉ።"
— መጽሐፈ ምሳሌ 1:7 (አማ 1954)
545
+1
And guess what? someone followed me on GitHub🥳
guys to have a software engineer lezawm Dagmawi_Babi follow me and gave me a star .. it's really crazy, guys I’m feeling super excited to keep pushing⚡️😁 yemir ..
545
my #Day69 of #100DaysOfCode project
It's a simple landing page for guitar store build with tailwind and js
Features:
✅ Swipe to left and right on the products section
✅ Integrated video at the bottom of the header section with play and pause functionality
✅ User-friendly interface
✅ Smooth animations
✅ Newsletter subscription
✅ Testimonials grid
Check it out👍
Live Link
Repo Link
#100DaysChallenge #coding #projects@DevNerd0
545
Here is my #Day68 of #100daysofcode project a nice landing page
It's built in tailwind and JavaScript
⚡️Features:
✅ Smooth animations
✅ User-friendly interface
✅ Testimonials grid
✅ Nice grid background
✅ Swipe to left and right on the header section
Check it out
Live Link: Live Link
Repo Link: Repo Link
#100DaysChallenge #coding #projects@DevNerd0
545
Repost from Chapi Dev Talks
Am not frontend Dev but definitely would love to try this code godamn 🔥
545
Here are the steps I followed to create the loading effect:
<body class="overflow-hidden">
<div class="z-10 h-screen w-full flex justify-center items-center bg-[#F7E8DF] fixed top-0 loading-wrapper">
<div class="loader"></div>
</div>
<!-- main content here -->
</body>
Body Class (overflow-hidden): This initially prevents scrolling while the loading animation is visible.
loading-wrapper it's like a container for the loader that takes up the entire viewport and centers the loader
loader div: it will show the loading animation
@layer utilities {
.loader {
width: 60px;
aspect-ratio: 2;
--_g: no-repeat radial-gradient(circle closest-side, #e55e11 90%, #ffffff00);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: calc(100% / 3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}
}
Loader class: Defines the size and animation for the loader element using radial gradients and keyframes.
Keyframes (l3): Controls the animation sequence by creating a spinning effect.
aspect-ratio: 2: ensures the loader maintains a consistent shape with a width that is twice its height.
background var: Positions the gradient circles evenly across the loader's width for a balanced view
background-size: Sizes each gradient circle to take up one-third of the loader's width and half its height
window.onload = () => {
document.querySelector(".loading-wrapper").classList.add("hidden");
document.body.classList.remove("overflow-hidden");
};
I used the window.onload: the event is triggered when the whole page, including all dependent resources like images, is loaded.
overflow-hidden: removes the overflow-hidden class from the body, which re-enables scrolling after the page is fully loaded
let's keep pushing forward ⚡️
#codes #notes@DevNerd0