Member-only story
The demo was learned from Kevin Powell.
Set the HTML with class “title”
css
The decorate line will keep around the title when the browser resizes.
position:absolute keep relative position to the title.
.title::before the background of the title layer down the h1.
.title::after the line around the title which should be 100 view width of screen and centered [left:50%;transform:translateX(-50%);].
hover image
The card contains an image and some description in the card-text.
The container aligned in the center with flex.
::before and ::after relative to .card.
::before — -the top and bottom line scale in the X axis with animation.
::after — -the left and right line scale in the Y axis with animation.
