
Loo_cee
@LooceeAll comments
- @rapha0311@Loocee
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 - @JvModesto1@Loocee
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}
- @stevop@Loocee
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:
- Visit (https://www.educative.io/answers/how-to-create-columns-in-html) to help you add columns in your row div.
- For the background, here are some examples to help you add the background: HTML
</div><div class="container-fluid"> <div class="row bg-row top-desktop1"> <-- This is the div for the background -->
<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 - @Zeuhz-Droid@Loocee
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@Loocee
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 - @AmanGupta1703@Loocee
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