Tribute Page to Elon Musk - Any feedback appreciated!

Tribute Page to Elon Musk - Any feedback appreciated!
0

#1

Hey FCC!

After some hours i finally managed to finish my first real coding project; a tribute page to Elon Musk!

(http://codepen.io/Limbz/full/ENjPLx/)

All in all I am pretty satisfied with the result. The only thing that bugs me (which I don’t know how to fix) is when resizing the page to a smaller size, for example mobile, the title “Elon Musk - Engineer ~ Entrepreneur ~ Visionair” doesn’t scale well. The whole page scales down correctly, but the title remains the same size. If anyone has a tip on how to do this (or feedback in general) i would greatly appreciate it!

Cheers!


#2

Wow awesome page!

I really like those grey caption boxes with the shadows how did you make those if you don’t mind me asking? Really neat idea.

Page flows together really well.

With regards to the title words I would think it has something to do with it being absolutely positioned on your page which if I understand correctly means it won’t change as the screen scales. maybe try margin or padding to position it instead?


#3

Hey @goofydad21

Thanks for your feedback! I was thinking about the relative/absolute positioning as well but the problem is that placing text over an image requires the text to be absolute and the image to be relatively positioned as far as i know. However, i will try fiddling around with the margin/padding to see if i can make it work that way.

As for the caption box, the css-code is:

.caption{
font-family: ‘Molengo’, sans-serif;
font-size: 16px;
position: relative;
background-color: #cdcdcf;
padding: 8px 0px 8px 0px;
margin:-20px 50px -0px 50px;
border: solid 1px #222222;
box-shadow: 0 20px 35px -8px rgba(90, 90, 83, 0.9);
}

Nothing special going on at the HTML section, just add a caption to a picture.

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
This link might help you aswell

Cheers!


#4

Great page! And love the stylish yet simple layout~