nilikopo

Latest comments

• 

  codeten•170

  @shiroblsdSubmitted 18 days ago

  

  Component master

  2

  10
  

  nilikopo•110

  @nilikopoPosted 17 days ago

  nice

  0
• 

  AilaFelixx•80

  @AilaFelixxSubmitted 17 days ago

  What challenges did you encounter, and how did you overcome them?

  I had a lot of trouble with the height of the main element. I had to set a fixed value to make the page look nice because otherwise, the background would only go as far as before the first section started.

  Besides that, there were small details I couldn't figure out, like increasing the distance between list bullets and the start of the sentences, changing the color of the bullets, and aligning the text inside lists so that the second line starts at the same point as the first. I think this last part might be confusing. For example:

  I couldn't get it to look like this:

  • XXXXXX
    XXXXXX

  Instead, it turned out like this:(ignore the "_", it's just a space)

  • __XXXXXX
    XXXXXX

  Anyway, I struggled, but I managed to make it work.

  I’d love any advice—it's very welcome! 😊

  

  Recipe page with mobile-first(media-query)

  2

  30
  

  nilikopo•110

  @nilikopoPosted 17 days ago

  Hi,

  Distance between <li> and marker: list-style-position: inside; and text-indent: -2rem; are blocking the way to put distance between list bullets and start of the sentence with using padding-left: 2rem; or padding-inline-start: 2rem;.

  It will also fix text aligning inside list.

  u can use pseudo-element ::marker to change the color of markers

  code i used

  .instructions-item::marker {
      color: var(--color-brown800);
      font-weight: 600;
  }
  

  Height of main element: i removed every fixed height in media queries and in main block: height: XXXrem in @media, height: 206.9rem; in main. Then i removed fixed height in html, body and set it to height: auto; and added additional padding-bottom: 4rem; to main element.

  Marked as helpful

  1
• 

  Simon Hickling•340

  @SimonHicklingSubmitted 18 days ago

  

  Testimonials Page

  1

  10
  

  nilikopo•110

  @nilikopoPosted 18 days ago

  looks cool

  0
• 

  Mohamed Hamdan•80

  @Muhammed-HamdanSubmitted 19 days ago

  What are you most proud of, and what would you do differently next time?

  Used only flex box, can try recreating with grid

  What challenges did you encounter, and how did you overcome them?

  1. Child elements of flex box are not pinned to parent, used overflow: hidden to solve it
  2. Used negative margin to align cart icon with text in button

  What specific areas of your project would you like help with?

  Please give suggestions to better organize the CSS and make it more readable

  

  Flex box product card

  2

  30
  

  nilikopo•110

  @nilikopoPosted 19 days ago

  u can use :root to store some known variables

  :root{
      /* given variables from style-guide.md */
      --color-dark-cyan: hsl(158, 36%, 37%);
      --color-cream: hsl(30, 38%, 92%);
      --color-very-dark-blue: hsl(212, 21%, 14%);
      --color-dark-grayish-blue: hsl(228, 12%, 48%);
      --color-white: hsl(0, 0%, 100%);
  
      /* my own variables */
      --border-radius: 10px;
      --padding-description: 2em;
      --padding-description-vertical: 1.5em;
      --padding-price-inline: 1.5em;
      --padding-button: 1em;
  }
  

  0
• 

  Toskytd•100

  @ToskytdSubmitted 20 days ago

  

  responsive design of four-card using css grid

  1

  10
  

  nilikopo•110

  @nilikopoPosted 19 days ago

  nice

  0
• 

  YT-PROGRAMMER•30

  @YT-PROGRAMMERSubmitted about 2 months ago

  

  Product preview card component

  1

  30
  

  nilikopo•110

  @nilikopoPosted about 1 month ago

  pretty cool

  1