Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Benjie Kibblewhite
Benjie Kibblewhite
9,323 Points

Got bored, tried an experiment!

I was going cross eyed during this course, so I decided to play with some colour schemes on a mock website. The links on the navigation bar change the class of a wrapper div that holds the entire page.

Was a fun, easy little project, that maybe took about two hours or so.

See the Codepen below. Thoughts are appreciated!

https://codepen.io/kibben/pen/pENbdP

Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points

Looks cool :D

How did you make the picture round? I cant seem to find it in the code.

3 Answers

To make a picture round, Andreas Frost Nordstorm-Hansen (Lol what a long name), you can do this (in my example I'd make all the images round if you try it):

img {
  border-radius: 100%;   
  /* Note: This will make a full circle. Try changing it's value to 50% (or even 20px!) and see what happens! :) */
}

Hope this helps, Andreas Frost Nordstorm-Hansen! :smile:

Benjie Kibblewhite
Benjie Kibblewhite
9,323 Points

Andreas:

headshot {

max-width: 100%; border-radius: 50%; }

bored-radius is the property that makes the image round! http://www.w3schools.com/css/css3_borders.asp

Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points

Yes thank you. I looked at the Headshot, but somehow i was so tired i dindt even notice the word radius.

Thanks! :)

No Problem!