Hey, I've encountered some problems and would be really greateful if you could help me guys.
1st issue - the box image needs to appear in front of everything else. Tried using z-index, couldn't really make it work 2nd issue - I'd like to somehow make the transition smoother when the answer block appers due to the toggle press
Hi Karol,
#1. One idea would be to use a main::before element. (I pasted at the bottom of the message what worked for me in case you don't want to see a solution right away.)
#2. I have the same issue, and don't have a solution yet. Unfortunately, transition works with just color and background color. Hopefully someone can chime in and help.
Nice work! Corina
Possible solutions:
main::before { position: absolute; content: url("images/illustration-box-desktop.svg"); left: -95px; top: 245px; z-index: 10;}Had trouble changing svg image color on hover
Hi Aliv!
Beautiful work!
Here's what worked for me for the hover effect:
go to the svg file. In the <path> element, change fill="current color".
in css, set svg { color: white; } and svg:hover { color: green; }.
This does require that you use <svg> and not <img> in your html. Hope this helps. Corina
I did transition on cards to be more interactive. I loved to do this challenge. Really excited about the result.
Any feedback will be amazing!
Hi Barbara,
This was not an easy project to complete. Congratulations!
One suggestion: add a "prefers reduced motion" media query for accessibility reasons.
The transitions make the site more dynamic, but could be problematic for certain users. People with motion or visual sensitivity may experience discomfort when exposed to animation on the screen. For them, reducing motion can make digital content more accessible and comfortable to consume.
Beautiful work! Corina
Built with semantic HTML and CSS Flexbox.
Please feel free to provide any feedback that could help enhance the code.
Hi Valeriia,
I don't know if it's possible to round the corners of the underline, but if you are willing to use the pseudo-element ::before, it will give you many styling options. This includes rounding its corners and having it overlap a little with the text, just like in the design. Here's the code I used, feel free to use it as an example. Corina
.learn-more { font-family: Fraunces; letter-spacing: 1px; font-style: normal; font-weight: 900; font-size: 0.83rem; line-height: 1.66; text-transform: uppercase; color: var(--learn-more); position: relative; margin-left: 0.6rem; width: 6.6rem; text-align: center; z-index: 1; }
.learn-more::before { cursor: pointer; content: ""; width: calc(100% + 1rem); height: 0.8rem; position: absolute; left: -0.5rem; bottom: -0.2rem; border-radius: 28px; z-index: -1; }
Haven't worked on mobile view yet. I'm finding it hard to style the svg images per the design but I wasn't able to. Some feedback would be appreciated.
Hi Owen,
have you tried a negative margin for the images that have a left or right side that is cut off? For example, for the illustration-editor image, try a negative margin-right. Start with let's say -5rem and see the result, and change it until you get the look you want. Hope this helps a bit. Corina
All feed backs are welcome I was have difficulty in changing the color of that logo to white, also the white board i created at my second container strichs and words breaking when the device width is around 768px and it doesn't look good their, any one with a perfect solution to that i will really appreciate it
Hi Emmanuel,
Congratulations! I can tell you put a lot of effort creating the site. You should know that your site is labeled as "dangerous" by Chrome. This is the warning it displays: "Google Safe Browsing recently detected phishing on heisemmaco.github.io. Phishing sites pretend to be other websites to trick you."
Here are two things I can suggest just from looking at your site using the design comparison:
Hope this makes sense. Let me know if you still have questions. Corina
Overall I didn't find this project too difficult, but weirdly, out of everything, the one thing that gave me a slight-headache, was trying to figure out how to turn the social media icons from green to white on hover.
I thought it would work with simple CSS, but nope, that apparently won't work in Firefox or Chrome, so I had to do what might be considered to be quite 'hacky' and have more than one set of icons in different colours and use z-index to hide the green on hover.
This challenge looks quite basic to look at, but definitely quite a challenge for a beginner.
@KayGeorgeson
Hi Kay, I had a hard time as well figuring out how to change the color on hover for the svg elements.
I don't know much React, but this is what worked for me in JS (similar to what @FloRiouffreyt suggested):
This does require that you use <svg> and not <img> in your html (at least, I wasn't able to get it to work with <img>). Hope this helps a bit! Corina
Hi Joaquin,
I just completed this challenge as well, so I looked at your navbar. It works just fine. What specifically do you want to change about it? Corina
WOW, this was really challenging! :D I broke my head discovering how to do the BG waves to be responsive. But I did it.
I appreciate any feedback!
Hi Barbara,
Wonderful job! This is the next project on my list, so I will be happy to give you any feedback once I finish. I'm tempted to look at your code, because I don't have any idea yet how to do the curvy sections (I know how to do it with HTML Canvas, but that involves JS as well), but I will not! Promise. :) I want to be able to start from scratch, with no help, except books and documentations. Wish me luck. Corina
This is my first Level 2 Challemge, any feedback on the responsive side or how can i write less code, will be welcome, thanks a lot!
Hi Atlas,
I love it! I am working on the same project right now. I'm hoping to finish it in the next couple of days or so, and then I will take a peek at your code and leave a feedback. If you are interested, it would be great to chat over our approaches and learn from each other. No pressure though! Great job! Corina
Challenge was relatively straight forward to solve, only property I was a little bit unsure of how to set it properly was position: absolute or relative to place the big quotation marks behind the text. If anybody could shine a light on it for me I'd be very much grateful!
Any other feedbacks are highly appreciated as well!
Thank you guys :) Fabio
Hi Fabio,
Really nice!
Here's what I know about the difference between "absolute" and "relative":
Relative means it's relative to the element's normal position (where it would be positioned based on the flow given by HTML), and you can move it with top/left/bottom/right.
Absolute means the position will be determined relative to the closest parent element. In this case, the child element (the one you want to move) has to have position absolute, and (important) the parent element must be set to position relative.
In your case, the "quote" is a child of the parent "testimonial-1". You correctly set the parent "testimonial-1" to position: relative, and the child "quote" to position: absolute.
Hope this helps a bit. Please reach out if this is still not clear. Corina
PS. If the parent is not set to position: relative, then the child will be moved relative to the body element.
Hi, devs...
Is there any other way to deploy my website instead of using Github Pages?
(I'm using React)
It will be useful if someone could explain me how to deploy on Netlify or on another server.
Thanks! :D
Hi!
Once you create a Netlify account, go to Sites (in the top menu) and click Add new site. There are 3 options: import, start from template, and deploy manually. I have only used the import option. It allows you to import your code from Github, and any updates in Github are reflected in a couple of minutes. With the deploy option you can just drag and drop your site folder. I found the whole process quite straightforward. Happy to answer any questions! Corina
