It was a bit tough in terms of responsiveness and overlay color, that is my best overlay color could not achieve it more 😄, If there are some issues to improve, I will be glad to hear from you guys and not repeat them in the future 😉.
Hi Ted! Nice job with this challange!
I just have one suggestion, and it's that to make the overlay color look a bit more like in the design by changing the .bg-img background-blend-mode property to multiply. It won't look 100% the same as the design but I think it's pretty close.
Hope that helps.
I have no idea how to make the image the same purple
Hi Brandt!
To apply the purple filter to the image you could do something like this. In this case you wouldn't need the <img> tags inside the <div class="cardImageContainer">
.cardImageContainer {
/* then you would replace the backround url for mobile view with media query */
background: url('../assets/images/image-header-desktop.jpg') var(--soft-violet);
background-blend-mode: multiply /* you can also try other values */;
}
It looks like you are having some Accessibility and HTML Validations problems. You you can see a brief description of each problem by clicking the "view report" button.
alt attribute with an alternative text in case image can't load.<section> tag with a <main> tag.Hi everyone,
I would be glad to hear your feedback.
Thanks.
Nice job! The animations look very good. If you asked I would make them a bit longer. For example:
.testimonial__body .text {
transition: transform 0.7s, opacity 0.6s, ease-in, -webkit-transform 0.7s;
}
.appear img {
animation: popup 800ms;
}
.testimonial__body .author {
transition: transform 0.7s, opacity 0.6s, ease-in, -webkit-transform 0.7s;
}
Greetings and happy coding!
I Complete 😁👍 my challenge and make a webpage responsive, this webpage design desktop version and mobile version. This webpage have difficult responsive css code. #html5 #css3 #100DaysOfCode
#100DaysDev
Hi @GitHub-dev12345! Good job with challange!
There's a problem with the image overlay in the mobile view. A possible solution would be to set
.card .mainpic {
background:
url(images/image-header-mobile.jpg)
hsl(277, 64%, 61%);
background-blend-mode: multiply;
}
so you wouldn't need the <div class="overlay"></div> element.
And if you want to get rid of your accessibility issue, you just simply need to replace <div class="attribution">...</div> by <footer class="attribution">...</footer>
Hope that helps
Hey guys! The only question I really have is about the "Learn More" link. I just have it as an anchor tag in my code, and I was wondering if that was okay, or if it would be better to give it a button tag? Thanks in advance for any feedback!
I think it's okay, I did the same way. And I think it's because those buttons are supposed to take you to another page on your website.
I had a lot of trouble with the animations. Kind of does the job, but I'm sure that there is a cleaner way to do it. Your feedback will be of much help. Thanks!
Nice animations Héctor.
Just a little detail that I found, from 340 pixels downwards the size of the icons is reduced. Maybe you could correct it with:
.share-popup__icons > * {
min-width: 17px; /*I tried with 17px but you could try any other*/
}
I'm not an expert but this might help. Great job!
I have had issues with aligning the background pattern on both mobile and desktop version, any tips would help :)
Also, the down and up arrows are not working perfectly due to something I am missing on the JavaScript code I believe. How can I fix it?
Thank you in advance!
You could create different functions that use a for of loop to iterate through:
You could create classes in CSS, and, in those for loops, remove or add those classes to each <div class="line"> elements.
I would use classes for all the titles, arrows, and paragraphs. This would be useful for example with the arrows, because you could use just one image, and when you click on the question or on the arrow, you add that image a class like this: .rotate-arrow {transform: rotate(180deg); transition: transform ease .5s;}`
And in the JS, you could do something like this:
const = document.querySelectorAll('.titleArrows'); // In your case your class is '.straight' I think
function rotateArrow(targetElement) {
for (arrow of titleArrows) {
arrow.classList.remove('rotate-arrow');
}
targetElement.classList.add('rotate-arrow');
}
After created those functions, you should create an eventListener that detects if you clicked on a question title, or on an arrow. You could do something like this:
// I made it like this
const box= document.querySelector('.box');
container.addEventListener('click', (e) => {
if (e.target.classList.contains('questionTitle')) {
rotateArrow(e.target.firstElementChild);
}
else if (e.target.classList.contains('titleArrows')) {
rotateArrow(e.target);
}
}
The example above is just to give you an idea. Consider that the this example cannot be applied as is in your html because the layout is probably different.
I hope this example has been helpful for you.
👋🏼 Hi everyone,
I had to do some modification because properties like "fit-content" doesn't work properly with the frontend mentor screenshot.
Any recommendation is welcome :)
Enjoy your day and happy coding 👨🏼💻🎉
Wow, it's identical to the design. Awesome work!! Congrats!!
I had some trouble trying to position the background image. How would you make it look more similar to the design?
Thanks!
I think you could use a background-size: contain; , and should make the main-image bigger. I didn't complete it all right but if you want you can check my code.
https://github.com/paiput/frontend-mentor/tree/main/huddle-landing-page
