Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
6
Loo_cee
@Loocee

All comments

  • Raphael Alves Ferreira•70
    @rapha0311
    Submitted over 2 years ago

    Advice Generator

    #fetch
    1
    Loo_cee•230
    @Loocee
    Posted over 2 years ago

    Hi, maybe you could align the texts in the body to center

    body { text align: center; }

    I think you should also remove the height property from your container so it can adjust to changes

    Add margin top and bottom to the content in your container excluding the button, so they can be evenly spaced.

    Rather than leaving your page empty till the user clicks the button, I think you should add some content like Advice #117 as given in the design files.

    I hope this helps and happy coding.

    Marked as helpful
  • João Victor Modesto•20
    @JvModesto1
    Submitted over 2 years ago

    Interactive rating with javascript, HTML and CSS

    #jss#accessibility
    2
    Loo_cee•230
    @Loocee
    Posted over 2 years ago

    Hi Modesto, well done in completing this challenge. Now to get you JS to execute properly, you don't need to tap into the data rate attribute, infact i think it's not even needed in your HTML or JS. To get the value of the button selected, you just need to use the .innerHTML() method and you'll be able to tap into the value and then use conditions e.g if .... (innerHTML === 2) { div.innerHTML() = you selected 2out of 5}

  • banana21311•170
    @stevop
    Submitted almost 3 years ago

    Huddle landing page

    #sass/scss
    1
    Loo_cee•230
    @Loocee
    Posted over 2 years ago

    Hi Steve, great job you have done in trying to replicate the website, but you were only able to replicate the mobile design here. Have you tried building desktop first and then making changes for the mobile state? I think you should try that. Here are a few things you can add to your code to achieve the desktop layout:

    1. Visit (https://www.educative.io/answers/how-to-create-columns-in-html) to help you add columns in your row div.
    2. For the background, here are some examples to help you add the background: HTML
    <section>
      <div class="container-fluid">
    
        <div class="row bg-row top-desktop1">  <-- This is the div for the background -->
        
    
    </div>
        <div class="row blue-row">
    
          <div class="col-md-6 col-sm-12 mobile center">
    
            <img class="human-icons" src="images/illustration-grow-together.svg" 
    

    alt="Grow together illustration">

          </div>
    
          <div class="col-md-6 col-sm-12 center">
    
            <div class="grow-together">
    
              <h3 class="margin1">Grow Together</h3>
    
              <p class="margin1">Generate meaningful discussions with your audience and build a strong, loyal community.
              Think of the insightful conversations you miss out on with a feedback form.</p>
    
            </div>
    
          </div>
    
          <div class="col-md-6 col-sm-12 desktop center">
    
            <img class="human-icons" src="images/illustration-grow-together.svg" alt="Grow together illustration">
    
          </div>
    
        </div>
    
        <div class="row bg-row bottom-desktop1">
    
        </div>
    
      </div>
    
    </section>
    

    CSS

    .top-desktop1{

    background-image: url(images/bg-section-top-desktop-1.svg);

    background-position: center; /* Center the image */

    background-repeat: no-repeat; /* Do not repeat the image */

    background-size: cover; /* Resize the background image to cover the entire container */

    }

    You'll need a div in your row div to add the background image. To understand more on how it works, visit (https://www.w3schools.com/cssref/pr_background-image.asp).

    I hope this helps and I'll be glad to give more explanation if you still need any. Happy coding :)

    Marked as helpful
  • zeuhzDroid•210
    @Zeuhz-Droid
    Submitted almost 3 years ago

    React and CSS

    #react
    2
    Loo_cee•230
    @Loocee
    Posted almost 3 years ago

    Hi, i couldn't preview your site. I think you should rename your repository or url so it can be accessed. Try adding a name that doesn't contain the word "card", so we can access it.

    Marked as helpful
  • Godwin Okechukwu•20
    @godwin-okechukwu
    Submitted almost 3 years ago

    QR Code Component using Flexbox CSS and HTML

    #flutter#graphql#mysql#react#django
    1
    Loo_cee•230
    @Loocee
    Posted almost 3 years ago

    Hey, great job on replicating. However I noticed your work isn't in the center. Try using Body { Display: flex; flex-direction:column; justify-content:center; Align-items: center; min-height:100vh; } I also don't think the <small> tag was necessary, you can always change the font size of the <p> tag. Hope this helps and happy coding

    Marked as helpful
  • Aman•730
    @AmanGupta1703
    Submitted almost 3 years ago

    NFT Preview Card

    3
    Loo_cee•230
    @Loocee
    Posted almost 3 years ago

    Hey, great job on replicating. Well to get the hover effect correctly, you have to set the nft image as the background image for the div and then using a before pseudo class, set the content of the div as " " . Then you can add an hover effect to the pseudo class and set your background image and color. I hope this helps.

    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