Web developers are often asked to produce websites or web applications based on design specs, wireframes, or full mockups. Tonight we're going to get some practice writing HTML and CSS to recreate mockups. Help these companies style their dream websites!
Part 1. Part 2 is Bonus!
- The trendy clothing brand Brook&Lyn needs a new website and has asked you to build it for them!
- In the
brook_and_lyn_starterfolder, a designer provided a file calledmockup.pngas your visual guide. Luckily, they are a cool client and allow for some "creative freedom." Don't worry if it's not a perfect match! - The client has provided the assets you'll need to build their site including images and stylesheets.
- Write your HTML in
index.htmland your CSS instyle.css.
- eCardly also needs a new website! But one of the devs on the engineering team already built out the HTML for you. How nice of him.
- Your job is to use the
screenshot-final.pngto deliver the client a beautiful website. - Look at the provided
index.htmlin thestarter_ecardlyfolder and use that as a guide to target the elements you want to style. - All of your work goes in
style.cssin thestarter_ecardlyfolder. - Make your CSS changes to
style.cssin the area between Base Style and Layout. - You do not need to change anything in
normalize.css!!! - Here are some tips to get you started:
-
The
<body>should have a background of thebackground.jpgprovided for you in the images folder. The image should repeat only going left and right. The rest of the page should have a background of#d6d6d6. (Hint: define the background image repeating in only one direction AND the background color on the same line). -
The
<body>has a default font ofHelveticawith font size of12px. -
Define a line height for the body of
1.7. This gives every line of text.35padding above and below it.
- Links on the page should be red (
#ff3300) and not be underlined.
-
The
<h1>tag with the<a>tag inside of it should not be text but an image. -
Set the background of the
<a>tag within an<h1>to thelogo.png. -
Size its height and width appropriately to fit the full logo.
-
Have it display
block. This will have this tag appear on its own line. (It is how we can make it appear here). -
Center it.
-
<h2>'s should have a font size of 20px. Also they should have a top and bottom margin of 10px, and no left and right margin. -
links (
<a>tags) inside of<h2>'s should be black and should not be underlined.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent