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_starter
folder, a designer provided a file calledmockup.png
as 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.html
and 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.png
to deliver the client a beautiful website. - Look at the provided
index.html
in thestarter_ecardly
folder and use that as a guide to target the elements you want to style. - All of your work goes in
style.css
in thestarter_ecardly
folder. - Make your CSS changes to
style.css
in 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.jpg
provided 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 ofHelvetica
with font size of12px
. -
Define a line height for the body of
1.7
. This gives every line of text.35
padding 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.