Project 4 - Create a Web Design Style Guide

---

Project due Wednesday, November 29th

---

Develop a 3 page responsive website adescribing style elements for a particluat website topic. Pick a Previous topic from Project 2 or 3.

What is a Style Guide?

A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.

Here is a great resource: https://designmodo.com/create-style-guides/

Required:

1. External CSS file
2. Three pages that adjust to three different devices
3. Include all elements we discuss in class

Objectives

• Design consistency
• External CSS
• Mobile Design
• Media Queries

---

<BLOCKQUOTE> 

blockquote is a large quotation. The content of a blockquote
element must include block-level elements such as headings, lists, paragraphs
or div’s. This element can also have an optional attribute cite
that specifies the location (in the form of a URI) where the quote has come from. HTML and CSS Example:

< blockquote>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

CSS :

blockquote {
  font-size:22px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
} 

Output of this example:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

---

DropCap example

The typography of drop caps

A correctly formatted drop cap has four key features:

• The drop cap should share a baseline with the last line beside it
• The top of the drop cap should align with the tops of capital letters on the first line beside it
• If the drop cap has serifs, they should fall outside the left margin; if the drop cap has a vertical stroke on the left side it should be aligned with the margin
• Unless the drop cap is a single-letter word such as A or I, the first line of text beside it should have less indentation than the other lines, in order to indicate the continuation of the word

The CSS :first-letter pseudo-element seems ideally suited to creating drop caps, but inconsistencies in how web browsers apply margins to the pseudo-element render it useless. Instead we need to place the first character within a span element with a class — this page uses firstLetter — and the rest of the paragraph within a second span element:

<p>    <span class="dropcap1">E</span><span>xample text</span>  </p>

.dropcap1 { float : left; font-size : 22px; line-height : 0.5; margin : 0 2px 0 2px;}

---

Optional Tools

Image Hover Overlay Effects:

https://www.w3schools.com/howto/howto_css_image_overlay.asp

Showhide:

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

https://www.w3schools.com/jquery/jquery_hide_show.asp