Skip to content
OverviewSolutions
18
Comments
6
Francis
@FrancisKhaledKhodja

All comments

  • Htein Linn•130
    @hteinLinn210Submitted over 2 years ago

    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!

    Base Apparel Coming Soon

    1
    Francis•260
    @FrancisKhaledKhodjaPosted over 2 years ago

    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
    1
  • Francis•260
    @FrancisKhaledKhodjaPosted over 2 years ago

    Hello. Excellent. I didn't think possible to make this without JS. I learnt a lot with your realization.

    0
  • Francis•260
    @FrancisKhaledKhodjaPosted over 2 years ago

    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
    0
  • Htein Linn•130
    @hteinLinn210Submitted over 2 years ago

    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!

    Mobile-first Responsive FAQ accordion card

    2
    Francis•260
    @FrancisKhaledKhodjaPosted over 2 years ago

    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
    1
  • Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    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
    0
  • Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    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.

    0