All -I recently built a new Landing Page template and wanted to share it here.⚡ Next.js + Tailwind CSS⚡ Headless UI Components for accessibility⚡ 30+ Components⚡ 6 Pages⚡ Framer Motion Animation⚡ Conversion & SEO Optimized⚡ Production readyLive Demo: https://next-ozone.vercel.app/Get It: https://gumroad.com/l/DsAsk0:000:00FullscreenpreviewAppreciate any feedback! 🙂Details
Lots of things are super wonky with this.First, the nav bar button is on the top left… the menu opens on the right. And I don’t know why you’d have it open anyways–just keep it up.Second, the whole mouseover elements are kinda annoying when using a mouse. Everything transitions and such in a very bold way, rather annoying to navigate when everything is moving. And I’m expecting them all to be buttons or something, but there’s only two embedded links, not the whole section.The teal banner is over the background/interest section (on Chrome). Make the H1s bigger as they don’t stand out much. Look into border-radius on other elements to match the blocks you’ve set up. Adjust for margins for your text and test them on other browsers (and maybe add a CSS reset).I’m rather ok with the overall color scheme and design, it’s just the extra stuff you’re adding on isn’t working out. I think you need to dial things back, simplify, and then touch things up in a tasteful way that doesn’t feel too responsive. Keep the navbar open, keep animations limited to clickable objects, perhaps test it on multiple browsers (especially Chrome). Play around with sizing your window and using the console to emulate mobile.Details
In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The project was done following the ongoing developmental version of WPGraphQL and an excellent tutorial by Henrik Wirth. Although WPGraphQL was used in some production sites at that time, there were lot…Details
If you run a WordPress site, you need a reliable contact form so that visitors can reach you with their questions and comments. However, with so many WordPress form builders on the market, it can be difficult to find the very best contact form WordPress has to offer. To save you the time-wasting and head-scratching…Details
I’ve been practicing with scss and responsive design. When google strikes through some of my css declarations does that mean Im doing something wrong? I know when it does it to a few, thats okay but this many?
This is how Chrome displays the “Cascading” part of “Cascading Style Sheets”. What the strikethrough means is that something with a higher specificity has overridden that style attribute. If you click on the “Computed” tab and look for the attribute you’ll see all the CSS classes that have affected it, and you can easily work out what is doing the overriding.Also, that image isn’t really a lot of overrides. In a big app you should expect to be able to scroll that list a loooong way. It’s fine, and it won’t impact performance or SEO at all.Details
Hey all, not sure if this belongs in Web Design or Web Dev (let me know either way), but I was wondering if any of you can send me in the right direction for some motivation and education. I need examples of content-heavy blogs/websites that are super well organized in terms of permalinks, categories, whatever and super intuitive for the users to navigate.I’ve seen numerous famous websites – e.g. ign.com, wowhead.com, etc. but I’d like to see if anyone here has some in their pocket!ThanksDetails
Great ideas in web design come so thick and fast that it can be easy to miss them if you’re not careful. This series is a small antidote to that, piecing together splashes of inspiration that caught our eye. Whether it’s a mind-bending new feature or simply an old trick delivered with new elegance, they…Details