Skip to content
A html/css clone of the Google homepage
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This project is to help put together what was learned in the modules on HTML and CSS. Specifically, this will be a good exercise in manipulating elements and styling them to meet specific requirements.

Instructions stated explicitly not to mess around with hover effects, but given the amount of effort that I put onto just spacing out the various elements to something close (definitely not pixel perfect), I felt it was OK since I knew, more or less, how to do it. That said, it was a whole 'nuther ball of wax getting the various active and hover borders to match. Ended up being a silly error where I used the "border-style" declaration where I should have used "border". Fast forward a few other silly things similar to that and you have this result.

Not likely the most elegant use of <div> containers, and I was mostly just moving things back and forth until it looked right-ish. I also need a better understanding of the flexibilities and constraints pertaining to element positioning as evidenced by my need to simply experiment until it looked right. I learned a lot, but I'm sure if I had to do over again it would probably be a whole lot of the same trial and error. In particular, the microphone icon was more or less "accidentally" put in the right-ish spot. Of course, it is not functional.

That said, the hover effects really are kind of the piece that made it "feel" like the original. Some of the shadow effects and colors are just close approximations and essentially eyeballed until it looked satisfying enough.

Overall, although I was able to get items more or less where I wanted them, it was not exactly a pre-planned execution of known techniques and more a random experimentation of techniques I'd heard of. Floating, relative and absolute positioning, need a lot of work for familiarity. Margins and padding are a little less mysterious, but it was still a lot of experimentation.

Of note, the little pacman icon in the header was originally aligned with the other elements along their top edge. I was just going to leave it, but I decided to use a transform:translateY declaration to move it up a bit to more closely match the original.

In addition, the header was odd in that when I moved everything to the right, it reversed the order of my <li> elements. Some googling helped, but it was mostly luck.

At the end of the day, I was able to get the web page more or less looking and acting the way I want. I used some googling and reviewing w3schools quite a bit and learned a lot about css styling. I only used the source code on for simple things like approximate sizing and links.

I'm calling this done.

You can’t perform that action at this time.