Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
23
Comments
8

Luis paz

@PazispeaceVenezuela390 points

I'm an 18 year old guy from Venezuela who likes languages (yes, those that we, individuals, speak) I also like the Final Fantasy saga, it's my favorite! I discovered this world of web development by accident and I ended up liking it! So if we can get along it would be great!

I’m currently learning...

JavaScript!

Latest solutions

  • qr card component - BEM

    #bem

    Luis paz•390
    Submitted 9 months ago

    if someone could let me know how can I improve my code or let me know if it looks clean


    0 comments
  • responsive rest countries api with color theme switcher (vanilla JS)

    #fetch

    Luis paz•390
    Submitted over 2 years ago

    0 comments
  • Responsive base apparel coming soon page


    Luis paz•390
    Submitted over 2 years ago

    0 comments
  • responsive FAQ accordion card


    Luis paz•390
    Submitted almost 3 years ago

    0 comments
  • Interactive rating component


    Luis paz•390
    Submitted almost 3 years ago

    0 comments
  • Responsive Product preview card component


    Luis paz•390
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • David•70
    @davidghignone
    Submitted over 1 year ago

    Card QR - CSS Flex

    #bem
    2
    Luis paz•390
    @Pazispeace
    Posted 9 months ago

    looks nice

  • Adrian Salinas•160
    @a-dri-an-S
    Submitted about 3 years ago

    Product Card

    1
    Luis paz•390
    @Pazispeace
    Posted about 3 years ago

    hi!, nice solution =)

    I have some feedback that could be of help

    on your product-btn class instead of using a fixed height, try using padding. In this case I tried with 1 rem and seems fine (100 px is way too much hehe)

    and that´s all! everything seems great

  • aKennich•160
    @akennich
    Submitted about 3 years ago

    html, css, flexbox, vw unit

    1
    Luis paz•390
    @Pazispeace
    Posted about 3 years ago

    Hi there aKennich! Nice solution :). I have some feedback that might help.

    • First of all I would recommend you to use rem unit instead of em unit (you will have some troubles using em unit if you don´t know when to use it) rem vs em Units in CSS

    • Set a max width to the card so the card does´t get bigger and bigger, I tried with 21 rem and works fine! Avoid using % in this case since it will always take the 40 % of its container, and its container is the body (which does not have a fixed width)

    .card {
        max-width: 21rem;
        background-color: hsl(216, 50%, 16%);
        border-radius: 1rem;
        font-family: 'Outfit', sans-serif;
        padding: 1rem;
    }
    
    • I think you forgot to add to the span of "Jules Wyvern" a white color hehe
    span.cyan{
        color:hsl(0, 0%, 100%);
    }
    

    Change the em unit for rem so you won´t have troubles with sizes : - )

    happy coding, wish you a nice day! :D

  • Joseph•150
    @joexyjay
    Submitted about 3 years ago

    Stats Preview Card Component

    1
    Luis paz•390
    @Pazispeace
    Posted about 3 years ago

    Hi there Joseph! Nice solution :D I have some tips and adjustments that might help!

    • In your overlay div which is inside the images-section div. I would recommend you to apply a border-radius with the value of inherit to it (the overlay). If you look carefully the border bottom right and border top right are not rounded, that is because border-radius is not an inheritable property. For that you have to specify it in the class:
    .overlay {
        height: 100%;
        background-color: hsl(278, 75%, 33%);
        opacity: 0.5;
        border-radius: inherit; //here!!!!!
    }
    
    • I think 1500px for your image is way too much hehe, try it with 900 px or les (or a bit more) instead:
    @media (min-width: 800px)
    .images-section {
        background-image: url(images/image-header-desktop.jpg);
        width: 900px; //here!!!!!
        background-size: cover;
        background-position: initial;
        height: auto;
        border-top-left-radius: 0;
        border-bottom-right-radius: 10px;}
    
    • When shrinking the viewport, your text-section div overflows, that is because of the padding you added to it (top and bottom). Instead you can try adding display:flex with its flex direction in column, and justify-content:center; (this defines the alignment along the main axis. The main axis is Y (vertical) in this case because the flex direction is column). Additionally I added the flex-basis property this defines the default size of an element before the remaining space is distributed... Worth knowing that Flex-basis matches width when the container has flex-direction: row and a defined value other than auto. If the container had flex-direction: column, flex basis would match the height of the component, as long as its value is not auto.

    If the container has flex-direction: row, the value of the flex-basis property overrides the width property. The same with flex-direction column overriding the height property

    @media (min-width: 800px)
    .text-section {
        font-size: 20px;
        display: flex; //here!!!!!
        padding: 0 35px;
        flex-direction: column;  //here!!!!!
        justify-content: center;  //here!!!!!
        flex-basis: 80%;  //here!!!!!
    }
    

    -Try to not use px units since absolute units ( px , in , mm , cm , pt , and pc ) are as bad for accessibility and responsive design as using tables for layout

    Articles I think might be helpful:

    A complete guide to css Flexbox

    CSS Units For a Responsive Design

    PX, EM, or REM? Examining Media Query Units in 2021

    Happy Coding, I wish you a happy day! : )

    Marked as helpful
  • Toni•70
    @Skoro11
    Submitted about 3 years ago

    Testimonials with CSS grid

    1
    Luis paz•390
    @Pazispeace
    Posted about 3 years ago

    for your first question, I recommend you reading https://codeguide.co/ !, I think it may help :) happy coding!

    Marked as helpful
  • osman abdulhakim•40
    @osmanhakim
    Submitted about 3 years ago

    huddle landing page with curved sections master html & css

    1
    Luis paz•390
    @Pazispeace
    Posted about 3 years ago

    you uploaded your solution in the wrong challenge hehe. Upload the solution to the corresponding challenge

View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub