I'm having trouble aligning the share button with the user pic and name/date on the bottom of the card, especially in mobile view. I'm guessing that it's because I coded the share-btn in a separate div from the info in my HTML?
As for desktop view: I'm stumped on why the bottom of the container is falling off in the generated screenshot. It looks normal on my desktop. I think it's because of how I used the margin to push everything down.
There's a bit of white space left on the bottom of the cards with shorter reviews. I tried messing with font-size and padding/margin to get it closer to the final design imgs, but there's still a bit of space left in Jeanette's card.
Also, I used the colors in the provided styles md, but they still look off compared to the final design.
Any redundancies in my code! Also, I'd like to know if my CSS is easy to follow along. I'm thinking of switching to coding all the typography in the beginning and then the rest, instead of coding each part as it appears in the design file.
Also, any suggestions on how to fix my box shadow so that it looks more like the design would be very helpful.
I keep getting a small amount of white space between the bottom of the img and the end of the product card when viewed via desktop. I'd like to know how others went about planning the height of their product card, and if they used px or a more responsive unit of measurement.
I did choose to use to emulate the line breaks in the design, but I'm curious to see if there's a better or neater way to accomplish that with another kind of CSS. I'd also like to know if I used the table html correctly for the nutrition information section.
I saw that the pointer cursor in the active states screenshot was black as opposed to white. Is there a way to style the cursor: pointer in CSS to be black? Or does it have to be a custom pointer: url()?
That I finished the project!
What challenges did you encounter, and how did you overcome them?JavaScript was a challenge.. I'm not sure I overcome them, but hey, code works :)
What specific areas of your project would you like help with?JavaScript
shareButton.addEventListener('click', function() {
shareLinks.classList.toggle('no-show')
}
That way it adds and removes the no-show class to your share links with every click.
Learning how to make grid layout and using grid area
CSS
All of my suggestions follow the order in your CSS file.
design/typography
margin: 0 on the .word p selector in order to get rid of the space between the name and verified graduate. That way, it looks closer to the design where both are on top of each other instead of having space in between.padding-top: 12px and padding-top: 15px on your img selector so that the profile pic is a circle instead of a half oval in mobile and desktop layout. Instead of using padding-top, add a align-items: center in your .name to align both divs.; after --white: hsl(0, 0%, 100%). adding the semi-colon will make your card_3 and card_5 have white backgrounds.container in your @media (max-width: 1000px) media query./css grid/
.col1, .TeamBuilder, .Karma, .col3 {
width: 100%
}
to a smaller value like width: 80%
title div so that there's less space between them. That way it can look more like the design.Your code is well-structured and readable. However, I would change the fixed width of the .container div (width: 400px) to a value under 375px, so that your card doesn't get cut off in mobile view.
It was my first time that I had to use the CSS counter() function, it was pretty useful in order to match the design of the ordered list.
I like how both your HTML and CSS is very neat and well-structured. Your solution looks similar to the design for both desktop and mobile. I liked that you used the CSS counter function to style the numbers in your ordered list!
a aaaa i want heelp with this javascript and design
border-radius: 15px property to the .out-card div to round the corners like in the solution.color: var(--White);@media (min-width: 1200px) so that it's not as wide when on desktop