Skip to content
OverviewSolutions
2
Comments
2
oladayo adekoya
@dekzyd

All comments

  • oladayo adekoya•20
    @dekzydPosted 5 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
    @lvr1997Submitted 5 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
    oladayo adekoya•20
    @dekzydPosted 5 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