diff --git a/framework/css/theme-llc.css b/framework/css/theme-llc.css index 9e2fadd..f7d4168 100644 --- a/framework/css/theme-llc.css +++ b/framework/css/theme-llc.css @@ -287,6 +287,48 @@ table img { font-weight: 400; } +/* Last slide +-------------------------------*/ +.last .title { + color: white; + margin-top: 40px; +} +.last ul { + margin: 0; + padding: 0; + list-style-type: none; + font-size: 2.2rem; +} +.last .fa { + padding-right: 10px; +} +.last .title-bg { + background: rgba(177, 9, 170, 0.8); + border-radius: 5px; + padding: 0 10px 0 6px; +} +.last .instructor-img { + border-radius: 50%; + width: 100px; + float: left; + margin-right: 20px; +} +.last h3 { + margin-bottom: 20px; +} +.last h3 span { + color: #b109aa; + font-family: "Pacifico", cursive; + margin-right: 4px; + font-size: 3rem; + text-transform: lowercase; + font-weight: 400; +} +.last .attribution { + position: absolute; + bottom: 20px; +} + /* highlight.js customizations -------------------------------*/ .hljs { diff --git a/framework/sass/theme-llc.scss b/framework/sass/theme-llc.scss index c73f0f2..59cbc58 100644 --- a/framework/sass/theme-llc.scss +++ b/framework/sass/theme-llc.scss @@ -315,6 +315,50 @@ table { } } + +/* Last slide +-------------------------------*/ +.last { + .title { + color: $white; + margin-top: 40px; + } + ul { + @include list-reset(); + font-size: 2.2rem; + } + .fa { + padding-right: 10px; + } + .title-bg { + background: rgba($llc-pink, 0.8); + border-radius: 5px; + padding: 0 10px 0 6px; + } + .instructor-img { + border-radius: 50%; + width: 100px; + float: left; + margin-right: 20px; + } + h3 { + margin-bottom: 20px; + span { + color: $llc-pink; + font-family: $cursive; + margin-right: 4px; + font-size: 3rem; + text-transform: lowercase; + font-weight: $normal; + } + } + .attribution { + position: absolute; + bottom: 20px; + } +} + + /* highlight.js customizations -------------------------------*/ .hljs { diff --git a/index.html b/index.html index 79a6c85..7474e43 100644 --- a/index.html +++ b/index.html @@ -39,8 +39,8 @@

with Instructor Name

instructor name
@@ -886,7 +886,7 @@

CSS Font Styles

Lunchtime! (Optional Exercise)

-

Picking fonts is hard. For this project, we'll be using web fonts from Google fonts. Prepare for the post-lunch exercise by picking 2-3 fonts from Google Fonts for the body text, header and cursive text. Here’s a the final project for reference.

+

Picking fonts is hard. For this project, we'll be using web fonts from Google fonts. Prepare for the post-lunch exercise by picking 2-3 fonts from Google Fonts for the body text, header and cursive text. Here’s a the final project for reference.

Need some help choosing?

Here’s some inspiration: http://hellohappy.org/beautiful-web-type/

@@ -1741,7 +1741,7 @@

Class Exercise #10 - Contact Form

You will need to register a domain name (www.mysite.com) and get hosting. Here are a couple domain & hosting options: - * [hover.com](hover.com/ladiescode) + * [hover.com](http://hover.com/ladiescode) * [dreamhost.com](http://www.dreamhost.com/r.cgi?205190) * [bluehost.com](http://www.bluehost.com/) @@ -1760,10 +1760,23 @@

Class Exercise #10 - Contact Form

-
+

Thank you!

-

Closing remarks

-

Slide deck presentation created with Lea Verou's CSS-based SlideShow System and reveal.js.

+ +

+ INTRO TO HTML & CSS
+ BUILDING A MULTI-PAGE WEBSITE +

+

with Instructor Name

+ + Your Name + + +

Slidedecks created with Lea Verou's CSS-based SlideShow System and reveal.js.

diff --git a/project/final/css/final.css b/project/final/css/final.css index a91bce4..6119b41 100644 --- a/project/final/css/final.css +++ b/project/final/css/final.css @@ -94,7 +94,7 @@ nav .current { /* HOME PAGE -----------------------------------------*/ .home { - background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), url(../images/background-6.jpg) no-repeat 50%; + background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)), url(../images/background-6.jpg) no-repeat 50%; background-size: cover; } .home header { @@ -123,13 +123,18 @@ nav .current { .home li { display: block; } -.home a:hover { +.home nav a { + display: inline-block; + font-size: 22px; + padding: 10px 15px; +} +.home nav a:hover { color: black; - background: rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.6); border-radius: 5px; } .fa-bars { - padding: 15px; + padding: 0 15px 15px 15px; cursor: pointer; font-size: 40px; color: #bf6d50; @@ -160,9 +165,9 @@ blockquote p { } .contact-form { width: 600px; - margin: 10px auto; + margin: 0 auto; background: white; - padding: 20px; + padding: 18px; border-radius: 4px; } .contact-form input, @@ -208,8 +213,21 @@ footer { background: #222; color: #ccc; clear: both; - padding: 5px; /* adds space inside the footer */ + padding: 0 5px; /* adds space inside the footer */ + line-height: 35px; +} +footer .copyright { + margin: 0; /* removes default margin from paragraph */ + float: left; +} +footer .social { + float: right; } -footer p { - margin: 0; /* removes default margin from paragraph */ +footer .social a { + display: inline-block; + padding: 0 6px; } +footer .social a:hover { + color: white; +} + diff --git a/project/final/index.html b/project/final/index.html index 114923c..f073795 100644 --- a/project/final/index.html +++ b/project/final/index.html @@ -24,9 +24,16 @@

Web Developer + City Girl

- \ No newline at end of file