From 6de0029e8b66f43e8d950730d5082d4ff2d84fc0 Mon Sep 17 00:00:00 2001
From: Brandon Rodriguez <brodriguez8774@gmail.com>
Date: Fri, 13 Jul 2018 00:53:44 -0400
Subject: [PATCH] Unsure. Uncommited work from 2 years ago. Commiting so it can
be uploaded to gitlab
---
chapter02/chapter02-project01.html | 112 +++---
chapter02/chapter02-project02.html | 122 +++---
chapter02/chapter02-project03.html | 190 ++++-----
chapter02/images/social/license.txt | 8 +-
chapter03/chapter03-project01.html | 140 +++----
chapter03/chapter03-project02.html | 170 ++++----
chapter03/chapter03-project03.html | 56 +--
chapter03/css/chapter03-project01.css | 142 +++----
chapter03/css/chapter03-project01.css.map | 12 +-
chapter03/css/chapter03-project02.css | 210 +++++-----
chapter03/css/chapter03-project02.css.map | 12 +-
chapter03/css/chapter03-project03.css | 128 +++---
chapter03/css/chapter03-project03.css.map | 12 +-
chapter03/css/reset.css | 20 +-
chapter03/css/reset.css.map | 12 +-
chapter03/css/sass/_order_reference.scss | 124 +++---
chapter03/css/sass/chapter03-project01.scss | 268 ++++++-------
chapter03/css/sass/chapter03-project02.scss | 420 ++++++++++----------
chapter03/css/sass/chapter03-project03.scss | 222 +++++------
chapter03/css/sass/reset.scss | 22 +-
chapter03/images/social/license.txt | 8 +-
21 files changed, 1205 insertions(+), 1205 deletions(-)
diff --git a/chapter02/chapter02-project01.html b/chapter02/chapter02-project01.html
index b533dc0..bf06823 100644
--- a/chapter02/chapter02-project01.html
+++ b/chapter02/chapter02-project01.html
@@ -1,57 +1,57 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>Share Your Travels -- New York - Central Park</title>
-</head>
-<body>
-<header>
- <h1>Share Your Travels</h1>
- <h2>New York - Central Park</h2>
- <nav>
- <ul>
- <li><a href="#description">Description</a></li>
- <li><a href="#related">Related Photos</a></li>
- <li><a href="#review">Reviews</a></li>
- </ul>
- </nav>
-</header>
-<article>
- <section>
- <h3 id="description">Description</h3>
- <p>Photo by Randy Connolly</p>
- <p>This photo of Conservatory Pond in
- <a href="http://www.centralpark.com/">Central Park</a> in
- <a href="newyork.html">New York City</a> was
- taken on October 22, 2011 with a Canon EOS 30D camera.
- </p>
- <figure>
- <a href="images/large-central-park.jpg"><img src="images/central-park.jpg" alt="Central Park" title="Central Park"/></a>
- <figcaption>Conservatory Pond in Central Park</figcaption>
- </figure>
- <p>Share: <br/>
- <img src="images/social/email_16.png" alt="Email this to someone" />
- <img src="images/social/rss_16.png" alt="Syndicated content" />
- <img src="images/social/twitter_16.png" alt="Share this on Twitter" />
- </p>
- </section>
- <section>
- <h3 id="related">Related Photos</h3>
- <a href="images/related-large1.jpg"><img src="images/related-square1.jpg" alt="A random bush." /></a>
- <a href="images/related-large2.jpg"><img src="images/related-square2.jpg" alt="Some trees I guess." /></a>
- <a href="images/related-large3.jpg"><img src="images/related-square3.jpg" alt="Woah, a building." /></a>
- </section>
- <section>
- <h3 id="reviews">Reviews</h3>
- <div>
- <p>By Ricardo on <time>September 15, 2012</time></p>
- <p>Easy on the HDR buddy.</p>
- </div>
- <hr/>
- </section>
-</article>
-<footer>
- <p><em>Copyright © 2013 Share Your Travels</em></p>
-</footer>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Share Your Travels -- New York - Central Park</title>
+</head>
+<body>
+<header>
+ <h1>Share Your Travels</h1>
+ <h2>New York - Central Park</h2>
+ <nav>
+ <ul>
+ <li><a href="#description">Description</a></li>
+ <li><a href="#related">Related Photos</a></li>
+ <li><a href="#review">Reviews</a></li>
+ </ul>
+ </nav>
+</header>
+<article>
+ <section>
+ <h3 id="description">Description</h3>
+ <p>Photo by Randy Connolly</p>
+ <p>This photo of Conservatory Pond in
+ <a href="http://www.centralpark.com/">Central Park</a> in
+ <a href="newyork.html">New York City</a> was
+ taken on October 22, 2011 with a Canon EOS 30D camera.
+ </p>
+ <figure>
+ <a href="images/large-central-park.jpg"><img src="images/central-park.jpg" alt="Central Park" title="Central Park"/></a>
+ <figcaption>Conservatory Pond in Central Park</figcaption>
+ </figure>
+ <p>Share: <br/>
+ <img src="images/social/email_16.png" alt="Email this to someone" />
+ <img src="images/social/rss_16.png" alt="Syndicated content" />
+ <img src="images/social/twitter_16.png" alt="Share this on Twitter" />
+ </p>
+ </section>
+ <section>
+ <h3 id="related">Related Photos</h3>
+ <a href="images/related-large1.jpg"><img src="images/related-square1.jpg" alt="A random bush." /></a>
+ <a href="images/related-large2.jpg"><img src="images/related-square2.jpg" alt="Some trees I guess." /></a>
+ <a href="images/related-large3.jpg"><img src="images/related-square3.jpg" alt="Woah, a building." /></a>
+ </section>
+ <section>
+ <h3 id="reviews">Reviews</h3>
+ <div>
+ <p>By Ricardo on <time>September 15, 2012</time></p>
+ <p>Easy on the HDR buddy.</p>
+ </div>
+ <hr/>
+ </section>
+</article>
+<footer>
+ <p><em>Copyright © 2013 Share Your Travels</em></p>
+</footer>
+</body>
</html>
\ No newline at end of file
diff --git a/chapter02/chapter02-project02.html b/chapter02/chapter02-project02.html
index 435ac50..c0561c2 100644
--- a/chapter02/chapter02-project02.html
+++ b/chapter02/chapter02-project02.html
@@ -1,62 +1,62 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>Not a Real CRM</title>
-</head>
-<body>
- <header>
- <h1>Not a Real CRM</h1>
- <nav id="mainMenu">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">Catalog</a></li>
- <li><a href="#">Inventory</a></li>
- </ul>
- </nav>
-
- <h2>Contacts</h2>
- <nav id="secondaryMenu">
- <h3>My CRM</h3>
- <ul>
- <li><a href="#">Contacts</a></li>
- <li><a href="#">Orders</a></li>
- <li><a href="#">Calendar</a></li>
- <li><a href="#">Tasks</a></li>
- <li><a href="#">Evaluation Copies</a></li>
- </ul>
- </nav>
- </header>
- <article id="mainContact">
- <h3>Jack Smith</h3>
- <p>
- Address: 1 Microsoft Way<br/>
- City: Redmond<br/>
- Region: WA<br/>
- Country: USA<br/>
- Postal: 98052-8300<br/>
- Phone: +1 (425) 882-8080<br/>
- Email: <a href="mailto:jacksmith@microsoft.com">jacksmith@microsoft.com</a>
- </p>
- <aside id="actions">
- <img src="images/edit.png" title="Edit this contact" alt="Edit Contact" />
- <img src="images/add.png" title="Add a new contact" alt="New Contact" />
- <img src="images/delete.png" title="Delete this contact" alt="Delete Contact" />
- <img src="images/email.png" title="Email the contact" alt="Email Contact" />
- <img src="images/appointment.png" title="Make appointment with contact" alt="Make Appointment" />
- </aside>
-
- <img src="images/jack-smith-map.png" title="Jack Smith Map" alt="Jack Smith Map" /><br/>
- <em>Map for Jack Smith</em>
- </article>
-
- <section id="lastViewed">
- <h3>Last Contact Viewed</h3>
- <p><a href="#">Camille Bernard</a><br/>University of Paris</p>
- </section>
- <footer>
- <p><small><a href="#">Home</a> | <a href="#">Catalog</a> | <a href="#">Inventory</a><br/>
- <em>Copyright © 2013 Not a Real CRM</em></small></p>
- </footer>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Not a Real CRM</title>
+</head>
+<body>
+ <header>
+ <h1>Not a Real CRM</h1>
+ <nav id="mainMenu">
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Catalog</a></li>
+ <li><a href="#">Inventory</a></li>
+ </ul>
+ </nav>
+
+ <h2>Contacts</h2>
+ <nav id="secondaryMenu">
+ <h3>My CRM</h3>
+ <ul>
+ <li><a href="#">Contacts</a></li>
+ <li><a href="#">Orders</a></li>
+ <li><a href="#">Calendar</a></li>
+ <li><a href="#">Tasks</a></li>
+ <li><a href="#">Evaluation Copies</a></li>
+ </ul>
+ </nav>
+ </header>
+ <article id="mainContact">
+ <h3>Jack Smith</h3>
+ <p>
+ Address: 1 Microsoft Way<br/>
+ City: Redmond<br/>
+ Region: WA<br/>
+ Country: USA<br/>
+ Postal: 98052-8300<br/>
+ Phone: +1 (425) 882-8080<br/>
+ Email: <a href="mailto:jacksmith@microsoft.com">jacksmith@microsoft.com</a>
+ </p>
+ <aside id="actions">
+ <img src="images/edit.png" title="Edit this contact" alt="Edit Contact" />
+ <img src="images/add.png" title="Add a new contact" alt="New Contact" />
+ <img src="images/delete.png" title="Delete this contact" alt="Delete Contact" />
+ <img src="images/email.png" title="Email the contact" alt="Email Contact" />
+ <img src="images/appointment.png" title="Make appointment with contact" alt="Make Appointment" />
+ </aside>
+
+ <img src="images/jack-smith-map.png" title="Jack Smith Map" alt="Jack Smith Map" /><br/>
+ <em>Map for Jack Smith</em>
+ </article>
+
+ <section id="lastViewed">
+ <h3>Last Contact Viewed</h3>
+ <p><a href="#">Camille Bernard</a><br/>University of Paris</p>
+ </section>
+ <footer>
+ <p><small><a href="#">Home</a> | <a href="#">Catalog</a> | <a href="#">Inventory</a><br/>
+ <em>Copyright © 2013 Not a Real CRM</em></small></p>
+ </footer>
+</body>
</html>
\ No newline at end of file
diff --git a/chapter02/chapter02-project03.html b/chapter02/chapter02-project03.html
index 0980da7..2440119 100644
--- a/chapter02/chapter02-project03.html
+++ b/chapter02/chapter02-project03.html
@@ -1,96 +1,96 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title></title>
-</head>
-<body>
- <header>
- <h1>My Sample Art Store</h1>
- <nav>
- <a href="#">Home</a> |
- <a href="#">Artists</a> |
- <a href="#">Artworks</a> |
- <a href="#">About Us</a> |
- <a href="#">Search</a>
- </nav>
- </header>
- <article>
- <h2>Mademoiselle Caroline Rivére</h2>
- <p>by <a href="#">Jean-Auguste-Dominique Ingres</a>
- <section>
- <a href="images/06010-large.jpg"><img src="images/06010-medium.jpg" alt="Some chick in a dress" /></img></a>
- <p>
- The portrait of Mademoiselle Caroline Rivére was painted in 1806 by the French Neoclassical
- artist Jean Auguste Dominique Ingress, and today hangs in the Lourve. It is the third of three
- portraits of the Rivére family the artist painted that year.
- </p>
- <p>
- Date: <i>1806</i> <br />
- Medium: <i>Oil on Canvas</i> <br />
- Dimensions: <i>100 x 70 cm</i>
- Home: <i>Musée du Lourve, Paris</i>
- </p>
- </section>
- <a href="#"><img src="images/add-to-basket_btn.png" alt="Add to Basket" /></a>
- <a href="#"><img src="images/add-to-favorites_btn.png" alt="Add to favorites" /></a>
- <aside>
- Share:
- <a href="images/social/email_32.png" /><img src="#" alt="Email"></a>
- <a href="images/social/twitter_32.png" /><img src="#" alt="Twitter"></a>
- <a href="images/social/facebook_32.png" /><img src="#" alt="Facebook"></a>
- <a href="images/social/sharethis_32.png" /><img src="#" alt="Green Dot Thing"></a>
- </aside>
- </article>
- <section>
- <h3>Related Paintings</h3>
- <a href="#"><img src="images/06020.jpg" alt="Sitting lady." /></a>
- <a href="#"><img src="images/07020.jpg" alt="Old time war." /></a>
- <a href="#"><img src="images/13030.jpg" alt="Another sitting lady." /></a>
- <a href="#"><img src="images/05030.jpg" alt="...is she dead?" /></a>
- </section>
- <section>
- <h3>Reviews</h3>
- <div>
- <h4>Love this painting</h4>
- <p>
- John Smith
- <img src="images/star-orange.png" alt="Four Stars" />
- <img src="images/star-orange.png" alt="Four Stars" />
- <img src="images/star-orange.png" alt="Four Stars" />
- <img src="images/star-orange.png" alt="Four Stars" />
- <img src="images/star-white.png" alt="Four Stars" />
- </p>
- <p>
- <sub>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet mauris ipsum, id lacinia
- massa efficitur vitae. In luctus magna vitae urna commodo ultrices. Cras pulvinar diam eget magna.</sub>
- </p>
- <hr />
- </div>
- <div>
- <h4>It's okay</h4>
- <p>
- Jane Doe
- <img src="images/star-orange.png" alt="Three Stars" />
- <img src="images/star-orange.png" alt="Three Stars" />
- <img src="images/star-orange.png" alt="Three Stars" />
- <img src="images/star-white.png" alt="Three Stars" />
- <img src="images/star-white.png" alt="Three Stars" />
- </p>
- <p>
- <sub>Quisque tincidunt accumsan lacus, et aliquam justo consequat eget. Ut sit amet nunc quam.</sub>
- </p>
- <hr />
- </div>
- </section>
- <footer>
- <nav>
- <a href="#">Home</a> |
- <a href="#">Art Works</a> |
- <a href="#">Artists</a> |
- <a href="#">About Us</a>
- </nav>
- <p><i>Copyright © 2013 My Sample Art Store</i></p>
- </footer>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title></title>
+</head>
+<body>
+ <header>
+ <h1>My Sample Art Store</h1>
+ <nav>
+ <a href="#">Home</a> |
+ <a href="#">Artists</a> |
+ <a href="#">Artworks</a> |
+ <a href="#">About Us</a> |
+ <a href="#">Search</a>
+ </nav>
+ </header>
+ <article>
+ <h2>Mademoiselle Caroline Rivére</h2>
+ <p>by <a href="#">Jean-Auguste-Dominique Ingres</a>
+ <section>
+ <a href="images/06010-large.jpg"><img src="images/06010-medium.jpg" alt="Some chick in a dress" /></img></a>
+ <p>
+ The portrait of Mademoiselle Caroline Rivére was painted in 1806 by the French Neoclassical
+ artist Jean Auguste Dominique Ingress, and today hangs in the Lourve. It is the third of three
+ portraits of the Rivére family the artist painted that year.
+ </p>
+ <p>
+ Date: <i>1806</i> <br />
+ Medium: <i>Oil on Canvas</i> <br />
+ Dimensions: <i>100 x 70 cm</i>
+ Home: <i>Musée du Lourve, Paris</i>
+ </p>
+ </section>
+ <a href="#"><img src="images/add-to-basket_btn.png" alt="Add to Basket" /></a>
+ <a href="#"><img src="images/add-to-favorites_btn.png" alt="Add to favorites" /></a>
+ <aside>
+ Share:
+ <a href="images/social/email_32.png" /><img src="#" alt="Email"></a>
+ <a href="images/social/twitter_32.png" /><img src="#" alt="Twitter"></a>
+ <a href="images/social/facebook_32.png" /><img src="#" alt="Facebook"></a>
+ <a href="images/social/sharethis_32.png" /><img src="#" alt="Green Dot Thing"></a>
+ </aside>
+ </article>
+ <section>
+ <h3>Related Paintings</h3>
+ <a href="#"><img src="images/06020.jpg" alt="Sitting lady." /></a>
+ <a href="#"><img src="images/07020.jpg" alt="Old time war." /></a>
+ <a href="#"><img src="images/13030.jpg" alt="Another sitting lady." /></a>
+ <a href="#"><img src="images/05030.jpg" alt="...is she dead?" /></a>
+ </section>
+ <section>
+ <h3>Reviews</h3>
+ <div>
+ <h4>Love this painting</h4>
+ <p>
+ John Smith
+ <img src="images/star-orange.png" alt="Four Stars" />
+ <img src="images/star-orange.png" alt="Four Stars" />
+ <img src="images/star-orange.png" alt="Four Stars" />
+ <img src="images/star-orange.png" alt="Four Stars" />
+ <img src="images/star-white.png" alt="Four Stars" />
+ </p>
+ <p>
+ <sub>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet mauris ipsum, id lacinia
+ massa efficitur vitae. In luctus magna vitae urna commodo ultrices. Cras pulvinar diam eget magna.</sub>
+ </p>
+ <hr />
+ </div>
+ <div>
+ <h4>It's okay</h4>
+ <p>
+ Jane Doe
+ <img src="images/star-orange.png" alt="Three Stars" />
+ <img src="images/star-orange.png" alt="Three Stars" />
+ <img src="images/star-orange.png" alt="Three Stars" />
+ <img src="images/star-white.png" alt="Three Stars" />
+ <img src="images/star-white.png" alt="Three Stars" />
+ </p>
+ <p>
+ <sub>Quisque tincidunt accumsan lacus, et aliquam justo consequat eget. Ut sit amet nunc quam.</sub>
+ </p>
+ <hr />
+ </div>
+ </section>
+ <footer>
+ <nav>
+ <a href="#">Home</a> |
+ <a href="#">Art Works</a> |
+ <a href="#">Artists</a> |
+ <a href="#">About Us</a>
+ </nav>
+ <p><i>Copyright © 2013 My Sample Art Store</i></p>
+ </footer>
+</body>
</html>
\ No newline at end of file
diff --git a/chapter02/images/social/license.txt b/chapter02/images/social/license.txt
index 5ed2ec6..e7eda19 100644
--- a/chapter02/images/social/license.txt
+++ b/chapter02/images/social/license.txt
@@ -1,9 +1,9 @@
-If you use these icons, please place an attribution link to komodomedia.com. Social Network Icon Pack by Rogie King is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License (http://creativecommons.org/licenses/by-nc-sa/3.0/).
-
+If you use these icons, please place an attribution link to komodomedia.com. Social Network Icon Pack by Rogie King is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License (http://creativecommons.org/licenses/by-nc-sa/3.0/).
+
Based on a work at www.komodomedia.com.
More rad downloads can be found at http://www.komodomedia.com/download/
-Feelin' the love? Donate to Paypal: rogie@komodomedia.com
-
+Feelin' the love? Donate to Paypal: rogie@komodomedia.com
+
I claim no right of ownership to the respective company logos and glyphs in each one of these icons.
\ No newline at end of file
diff --git a/chapter03/chapter03-project01.html b/chapter03/chapter03-project01.html
index fcf193d..3a10a0f 100644
--- a/chapter03/chapter03-project01.html
+++ b/chapter03/chapter03-project01.html
@@ -1,71 +1,71 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
- <meta charset="utf-8">
- <title>Share Your Travels -- New York - Central Park</title>
-
- <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
- <link rel= "stylesheet" type="text/css" href= "css/chapter03-project01.css" />
-</head>
-<body>
-<header>
- <h1>Share Your Travels</h1>
- <h2>New York - Central Park</h2>
- <nav>
- <ul>
- <li><a href="#">Description</a></li>
- <li><a href="#related">Related Photos</a></li>
- <li><a href="#">Reviews</a></li>
-
- </ul>
- </nav>
-</header>
-<article>
- <section>
- <h3 id="description">Description</h3>
- <p>Photo by Randy Connolly</p>
- <p>This photo of Conservatory Pond in
- <a href="http://www.centralpark.com/">Central Park</a> in
- <a href="newyork.html">New York City</a> was
- taken on October 22, 2011 with a Canon EOS 30D camera.
- </p>
- <figure>
- <a href="images/large-central-park.jpg"><img src="images/central-park.jpg" alt="Central Park" title="Central Park"/></a>
- <figcaption><em>Conservatory Pond in Central Park</em></figcaption>
- </figure>
- <p>Share:
- <img src="images/social/email_16.png" alt="Email this to someone" />
- <img src="images/social/rss_16.png" alt="Syndicated content" />
- <img src="images/social/twitter_16.png" alt="Share this on Twitter" />
- <img src="images/social/facebook_16.png" alt="Share this on Facebook" />
- <img src="images/social/flickr_16.png" alt="See this on Flickr" />
- </p>
- </section>
- <section>
- <h3 id="related">Related Photos</h3>
- <div>
- <a href="images/related-large1.jpg"><img src="images/related-square1.jpg" alt="related photo" title="related photo" /></a>
- <a href="images/related-large2.jpg"><img src="images/related-square2.jpg" alt="related photo" title="related photo" /></a>
- <a href="images/related-large3.jpg"><img src="images/related-square3.jpg" alt="related photo" title="related photo" /></a>
- </div>
- </section>
- <section>
- <h3 id="reviews">Reviews</h3>
- <div>
- <p>By Ricardo on <time>September 15, 2012</time></p>
- <p>Easy on the HDR buddy.</p>
- </div>
- <hr/>
- <div>
- <p>By Susan on <time>October 1, 2012</time></p>
- <p>I love Central Park.</p>
- </div>
- <hr/>
- </section>
-</article>
-<footer>
- <p><a href="#">Home</a> | <a href="#">Browse</a> | <a href="#">Search</a></p>
- <p><em>Copyright © 2013 Share Your Travels</em></p>
-</footer>
-</body>
+<!DOCTYPE html>
+<html>
+<head lang="en">
+ <meta charset="utf-8">
+ <title>Share Your Travels -- New York - Central Park</title>
+
+ <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
+ <link rel= "stylesheet" type="text/css" href= "css/chapter03-project01.css" />
+</head>
+<body>
+<header>
+ <h1>Share Your Travels</h1>
+ <h2>New York - Central Park</h2>
+ <nav>
+ <ul>
+ <li><a href="#">Description</a></li>
+ <li><a href="#related">Related Photos</a></li>
+ <li><a href="#">Reviews</a></li>
+
+ </ul>
+ </nav>
+</header>
+<article>
+ <section>
+ <h3 id="description">Description</h3>
+ <p>Photo by Randy Connolly</p>
+ <p>This photo of Conservatory Pond in
+ <a href="http://www.centralpark.com/">Central Park</a> in
+ <a href="newyork.html">New York City</a> was
+ taken on October 22, 2011 with a Canon EOS 30D camera.
+ </p>
+ <figure>
+ <a href="images/large-central-park.jpg"><img src="images/central-park.jpg" alt="Central Park" title="Central Park"/></a>
+ <figcaption><em>Conservatory Pond in Central Park</em></figcaption>
+ </figure>
+ <p>Share:
+ <img src="images/social/email_16.png" alt="Email this to someone" />
+ <img src="images/social/rss_16.png" alt="Syndicated content" />
+ <img src="images/social/twitter_16.png" alt="Share this on Twitter" />
+ <img src="images/social/facebook_16.png" alt="Share this on Facebook" />
+ <img src="images/social/flickr_16.png" alt="See this on Flickr" />
+ </p>
+ </section>
+ <section>
+ <h3 id="related">Related Photos</h3>
+ <div>
+ <a href="images/related-large1.jpg"><img src="images/related-square1.jpg" alt="related photo" title="related photo" /></a>
+ <a href="images/related-large2.jpg"><img src="images/related-square2.jpg" alt="related photo" title="related photo" /></a>
+ <a href="images/related-large3.jpg"><img src="images/related-square3.jpg" alt="related photo" title="related photo" /></a>
+ </div>
+ </section>
+ <section>
+ <h3 id="reviews">Reviews</h3>
+ <div>
+ <p>By Ricardo on <time>September 15, 2012</time></p>
+ <p>Easy on the HDR buddy.</p>
+ </div>
+ <hr/>
+ <div>
+ <p>By Susan on <time>October 1, 2012</time></p>
+ <p>I love Central Park.</p>
+ </div>
+ <hr/>
+ </section>
+</article>
+<footer>
+ <p><a href="#">Home</a> | <a href="#">Browse</a> | <a href="#">Search</a></p>
+ <p><em>Copyright © 2013 Share Your Travels</em></p>
+</footer>
+</body>
</html>
\ No newline at end of file
diff --git a/chapter03/chapter03-project02.html b/chapter03/chapter03-project02.html
index df7e188..f734379 100644
--- a/chapter03/chapter03-project02.html
+++ b/chapter03/chapter03-project02.html
@@ -1,86 +1,86 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
- <meta charset="utf-8">
- <title>Not a Real CRM</title>
-
- <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
- <link rel= "stylesheet" type="text/css" href= "css/chapter03-project02.css" />
-</head>
-<body>
- <header>
- <nav id="mainMenu">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">Catalog</a></li>
- <li><a href="#">Inventory</a></li>
- </ul>
- </nav>
- <h1><img src="images/notacrm-logo.png" alt="logo" /></h1>
-
- <nav id="secondaryMenu">
- <ul>
- <li><a href="#">Contacts</a></li>
- <li><a href="#">Orders</a></li>
- <li><a href="#">Calendar</a></li>
- <li><a href="#">Tasks</a></li>
- <li><a href="#">Evaluation Copies</a></li>
- </ul>
- </nav>
- </header>
-
- <article id="mainContact">
-
- <div>
- <img src="images/profile-96x96.jpg" />
- <h2>Jack Smith</h2>
- </div>
-
- <section>
- <h3>Personal Details</h3>
- <p>
- <em>Address:</em> 1 Microsoft Way<br/>
- <em>City:</em> Redmond<br/>
- <em>Region:</em> WA</br/>
- <em>Country:</em> USA<br/>
- <em>Postal:</em> 98052-8300<br/>
- </p>
- <div class="actions">
- <ul>
- <li><a href="#" class="actionEdit">Edit</a></li>
- <li><a href="#" class="actionFlag">Flag</a></li>
- </ul>
- </div>
- </section>
-
- <section>
- <h3>Contact</h3>
- <p>
- <em>Phone:</em> <a href="tel:+14258828080">+1 (425) 882-8080</a><br/>
- <em>Email:</em> <a href="mailto:jacksmith@microsoft.com">jacksmith@microsoft.com</a>
- </p>
- <div class="actions">
- <ul>
- <li><a href="#" class="actionEdit">Edit</a></li>
- <li><a href="#" class="actionFlag">Flag</a></li>
- </ul>
- </div>
- </section>
-
- <section>
- <h3>Sales Activity</h3>
- <figure>
- <img src="images/chart.png" alt="chart" title="sales chart" />
- </figure>
-
- </section>
- </article>
-
- <footer>
- <p><a href="#">Home</a> | <a href="#">Catalog</a> | <a href="#">Inventory</a></p>
- <p id="copyright">Copyright © 2013 Not a Real CRM</p>
- </footer>
-
-
-</body>
+<!DOCTYPE html>
+<html>
+<head lang="en">
+ <meta charset="utf-8">
+ <title>Not a Real CRM</title>
+
+ <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
+ <link rel= "stylesheet" type="text/css" href= "css/chapter03-project02.css" />
+</head>
+<body>
+ <header>
+ <nav id="mainMenu">
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Catalog</a></li>
+ <li><a href="#">Inventory</a></li>
+ </ul>
+ </nav>
+ <h1><img src="images/notacrm-logo.png" alt="logo" /></h1>
+
+ <nav id="secondaryMenu">
+ <ul>
+ <li><a href="#">Contacts</a></li>
+ <li><a href="#">Orders</a></li>
+ <li><a href="#">Calendar</a></li>
+ <li><a href="#">Tasks</a></li>
+ <li><a href="#">Evaluation Copies</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <article id="mainContact">
+
+ <div>
+ <img src="images/profile-96x96.jpg" />
+ <h2>Jack Smith</h2>
+ </div>
+
+ <section>
+ <h3>Personal Details</h3>
+ <p>
+ <em>Address:</em> 1 Microsoft Way<br/>
+ <em>City:</em> Redmond<br/>
+ <em>Region:</em> WA</br/>
+ <em>Country:</em> USA<br/>
+ <em>Postal:</em> 98052-8300<br/>
+ </p>
+ <div class="actions">
+ <ul>
+ <li><a href="#" class="actionEdit">Edit</a></li>
+ <li><a href="#" class="actionFlag">Flag</a></li>
+ </ul>
+ </div>
+ </section>
+
+ <section>
+ <h3>Contact</h3>
+ <p>
+ <em>Phone:</em> <a href="tel:+14258828080">+1 (425) 882-8080</a><br/>
+ <em>Email:</em> <a href="mailto:jacksmith@microsoft.com">jacksmith@microsoft.com</a>
+ </p>
+ <div class="actions">
+ <ul>
+ <li><a href="#" class="actionEdit">Edit</a></li>
+ <li><a href="#" class="actionFlag">Flag</a></li>
+ </ul>
+ </div>
+ </section>
+
+ <section>
+ <h3>Sales Activity</h3>
+ <figure>
+ <img src="images/chart.png" alt="chart" title="sales chart" />
+ </figure>
+
+ </section>
+ </article>
+
+ <footer>
+ <p><a href="#">Home</a> | <a href="#">Catalog</a> | <a href="#">Inventory</a></p>
+ <p id="copyright">Copyright © 2013 Not a Real CRM</p>
+ </footer>
+
+
+</body>
</html>
\ No newline at end of file
diff --git a/chapter03/chapter03-project03.html b/chapter03/chapter03-project03.html
index f9285d1..25a4802 100644
--- a/chapter03/chapter03-project03.html
+++ b/chapter03/chapter03-project03.html
@@ -1,29 +1,29 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
- <meta charset="utf-8">
- <title>Hypothetical Art Store</title>
-
- <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
- <link rel= "stylesheet" type="text/css" href= "css/chapter03-project03.css" />
-
- <link href="https://fonts.googleapis.com/css?family=Six+Caps" rel="stylesheet">
-</head>
-<body>
- <header>
- <h1>Hypothetical Art Store</h1>
- <h2>Super cool tagline will go here</h2>
- </header>
- <article>
- <h2>Under Construction</h2>
- <p>Our website will be live in</p>
- <p id="timeline">4 years, 3 months, and 2 days</p>
- <footer><a href="mailto:abc@abc.abc">Contact Us</a>
- <img src="images/social/email_16.png" alt="Email this to someone" />
- <img src="images/social/rss_16.png" alt="Syndicated content" />
- <img src="images/social/twitter_16.png" alt="Share this on Twitter" />
- <img src="images/social/facebook_16.png" alt="Share this on Facebook" />
- <img src="images/social/flickr_16.png" alt="See this on Flickr" /><footer>
- </article>
-</body>
+<!DOCTYPE html>
+<html>
+<head lang="en">
+ <meta charset="utf-8">
+ <title>Hypothetical Art Store</title>
+
+ <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
+ <link rel= "stylesheet" type="text/css" href= "css/chapter03-project03.css" />
+
+ <link href="https://fonts.googleapis.com/css?family=Six+Caps" rel="stylesheet">
+</head>
+<body>
+ <header>
+ <h1>Hypothetical Art Store</h1>
+ <h2>Super cool tagline will go here</h2>
+ </header>
+ <article>
+ <h2>Under Construction</h2>
+ <p>Our website will be live in</p>
+ <p id="timeline">4 years, 3 months, and 2 days</p>
+ <footer><a href="mailto:abc@abc.abc">Contact Us</a>
+ <img src="images/social/email_16.png" alt="Email this to someone" />
+ <img src="images/social/rss_16.png" alt="Syndicated content" />
+ <img src="images/social/twitter_16.png" alt="Share this on Twitter" />
+ <img src="images/social/facebook_16.png" alt="Share this on Facebook" />
+ <img src="images/social/flickr_16.png" alt="See this on Flickr" /><footer>
+ </article>
+</body>
</html>
\ No newline at end of file
diff --git a/chapter03/css/chapter03-project01.css b/chapter03/css/chapter03-project01.css
index 93e99d9..8baf1ae 100644
--- a/chapter03/css/chapter03-project01.css
+++ b/chapter03/css/chapter03-project01.css
@@ -1,71 +1,71 @@
-/* CSS for chapter03-project01 */
-/* Declare variables. */
-/* Actual CSS. Organization simplified due to simplicity of project. */
-body {
- background-color: #203643; }
-
-header, footer {
- margin: 0em 4em 0.5em 4em;
- padding: 0.5em;
- color: white;
- background-color: #306271; }
-
-header h1, footer h1 {
- font-size: 1.8em; }
-header h2, footer h2 {
- font-size: 0.8em; }
-header ul, footer ul {
- display: flex; }
-header li, footer li {
- list-style-type: none; }
-header a, footer a {
- text-decoration: none; }
-header nav, footer nav {
- margin-top: 0.8%;
- font-size: 1.4em;
- background-color: #738b97; }
-header p, footer p {
- padding-bottom: 0.5em; }
-
-header nav li {
- margin-right: 1%;
- margin-left: 1%; }
-
-a, a:link, a:visited {
- color: #96ccdf; }
-
-article {
- margin-top: 1em;
- margin-right: 4em;
- margin-bottom: 1em;
- margin-left: 4em;
- padding: 1em;
- background-color: #ffffff; }
-
-article h3 {
- margin-bottom: 0.5em;
- font-size: 1.3em;
- border-bottom: solid 1px #b8b8b8; }
-article a {
- font-weight: bold; }
-article figure a {
- display: flex;
- width: 500px;
- height: 312px;
- margin-top: 0.5%;
- margin-bottom: 0.5%;
- padding: 0.5%;
- border: solid 1px #b8b8b8; }
-article p:first-of-type {
- padding-bottom: 0.2em;
- color: #949ea2;
- font-style: italic; }
-article p:nth-of-type(3) {
- max-width: 500px;
- margin-bottom: 2em;
- padding: 1em;
- background: linear-gradient(#ffffff, #b8b8b8);
- border: solid 1px #b8b8b8;
- border-radius: 1em; }
-
-/*# sourceMappingURL=chapter03-project01.css.map */
+/* CSS for chapter03-project01 */
+/* Declare variables. */
+/* Actual CSS. Organization simplified due to simplicity of project. */
+body {
+ background-color: #203643; }
+
+header, footer {
+ margin: 0em 4em 0.5em 4em;
+ padding: 0.5em;
+ color: white;
+ background-color: #306271; }
+
+header h1, footer h1 {
+ font-size: 1.8em; }
+header h2, footer h2 {
+ font-size: 0.8em; }
+header ul, footer ul {
+ display: flex; }
+header li, footer li {
+ list-style-type: none; }
+header a, footer a {
+ text-decoration: none; }
+header nav, footer nav {
+ margin-top: 0.8%;
+ font-size: 1.4em;
+ background-color: #738b97; }
+header p, footer p {
+ padding-bottom: 0.5em; }
+
+header nav li {
+ margin-right: 1%;
+ margin-left: 1%; }
+
+a, a:link, a:visited {
+ color: #96ccdf; }
+
+article {
+ margin-top: 1em;
+ margin-right: 4em;
+ margin-bottom: 1em;
+ margin-left: 4em;
+ padding: 1em;
+ background-color: #ffffff; }
+
+article h3 {
+ margin-bottom: 0.5em;
+ font-size: 1.3em;
+ border-bottom: solid 1px #b8b8b8; }
+article a {
+ font-weight: bold; }
+article figure a {
+ display: flex;
+ width: 500px;
+ height: 312px;
+ margin-top: 0.5%;
+ margin-bottom: 0.5%;
+ padding: 0.5%;
+ border: solid 1px #b8b8b8; }
+article p:first-of-type {
+ padding-bottom: 0.2em;
+ color: #949ea2;
+ font-style: italic; }
+article p:nth-of-type(3) {
+ max-width: 500px;
+ margin-bottom: 2em;
+ padding: 1em;
+ background: linear-gradient(#ffffff, #b8b8b8);
+ border: solid 1px #b8b8b8;
+ border-radius: 1em; }
+
+/*# sourceMappingURL=chapter03-project01.css.map */
diff --git a/chapter03/css/chapter03-project01.css.map b/chapter03/css/chapter03-project01.css.map
index 6e3f30b..9fac838 100644
--- a/chapter03/css/chapter03-project01.css.map
+++ b/chapter03/css/chapter03-project01.css.map
@@ -1,7 +1,7 @@
-{
-"version": 3,
-"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AAUxB,uEAAuE;AAEvE,IAAK;EACD,gBAAgB,EAXH,OAAO;;AAcxB,cAAe;EACX,MAAM,EAAE,iBAAiB;EACzB,OAAO,EAAE,KAAK;EAEd,KAAK,EAAE,KAAK;EAEZ,gBAAgB,EAnBJ,OAAO;;AAwBnB,oBAAG;EACC,SAAS,EAAE,KAAK;AAGpB,oBAAG;EACC,SAAS,EAAE,KAAK;AAGpB,oBAAG;EACC,OAAO,EAAE,IAAI;AAGjB,oBAAG;EACC,eAAe,EAAE,IAAI;AAGzB,kBAAE;EACE,eAAe,EAAE,IAAI;AAGzB,sBAAI;EACA,UAAU,EAAE,IAAI;EAEhB,SAAS,EAAE,KAAK;EAEhB,gBAAgB,EAhDN,OAAO;AAmDrB,kBAAE;EACE,cAAc,EAAE,KAAK;;AAQrB,aAAG;EACC,YAAY,EAAE,EAAE;EAChB,WAAW,EAAE,EAAE;;AAK3B,oBAAqB;EACjB,KAAK,EAnES,OAAO;;AAsEzB,OAAQ;EACJ,UAAU,EAAE,GAAG;EACf,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;EAClB,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,GAAG;EAEZ,gBAAgB,EA3EN,OAAO;;AAgFjB,UAAG;EACC,aAAa,EAAE,KAAK;EAEpB,SAAS,EAAE,KAAK;EAEhB,aAAa,EAAE,iBAAqB;AAGxC,SAAE;EACE,WAAW,EAAE,IAAI;AAKjB,gBAAE;EACE,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EAEb,MAAM,EAAE,iBAAqB;AAIrC,uBAAgB;EACZ,cAAc,EAAE,KAAK;EAErB,KAAK,EA9GK,OAAO;EA+GjB,UAAU,EAAE,MAAM;AAGtB,wBAAiB;EACb,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,GAAG;EAEZ,UAAU,EAAE,iCAA0C;EACtD,MAAM,EAAE,iBAAqB;EAC7B,aAAa,EAAE,GAAG",
-"sources": ["sass/chapter03-project01.scss"],
-"names": [],
-"file": "chapter03-project01.css"
+{
+"version": 3,
+"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AAUxB,uEAAuE;AAEvE,IAAK;EACD,gBAAgB,EAXH,OAAO;;AAcxB,cAAe;EACX,MAAM,EAAE,iBAAiB;EACzB,OAAO,EAAE,KAAK;EAEd,KAAK,EAAE,KAAK;EAEZ,gBAAgB,EAnBJ,OAAO;;AAwBnB,oBAAG;EACC,SAAS,EAAE,KAAK;AAGpB,oBAAG;EACC,SAAS,EAAE,KAAK;AAGpB,oBAAG;EACC,OAAO,EAAE,IAAI;AAGjB,oBAAG;EACC,eAAe,EAAE,IAAI;AAGzB,kBAAE;EACE,eAAe,EAAE,IAAI;AAGzB,sBAAI;EACA,UAAU,EAAE,IAAI;EAEhB,SAAS,EAAE,KAAK;EAEhB,gBAAgB,EAhDN,OAAO;AAmDrB,kBAAE;EACE,cAAc,EAAE,KAAK;;AAQrB,aAAG;EACC,YAAY,EAAE,EAAE;EAChB,WAAW,EAAE,EAAE;;AAK3B,oBAAqB;EACjB,KAAK,EAnES,OAAO;;AAsEzB,OAAQ;EACJ,UAAU,EAAE,GAAG;EACf,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;EAClB,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,GAAG;EAEZ,gBAAgB,EA3EN,OAAO;;AAgFjB,UAAG;EACC,aAAa,EAAE,KAAK;EAEpB,SAAS,EAAE,KAAK;EAEhB,aAAa,EAAE,iBAAqB;AAGxC,SAAE;EACE,WAAW,EAAE,IAAI;AAKjB,gBAAE;EACE,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EAEb,MAAM,EAAE,iBAAqB;AAIrC,uBAAgB;EACZ,cAAc,EAAE,KAAK;EAErB,KAAK,EA9GK,OAAO;EA+GjB,UAAU,EAAE,MAAM;AAGtB,wBAAiB;EACb,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,GAAG;EAEZ,UAAU,EAAE,iCAA0C;EACtD,MAAM,EAAE,iBAAqB;EAC7B,aAAa,EAAE,GAAG",
+"sources": ["sass/chapter03-project01.scss"],
+"names": [],
+"file": "chapter03-project01.css"
}
\ No newline at end of file
diff --git a/chapter03/css/chapter03-project02.css b/chapter03/css/chapter03-project02.css
index dad03e5..f6a57a2 100644
--- a/chapter03/css/chapter03-project02.css
+++ b/chapter03/css/chapter03-project02.css
@@ -1,105 +1,105 @@
-/* CSS for chapter03-project02 */
-/* Declare variables. */
-/* Actual CSS. Organization simplified due to simplicity of project. */
-a[href^="mailto"] {
- background: url(../images/email.png) no-repeat 0 3px;
- padding-left: 1em; }
-
-a[href^="tel"] {
- background: url(../images/call.png) no-repeat 0 3px;
- padding-left: 1em; }
-
-body {
- background-color: #dae1e8;
- background-image: url("../images/background-pattern.png"); }
-
-body a {
- color: #42a3c6; }
-
-header li {
- margin-right: 1em;
- list-style-type: none; }
-header #mainMenu {
- background-color: #283649; }
-header #mainMenu ul {
- display: flex;
- justify-content: flex-end;
- padding-right: 5em; }
-header h1 {
- padding-left: 5em;
- background: repeating-linear-gradient(-55deg, #001c3c, #001c3c 6px, #283649 8px, #001c3c 1px);
- background-color: #001c3c; }
-header #secondaryMenu {
- background-color: #dae1e8; }
-header #secondaryMenu ul {
- display: flex;
- justify-content: center;
- padding-top: 0.2em;
- padding-right: 20em;
- padding-bottom: 0.2em; }
-
-#mainContact {
- margin: 1em;
- max-width: 700px;
- margin-right: auto;
- margin-left: auto;
- background-color: #ffffff; }
-
-#mainContact li {
- list-style-type: none; }
-#mainContact div {
- display: flex;
- flex-direction: column;
- align-items: center; }
-#mainContact div img {
- max-width: 100px;
- padding: 0.3em;
- border: solid 1px #b8b8b8; }
-#mainContact section {
- margin-top: 1em;
- border: solid 1px #001c3c; }
-#mainContact section h3 {
- padding: 0.3em;
- font-size: 1.2em;
- color: #ffffff;
- background: repeating-linear-gradient(-55deg, #001c3c, #001c3c 6px, #283649 8px, #001c3c 1px);
- background-color: #001c3c;
- border: solid 1px #001c3c; }
-#mainContact section p {
- margin-top: 0.5em; }
-#mainContact section p em {
- color: #b8b8b8; }
-#mainContact section .actions {
- background-color: #001c3c; }
-#mainContact section .actions ul {
- display: flex;
- justify-content: flex-start;
- width: 100%;
- margin-top: 0.5em;
- margin-bottom: 0.5em; }
-#mainContact section .actions li {
- margin-left: 0.5em;
- font-size: 0.9em; }
-#mainContact section .actions .actionEdit {
- padding: 0.2em;
- padding-left: 1em;
- background: url(../images/edit.png) no-repeat 0 3px;
- background-color: #dae1e8;
- border-radius: 0.25em; }
-#mainContact section .actions .actionFlag {
- padding: 0.2em;
- padding-left: 1em;
- background: url(../images/flag.png) no-repeat 0 3px;
- background-color: #dae1e8;
- border-radius: 0.25em; }
-
-footer {
- margin: 1em;
- max-width: 700px;
- margin-right: auto;
- margin-left: auto;
- padding: 0.4em;
- color: #ffffff;
- background-color: #001c3c; }
-
-/*# sourceMappingURL=chapter03-project02.css.map */
+/* CSS for chapter03-project02 */
+/* Declare variables. */
+/* Actual CSS. Organization simplified due to simplicity of project. */
+a[href^="mailto"] {
+ background: url(../images/email.png) no-repeat 0 3px;
+ padding-left: 1em; }
+
+a[href^="tel"] {
+ background: url(../images/call.png) no-repeat 0 3px;
+ padding-left: 1em; }
+
+body {
+ background-color: #dae1e8;
+ background-image: url("../images/background-pattern.png"); }
+
+body a {
+ color: #42a3c6; }
+
+header li {
+ margin-right: 1em;
+ list-style-type: none; }
+header #mainMenu {
+ background-color: #283649; }
+header #mainMenu ul {
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 5em; }
+header h1 {
+ padding-left: 5em;
+ background: repeating-linear-gradient(-55deg, #001c3c, #001c3c 6px, #283649 8px, #001c3c 1px);
+ background-color: #001c3c; }
+header #secondaryMenu {
+ background-color: #dae1e8; }
+header #secondaryMenu ul {
+ display: flex;
+ justify-content: center;
+ padding-top: 0.2em;
+ padding-right: 20em;
+ padding-bottom: 0.2em; }
+
+#mainContact {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+ background-color: #ffffff; }
+
+#mainContact li {
+ list-style-type: none; }
+#mainContact div {
+ display: flex;
+ flex-direction: column;
+ align-items: center; }
+#mainContact div img {
+ max-width: 100px;
+ padding: 0.3em;
+ border: solid 1px #b8b8b8; }
+#mainContact section {
+ margin-top: 1em;
+ border: solid 1px #001c3c; }
+#mainContact section h3 {
+ padding: 0.3em;
+ font-size: 1.2em;
+ color: #ffffff;
+ background: repeating-linear-gradient(-55deg, #001c3c, #001c3c 6px, #283649 8px, #001c3c 1px);
+ background-color: #001c3c;
+ border: solid 1px #001c3c; }
+#mainContact section p {
+ margin-top: 0.5em; }
+#mainContact section p em {
+ color: #b8b8b8; }
+#mainContact section .actions {
+ background-color: #001c3c; }
+#mainContact section .actions ul {
+ display: flex;
+ justify-content: flex-start;
+ width: 100%;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em; }
+#mainContact section .actions li {
+ margin-left: 0.5em;
+ font-size: 0.9em; }
+#mainContact section .actions .actionEdit {
+ padding: 0.2em;
+ padding-left: 1em;
+ background: url(../images/edit.png) no-repeat 0 3px;
+ background-color: #dae1e8;
+ border-radius: 0.25em; }
+#mainContact section .actions .actionFlag {
+ padding: 0.2em;
+ padding-left: 1em;
+ background: url(../images/flag.png) no-repeat 0 3px;
+ background-color: #dae1e8;
+ border-radius: 0.25em; }
+
+footer {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+ padding: 0.4em;
+ color: #ffffff;
+ background-color: #001c3c; }
+
+/*# sourceMappingURL=chapter03-project02.css.map */
diff --git a/chapter03/css/chapter03-project02.css.map b/chapter03/css/chapter03-project02.css.map
index b7ee7b6..aee4666 100644
--- a/chapter03/css/chapter03-project02.css.map
+++ b/chapter03/css/chapter03-project02.css.map
@@ -1,7 +1,7 @@
-{
-"version": 3,
-"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AAYxB,uEAAuE;AAEvE,iBAAkB;EACd,UAAU,EAAE,wCAAwC;EACpD,YAAY,EAAE,GAAG;;AAGrB,cAAe;EACX,UAAU,EAAE,uCAAuC;EACnD,YAAY,EAAE,GAAG;;AAGrB,IAAK;EACD,gBAAgB,EAtBF,OAAO;EAuBrB,gBAAgB,EAAE,uCAAuC;;AAKzD,MAAE;EACE,KAAK,EAtBK,OAAO;;AA4BrB,SAAG;EACC,YAAY,EAAE,GAAG;EACjB,eAAe,EAAE,IAAI;AAGzB,gBAAU;EACN,gBAAgB,EAvCP,OAAO;AA4ChB,mBAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EAEzB,aAAa,EAAE,GAAG;AAI1B,SAAG;EACC,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,iFAMX;EACD,gBAAgB,EA3DP,OAAO;AA8DpB,qBAAe;EACX,gBAAgB,EApEN,OAAO;AAyEjB,wBAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EAEvB,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,cAAc,EAAE,KAAK;;AAKjC,YAAa;EACT,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,KAAK;EAChB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EAEjB,gBAAgB,EA3FN,OAAO;;AAgGjB,eAAG;EACC,eAAe,EAAE,IAAI;AAGzB,gBAAI;EACA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;AAKnB,oBAAI;EACA,SAAS,EAAE,KAAK;EAChB,OAAO,EAAE,KAAK;EAEd,MAAM,EAAE,iBAAqB;AAIrC,oBAAQ;EACJ,UAAU,EAAE,GAAG;EAEf,MAAM,EAAE,iBAAyB;AAKjC,uBAAG;EACC,OAAO,EAAE,KAAK;EAEd,SAAS,EAAE,KAAK;EAChB,KAAK,EAhIH,OAAO;EAkIT,UAAU,EAAE,iFAMX;EACD,gBAAgB,EAnIX,OAAO;EAoIZ,MAAM,EAAE,iBAAyB;AAGrC,sBAAE;EACE,UAAU,EAAE,KAAK;AAKjB,yBAAG;EACC,KAAK,EAlJR,OAAO;AAsJZ,6BAAS;EACL,gBAAgB,EAnJX,OAAO;AAwJZ,gCAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,UAAU;EAE3B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,KAAK;AAGxB,gCAAG;EACC,WAAW,EAAE,KAAK;EAElB,SAAS,EAAE,KAAK;AAGpB,yCAAY;EACR,OAAO,EAAE,KAAK;EACd,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,uCAAuC;EACnD,gBAAgB,EAjLd,OAAO;EAkLT,aAAa,EAAE,MAAM;AAGzB,yCAAY;EACR,OAAO,EAAE,KAAK;EACd,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,uCAAuC;EACnD,gBAAgB,EA1Ld,OAAO;EA2LT,aAAa,EAAE,MAAM;;AAMrC,MAAO;EACH,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,KAAK;EAChB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,KAAK;EAEd,KAAK,EAzMK,OAAO;EA2MjB,gBAAgB,EArMH,OAAO",
-"sources": ["sass/chapter03-project02.scss"],
-"names": [],
-"file": "chapter03-project02.css"
+{
+"version": 3,
+"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AAYxB,uEAAuE;AAEvE,iBAAkB;EACd,UAAU,EAAE,wCAAwC;EACpD,YAAY,EAAE,GAAG;;AAGrB,cAAe;EACX,UAAU,EAAE,uCAAuC;EACnD,YAAY,EAAE,GAAG;;AAGrB,IAAK;EACD,gBAAgB,EAtBF,OAAO;EAuBrB,gBAAgB,EAAE,uCAAuC;;AAKzD,MAAE;EACE,KAAK,EAtBK,OAAO;;AA4BrB,SAAG;EACC,YAAY,EAAE,GAAG;EACjB,eAAe,EAAE,IAAI;AAGzB,gBAAU;EACN,gBAAgB,EAvCP,OAAO;AA4ChB,mBAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EAEzB,aAAa,EAAE,GAAG;AAI1B,SAAG;EACC,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,iFAMX;EACD,gBAAgB,EA3DP,OAAO;AA8DpB,qBAAe;EACX,gBAAgB,EApEN,OAAO;AAyEjB,wBAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EAEvB,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,cAAc,EAAE,KAAK;;AAKjC,YAAa;EACT,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,KAAK;EAChB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EAEjB,gBAAgB,EA3FN,OAAO;;AAgGjB,eAAG;EACC,eAAe,EAAE,IAAI;AAGzB,gBAAI;EACA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;AAKnB,oBAAI;EACA,SAAS,EAAE,KAAK;EAChB,OAAO,EAAE,KAAK;EAEd,MAAM,EAAE,iBAAqB;AAIrC,oBAAQ;EACJ,UAAU,EAAE,GAAG;EAEf,MAAM,EAAE,iBAAyB;AAKjC,uBAAG;EACC,OAAO,EAAE,KAAK;EAEd,SAAS,EAAE,KAAK;EAChB,KAAK,EAhIH,OAAO;EAkIT,UAAU,EAAE,iFAMX;EACD,gBAAgB,EAnIX,OAAO;EAoIZ,MAAM,EAAE,iBAAyB;AAGrC,sBAAE;EACE,UAAU,EAAE,KAAK;AAKjB,yBAAG;EACC,KAAK,EAlJR,OAAO;AAsJZ,6BAAS;EACL,gBAAgB,EAnJX,OAAO;AAwJZ,gCAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,UAAU;EAE3B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,KAAK;AAGxB,gCAAG;EACC,WAAW,EAAE,KAAK;EAElB,SAAS,EAAE,KAAK;AAGpB,yCAAY;EACR,OAAO,EAAE,KAAK;EACd,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,uCAAuC;EACnD,gBAAgB,EAjLd,OAAO;EAkLT,aAAa,EAAE,MAAM;AAGzB,yCAAY;EACR,OAAO,EAAE,KAAK;EACd,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,uCAAuC;EACnD,gBAAgB,EA1Ld,OAAO;EA2LT,aAAa,EAAE,MAAM;;AAMrC,MAAO;EACH,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,KAAK;EAChB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,KAAK;EAEd,KAAK,EAzMK,OAAO;EA2MjB,gBAAgB,EArMH,OAAO",
+"sources": ["sass/chapter03-project02.scss"],
+"names": [],
+"file": "chapter03-project02.css"
}
\ No newline at end of file
diff --git a/chapter03/css/chapter03-project03.css b/chapter03/css/chapter03-project03.css
index 84ca6ac..fc33499 100644
--- a/chapter03/css/chapter03-project03.css
+++ b/chapter03/css/chapter03-project03.css
@@ -1,64 +1,64 @@
-/* CSS for chapter03-project01 */
-/* Declare variables. */
-/* Actual CSS. Organization simplified due to simplicity of project. */
-body {
- background: url(../images/art-background4.jpg);
- background-size: cover;
- background-repeat: no-repeat; }
-
-header {
- width: 35%;
- margin-left: 12%;
- padding-left: 1em;
- background-color: #ffffff; }
-
-header h1 {
- padding-top: 0.5em;
- padding-bottom: 0.2em;
- font-family: 'Six Caps', sans-serif;
- font-size: 3.5em; }
-header h2 {
- font-size: 0.8em;
- padding-bottom: 3em; }
-
-article {
- display: flex;
- flex-direction: column;
- width: 50%;
- min-height: 17em;
- margin-top: 10em;
- margin-left: 12%;
- background-color: rgba(192, 192, 192, 0.6); }
-
-article h2 {
- padding-top: 0.6em;
- padding-bottom: 0.6em;
- padding-left: 0.4em;
- font-size: 1.5em;
- background-color: rgba(192, 192, 192, 0.6); }
-article p {
- display: flex;
- flex-grow: 1;
- align-items: center;
- margin-left: 1em;
- font-size: 1.5em;
- font-weight: bold; }
-article #timeline {
- justify-content: center;
- width: 70%;
- margin-bottom: 1em;
- margin-left: 1em;
- color: #ffffff;
- background-color: rgba(0, 0, 0, 0.6); }
-article footer {
- padding-top: 1em;
- padding-bottom: 1em;
- padding-left: 2em;
- background-color: #ffffff; }
-article footer footer {
- float: left;
- margin-bottom: 0;
- padding-bottom: 0;
- background: url(../images/email.png) no-repeat 0 3px; }
-
-/*# sourceMappingURL=chapter03-project03.css.map */
+/* CSS for chapter03-project01 */
+/* Declare variables. */
+/* Actual CSS. Organization simplified due to simplicity of project. */
+body {
+ background: url(../images/art-background4.jpg);
+ background-size: cover;
+ background-repeat: no-repeat; }
+
+header {
+ width: 35%;
+ margin-left: 12%;
+ padding-left: 1em;
+ background-color: #ffffff; }
+
+header h1 {
+ padding-top: 0.5em;
+ padding-bottom: 0.2em;
+ font-family: 'Six Caps', sans-serif;
+ font-size: 3.5em; }
+header h2 {
+ font-size: 0.8em;
+ padding-bottom: 3em; }
+
+article {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ min-height: 17em;
+ margin-top: 10em;
+ margin-left: 12%;
+ background-color: rgba(192, 192, 192, 0.6); }
+
+article h2 {
+ padding-top: 0.6em;
+ padding-bottom: 0.6em;
+ padding-left: 0.4em;
+ font-size: 1.5em;
+ background-color: rgba(192, 192, 192, 0.6); }
+article p {
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+ margin-left: 1em;
+ font-size: 1.5em;
+ font-weight: bold; }
+article #timeline {
+ justify-content: center;
+ width: 70%;
+ margin-bottom: 1em;
+ margin-left: 1em;
+ color: #ffffff;
+ background-color: rgba(0, 0, 0, 0.6); }
+article footer {
+ padding-top: 1em;
+ padding-bottom: 1em;
+ padding-left: 2em;
+ background-color: #ffffff; }
+article footer footer {
+ float: left;
+ margin-bottom: 0;
+ padding-bottom: 0;
+ background: url(../images/email.png) no-repeat 0 3px; }
+
+/*# sourceMappingURL=chapter03-project03.css.map */
diff --git a/chapter03/css/chapter03-project03.css.map b/chapter03/css/chapter03-project03.css.map
index d09f27c..f0afa1f 100644
--- a/chapter03/css/chapter03-project03.css.map
+++ b/chapter03/css/chapter03-project03.css.map
@@ -1,7 +1,7 @@
-{
-"version": 3,
-"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AASxB,uEAAuE;AAEvE,IAAK;EACD,UAAU,EAAE,kCAAkC;EAC9C,eAAe,EAAE,KAAK;EACtB,iBAAiB,EAAE,SAAS;;AAGhC,MAAO;EACH,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,GAAG;EAChB,YAAY,EAAE,GAAG;EAEjB,gBAAgB,EApBN,OAAO;;AAyBjB,SAAG;EACC,WAAW,EAAE,KAAK;EAClB,cAAc,EAAE,KAAK;EAErB,WAAW,EAAE,sBAAsB;EACnC,SAAS,EAAE,KAAK;AAGpB,SAAG;EACC,SAAS,EAAE,KAAK;EAEhB,cAAc,EAAE,GAAG;;AAI3B,OAAQ;EACJ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAEhB,gBAAgB,EA7CG,wBAAwB;;AAkD3C,UAAG;EACC,WAAW,EAAE,KAAK;EAClB,cAAc,EAAE,KAAK;EACrB,YAAY,EAAE,KAAK;EAEnB,SAAS,EAAE,KAAK;EAEhB,gBAAgB,EAzDD,wBAAwB;AA4D3C,SAAE;EACE,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,CAAC;EACZ,WAAW,EAAE,MAAM;EAEnB,WAAW,EAAE,GAAG;EAEhB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,IAAI;AAGrB,iBAAU;EACN,eAAe,EAAE,MAAM;EAEvB,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,GAAG;EAClB,WAAW,EAAE,GAAG;EAEhB,KAAK,EAjFC,OAAO;EAmFb,gBAAgB,EA9EA,kBAAkB;AAiFtC,cAAO;EACH,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;EACnB,YAAY,EAAE,GAAG;EAGjB,gBAAgB,EA5FV,OAAO;AAiGb,qBAAO;EACH,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,CAAC;EAChB,cAAc,EAAE,CAAC;EAEjB,UAAU,EAAE,wCAAwC",
-"sources": ["sass/chapter03-project03.scss"],
-"names": [],
-"file": "chapter03-project03.css"
+{
+"version": 3,
+"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AASxB,uEAAuE;AAEvE,IAAK;EACD,UAAU,EAAE,kCAAkC;EAC9C,eAAe,EAAE,KAAK;EACtB,iBAAiB,EAAE,SAAS;;AAGhC,MAAO;EACH,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,GAAG;EAChB,YAAY,EAAE,GAAG;EAEjB,gBAAgB,EApBN,OAAO;;AAyBjB,SAAG;EACC,WAAW,EAAE,KAAK;EAClB,cAAc,EAAE,KAAK;EAErB,WAAW,EAAE,sBAAsB;EACnC,SAAS,EAAE,KAAK;AAGpB,SAAG;EACC,SAAS,EAAE,KAAK;EAEhB,cAAc,EAAE,GAAG;;AAI3B,OAAQ;EACJ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAEhB,gBAAgB,EA7CG,wBAAwB;;AAkD3C,UAAG;EACC,WAAW,EAAE,KAAK;EAClB,cAAc,EAAE,KAAK;EACrB,YAAY,EAAE,KAAK;EAEnB,SAAS,EAAE,KAAK;EAEhB,gBAAgB,EAzDD,wBAAwB;AA4D3C,SAAE;EACE,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,CAAC;EACZ,WAAW,EAAE,MAAM;EAEnB,WAAW,EAAE,GAAG;EAEhB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,IAAI;AAGrB,iBAAU;EACN,eAAe,EAAE,MAAM;EAEvB,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,GAAG;EAClB,WAAW,EAAE,GAAG;EAEhB,KAAK,EAjFC,OAAO;EAmFb,gBAAgB,EA9EA,kBAAkB;AAiFtC,cAAO;EACH,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;EACnB,YAAY,EAAE,GAAG;EAGjB,gBAAgB,EA5FV,OAAO;AAiGb,qBAAO;EACH,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,CAAC;EAChB,cAAc,EAAE,CAAC;EAEjB,UAAU,EAAE,wCAAwC",
+"sources": ["sass/chapter03-project03.scss"],
+"names": [],
+"file": "chapter03-project03.css"
}
\ No newline at end of file
diff --git a/chapter03/css/reset.css b/chapter03/css/reset.css
index 376278b..c75f87c 100644
--- a/chapter03/css/reset.css
+++ b/chapter03/css/reset.css
@@ -1,10 +1,10 @@
-/* CSS to reset main HTML element formatting */
-html, body, header, footer, hgroup, nav, article, section, figure, figcaption,
-h1, h2, h3, ul, li, body, div, p, img {
- margin: 0;
- padding: 0;
- font-size: 100%;
- vertical-align: baseline;
- border: 0; }
-
-/*# sourceMappingURL=reset.css.map */
+/* CSS to reset main HTML element formatting */
+html, body, header, footer, hgroup, nav, article, section, figure, figcaption,
+h1, h2, h3, ul, li, body, div, p, img {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ border: 0; }
+
+/*# sourceMappingURL=reset.css.map */
diff --git a/chapter03/css/reset.css.map b/chapter03/css/reset.css.map
index 37776a6..26e7ea6 100644
--- a/chapter03/css/reset.css.map
+++ b/chapter03/css/reset.css.map
@@ -1,7 +1,7 @@
-{
-"version": 3,
-"mappings": "AACA,+CAA+C;AAE/C;qCACsC;EAClC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,QAAQ;EACxB,MAAM,EAAE,CAAC",
-"sources": ["sass/reset.scss"],
-"names": [],
-"file": "reset.css"
+{
+"version": 3,
+"mappings": "AACA,+CAA+C;AAE/C;qCACsC;EAClC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,QAAQ;EACxB,MAAM,EAAE,CAAC",
+"sources": ["sass/reset.scss"],
+"names": [],
+"file": "reset.css"
}
\ No newline at end of file
diff --git a/chapter03/css/sass/_order_reference.scss b/chapter03/css/sass/_order_reference.scss
index 7ef63be..7aa70ae 100644
--- a/chapter03/css/sass/_order_reference.scss
+++ b/chapter03/css/sass/_order_reference.scss
@@ -1,62 +1,62 @@
-
-//********************************************Positioning*********************************************
-//*********************************************Includes: *********************************************
-//position, top, right, bottom, left, z-index, display, float
-
-//flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-grow,
-//flex-shrink, flex-basis, align-self,
-
-//width, height, max-width, max-height, min-width, min-height, padding, padding-top, padding-right,
-//padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left,
-
-//margin-collapse, margin-top-collapse, margin-right-collapse, margin-bottom-collapse,
-//margin-left-collapse,
-
-//overflow, overflow-x, overflow-y, clip, clear
-//****************************************************************************************************
-
-
-//*********************************************Typography*********************************************
-//*********************************************Includes: *********************************************
-//font, font-family, font-size, font-smoothing, osx-font-smoothing, font-style, font-weight,
-
-//hyphens, src, line-height, letter-spacing, word-spacing, color, text-align, text-decoration,
-//text-indent, text-overflow, text-rendering, text-size-adjust, text-shadow, text-transform,
-//word-break, word-wrap, white-space
-//****************************************************************************************************
-
-
-//***********************************************Visual***********************************************
-//*********************************************Includes: *********************************************
-//vertical-align, list-style, list-style-type, list-style-position, list-style-image, pointer-events,
-//cursor,
-
-//background, background-attatchment, background-color, background-image, background-position,
-//background-repeat, background-size,
-
-//border, border-collapse, border-top, border-right, border-bottom, border-left, border-color,
-//border-image, border-top-color, border-right-color, border-bottom-color, border-left-color,
-//border-spacing, border-style, border-top-style, border-right-style, border-bottom-style,
-//border-left-style, border-width, border-top-width, border-right-width, border-bottom-width,
-//border-left-width,
-
-//border-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,
-//border-top-left-radius, border-radius-topright, border-radius-bottomright, border-radius-bottomleft,
-//border-radius-topleft,
-
-//content, quotes, outline, outline-offset, opacity, filter, visibility, size, zoom
-//****************************************************************************************************
-
-
-//***********************************************Other************************************************
-//*********************************************Includes: *********************************************
-//transform, box-align, box-flex, box-orient, box-pack, box-shadow, box-sizing, table-layout,
-
-//animation, animation-delay, animation-duration, animation-iteration-count, animation-name,
-//animation-play-state, animation-timing-function, animation-fill-mode,
-
-//transition, transition-delay, transition-duration, transition-property, transition-timing-function,
-
-//background-clip, backface-visibility, resize, appearance, user-select, interpolation-mode, direction,
-//marks, page, set-link-source, unicode-bidi, speak
-//****************************************************************************************************
+
+//********************************************Positioning*********************************************
+//*********************************************Includes: *********************************************
+//position, top, right, bottom, left, z-index, display, float
+
+//flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-grow,
+//flex-shrink, flex-basis, align-self,
+
+//width, height, max-width, max-height, min-width, min-height, padding, padding-top, padding-right,
+//padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left,
+
+//margin-collapse, margin-top-collapse, margin-right-collapse, margin-bottom-collapse,
+//margin-left-collapse,
+
+//overflow, overflow-x, overflow-y, clip, clear
+//****************************************************************************************************
+
+
+//*********************************************Typography*********************************************
+//*********************************************Includes: *********************************************
+//font, font-family, font-size, font-smoothing, osx-font-smoothing, font-style, font-weight,
+
+//hyphens, src, line-height, letter-spacing, word-spacing, color, text-align, text-decoration,
+//text-indent, text-overflow, text-rendering, text-size-adjust, text-shadow, text-transform,
+//word-break, word-wrap, white-space
+//****************************************************************************************************
+
+
+//***********************************************Visual***********************************************
+//*********************************************Includes: *********************************************
+//vertical-align, list-style, list-style-type, list-style-position, list-style-image, pointer-events,
+//cursor,
+
+//background, background-attatchment, background-color, background-image, background-position,
+//background-repeat, background-size,
+
+//border, border-collapse, border-top, border-right, border-bottom, border-left, border-color,
+//border-image, border-top-color, border-right-color, border-bottom-color, border-left-color,
+//border-spacing, border-style, border-top-style, border-right-style, border-bottom-style,
+//border-left-style, border-width, border-top-width, border-right-width, border-bottom-width,
+//border-left-width,
+
+//border-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,
+//border-top-left-radius, border-radius-topright, border-radius-bottomright, border-radius-bottomleft,
+//border-radius-topleft,
+
+//content, quotes, outline, outline-offset, opacity, filter, visibility, size, zoom
+//****************************************************************************************************
+
+
+//***********************************************Other************************************************
+//*********************************************Includes: *********************************************
+//transform, box-align, box-flex, box-orient, box-pack, box-shadow, box-sizing, table-layout,
+
+//animation, animation-delay, animation-duration, animation-iteration-count, animation-name,
+//animation-play-state, animation-timing-function, animation-fill-mode,
+
+//transition, transition-delay, transition-duration, transition-property, transition-timing-function,
+
+//background-clip, backface-visibility, resize, appearance, user-select, interpolation-mode, direction,
+//marks, page, set-link-source, unicode-bidi, speak
+//****************************************************************************************************
diff --git a/chapter03/css/sass/chapter03-project01.scss b/chapter03/css/sass/chapter03-project01.scss
index 7e1bf9b..2128954 100644
--- a/chapter03/css/sass/chapter03-project01.scss
+++ b/chapter03/css/sass/chapter03-project01.scss
@@ -1,134 +1,134 @@
-
-/* CSS for chapter03-project01 */
-
-/* Declare variables. */
-
-$color-aquaDark: #203643;
-$color-aquaMid: #306271;
-$color-aquaLight: #738b97;
-$color-hyperlink: #96ccdf;
-$color-smallText: #949ea2;
-$color-white: #ffffff;
-$color-grey: #b8b8b8;
-
-/* Actual CSS. Organization simplified due to simplicity of project. */
-
-body {
- background-color: $color-aquaDark;
-}
-
-header, footer {
- margin: 0em 4em 0.5em 4em;
- padding: 0.5em;
-
- color: white;
-
- background-color: $color-aquaMid;
-}
-
-header, footer {
-
- h1 {
- font-size: 1.8em;
- }
-
- h2 {
- font-size: 0.8em;
- }
-
- ul {
- display: flex;
- }
-
- li {
- list-style-type: none;
- }
-
- a {
- text-decoration: none;
- }
-
- nav {
- margin-top: 0.8%;
-
- font-size: 1.4em;
-
- background-color: $color-aquaLight;
- }
-
- p {
- padding-bottom: 0.5em;
- }
-}
-
-header {
-
- nav {
-
- li {
- margin-right: 1%;
- margin-left: 1%;
- }
- }
-}
-
-a, a:link, a:visited {
- color: $color-hyperlink;
-}
-
-article {
- margin-top: 1em;
- margin-right: 4em;
- margin-bottom: 1em;
- margin-left: 4em;
- padding: 1em;
-
- background-color: $color-white;
-}
-
-article {
-
- h3 {
- margin-bottom: 0.5em;
-
- font-size: 1.3em;
-
- border-bottom: solid 1px $color-grey;
- }
-
- a {
- font-weight: bold;
- }
-
- figure {
-
- a {
- display: flex;
- width: 500px;
- height: 312px;
- margin-top: 0.5%;
- margin-bottom: 0.5%;
- padding: 0.5%;
-
- border: solid 1px $color-grey;
- }
- }
-
- p:first-of-type {
- padding-bottom: 0.2em;
-
- color: $color-smallText;
- font-style: italic;
- }
-
- p:nth-of-type(3) {
- max-width: 500px;
- margin-bottom: 2em;
- padding: 1em;
-
- background: linear-gradient($color-white, $color-grey);
- border: solid 1px $color-grey;
- border-radius: 1em;
- }
-
-}
+
+/* CSS for chapter03-project01 */
+
+/* Declare variables. */
+
+$color-aquaDark: #203643;
+$color-aquaMid: #306271;
+$color-aquaLight: #738b97;
+$color-hyperlink: #96ccdf;
+$color-smallText: #949ea2;
+$color-white: #ffffff;
+$color-grey: #b8b8b8;
+
+/* Actual CSS. Organization simplified due to simplicity of project. */
+
+body {
+ background-color: $color-aquaDark;
+}
+
+header, footer {
+ margin: 0em 4em 0.5em 4em;
+ padding: 0.5em;
+
+ color: white;
+
+ background-color: $color-aquaMid;
+}
+
+header, footer {
+
+ h1 {
+ font-size: 1.8em;
+ }
+
+ h2 {
+ font-size: 0.8em;
+ }
+
+ ul {
+ display: flex;
+ }
+
+ li {
+ list-style-type: none;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ nav {
+ margin-top: 0.8%;
+
+ font-size: 1.4em;
+
+ background-color: $color-aquaLight;
+ }
+
+ p {
+ padding-bottom: 0.5em;
+ }
+}
+
+header {
+
+ nav {
+
+ li {
+ margin-right: 1%;
+ margin-left: 1%;
+ }
+ }
+}
+
+a, a:link, a:visited {
+ color: $color-hyperlink;
+}
+
+article {
+ margin-top: 1em;
+ margin-right: 4em;
+ margin-bottom: 1em;
+ margin-left: 4em;
+ padding: 1em;
+
+ background-color: $color-white;
+}
+
+article {
+
+ h3 {
+ margin-bottom: 0.5em;
+
+ font-size: 1.3em;
+
+ border-bottom: solid 1px $color-grey;
+ }
+
+ a {
+ font-weight: bold;
+ }
+
+ figure {
+
+ a {
+ display: flex;
+ width: 500px;
+ height: 312px;
+ margin-top: 0.5%;
+ margin-bottom: 0.5%;
+ padding: 0.5%;
+
+ border: solid 1px $color-grey;
+ }
+ }
+
+ p:first-of-type {
+ padding-bottom: 0.2em;
+
+ color: $color-smallText;
+ font-style: italic;
+ }
+
+ p:nth-of-type(3) {
+ max-width: 500px;
+ margin-bottom: 2em;
+ padding: 1em;
+
+ background: linear-gradient($color-white, $color-grey);
+ border: solid 1px $color-grey;
+ border-radius: 1em;
+ }
+
+}
diff --git a/chapter03/css/sass/chapter03-project02.scss b/chapter03/css/sass/chapter03-project02.scss
index 1a3cb35..a10bb6f 100644
--- a/chapter03/css/sass/chapter03-project02.scss
+++ b/chapter03/css/sass/chapter03-project02.scss
@@ -1,210 +1,210 @@
-
-/* CSS for chapter03-project02 */
-
-/* Declare variables. */
-
-$color-white: #ffffff;
-$color-greyLight: #dae1e8;
-$color-grey: #b8b8b8;
-$color-greyDark: #283649;
-
-$color-blue: #002d4d;
-$color-blueDark: #001c3c;
-
-$color-hyperlink: #42a3c6;
-
-/* Actual CSS. Organization simplified due to simplicity of project. */
-
-a[href^="mailto"] {
- background: url(../images/email.png) no-repeat 0 3px;
- padding-left: 1em;
-}
-
-a[href^="tel"] {
- background: url(../images/call.png) no-repeat 0 3px;
- padding-left: 1em;
-}
-
-body {
- background-color: $color-greyLight;
- background-image: url("../images/background-pattern.png");
-}
-
-body {
-
- a {
- color: $color-hyperlink;
- }
-}
-
-header {
-
- li {
- margin-right: 1em;
- list-style-type: none;
- }
-
- #mainMenu {
- background-color: $color-greyDark;
- }
-
- #mainMenu {
-
- ul {
- display: flex;
- justify-content: flex-end;
-
- padding-right: 5em;
- }
- }
-
- h1 {
- padding-left: 5em;
-
- background: repeating-linear-gradient(
- -55deg,
- $color-blueDark,
- $color-blueDark 6px,
- $color-greyDark 8px,
- $color-blueDark 1px
- );
- background-color: $color-blueDark;
- }
-
- #secondaryMenu {
- background-color: $color-greyLight;
- }
-
- #secondaryMenu {
-
- ul {
- display: flex;
- justify-content: center;
-
- padding-top: 0.2em;
- padding-right: 20em;
- padding-bottom: 0.2em;
- }
- }
-}
-
-#mainContact {
- margin: 1em;
- max-width: 700px;
- margin-right: auto;
- margin-left: auto;
-
- background-color: $color-white;
-}
-
-#mainContact {
-
- li {
- list-style-type: none;
- }
-
- div {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- div {
-
- img {
- max-width: 100px;
- padding: 0.3em;
-
- border: solid 1px $color-grey;
- }
- }
-
- section {
- margin-top: 1em;
-
- border: solid 1px $color-blueDark;
- }
-
- section {
-
- h3 {
- padding: 0.3em;
-
- font-size: 1.2em;
- color: $color-white;
-
- background: repeating-linear-gradient(
- -55deg,
- $color-blueDark,
- $color-blueDark 6px,
- $color-greyDark 8px,
- $color-blueDark 1px
- );
- background-color: $color-blueDark;
- border: solid 1px $color-blueDark;
- }
-
- p {
- margin-top: 0.5em;
- }
-
- p {
-
- em {
- color: $color-grey;
- }
- }
-
- .actions {
- background-color: $color-blueDark;
- }
-
- .actions {
-
- ul {
- display: flex;
- justify-content: flex-start;
-
- width: 100%;
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- }
-
- li {
- margin-left: 0.5em;
-
- font-size: 0.9em;
- }
-
- .actionEdit {
- padding: 0.2em;
- padding-left: 1em;
-
- background: url(../images/edit.png) no-repeat 0 3px;
- background-color: $color-greyLight;
- border-radius: 0.25em;
- }
-
- .actionFlag {
- padding: 0.2em;
- padding-left: 1em;
-
- background: url(../images/flag.png) no-repeat 0 3px;
- background-color: $color-greyLight;
- border-radius: 0.25em;
- }
- }
- }
-}
-
-footer {
- margin: 1em;
- max-width: 700px;
- margin-right: auto;
- margin-left: auto;
- padding: 0.4em;
-
- color: $color-white;
-
- background-color: $color-blueDark;
-}
+
+/* CSS for chapter03-project02 */
+
+/* Declare variables. */
+
+$color-white: #ffffff;
+$color-greyLight: #dae1e8;
+$color-grey: #b8b8b8;
+$color-greyDark: #283649;
+
+$color-blue: #002d4d;
+$color-blueDark: #001c3c;
+
+$color-hyperlink: #42a3c6;
+
+/* Actual CSS. Organization simplified due to simplicity of project. */
+
+a[href^="mailto"] {
+ background: url(../images/email.png) no-repeat 0 3px;
+ padding-left: 1em;
+}
+
+a[href^="tel"] {
+ background: url(../images/call.png) no-repeat 0 3px;
+ padding-left: 1em;
+}
+
+body {
+ background-color: $color-greyLight;
+ background-image: url("../images/background-pattern.png");
+}
+
+body {
+
+ a {
+ color: $color-hyperlink;
+ }
+}
+
+header {
+
+ li {
+ margin-right: 1em;
+ list-style-type: none;
+ }
+
+ #mainMenu {
+ background-color: $color-greyDark;
+ }
+
+ #mainMenu {
+
+ ul {
+ display: flex;
+ justify-content: flex-end;
+
+ padding-right: 5em;
+ }
+ }
+
+ h1 {
+ padding-left: 5em;
+
+ background: repeating-linear-gradient(
+ -55deg,
+ $color-blueDark,
+ $color-blueDark 6px,
+ $color-greyDark 8px,
+ $color-blueDark 1px
+ );
+ background-color: $color-blueDark;
+ }
+
+ #secondaryMenu {
+ background-color: $color-greyLight;
+ }
+
+ #secondaryMenu {
+
+ ul {
+ display: flex;
+ justify-content: center;
+
+ padding-top: 0.2em;
+ padding-right: 20em;
+ padding-bottom: 0.2em;
+ }
+ }
+}
+
+#mainContact {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+
+ background-color: $color-white;
+}
+
+#mainContact {
+
+ li {
+ list-style-type: none;
+ }
+
+ div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ div {
+
+ img {
+ max-width: 100px;
+ padding: 0.3em;
+
+ border: solid 1px $color-grey;
+ }
+ }
+
+ section {
+ margin-top: 1em;
+
+ border: solid 1px $color-blueDark;
+ }
+
+ section {
+
+ h3 {
+ padding: 0.3em;
+
+ font-size: 1.2em;
+ color: $color-white;
+
+ background: repeating-linear-gradient(
+ -55deg,
+ $color-blueDark,
+ $color-blueDark 6px,
+ $color-greyDark 8px,
+ $color-blueDark 1px
+ );
+ background-color: $color-blueDark;
+ border: solid 1px $color-blueDark;
+ }
+
+ p {
+ margin-top: 0.5em;
+ }
+
+ p {
+
+ em {
+ color: $color-grey;
+ }
+ }
+
+ .actions {
+ background-color: $color-blueDark;
+ }
+
+ .actions {
+
+ ul {
+ display: flex;
+ justify-content: flex-start;
+
+ width: 100%;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ }
+
+ li {
+ margin-left: 0.5em;
+
+ font-size: 0.9em;
+ }
+
+ .actionEdit {
+ padding: 0.2em;
+ padding-left: 1em;
+
+ background: url(../images/edit.png) no-repeat 0 3px;
+ background-color: $color-greyLight;
+ border-radius: 0.25em;
+ }
+
+ .actionFlag {
+ padding: 0.2em;
+ padding-left: 1em;
+
+ background: url(../images/flag.png) no-repeat 0 3px;
+ background-color: $color-greyLight;
+ border-radius: 0.25em;
+ }
+ }
+ }
+}
+
+footer {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+ padding: 0.4em;
+
+ color: $color-white;
+
+ background-color: $color-blueDark;
+}
diff --git a/chapter03/css/sass/chapter03-project03.scss b/chapter03/css/sass/chapter03-project03.scss
index b87516a..20bb2f8 100644
--- a/chapter03/css/sass/chapter03-project03.scss
+++ b/chapter03/css/sass/chapter03-project03.scss
@@ -1,111 +1,111 @@
-
-/* CSS for chapter03-project01 */
-
-/* Declare variables. */
-
-$color-white: #ffffff;
-$color-black: #000000;
-
-$color-greyMidOpacity: rgba(192, 192, 192, 0.6);
-$color-greyLowOpacity: rgba(192, 192, 192, 0.4);
-$color-blackMidOpacity: rgba(0, 0, 0, 0.6);
-
-/* Actual CSS. Organization simplified due to simplicity of project. */
-
-body {
- background: url(../images/art-background4.jpg);
- background-size: cover;
- background-repeat: no-repeat;
-}
-
-header {
- width: 35%;
- margin-left: 12%;
- padding-left: 1em;
-
- background-color: $color-white;
-}
-
-header {
-
- h1 {
- padding-top: 0.5em;
- padding-bottom: 0.2em;
-
- font-family: 'Six Caps', sans-serif;
- font-size: 3.5em;
- }
-
- h2 {
- font-size: 0.8em;
-
- padding-bottom: 3em;
- }
-}
-
-article {
- display: flex;
- flex-direction: column;
- width: 50%;
- min-height: 17em;
- margin-top: 10em;
- margin-left: 12%;
-
- background-color: $color-greyMidOpacity;
-}
-
-article {
-
- h2 {
- padding-top: 0.6em;
- padding-bottom: 0.6em;
- padding-left: 0.4em;
-
- font-size: 1.5em;
-
- background-color: $color-greyMidOpacity;
- }
-
- p {
- display: flex;
- flex-grow: 1;
- align-items: center;
-
- margin-left: 1em;
-
- font-size: 1.5em;
- font-weight: bold;
- }
-
- #timeline {
- justify-content: center;
-
- width: 70%;
- margin-bottom: 1em;
- margin-left: 1em;
-
- color: $color-white;
-
- background-color: $color-blackMidOpacity;
- }
-
- footer {
- padding-top: 1em;
- padding-bottom: 1em;
- padding-left: 2em;
-
- //background: url(../images/email.png) no-repeat 0 3px;
- background-color: $color-white;
- }
-
- footer {
-
- footer {
- float: left;
- margin-bottom: 0;
- padding-bottom: 0;
-
- background: url(../images/email.png) no-repeat 0 3px;
- }
- }
-}
+
+/* CSS for chapter03-project01 */
+
+/* Declare variables. */
+
+$color-white: #ffffff;
+$color-black: #000000;
+
+$color-greyMidOpacity: rgba(192, 192, 192, 0.6);
+$color-greyLowOpacity: rgba(192, 192, 192, 0.4);
+$color-blackMidOpacity: rgba(0, 0, 0, 0.6);
+
+/* Actual CSS. Organization simplified due to simplicity of project. */
+
+body {
+ background: url(../images/art-background4.jpg);
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+header {
+ width: 35%;
+ margin-left: 12%;
+ padding-left: 1em;
+
+ background-color: $color-white;
+}
+
+header {
+
+ h1 {
+ padding-top: 0.5em;
+ padding-bottom: 0.2em;
+
+ font-family: 'Six Caps', sans-serif;
+ font-size: 3.5em;
+ }
+
+ h2 {
+ font-size: 0.8em;
+
+ padding-bottom: 3em;
+ }
+}
+
+article {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ min-height: 17em;
+ margin-top: 10em;
+ margin-left: 12%;
+
+ background-color: $color-greyMidOpacity;
+}
+
+article {
+
+ h2 {
+ padding-top: 0.6em;
+ padding-bottom: 0.6em;
+ padding-left: 0.4em;
+
+ font-size: 1.5em;
+
+ background-color: $color-greyMidOpacity;
+ }
+
+ p {
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+
+ margin-left: 1em;
+
+ font-size: 1.5em;
+ font-weight: bold;
+ }
+
+ #timeline {
+ justify-content: center;
+
+ width: 70%;
+ margin-bottom: 1em;
+ margin-left: 1em;
+
+ color: $color-white;
+
+ background-color: $color-blackMidOpacity;
+ }
+
+ footer {
+ padding-top: 1em;
+ padding-bottom: 1em;
+ padding-left: 2em;
+
+ //background: url(../images/email.png) no-repeat 0 3px;
+ background-color: $color-white;
+ }
+
+ footer {
+
+ footer {
+ float: left;
+ margin-bottom: 0;
+ padding-bottom: 0;
+
+ background: url(../images/email.png) no-repeat 0 3px;
+ }
+ }
+}
diff --git a/chapter03/css/sass/reset.scss b/chapter03/css/sass/reset.scss
index a9caf89..856df9d 100644
--- a/chapter03/css/sass/reset.scss
+++ b/chapter03/css/sass/reset.scss
@@ -1,11 +1,11 @@
-
-/* CSS to reset main HTML element formatting */
-
-html, body, header, footer, hgroup, nav, article, section, figure, figcaption,
-h1, h2, h3, ul, li, body, div, p, img {
- margin: 0;
- padding: 0;
- font-size: 100%;
- vertical-align: baseline;
- border: 0;
-}
+
+/* CSS to reset main HTML element formatting */
+
+html, body, header, footer, hgroup, nav, article, section, figure, figcaption,
+h1, h2, h3, ul, li, body, div, p, img {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ border: 0;
+}
diff --git a/chapter03/images/social/license.txt b/chapter03/images/social/license.txt
index 5ed2ec6..e7eda19 100644
--- a/chapter03/images/social/license.txt
+++ b/chapter03/images/social/license.txt
@@ -1,9 +1,9 @@
-If you use these icons, please place an attribution link to komodomedia.com. Social Network Icon Pack by Rogie King is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License (http://creativecommons.org/licenses/by-nc-sa/3.0/).
-
+If you use these icons, please place an attribution link to komodomedia.com. Social Network Icon Pack by Rogie King is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License (http://creativecommons.org/licenses/by-nc-sa/3.0/).
+
Based on a work at www.komodomedia.com.
More rad downloads can be found at http://www.komodomedia.com/download/
-Feelin' the love? Donate to Paypal: rogie@komodomedia.com
-
+Feelin' the love? Donate to Paypal: rogie@komodomedia.com
+
I claim no right of ownership to the respective company logos and glyphs in each one of these icons.
\ No newline at end of file
--
GitLab