Annas Dwi

Latest comments

• 

  Rajvir Singh•320

  @rajvirsiingh

  Submitted over 2 years ago

  

  Notification Page Main

  #accessibility

  1

  20
  

  Annas Dwi•410

  @anasdwc

  Posted over 2 years ago

  Hello👋

  1. You can use Grid or Flex to help you to make layout

  Code ⌨️:

  body {
    display: grid;
  }
  

  Documentation 📓:

  • Grid: A Complete Guide to CSS Grid | CSS-Tricks - CSS-Tricks

  • Flex: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

  • Instead of using table, use Grid or Flex is helpful and make it easier to create your layout

  2. Your number of unread notification not change if button clicked

  document
    .querySelector("#read")
    .addEventListener("click", function handleClick() {
      document.querySelector(".number").innerHTML = 0;
  
      for (let i = 0; i <= 4; i++) {
        document.querySelectorAll("i")[i].style.color = "white";
        document.querySelectorAll(".notification")[i].classList.remove("unread");
      }
    });
  

  • add innerHTML = 0 make your number change to 0

  Feel free to reach me out 🍻

  1
• 

  HannTosin•30

  @HannTosin

  Submitted over 2 years ago

  

  Intro component with sign up form

  1

  20
  

  Annas Dwi•410

  @anasdwc

  Posted over 2 years ago

  Hello👋

  • You can use Grid or Flex to help you to make layout

  Code ⌨️:

  body {
    display: grid;
  }
  

  Documentation 📓:

  • Grid: A Complete Guide to CSS Grid | CSS-Tricks - CSS-Tricks

  • Flex: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

  • Instead of using postition: absolute, use Grid or Flex is helpful and make it easier to create your layout

  Feel free to reach me out 🍻

  0
• 

  Omar bakry•90

  @omar-bakry

  Submitted over 2 years ago

  

  Column-preview-card-component-main

  1

  30
  

  Annas Dwi•410

  @anasdwc

  Posted over 2 years ago

  Hello 👋

  • Your component not center in mobile view

  You can use justify-content to make your content center

  Code ⌨️:

  .parent {
     justify-content: center;
  }
  

  Documentation 📓: justify-content - CSS: Cascading Style Sheets | MDN

  Feel free to reach me out 🍻

  0
• 

  Lucas H. de Melo•70

  @LucasHMelo

  Submitted over 2 years ago

  

  Profile Card using Flex box

  #accessibility

  2

  50
  

  Annas Dwi•410

  @anasdwc

  Posted over 2 years ago

  Hello @LucasHMelo 👋

  • For background image, you can add some value for positioning your image

  Documentation 📓:

  https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

  • You can add some value to background-position

  Code ⌨️:

  body {
    background-image: url(../../images/bg-pattern-top.svg),
      url(../../images/bg-pattern-bottom.svg);
    background-position: top -380px left -110px, bottom -350px right -150px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  

  • It's better if you use the img HTML syntax instead of using the background-image in CSS. img HTML is also easier to customize.

  Feel free to reach me out 🍻

  0