Opes Webs

[Peter L]

http://opeswebs.com

How is the design? I ditched the whole rainbow scheme, and went with a dark green. How does it look?

[AceInfinity]

A bit basic, but the headers don't stand out very well with the dark green.

[.Legacy.]

I liked the rainbow one, but this is much better. It looks more professional if that's what you are trying to portray.

[Peter L]

A bit basic, but the headers don't stand out very well with the dark green.

Can you elaborate a bit on this?

[AceInfinity]

The white text is a lot brighter than the header text, there should be a slight difference between the two, but you want the headers to stand out more than it's descriptor.

[Gaijin]

You should choose lighter colors, the page is way to dark...
Let the effect of the logo go, it looked good for "rainbow" but for this green it simply hurts, I really got the feeling that my eyes got worse..

Apart from that, you did a good job...
However, consider and just consider having the main page content placed horizontaly in smaller boxes, taking the need for scrolling down, since the main content will probably quite less then this placeholders you have, you will find your content to not be enough, even if this may not be really the case...
So I think it would look better if you had 3 boxes next to each other for this 3 points, and the about text would simply go over all these 3 boxes... Kind of like a Rapidshare "prdoucts" list..

I just think it would look better, not implying you should do it or anything, just trying to give you ideas which are not see everywhere you look...

Again, it is a good page and structre, just keep learning...

[Peter L]

Thanks for the replies you two, I'm going to make the following changes:
Remove motion blur on the logo
Keep all text the same color
Remove opacity on contentbox.

Gaijin, I would like to do that but I do not know how. Whenever I try something like that, I can never make the blocks go side by side. The only I way I know how is using position:aboslute; which doesn't work for content boxes very well. Float:left; and float:right; never work.

[Gaijin]

There is a new CSS attribute(s), Modal Box...
This feature is a new one and belongs to CSS3 , to make it work in different browsers you would need to have some work arounds, but it would look like this;

Code:

.horizontal
{
    position:relative; display:box;
    box-orient:horizontal; box-sizing:border-box;
}

/*
the abouve would be standard and wouldn't work for example in Firefox
to make it work in firefox you would need to append a browser depended paramter or keyword like for example

Firefox > Opera > Chrome > IE
display:-moz-box; display:-o-box; display:-webkit-box; display:-ms-box;

And other attributes and parameters would look like
-moz-box-orient:vertical; -o-box-orient:horizontal; etc....
*/

http://www.w3schools.com/cssref/css3_pr_box-align.asp

[Peter L]

How was this done in the past, before css3?

[Gaijin]

With the protperty "inline-block"...

Code:

.parent
{
      position:relative; display:block;
      width:300px; height:300px;
}

.child
{
    position:inherit; display:inline-block;
    width:25%; height:100%; /* where width would be 100 / x, x = amount of children
}

Margin, padding and border values if over 0px can give you problems in wraping the boxes over multiple rows...
So you will need to experiment with it, the box-modal removes this downside...