As a front-end web developer, one of your main responsibilities is to be able to translate mockups and layouts given to you by designers in to useable pages. They give you a 'look' and you convert that to code.
Check out the image called 'empire-state-mockup.png' in the root direcotry of this project. This is the mockup given to you by the design team at the agency that you've just started working at. It's your job to style the given HTML by using your new knowledge of CSS.
- Fork and clone the project locally.
- Open up the project in your text editor. You'll see
index.html. Open it up and see what the document looks like. You've got some work to do! - Navigate to the
style.cssfile. This is where you'll write the css styling for your page. - Remember to link to the css file from your HTML page. Otherwise your styling won't be applied!
- You can use Chrome's Developer Tools to play around with the css on the page.
- The image for the background can be found in the images folder, and is called
empire-bg.jpg. - The fonts used are called 'Amatic' and 'Oxygen'. They can be found on Google Fonts
- Notice that there's already a stylesheet within the tags. This is for some initial styling I've added using CSS Bootstrap (That's why there are some named divs). Bootstrap is a CSS framework that makes it easy to style websites' layouts. You don't need to know Bootstrap for this challenge, but if you're interested in learning more, check out The Bootstrap Page
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent