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
Benjie Kibblewhite
9,323 PointsGot 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!
3 Answers
Alexander Davison
65,469 PointsTo 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!
Benjie Kibblewhite
9,323 PointsAndreas:
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
2,443 PointsYes thank you. I looked at the Headshot, but somehow i was so tired i dindt even notice the word radius.
Thanks! :)
Alexander Davison
65,469 PointsNo Problem!
Andreas Frost Nordstrøm-Hansen
2,443 PointsAndreas Frost Nordstrøm-Hansen
2,443 PointsLooks cool :D
How did you make the picture round? I cant seem to find it in the code.