₦airaland Forum

@Nollyj, thank you. u are realy a css guru. do u know that this thing gave me small wahala? at first i knew it will be a simple css3 transform effect, but the texts also were transformed becos i added them inside the transformed divs. i began to think. it then occurred to me that i can place the link outside the divs and position the links absolutely and target each of them to sit on its appropriate div. i think ur approach is quite simpler.

Here is mine: http://www.ctrlshiftstudios.com/poly

Aljazeera has soft spot for Islam.

It's well.

Is making money ur problem? Webmasters are after building beatiful stuff that satisfy happy clients.

Well done @Nollyj. You are the winner.

@dhtml, how is it doing you?

I dont get you sir. 'already template empowered website'
Well u should know that I code from scratch.
Do I need to tell you that you use dreamweaver spry for your drop down menus and free web templates for your jobs?
I dont need to tell you that becos u know.

Ok, webmasters, let's see who can code this layout as it is in the attached image.

Note:
No images required.
The white texts 'Logo, About, Services, Portfolio, Resources and Contact' are links.
I want when that link is hovered, the text color will become orange and the background of the box will turn to black.
Don't make it responsive or you will consume your time.
This is pretty simple, it just requires thinking and tricks.

Let's do it.
Goodluck.

Ok. It seems we are all busy. Here is mine. I must confess that it was not easy. Especially making it responsive. You know absolutely positioned elements are always tough to make responsive. It was a kind of battle. I did lots of pixel adjustment and browser refreshing to get a good one. I think I tried a bit.
Check it out: http://www.ctrlshiftstudios.com/about

Check below images to see how it looks in 240px, 320px, 480px and 640px screen resolutions.

Thank you all.

@Yawa, no. we are having fun.

Ok. use mobiletest.me to check it in different screen resolution.

@Yawa, am not looking for half solution. Am even struggling to get it working myself. I need someone that will code that stuff as it is.

@GreenMouse, you keep opening thread: 'Fresh project part 1', 'Fresh project part 2', , 'Fresh project part 3', 'Fresh project part 4', etc. And yet none of the project is completed. Last time, you quickly showed us yesresource.com, and up till today, the project has not been completed. I think it's immaturity to throw one or two images, texts and colors together and rush to Nairaland to showcase it.

Several things are wrong with your interface designs. There are some basic things you are not getting.

For instance, check this: http://www.yesresource.com/, then zoom it out and see how the page just scattered. The background where the three persons are sitting, should not be an image. Just make the three persons to be image with the color attached to them in photoshop. Then bring them inside a div and float them to the left and just make the bg of the divs white. It will not have a height. The height will grow automatically as you add more stuff. Even if you zoom out it will keep growing.

Your nav link hover is not professionally done. The 'home' background has a radius corner, but the hover bg doesnt have. It must have so that it will blend well.

When you zoomed out, did you notice that your footer background just jumped to the left? Now, this is the problem. You added a big bg image and made it's width: 100%. Now, why did u added, no-repeat to it since you made it 100% width? Again, why did you add that big image when you can use 100px/100px image and make it repeat? Since the bg image has only one color, why making it so big? There are some fundamentals you must make sure you capture very well in web design.

Now, I took out few hours and redesigned your homepage with your images and colors. Check: http://www.ctrlshiftstudios.com/yes Zoom it out and see what will happen.

Take a look at the screenshot of yours when zoomed out.
And mine when zoomed out.

BTW, am not having anything against you. It's just that we must keep learning or face been outdated.

@Nolly, you tried. At least I like the way you walked around it. You tricked the browser by stacking the human image into three. There is always another way to kill a rat. But why not use one human image instead of stacking them into three. Well, you may say, it's not necessary so long you achieved your purpose. I tend to agree with you.

It's ok. Now your work is not responsive at all. And the circle carrying the human face seems to be acting funny on small screen. Now see the two images below. They are how your work looks in 240px screen and 320px screen resolutions.

Can you do something about it? I want it to look the same in every resolution or at most slightly different. Again, I dont want horizontal scroll bar at all.

@Yawa, you didnt get it becos you didnt follow the instruction very well. It's easy to just put one icon there. I want three of them. Again, ur work it's not looking good in 240px screen resolution.

@Yink, i trust u.

@Yawa, u tried. But nope, you didnt get it.

@Yawa, u know hover effect gets user's attention. Have ever seen urself in a website hovering over some certian images or boxes to see if there is any hidden reaction that will trigger?

Ok. here is another challenge for us.
Look at the attached image very well.
I want us to code it as it is.

