Hey guys, I’ve recently spent around a month on this site and I’ve used a mixture of subtle coloration and simple google fonts ( which I will list below so you guys can enjoy some free fonts too! :p ).
Just wanted to see what you guys think of our new site and on context of that I’ve decided to give anyone at CSSTricks 10% off for the first 6 months of hosting, I’ve loved this community for ages and I want to give something back.
Header: >> font-family: ‘Open Sans’, ‘Raleway’, Sans-serif;
Paragraph: >> font-family: ‘Open Sans’, ‘Raleway’, Sans-serif;
Main coloration : #34495e;
Secondary coloration(s) : #fff & #ebebeb;
Would love to receive some constructive criticism from you guys because I know that you guys know what you’re on about! :)
To get 10% off just use the code “CSSTricks”, thanks for the criticism guys.
Overall its really cool, I really like the animations. Just a couple notes:
On this page, I think it might look better if everything wasn’t underlined, at least with the dashed line. But that’s really just personal preference.
The desktop version looks nice, however, on smaller screen sizes, some stuff breaks down. Take a look at this screenshot and this screenshot. You should adjust your browser widow yourself to see what happens. The clouds get all funky and go over some things, and the navbar looks weirdly spaced.
I might consider combining some of those stylesheets, it would make your site faster.
The syntax highlighting on my computer looks funny, you might have some invalid code, e.g. you forgot to close a tag.
Cool site !
1. Maybe give the paperplane a little more room to breath in the circle. Either make the outline a little thinner or the circle bigger.
2. On retina the Logo is not crisp.
3. On the Slider, the text jumps when you change the words. Because of “text-align:center;” this is anoying. You need to find a diffrent solution here!
1.Some letterspacing for the headlines on the footer. Small fonts in bold look so squished togeither. Or make them just a medium (500).
2. Have a look at the kerning of your logo.
Thanks for the awesome critique, I’ve got to work with resolving those issues too, sorry about the logo deficiency on retina screens as I’m using a fairly old laptop for design currently, sorted the slider stuff, made it more marginalized and have split them so the second element is at the bottom so there is less jumpiness ( or none ).
Thanks for your response kingslayer, I’m not sure that was intentional as it was an openly available vector which is open for use to anyone using the font-awesome icons url(‘http://fontawesome.io/icon/paper-plane/’).
The logo ( as a paper airplane ) was supposed to represent the service as simple and readily available in a metaphorical manner. :)
Thanks a lot for the response Paul! That was on our checklist to fix the responsiveness of the billing page, thanks for providing us with screenshots so we can see it from your perspective.
Also, on context of the discount code, it’s no problem, it’s our way of thanking this communities contribution and valued critique.
The discount code is: csstricks
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".