All comments

• 

  Tayler• 50

  @AbraKadabraPuf

  Submitted 3 months ago

  

  addEventListener('mouseover'), document.querySelector

  2

  40

  

  oladayo adekoya• 20

  @dekzyd

  Posted 3 months ago

  Well written code and the design is like as the original. The transitions when hovering on the title give it a friendly feel. Great work!

  1
• 

  R.• 50

  @lvr1997

  Submitted 3 months ago

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

  @font-face {
        font-family: Outfit-Medium;
        src: url("./font/outfit/Outfit-Medium.ttf");
      }
  

  通过这种方式引入并定义本地字体，在项目中可以直接使用

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

  CSS 实现盒子模型水平垂直居中 方法一： position定位（适用于盒子有宽度和高度的时候）

  .parent {
    position: relative;
  }
  .child {
   position: absolute;
   top: 50%
   left: 50%
   margin-left: -25px; /* 自身高度的一半 */
   margin-top: -25%;
  }
  

  方法二：position + transform (子盒子没有固定宽高)css

  ....position的代码同上
  transform: translate(-50%, -50%)
  

  方法三：flex布局 （父子 都没有宽高时使用）

  .parent {
  display: flex
  justify-content: center
  align-items: center 
  }
  

  子元素就是水平垂直居中显示的

  

  qr-code-component

  1

  31

  

  oladayo adekoya• 20

  @dekzyd

  Posted 3 months ago

  It's a great work you've done, seems like the original except that the header text is wide. Using Flex for layout alignment is a good move. great Job!

  0