Note:
1. The circle where the pix is residing will not be an image. Only the pix will be image.
2. The circle background color carrying the social icons are not images. But the 'f', 'bird' and 'youtube' are white icon images. (I attached them here so that u can use them.)
3. You will have to position the social icons as they are in the attached image.
4. After designing it, I want a situation where if a user uses ctrl- to zoom out to the last percentage, the whole work will still align perfectly and not scatter.
5. The width will be at most 600px. The width of the text will be wider than the width of the image. So there will be 3 different widths. A width for the wrapper (600px), a width for the image and a width for text. The footer and the wrapper will have same width.
6. You can design at codepen.io or jsfiddle.net or you can upload to ur website and paste the link. Dont paste raw codes here.
7. I want a situation where if a user hovers on any of the social icons, it will slide up a bit.
8. I want a situation if a user hovers on any of the social icons, the big background color of the circle where the human picture is will change to the background color of that particular icon hovered.
9. I want it to be responsive. You will test it at mobiletest.me and make sure it's showing perfectly on 240px screen resolution.

Goodluck.

@Yawa, yes js is becoming cannot-do-without. There are some web applications and websites like codepen, stackoverflow and facebook that cannot run properly without js. Most browsers hav js enabled by default.

@Yink, you really tried. There are indeed several way to kill a rat. I like you approach. I know this is a demo, but try to be grouping ur common styles. Like, u wrote: cursor:pointer into three.

BTW, u spoke as if u didnt know that i put this thing up just for fun. was not asking for help.

Ok. Check mine here: http://www.ctrlshiftstudios.com/demo

@Dhtml, css2 may even do it.
@adewa, you tried, but i want the whole box div to be hovered, not just the text. Again, i dont want an anchor link.

I want it like this:

<div class="box"><h1>DIV ONE</h1></div>

Then i want when the box div is hovered, the background carrying the three divs will change to the color of h1 text in that particular div.

The background may not necessary be a body background. It may be a big background carrying the 3 divs.

^^ Javascript cannot be a best option for something one can do with pure css.
You cannot turn off css, but a user can disable javascript.
I need someone that will do that with css only.
Thank u.

Js may not be the best solution. What if js is turned off in the user's browser? I want someone that wil do it with simple css.

thank u. but i want someone that will code it. remember there are no images there. just three divs. i want a situation where if one hovers over one div, the main background that carry the three divs wil change to the color of the text of that particular div that was hovered. when u hover out, the background will return to its default bg color. pure css. no js. who can do it for me?

Like this.

Yes. I want a situation where if a user hovers on any of the box, the background will change to the color of the text in that box he hovered.

So nobody can help me do this?

Then the family or whoever that issued that statement is in.sane. Killing Nigerians who are in Pakistan in their hundreds, meaning what? This is the most stu-pid threat I have ever heard. By the way, are there Nigerians in Pakistan? A dry country.

Look at the attached two images.
It has three divs.
I want a situation where when a user hovers over a div, the whole background that is carrying the three divs will change to the h1 text color of the div hovered.
For instance, in the two images attached. By default, the background is in semi-black color.
But it turns to the blue color of the h1 in Div One when that div was hovered.

I know one can easily achieve this using js.
However, I need someone here that can do that with pure css.

Let's give it a try.

After a half-hearted attempt at creating something...
That is what you get from a 3,000 naira website. Half-hearted.
The OP should go ahead and be looking for web designers that promise 3k website and keep paying, and then keep receiving half-hearted something. When he did it up to 20 times, he will get a full-hearted website.

It's better Shekau and his boys surrender. You cant fight against the sovereignty of Nigerian state and expect to win. These boys are not trained. The military is ready to engage them in this petty war till as long as this will last. Even if other Islamic cults from other countries join them, Shekau forgot that NATO can wield in to save the integrity of nigerian state. Abubakar Shekau must know that he will NEVER be able to islamize Nigeria. He will NEVER be able to create an islamic nation out of nigeria. He will NEVER be able to kill almost 180 million Nigerians. Shekau and his boys should swallow this better truth that they cannot force islam or their ideologies down the throats of Nigerians. The war against terrorism must continue until peace and stability is achieved. I know if this continues, Northern nigeria will never be the same again. Afghanistan is now like a bird perching on a rope. No comfort for the bird, no resting of the rope. Shekau surrender and flee to exile. You will never be able to win this war. You will never be able to overthrow Nigeria. You will never be able laugh last. Accept the amnesty and live your life in peace and serve your Allah. Or you better go on exile to Somalia, Pakistan or Iraq. God bless Nigerian armed forces. God bless Federal Republic of Nigeria. God bless every law abiding citizen of Nigeria.

Trying to make it more simpler.
This is not like my major websites, it's just like a gateway to my major websites.
So I want to make it look less colourful.
I did this last night.
http://www.ctrlshiftstudios.com/new

I also added a blog to the website. It will not be a daily or weekly blogging. It will be once in a month or even in two months. I definitely will not have that chance to be blogging there. It will be my monthly ranting on web stuff. You can click on the blog icon link to view a dummy look of the blog.
Or just click on: http://www.ctrlshiftstudios.com/new/blog

Tell me what you think.