Back To Competitions

Web Design Competition #4: Colours

  • 613flavah
  • battlestar
  • Web Master
  • User avatar
  • Joined: Sep 08, 2004
  • Posts: 3291
  • Loc: Hurricane...
  • Status: Offline

Post May 11th, 2006, 7:40 am

The topic has been picked by last comp's winner!

Create a three (3) page website dedicated to "Colours". As the last comp's winner stated in the following quote:

Quote:
Since it has to be three pages, how about the participant can choose between primaries or secondaries colors. With each color, each page should represent a color but still, somehow, be involved with the other two. For example. I could choose red, yellow, and blue. All pages would have the same design (a well thought out design) but one page would focus on a red color scheme with a subject of apples. The next page would be the same design with a yellow color scheme and a subject of bananas. And, the last would be blue with a subject of blueberries. It could be anything really. A red, yellow, and blue car, bird, or pieces of art. It could be abstract thought as well, something like emotions or feelings associated with the colors.


Please create something new and fresh - practice your skills! ;)

Rules:

* Your entry MUST contain your username anywhere on each of the pages
* Webpage design is strictly HTML and CSS only (with images)
* CSS is allowed of course and can be in a seperate file
* Please place images and CSS (if seperate from the html) in the same folder. In other words, ONE FOLDER FOR EVERYTHING.

You MUST also, after posting your entry, PM me a link to a .zip or .rar file with the .html doc and images in the one folder so I can put them up on the server for the final votes (All work remains copyright of yourself).

Only one submission per user will be allowed.

You MUST have created the website yourself.

Any questions please ask in the thread. :D

Resolution: Please create with 800x600 users in mind.
Max total file size (inc images): 500KB
(Please ensure your entry meets the above before entering your piece - Entries not meeting critera will be notified by PM and given a couple of days to adjust it, but please get it right the first time) *poke*

Length: Competition closes Wednesday, May 25 2006 at 11:00 AM EST. Voting lasts five days after close of competition.
"bless us and love us so we can dance and truly be free"
- Anonymous
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 11th, 2006, 7:40 am

  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 11th, 2006, 8:48 am

I think I am going to do something for this one, allthough I have little time.

Question: No Javascript allowed? I would only use it to make the css work in this messy browser we all know. :banghead:

Only 500kb for everything? Oh, so little... Well, we will see.
  • 613flavah
  • battlestar
  • Web Master
  • User avatar
  • Joined: Sep 08, 2004
  • Posts: 3291
  • Loc: Hurricane...
  • Status: Offline

Post May 11th, 2006, 9:31 am

No jvs please and what browser are you referring to? Ppl use different browsers these days. Nowadays you can use CSS to make anything who needs jvs
"bless us and love us so we can dance and truly be free"
- Anonymous
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 11th, 2006, 9:45 am

I mean IE6 of course.

For example it is only able to use hover classes placed in the <a> tag. ALL other browsers can hover on any element.

Things like

Code: [ Select ]
div {
  background: red;
}

div:hover{
  background:blue;
}
  1. div {
  2.   background: red;
  3. }
  5. div:hover{
  6.   background:blue;
  7. }


he doesn't know and needs a javascript hack to do.

But nevermind, I think I can achive what I am thinking of without javascript
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6744
  • Loc: Martinsburg, WV
  • Status: Offline

Post May 11th, 2006, 9:57 am

You don't need js for cross browser compatability.
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post May 11th, 2006, 10:37 am

Katmandu, for the record you don't have to have an "href" in the <a> tag. You can apply a class to <a> for example

<a class=red>Some text goes here</a>

where your css is

a.red:hover{
background-color:#ff0000;
}


and the text will produce a red background on mouseover.

Very basic example, but I know it works.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post May 11th, 2006, 10:55 am

Strike the example I mentioned above. I was going from recall instead of doing. This works:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<style type="text/css">
a.red:link{
color: #000000;
text-decoration: none;
}
a.red:visited{
color: #000000;
text-decoration: none;
}
a.red:hover{
color: #000000;
background-color:#ff0000;
text-decoration: none;
}
</style>
</head>
<body>
<a href="" class="red">Mouseover me!</a>


</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <html>
  4. <head>
  5. <title>Page title</title>
  6. <style type="text/css">
  7. a.red:link{
  8. color: #000000;
  9. text-decoration: none;
  10. }
  11. a.red:visited{
  12. color: #000000;
  13. text-decoration: none;
  14. }
  15. a.red:hover{
  16. color: #000000;
  17. background-color:#ff0000;
  18. text-decoration: none;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <a href="" class="red">Mouseover me!</a>
  26. </body>
  27. </html>


http://www.atnoproductions.com/ozzu/mouseoverText.html
http://www.atnoproductions.com/ozzu/mouseoverText2.html
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6744
  • Loc: Martinsburg, WV
  • Status: Offline

Post May 11th, 2006, 12:57 pm

IE does not like :hover applied to anything other than links, where as you can :hover just about anything in FF it seems.
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 11th, 2006, 1:09 pm

It's ok, like I said before I think I can achive what I am thinking off without using js.

(Not that I thought to much about it ,yet)
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 11th, 2006, 1:11 pm

By the way ATNO clicking at those empty <a href"">'s take me to the folder the file is in. I think that doesn't happen if you type <a href="#"> instead.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post May 11th, 2006, 1:41 pm

Yeah, forgot about that. It doesn't do that in FF, but I forgot IE does. Glad you pointed that out though. Just realized I have directory browsing still enabled there. Need to change that. lol
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • Belk Media Group
  • Graphic Monk
  • Professor
  • User avatar
  • Joined: Jan 12, 2005
  • Posts: 778
  • Loc: In the heart of California, Fresno.
  • Status: Offline

Post May 15th, 2006, 8:16 pm

Aaaarg, I hate being first in a competition. Oh well, looks as though I might have to set the standard for this one. Good luck to all other entries. I'm looking forward to seeing what you guys come up with.

:D http://originno.net/zoom
http://www.JamesBelk.com Stay Tuned for the new era in Belk Media Design
  • The Ape
  • Newbie
  • Newbie
  • User avatar
  • Joined: Mar 07, 2006
  • Posts: 9
  • Status: Offline

Post May 16th, 2006, 12:12 am

OriginNO_II...

...great concept. Not the direction i was "looking" at all. Well done.
  • 613flavah
  • battlestar
  • Web Master
  • User avatar
  • Joined: Sep 08, 2004
  • Posts: 3291
  • Loc: Hurricane...
  • Status: Offline

Post May 16th, 2006, 5:52 am

awesome first entry! Keep 'em coming!
"bless us and love us so we can dance and truly be free"
- Anonymous
  • sharanbrar
  • Student
  • Student
  • User avatar
  • Joined: May 07, 2004
  • Posts: 81
  • Loc: Punjab (India)
  • Status: Offline

Post May 24th, 2006, 11:03 am

Here is my first entry for any competition on OZZU. Hope you like it.

http://akswebsolutions.com/sharanbrar/index.html
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 24th, 2006, 11:03 am

1, 2

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.