Skip to content
OverviewSolutions
8
Comments
16
Ayoub Amkhazzou
@ayoam

All comments

  • Ayoub Amkhazzou•280
    @ayoam

    Well done! I found an issue , the navbar isn't showing in the desktop view , it works only mobile view .

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    Well done! to make it look like the original , adjust the width of image drawer container to something like 40% or 45% , and also change the color of the social preview popup triangle to match the color of it parent element in desktop view.

    hope this feedback helps.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    Well done! it looks sick .

  • Ayoub Amkhazzou•280
    @ayoam

    Hey , well done!

    to fix the issue , add a boolean variable that equals false after each setError(), then at the bottom of the function check if all input are valid then add form.submit().

    function validateInputs(){

        let allValid = true;

     if (firstNameValue.length === 0) {

                setError(firstName, "First Name cannot be empty");

                allValid = false;

	     } else {

                setSuccess(firstName)

	}

...

if(allVAlid==true){form.submit();}

    }

    hope this feedback helps.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    Well done! i found an issue , when i open all questions , i can only see first 3 of them , the rest disappears because of the hidden overflow .

    You can fix that by adjusting javascript so that when you open a question all other question should automatically close (you can check my solution), or you can make the questions container scrollable by adding "overflow-y: scroll" to it.

    hope this feedback helps.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    Well done! in addition to @Remus432 feedback , the share preview is missing the triangle , you can create it by making the preview container relative and add ::after to it like this:

    .preview-conatiner{

    ...

position :relative

    }

    .preview-conatiner::after {

      content: "";

  position: absolute;

  left: 50%;

  transform: translate(-50%, 0);

  width: 0;

  height: 0;

  border-left: 12px solid transparent;

  border-right: 12px solid transparent;

  border-top: 13px solid #48556a;

    }

    you can see the solution on my profile to understand it better.

    hope this feedback helps.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    well done! it looks good , i found that your navbar items behave like text on hover , you can fix that by adding cursor:pointer to them.

    hope this feedback helps.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    thank you mate , i appreciate your feedback :)

  • Ayoub Amkhazzou•280
    @ayoam

    thank you i appreciate it :)

  • Ayoub Amkhazzou•280
    @ayoam

    if you are using <svg> tag , you can change it's color in css :

    svg path{fill:white}

    hope this feedback helps.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    good job keep it going!

  • Ayoub Amkhazzou•280
    @ayoam

    you can tweak the js code so the autor div (.visible) doesn't disappear when clicking on share button on desktop view .

    hope this feedback helps.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    if you are using <svg> tag , you can fill color in css :

    svg path{fill:$color}

    hope this feedback helps. Happy coding

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    there is an issue with the shadow , remove box-shadow from #backgroud and add it to #cards , also just remove #backgroud div , use body in css instead.

    Marked as helpful
  • Ayoub Amkhazzou•280
    @ayoam

    you can make it work using flexbox :

    <div id="plan-container"> <!--here you put the music logo and text inside a container-> <!--here you put the change button> </div>

    #plan-container{ display:flex; flex-direction:row; justify-content:space-between; align-items:center; }

  • Ayoub Amkhazzou•280
    @ayoam

    to get this effect you can comma-separate shadows : box-shadow: 0px 0px 17px 8px rgba(254,255,86,0.61), 0px 0px 17px 19px rgba(0,0,0,0.61);