Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
19
Comments
8
CarvalhoVincent
@CarvalhoVincent

All comments

  • Eman Abdallah Shaltoot•380
    @Eman-Abdallah
    Submitted almost 3 years ago

    Advice-generator-app

    1
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted almost 3 years ago

    Hello @Eman-Abdallah, It's not a JSON file, you need to connect an API, then you can generate random advices. The information is in the README file inside the main folder you download when you start the challenge. You can find all the information you need in this file and the API website.

    Hope this helps !

    Marked as helpful
  • Fernanda•180
    @ferlagher
    Submitted almost 3 years ago

    Responsive component using Grid and Flexbox + Small animation ✨

    #sass/scss#bem
    2
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted almost 3 years ago

    Nice animations for your buttons in your last 2 projects , I really like it 😄 Eager to see your next solutions !

  • seruaJ•230
    @FaideJaures
    Submitted almost 3 years ago

    vanilla js, flex

    1
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted almost 3 years ago

    Hi, nice solution ! A simple thing you can do is to check your radio buttons with JS when you click on Select Reward for Bamboo Stand or Black Edition :

    <div>
                <span><strong>101</strong> left</span>
                <button onclick="checkRadio1()">Select Reward</button>
    </div>
    
    <div>
                <span><strong>64</strong> left</span>
                <button onclick="checkRadio2()">Select Reward</button>
    </div>
    
    const pledge1= document.getElementById("pledge_1");
    const pledge2= document.getElementById("pledge_2");
    
    function checkRadio1() {
            modal.style.display = "block";
            pledge1.checked = true;   
    };
    
    function checkRadio2() {
            modal.style.display = "block";
            pledge2.checked = true;   
    };
    

    And maybe after you can try to update the progress bar dynamically, or update the total backed, total backers, or stand left numbers. You can check my solution if you want, it's not perfect but it could be a starting point.

    Hope it helps !

    Marked as helpful
  • Keagan Dickinson•160
    @PhisherFTW
    Submitted about 3 years ago

    FAQ Accordion Card

    2
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted about 3 years ago

    You can look at my solution, I managed to do it by including all the images in the HTML file, with two divs, inside the white Box, with the overflow: hidden.

    <div class="white-box">
          <div class="images">
            <img src="./images/illustration-woman-online-desktop.svg" class="illustration-woman-online-desktop" alt="illustration-woman-online-desktop">
            <img src="./images/bg-pattern-desktop.svg" class="bg-pattern-desktop" alt="bg-pattern-desktop">
          </div>
          <div class="square">
            <img src="./images/illustration-box-desktop.svg" class="illustration-box-desktop" alt="illustration-box-desktop">
          </div>
    </div> 
    
    .images {
                        overflow: hidden;
              }
    

    Hope this helps. Happy coding !

    Marked as helpful
  • Kevin•110
    @KKS1991
    Submitted about 3 years ago

    Intro Sign-up form with HTML, CSS, JS & Bootstrap

    #bootstrap
    2
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted about 3 years ago

    Hi, this looks good.

    • For your issue, you can use same margin or padding for top and bottom, like:
    p { 
          padding-top: .5rem;
          padding-bottom: .5rem;
    }
    
    or
    
    p {
         margin: .5rem 0;
    }
    
    • For the mail format, you can use a pattern, like this :
    <input type="email" id="mail" placeholder="Email Address" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    

    Hope this is helpful. Happy coding !

    Marked as helpful
  • Dileep YS•50
    @Dileep001
    Submitted about 3 years ago

    NFT-preview-card-component

    2
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted about 3 years ago

    Great solution! You can easily fix your accessibility and html issues:

    • Replace the first div by main :
    <body>
         <main>
            "your code"
        </main>
    </body>
    
    • Replace the <h3> by a <h1> :
    <h1>Equilibrium #3429</h1>
    
    • Fill in the alt="" in the img tag.
    <div class="ic-view"><img src="./images/icon-view.svg" alt="icon view" width="30px" height="30px"></div>
    <img src="./images/icon-ethereum.svg" alt="Ethereum symbol" height="15px" width="10px">
    <img src="./images/icon-clock.svg" alt="a clock" height="15px" width="15px">
    <div class="in"><img src="./images/image-avatar.png" alt="avatar" height="25px" width="25px"></div>
    

    maybe you already know these things, if not I hope this helps. Happy coding !

    Marked as helpful
  • Kehinde•680
    @jonathan401
    Submitted about 3 years ago

    FAQ Accordion Card using Scss

    #sass/scss
    1
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted about 3 years ago

    Your Solution looks good ! One thing, on Safari, your summaries still have the black arrow on the left. Maybe it can be fix with this.

    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }
    
    Marked as helpful
  • Moris Tibenkana•160
    @tmoris
    Submitted about 3 years ago

    Responsive interactive rating component code using HTML, CSS JS

    #accessibility
    1
    CarvalhoVincent•500
    @CarvalhoVincent
    Posted about 3 years ago

    Hi, seems there's an error in your JS line 37, check the console with inspector. And duplicate id for "numbtn-5". The report show also : bad value put for attribute method on element form. Maybe it's a first step to resolve your problem. I'm not able to help you more this time, I did it with an array. Happy coding !

    Marked as helpful
Frontend Mentor logo

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