For my top introduction I made a div called .content-title, I simply gave it a height of 400px, with a background colour of #F2F2F2, I then gave it a position of relative so I could apply a z-index so it would show in front of the scroll hint when you scrolled down.
I wanted my content to be really simple, making complete use of white/grey space, almost taking after Apple design style/philosophy that clean spaces give a premium appearance. So with my simple grey backgrounded content title with a clean font like Roboto makes for an impressive look.
When styling 'Welcome to the Amazon' I was styling the <h2> tag. I wanted it to be a light font to look at high res as possible and when using 'normal' weights there always seems to be a jagged edge even with the in browser (and operating system) font smoothing. So I chose the weight of 300 which I thought looked really neat, very legible whilst looking professional. I then text-align: centred the text which put it in the middle of the div and gave it a padding-top of 2.25em this moved it down from the top edge further into the middle of the div just creating space around it. I also reduced the kerning (letter spacing) as I felt it was slightly to far apart for my sentence. I then changed the colour to #777 a darker grey than the background as when I tried black it was too harsh. Here is the CSS code:
Next I'll be looking at the h3, I wanted a slightly smaller informing sentence that gave the reader an idea in to what the websites purpose is, I wanted it to be obvious, but at the same time not take any attention away from the main title. So I gave it almost the identical styling at a smaller size however and with slightly more padding-top: 2.85em, here's the CSS:
Now at this point I wanted to have some space in-between the intro and the main content section, a larger border of 200px of grey and then against the white of the content area didn't look very good, heres a screenshot:
As you can see the gap is quite overpowering and looks unfinished, so I decided to add an hr (horizontal rule) so I could try and fill that space with a thin line and it proved to be harder than i originally expected.
At first I just put the HR in the HTML under the introduction text and it was 100% width as it is by default but I didn't think that looks very good, I just wanted a subtle detail which would give some breathing space. So I tried to style the hr by making it 75% width, and then text-align centre however this didn't work, an hr isn't text, nor an image so I was completely left in the dark about how to manipulate it. I googled 'styling an hr' and this page came up giving you everything you can possibly to do style an HR which I found incredibly useful even though the tutorials were styling in-line not on an external style sheet. Link here.
So from following what the webpage said I gave it a border-top of 1px and a margin before of 6ems this spaced it down from the introduction sentence so it wasn't directly beneath, I then gave it a -webkit-margin-start: auto; and -webkit-margin-end: auto; - this centred it in the middle of the page however there was one thing still wrong.
As you can see in the screenshot above the css I gave that only gave a border-top of 1px wasn't being listened too, there was a very feint border around making a rectangle, after a little bit of googling I found that you have to add a 'border: 0;' this removes the border everything else other than in the areas you specify! Here is the hr {} CSS:
Finally, for the 'To discover more, click an image below' section I gave it the same styling as I did to the other sections, and instead of adding the padding to the text, I did it to the HR element as you can see above!
No comments:
Post a Comment