Skip to content
OverviewSolutions
18
Comments
10
Erel Ropeta
@ereljapco

All comments

  • Erel Ropeta•385
    @ereljapcoPosted over 2 years ago

    Hey, MirTynan!

    Try to use rem. 0.65rem worked for mine :)

    And if I may add some suggestions:

    Re: accessibility

    • You can wrap your container inside main.
    • You can add alt="Add a description here" for the image

    Re: style

    • You can use flexbox on main to place your item in the center of the viewport. Consider setting your height to 100vh
    • You can add the font-family that is in the style-guide.md
    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoPosted over 2 years ago

    Hey, Shay! Nice to see your finished solution for this challenge. Just submitted mine, as well :)

    Just some few points:

    Re: accessibility

    • You could wrap the container inside the main tags and the attribution inside the footer tags.
    • For the icon tag, since its for decoration only, you could add a blank alt alt=""

    Re: styles

    • If you will use the main tags, as I suggested, you could set its height to 100vh and place your container in the center using flexbox on the main
    • You can decrease your breakpoint (i.e. the value of min-width on media query) to make your solution more responsive :)
    Marked as helpful
    0
  • icyrockgirl•30
    @icyrockgirlSubmitted over 2 years ago

    Please provide suggestions and improvements for my code. It would be really helpful. 😊

    HTML, CSS, JS

    1
    Erel Ropeta•385
    @ereljapcoPosted over 2 years ago

    Re: styles

    • The select should be be light grey colored, while the hover state should be the orange colored
    • You forgot to add cursor: pointer
    • You forgot the hover state for the submit button

    Re: accessibility

    • wrap your main contents with the main tag
    • wrap your attribution with the footer tag
    • since the image is for decorative, you could add alt=""

    More information regarding accessibility here https://www.w3.org/WAI/tutorials/images/

    Overall, great job on finishing the challenge! Hope to see more finished challenges from you :)

    Marked as helpful
    0
  • Vani•160
    @VANIMEHTASubmitted over 2 years ago

    1)Can somebody pls tell how do I put the dollar-sign and user img in my button placeholder. 2)Also my java script is not working fine,it would be great if u suggest changes.

    TIP CALCULATOR

    1
    Erel Ropeta•385
    @ereljapcoPosted over 2 years ago

    Hello!

    • You can wrap the dollar sign and the input element in a container. And add styles to it :)
    <div class="bill__input-container">
  <p class="bill__dollar-sign">$
<input class="bill__input" />
</div>
    • You're currently using tipchoosen, which is a nodelist, to get the value of the button clicked. tipchoosen.value returns undefined. Instead, use the event.target to get the value.

    Some things I noticed that you could look into:

    • 50% tip button's value was set to 0.25
    • NaN is appearing when billVal is empty. You can add an if condition so you can set a value to billVal if it becomes empty.
    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoPosted almost 3 years ago

    Hello, Alif. Great work! Tried the functionality of your work. The amount backed and number of total backers is updating, however the number of items left isn't.

    Marked as helpful
    1
  • Erel Ropeta•385
    @ereljapcoPosted almost 3 years ago

    1. You can make the on hover effect by adding a div inside the div container of the equilibrium image. Then add the view image inside the newly created div. Make use of the position property where the new div is placed on top of the equilibrium. Set the background-color of the new div to the primary. Then set the opacity of the new div to 0. Then set the opacity of the new div on hover to 0.x.

    2. For the accessibility issues, you can use main tag instead of div tag for the div.container and footer tag for the div.attribution.

    Marked as helpful
    0
  • Gregg Christofferson•295
    @gchristoffersonSubmitted about 3 years ago

    I'm wondering if there is a more elegant solution to the offset positioning of the review and testimonial boxes? I offset them by first setting the position to relative for all boxes and then by selecting the appropriate :nth-child(). I then adjusted the bottom or left positioning. I'm sure there is a more elegant solution and if you know of one I would love to hear your feedback.

    Responsive social proof section using Flexbox

    3
    Erel Ropeta•385
    @ereljapcoPosted about 3 years ago

    What I did was used flexbox, then used justify-continent for the reviews and align-self for the testimonials :)

    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoPosted about 3 years ago

    Hello! It looks good. But I think you can maximize the use of the <body> and <main> tags. On your CSS, you can transfer the properties of the .main-container to the body tag and the properties of the .wrapper to the .main-container. Then add the class .main-container to the <main> tag and change the <header> tags into <divs>.

    And for the CSS, you can still add styles to the <button> tags.

    Good job! :)

    0
  • Joseph Spinelli•20
    @JoeSpinSubmitted about 3 years ago

    I struggled greatly with lining up the content properly. Is there a better way to do so than wrapping everything in divs?

    Also the background didn't look 100% right. Was wondering what I did wrong there?

    How do I make the shadow match up as well?

    Order Summary Component Using Flex

    1
    Erel Ropeta•385
    @ereljapcoPosted about 3 years ago

    Hello! Just finished doing this, too :)

    1. For the background, you're using the background-image for the mobile design on the 1440px design and I think you forgot to add the background-color.

    2. You can add blur to the shadow :)

    0
  • Alexandre•140
    @Alexandre-ChsSubmitted over 3 years ago

    Hello !

    I had some worries ..

    1. My mobile height does not work. I cheated by putting a color in the background, but it's not good. I should have done?

    2. I had a problem with my SVG, I had to give a height and width on the HTML, because otherwise impossible to make a circle correctly .. a viable solution?

    3. Why the page load, i have a scroll bar ? I think is because i use animation with negative numbers.. right ? How to solve the problem ?

    If you see other worries, do not hesitate! First time I have to organize my code "proper, it's not easy at all! But it's a habit to have. Thank you ! ♥

    SCSS - HTML - ANIMATION

    2
    Erel Ropeta•385
    @ereljapcoPosted over 3 years ago

    I'm doing this challenge, too :) I love the animation you did! I wish I could implement those in the future, as well.

    1. You can set the position of the background image as top and set the width to 100% if you intend to make it look like the design preview then make set to scroll.

    2. Is this for the icon SVG? If so, you can put a class on the <link> tag then place a circle border.

    3. To remove the scroll on the desktop view, you can add "overflow: hidden;" on the body.

    Let me know if you encounter any errors, so I could check back on my work. Cheers!

    0