Skip to content
OverviewSolutions
8
Comments
6
Loo_cee
@Loocee

All comments

  • Loo_cee•230
    @LooceePosted about 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
    0
  • João Victor Modesto•20
    @JvModesto1Submitted about 2 years ago

    Hello guys, have one bug in the project, that is, if you select one number(like the number 3 for the rating) and after that you select other number (like the 5) and submite for the thank you mensage, in the part of the message appear a message for every number you select... anyone knows how to fix it?

    Interactive rating with javascript, HTML and CSS

    2
    Loo_cee•230
    @LooceePosted about 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}

    0
  • banana21311•170
    @stevopSubmitted about 2 years ago

    Hello, this was quite a challenge for me.

    Page acts good on iphone and ipad, but I am not sure about responsivity on other devices. I also didn´t know how to add backgrounds and img to the footer.

    Could please look into my code and give me some advices? I would really appreciate it!

    Thanks a lot!

    Huddle landing page

    1
    Loo_cee•230
    @LooceePosted about 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
    0
  • zeuhzDroid•210
    @Zeuhz-DroidSubmitted about 2 years ago

    NOTE : ⚠️ Since it's a project on card details, it's flagged by Google as a malicious website, just ignore and visit site still, inputting "dummy" details to test ⚠️

    Thank you.

    React and CSS

    2
    Loo_cee•230
    @LooceePosted about 2 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
    0
  • Godwin Okechukwu•20
    @godwin-okechukwuSubmitted over 2 years ago

    Hello, everyone! I am so excited to have completed my first FEM challenge. I struggled with margin, padding and sizing the <h2> and <p> tags to resemble the challenge design.

    How could I have done it better?

    I really didn't know what to do with the FEM mascot, so I left it off entirely from my solution.

    What could I ahve done with it?

    QR Code Component using Flexbox CSS and HTML

    1
    Loo_cee•230
    @LooceePosted about 2 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
    0
  • Aman•630
    @AmanGupta1703Submitted about 2 years ago
    1. I am finding it difficult to get a hover effect on the image 😕

    I would like to hear your feedback! 😊

    NFT Preview Card

    3
    Loo_cee•230
    @LooceePosted about 2 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
    1