My Tribute for Mr. Elon Musk himself

Not perfect, but I am proud of it. CodeAcademy gets me through alot of days at work when the day is slow. Glad to be here :slight_smile:

Anyways, check it out. Let me know what you think. Tested it on mobile devices and was able to get it responsive on all devices.

Project Link - https://codepen.io/Daniel-Bailey/full/BrOjdX

2 Likes

Here’s my feedback:

  1. Not gonna lie when I first opened the codepen I thought I was looking at a powerpoint slide haha. This is just something I noticed, due to the space between the top “card” and the other card. Maybe this is done on purpose?
  2. I might want to center the title card, right not its left-center aligned.

Otherwise nice clean look, and good color scheme for Elon I think :smiley:

1 Like

haha. I know what you mean. Yea it was intended. I liked to see the break between the two. That’s good feedback though. And yes…don’t have a clue where I got the inspiration :wink:

how did you make the elon quote pic float. Like it looks like its floating above the main page

1 Like

I just used a drop shadow property on the div. It’s not technically floating ,just gives the illusion of it. I just wanted it to be separate from the main body of the tribute page.

Nice layout Daniel. Well Done.

sorry. how did you center the div on the page?

1 Like

you can center a div on a page by using “margin: 0 auto”

or you can use something like this:

then use:

.outer-div {
display: flex;
justify-content;
center;
align-items: center;
flex-direction: column;
}