Complicated super responsive Loopstudios landing page
Design comparison
Solution retrospective
From this project I've learned Tailwind CSS, some advanced css techniques for sure, and more about js. For future projects I'll include more tailwind.
What challenges did you encounter, and how did you overcome them?Difficult to make the hamburger menu working as I wanted. After the research, I've gained some valuable knowledge. Trying also styling the background-images boxes. Long journey!!
What specific areas of your project would you like help with?I don't know why the background images of every element doesn't show. Just when I'm in the localost!!
And maybe about the h2 design for the 8 background-images boxes. I didn't understand how to make the box a bit darker just in the left corner. I've used text and box shadow, even a way with pseudo element, but failed. Every advice will be very appreciated!!☺️🔥
PS: Pls help me!!! :(
Community feedback
- @MikDra1Posted 3 months ago
- 1. Background Images Not Showing on Localhost
If your background images aren't displaying on localhost, here’s what to check:
-
File Path: Ensure the image path in your CSS is correct. For example, if your CSS is in a css folder and images are in an images folder at the same level, use url('../images/your-image.jpg').
-
Case Sensitivity: File names are case-sensitive. Double-check the exact case matches.
-
Browser Cache: Clear your browser’s cache or try loading the page in an incognito window.
-
Console Errors: Open your browser's developer tools (F12) and check for errors related to loading resources.
-
2. Darken Left Corner of a Box
To darken the left corner of a box over a background image, use a linear gradient:
CSS
.box { position: relative; width: 300px; height: 200px; background: url('your-image.jpg') center/cover; } .box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); }
Summary:
- Image Path: Ensure it's correct and matches case sensitivity.
- Darken Corner: Use a ::before pseudo-element with a linear gradient for the effect.
Marked as helpful1 - @Radwan-SghirPosted 3 months ago
the images aren't loading, try deploying on netlify it's much better than github pages
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord