Find New Authors Concept - Code Pong

#1

https://codepen.io/lunardigital/pen/xeLYVL

3 Likes
From Author Bios to Stories - Code Pong Leap
#2

Thanks for posting this Han! It’s great to see someone take part in the “code pong” concept. :grin:

I changed the font, tweaked the sizing a little bit, and changed the follow button color to our trademark green:

2 Likes
#3

code pong its not a bio anymore ¯_(ツ)_/¯

https://codepen.io/davidsmooke/pen/ZZJMjE

1 Like
#4

Great concept going here. I plan to submit a version where the content of the <img> tag are broken out into individual elements we can play with.

  1. The background with the slanted bottom edge can be accomplished in a few ways but I’m thinking about using <svg> with a mask. The real challenge here is doing all the measurements in order to create the <polygon> element. I’ve previously started exploring a similar concept so I know it’s pretty easy to accomplish in Vue.
  2. Positioning the avatar to overlay the background should be relatively trivial. I’d probably put both elements in a relatively positioned container and position the avatar bottom:0;left:30px;.