Lesley Kimutai

Latest comments

• 

  Kibiwot Kosgei•110

  @kibiwotkosgeiSubmitted over 2 years ago

  

  Chat app CSS Illustration

  2

  50
  

  Lesley Kimutai•565

  @LeskimPosted over 1 year ago

  Kazi safi bro

  0
• 

  KibenonCollins•120

  @KibenonCollinsSubmitted almost 2 years ago

  

  Express-chart-component-solution

  1

  50
  

  Lesley Kimutai•565

  @LeskimPosted almost 2 years ago

  You can add the hover on the bars by adding a p tag with the amount while mapping out the data

   <div class=${ bar.day === dayName ? "activeday" : "bar"} 
           style="height:${bar.amount * 3}px"> </div>
           <p class="amount">$${bar.amount}</p>
           <p class="day"> ${bar.day} </p>
  

  then setting it to display when the bars are hovered using css

  .bar_items {
    position: relative;
  }
  
  .amount {
    position: absolute;
    top: -2.3rem;
    background-color: var(--Darkbrown);
    color: var(--Verypaleorange);
    padding: 0.5rem;
    font-size: 0.7rem;
    border-radius: 3px;
    display: none;
  }
  
  .bar:hover + .amount {
    display: block;
  }
  
  

  Marked as helpful

  0
• 

  Max Mwihaki•30

  @mmwihakiSubmitted about 2 years ago

  

  Responsive social proof section

  #bootstrap

  1

  50
  

  Lesley Kimutai•565

  @LeskimPosted about 2 years ago

  Hello, Kudos on completing the challenge👏🏾. To get the column2 and column3 to look like the design(move a bit from the top) you can use the transform property -- transform: translateY(20px) for column2 and about 40px for column3. I can see you tried it with margin-top.

  Marked as helpful

  0
• 

  Alt08•60

  @Alt08Submitted about 2 years ago

  

  NTF card with flexbox

  #accessibility#animation

  2

  40
  

  Lesley Kimutai•565

  @LeskimPosted about 2 years ago

  @Alt08 Nice completing the challenge👏🏾. To add the hover effect you can add an empty div with a class of .view below your nft img then style the container__img section when the div is hovered. You can also add the eye image on hover too and center it as shown below. Hope this helps you out

   .container__img .view:hover  {
    background-color: var(--Cyan);
    background-image: url("../images/icon-view.svg");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0.75;
  }```
  

  1
• 

  Anointed Kayode•420

  @Coderio10Submitted over 2 years ago

  

  Stats preview card

  1

  50
  

  Lesley Kimutai•565

  @LeskimPosted over 2 years ago

  Congrats on completing the challenge

  The main section should have a max-width property so that on larger screens it does not become too big as yours does coz you've set your width to 150vh which changes your width even when one brings up the developer tools due to height change ---stick to px/% for widths.

  Also setting an explicit height on the main height: 350px has made text overflow out of the first section --you can edit out this part and maybe reduce the padding a bit on the first section

  Finally fix your accessibility issues span tags should be inside h1, p tags -- not the other way around

  1
• 

  Kibiwot Kosgei•110

  @kibiwotkosgeiSubmitted over 2 years ago

  

  Chat app CSS Illustration

  2

  50
  

  Lesley Kimutai•565

  @LeskimPosted over 2 years ago

  Nice work Kibiwot 👏🏾 ... Edit how the avatar img has been linked to the phone so that it shows up Also fix the accessibility issue for not labeling the radio input elements

  1