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

CSS

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Posted by Nick Pettit
Nick Pettit
Treehouse Teacher

Weekly Contest: Pure CSS Logo

Hi everyone,

It's time for our first weekly contest! Here are the rules:

  1. Create a logo for a real or imaginary product or company. The twist is that you have to do it with just HTML and CSS. No images or JavaScript is allowed!

  2. Answer this post with a CodePen link to your entry. The deadline for entries is Tuesday, June 11th at 11:59pm ET. Sorry, but no replies submitted after that will be eligible.

  3. The reply with the most upvotes wins! The winner will be announced on Wednesday, June 12th. The prize for this contest will be a special badge plus bragging rights. :)

Here's an example of what an entry might look like: http://codepen.io/jxdones/pen/nbyJj

Remember, this is just an example. You can create any kind of logo you'd like. If your logo is for a company or product that you made up, it might help to include a short description. Good luck, and may the best logo win!

Note: If you have comments about weekly contests or would like to know more about how they work, check out this post.

EDIT: Tiffany Harrison wins with 13 upvotes! Congratulations, Tiffany! Awesome work. :)

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Pretty interesting contest. Hope to participate next weeks contest when I have a bit more free time.

15 Answers

Tiffany Harrison
Tiffany Harrison
11,424 Points

http://codepen.io/seventyseven/pen/pkcAB

Google Plus! This is my first time using CodePen too! I loves it! I'm planning on updating the font yet, but thought I'd post it anyway.

Steven Schweibold
Steven Schweibold
7,742 Points

This is some really great work!

Tiffany Harrison
Tiffany Harrison
11,424 Points

Thank you!! :)

Shane King
Shane King
1,776 Points
Shane King
Shane King
1,776 Points

This is amazing! Great job!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Tiffany Harrison - Your code could do with being DRY-er.

Also you could simplify your could if you use the prefixr feature on codepen, so you can get rid of all of those annoying CSS3 prefixes.

Tiffany Harrison
Tiffany Harrison
11,424 Points

James Barnett Ooh Thanks for the link! I cleaned up my code a bit. Now to finish up swapping out the font :)

Thanks Shane King!

Tiffany Harrison
Tiffany Harrison
11,424 Points

Finally got around to updating my web font! Now it's displaying Google's Catull :)

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Tiffany Harrison wins with 13 upvotes! Congratulations, Tiffany! Awesome work. :)

I've awarded you our brand new and super-special CSS Contest Winner badge. You can see it on your profile.

Congratulations to everyone that entered the contest; all of you put in an amazing effort. If you have feedback on how these contests can be run better in the future, please post on this separate thread: https://teamtreehouse.com/forum/weekly-contests

Thanks, everybody!

Tiffany Harrison
Tiffany Harrison
11,424 Points

Awwww yeah! :) Thanks so much!!

Matt Spiel
Matt Spiel
2,617 Points

Congrats! Great work!

Tiffany Harrison
Tiffany Harrison
11,424 Points

Thanks Matt Spiel!

Steven Schweibold
Steven Schweibold
7,742 Points
Steven Schweibold
Steven Schweibold
7,742 Points

I made a fictional product logo*: http://codepen.io/sschweibold/pen/qEhnJ

*It works best in Chrome, sorry about the other browser issues!!

Travis LeBlanc
Travis LeBlanc
1,833 Points
Travis LeBlanc
Travis LeBlanc
1,833 Points

Heheh, good job! Fictional for now is a better term. :)

Steven Schweibold
Steven Schweibold
7,742 Points

Thanks, everyone!! This was my first time creating something from scratch using CSS3.

Steven Schweibold
Steven Schweibold
7,742 Points

Thanks, Patrick Bell!

Paul Fischer
Paul Fischer
3,102 Points
Paul Fischer
Paul Fischer
3,102 Points

*vroom *vroom

http://codepen.io/paul-fischer/pen/lLkeF

I don't think I've ever worked this hard before on a Saturday morning. My brain needs a bath. First for everything, I guess.

It looks right in Mozilla and Chrome. It's a little off in IE10 b/c as far as I know IE10 is not border-box compatible. Did not check Opera or Safari.

This is my first real attempt at anything code-wise (besides the stuff in the videos) so feedback is welcome!

Paul

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's nicely done, I really like the gradients they are a nice touch :smile:

The only thing I notice is that the code could be DRYer

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Less lines of code than: http://cssdeck.com/labs/bmw-logo

Sharon Walls
Sharon Walls
9,234 Points

That looks great! Nice work, Paul.

Elliot Greenwood
Elliot Greenwood
267 Points
Elliot Greenwood
Elliot Greenwood
267 Points

Google Chrome! http://codepen.io/elliotgreenwood/pen/pLshz

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

Herman Miller Logo

Created a logo for the company I'm working for at the moment. I honestly thought it was going to be easy to do then I began it and took a few hours to wrap my mind around how to do it. Considering this is the first time I did a pure css logo I think it was pretty fun to do.

Matt Spiel
Matt Spiel
2,617 Points

Love this Ricardo Diaz! Great work!

Spen Taylor
Spen Taylor
13,027 Points
Spen Taylor
Spen Taylor
13,027 Points

I've been working on a website for a little business I'm hoping to launch in the next month or so...

Here's the CSS version of the logo! - it could use some refinement as the curvatures are a little out compared to the original below.

also, forgive my horrible code please! it's way past bed time ;D

Rick Rakin
Rick Rakin
6,531 Points
Rick Rakin
Rick Rakin
6,531 Points

This is the CompTIA Security+ logo. I don't have any particular affinity for CompTIA or this cert--I just happened to have acquired it a few days ago to validate knowledge from some college courses I've taken. The fonts aren't a precise match but I had fun doing this, since it was kind of my first actual website product. It took about 5-10 hours to do.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Your y is overlapping your +, also I'd ditch the shadows they don't really have those in the original image.

Rick Rakin
Rick Rakin
6,531 Points

I was basing it on this version: alt text

Shane King
Shane King
1,776 Points
Shane King
Shane King
1,776 Points

What about fonts from Google fonts or something? External resources allowed?

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Sure! External fonts are fine. :)

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

That's awesome!

Michael Trilford
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Needle & Threads company.

http://codepen.io/trilm/full/fbhDj

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Pure CSS drawing, impressive :smile:

Zyad Sherif
Zyad Sherif
11,420 Points
Zyad Sherif
Zyad Sherif
11,420 Points

OK Nick so I've decided to work on the logo of our beloved Startup Instabug

This is the original image Instabug Logo

And this is the codepen Instabug Codepen