Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions24Comments6

All comments

  • P
    George• 790

    @georgeCx5

    Submitted

    This challenge was made using :

    • Vue
    • Vue Router
    • Vue Transition
    • Pinia
    • Tailwind

    Any feedback is kindly welcome! 🙂

    Dine Restaurant Website / Vue + Tailwind

    #animation#pinia#tailwind-css#vue#vite

    1

    Santiago Morales• 320

    @Aleroms

    Posted

    Hey George,

    Good job on this project. It is nice to see devs submit apps that use Vue. I love Vue! One thing that I noticed is that the reservation time for 8:00 pm marks my form as incomplete. I would recommend using the library vee-validate. It has definitely helped me on my project i've submitted on frontend mentor.

    Again, great job on the project!

    0
  • Santiago Morales• 320

    @Aleroms

    Submitted

    Hi Frontendmentor community! I found it very difficult to animate the numbers so I scratched that code out of my app. If there is any code that could be improved please let me know

    Vue Age Calculator App

    #pinia#vue#vuetify#vuex#sass/scss

    2

    Santiago Morales• 320

    @Aleroms

    Posted

    wow, thank you for your helpful comment! I will definitely put Countupjs into my dev tools!

    0
  • Santiago Morales• 320

    @Aleroms

    Posted

    Hi Rishabh, Congrats on getting this project done! Starting off on these projects are a bit difficult but some things that you can do for you next project to help improve your html/css skills are:

    • I would recommend looking up some videos about display flex. It helps a lot in centering objects. For example, to center the div you could have added display: flex; align-items: center; justify-content: center. Doing this will center the div. But the body will only expand as far as the content is, so try adding height: 100vh (viewport height) to the body. This will set the height of the document, covering the whole window.

    Congrats on the challenge and I hope you learned something! Feel free to reach out as well!

    0
  • Laura• 10

    @LauraAurora

    Submitted

    • I also couldn't seem to be able to change the color when the mouse hovers over the NFT card. There's only a certain opacity.

    • I couldn't figure out the layering of the card in order to add a subtle type of depth. I would really appreciate it if someone could help me here.

    • I'm also not too sure if you're being prompted to open a folder before you see the solution, if that's the case, does anyone know how to fix that as well?

    Thank you

    NFT Preview Card Component

    1

    Santiago Morales• 320

    @Aleroms

    Posted

    Hey Laura, don't worry on not being about to get the opacity right. This is your first solution posted, congrats! The way I implemented the overlay was by adding another div with a class so I can target it. I set the following: .overlay { @include b-radius(); position: absolute; width: 100%; height: calc(100% - 4px); top: 0; background-color: hsl(178, 100%, 50%, 50%); z-index: 2; opacity: 0; transition: opacity 0.3s ease-in-out;

    and when the user hovers over it I changed the opacity to 1. If any of this syntax is unusual to you i'd suggest getting more practice in by starting at the Newbie challenges from easiest to harder.

    Cheers!

    1
  • Santiago Morales• 320

    @Aleroms

    Posted

    Hi Dario,

    Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

    • it looks like you have multiple <h1>. it is recommended not to have more than one h1 on the page. Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility.

    • it seems that you did not include a hover effect on the buttons. You can get the effect by adding

    a:hover { background-color: transparent; color: $transparent-white; border: $transparent-white 2px solid; }

    This will make the <a> as the design has it. I would also add a 2px solid on the <a> This way when the hover on <a> , it doesn't add an additional 2 pixels to the height and width making the elements shift.

    Cheers!

    Marked as helpful

    2
  • Santiago Morales• 320

    @Aleroms

    Posted

    Good job on the challenge! I recently submitted my own solution too and was wondering how you used the 'mixed-blend-mode' to get the overlay color?

    1