All comments

• 

  Rajvir Singh•320

  @rajvirsiinghSubmitted almost 2 years ago

  

  Notification Page Main

  1

  20
  

  Annas Dwi•410

  @anasdwcPosted almost 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

  This comment has received 1 replyShow
• 

  HannTosin•30

  @HannTosinSubmitted almost 2 years ago

  

  Intro component with sign up form

  1

  20
  

  Annas Dwi•410

  @anasdwcPosted almost 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

  This comment has received 1 replyShow
• 

  Omar bakry•90

  @omar-bakrySubmitted almost 2 years ago

  Finally! I hope it is good, i am new to CSS

  

  Column-preview-card-component-main

  1

  30
  

  Annas Dwi•410

  @anasdwcPosted almost 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

  @LucasHMeloSubmitted almost 2 years ago

  Hello Folks,

  I thought this challenge was easier, but i had some difficulties doing him. Some of this problems were:

  • Background, apparently the bg is rotate, but i can't do this, some tip ?
  • profile image, in this part i can't put the name near to the profile image, because seems a div between the image and the text, why did this happen ?

  

  Profile Card using Flex box

  2

  50
  

  Annas Dwi•410

  @anasdwcPosted almost 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