Looking to hire developers?
@FrancisKhaledKhodja
@hteinLinn210
Submitted
In this challenge, I spent most of my time on responsiveness. It was hard to be responsive in every screen because of the image. I don't want to affect the resolution of the image. Feedbacks are warmly welcomed.
Happy Coding!
@FrancisKhaledKhodja
Posted
Hello.
Excellent Job.
I like your popup to significate the send of the email.
But you can improve your JS code:
1 - remove error messages and styles when user entered email with correct format: for instances add this line of code errorMsg.style.display = none;
2 - use regex to verify the email format (you can find solutions on the web) but I can help you if you want...
Marked as helpful
@MichaelSRD
Submitted
@FrancisKhaledKhodja
Posted
Hello. Excellent. I didn't think possible to make this without JS. I learnt a lot with your realization.
@ArbonaJulien
Submitted
I will really appreciate any feedback and optimization or best practices. Thanks.
@FrancisKhaledKhodja
Posted
Hello.
Well done with your responsive web page. I like your attempt to submit the email but i think your script doesn't work. According to me you can simplify it.
For instance, your validationEmail function can become :
function validationEmail(email) { let regex = new RegExp('[a-z0-9]+@[a-z]+\.[a-z]{2,3}'); return regex.test(email); }
Marked as helpful
@hteinLinn210
Submitted
I have a serious issue with the desktop view. I can't position the images correctly and I don't know how to do that. So, I plan to update the repo with the solution. And also I will remove javascript and replace with pure CSS or bootstrap in future. Any feedback are warmly welcome.
Happy coding!
@FrancisKhaledKhodja
Posted
Hello. Nice job. Your javascript's script is very interresting. For th image position, you can use the background-position to move the picture in the box and to hide a portion of it. But the previous advice (bunee's advice) is very good.
Marked as helpful
@thomasjfcaldwell
Submitted
Color overlay on an image? Got me stumped
@FrancisKhaledKhodja
Posted
Hello. You must add a div with a background-color on the image and play with the opacity and thé mix-blend-mode.
Marked as helpful
@ksmacleod99
Submitted
How long did it take you to remember you can't hover on mobile? It took me an hour. TGIF.
@FrancisKhaledKhodja
Posted
Hello. Excellent job. To improve your page and to center your card use this code (you must learn box position and the transform property)
.card {
border-radius: 10px;
background-color: hsl(216, 50%, 16%);
filter: drop-shadow(0px 5px 10px #070e18);
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
My second advice would be to use rem instead px to define the size of your font or box.