Skip to content

Commit

Permalink
Added last slide content, revised final project CSS.
Browse files Browse the repository at this point in the history
  • Loading branch information
@christinatruong
christinatruong committed Oct 14, 2014
1 parent eaf2f6c commit 551630d
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 18 deletions.
42 changes: 42 additions & 0 deletions framework/css/theme-llc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
44 changes: 44 additions & 0 deletions framework/sass/theme-llc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
27 changes: 20 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ <h2><span>with</span> Instructor Name</h2>
<img class="instructor-img" src="framework/img/profile-generic.jpg" alt="instructor name">
<ul>
<li><i class="fa fa-envelope"></i><a href="mailto:">hello@email.com</li>
<li><i class="fa fa-desktop"></i><a href="#" target="_blank">mywebsite.com</a></li>
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/" target="_blank">@twitter_name</a></li>
<li><i class="fa fa-desktop"></i><a href="#">mywebsite.com</a></li>
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/">@twitter_name</a></li>
</ul>
</div>
<div class="presenter-notes">
Expand Down Expand Up @@ -886,7 +886,7 @@ <h2>CSS Font Styles</h2>
<section class="slide">
<h2>Lunchtime! (Optional Exercise)</h2>

<p>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 <a href="https://www.google.com/fonts">Google Fonts</a> for the body text, header and cursive text. Here’s a <a href="/project/final/about.html">the final project</a> for reference.</p>
<p>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 <a href="https://www.google.com/fonts">Google Fonts</a> for the body text, header and cursive text. Here’s a <a href="project/final/about.html">the final project</a> for reference.</p>

<p><strong>Need some help choosing?</strong><p>
<p>Here’s some inspiration: <a href="http://hellohappy.org/beautiful-web-type/">http://hellohappy.org/beautiful-web-type/</a></p>
Expand Down Expand Up @@ -1741,7 +1741,7 @@ <h2>Class Exercise #10 - Contact Form</h2>

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/)

Expand All @@ -1760,10 +1760,23 @@ <h2>Class Exercise #10 - Contact Form</h2>
</section>

<!-- Last slide -->
<section class="slide">
<section class="slide last">
<h2>Thank you!</h2>
<p>Closing remarks</p>
<p class="attribution">Slide deck presentation created with <a href="https://github.com/LeaVerou/csss">Lea Verou's CSS-based SlideShow System</a> and <a href="http://lab.hakim.se/reveal-js/">reveal.js</a>.</p>

<h2 class="title">
<span class="title-bg">INTRO TO HTML & CSS</span><br>
<span class="title-bg">BUILDING A MULTI-PAGE WEBSITE</span>
</h2>
<h3><span>with</span> Instructor Name</h3>

<img class="instructor-img" src="framework/img/" alt="Your Name">
<ul>
<li><i class="fa fa-envelope"></i><a href="mailto:">email@mail.com</li>
<li><i class="fa fa-desktop"></i><a href="http:">mywebsite.com</a></li>
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/">@twitter_name</a></li>
</ul>

<p class="attribution">Slidedecks created with <a href="https://github.com/LeaVerou/csss">Lea Verou's CSS-based SlideShow System</a> and <a href="http://lab.hakim.se/reveal-js/">reveal.js</a>.</p>
</section>

</main><!-- cls main section -->
Expand Down
36 changes: 27 additions & 9 deletions project/final/css/final.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}

11 changes: 9 additions & 2 deletions project/final/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,16 @@ <h2>Web Developer + City Girl</h2>
</nav>
</header>
</div><!-- close .page-wrap -->

<footer>
<p>&#169; 2014 <span class="cursive">by</span> <span class="highlight">jane</span>smith</p>
<p class="copyright">&#169; 2014 <span class="cursive">by</span><span class="highlight">jane</span>smith</p>

<div class="social">
<a href="#" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="#" title="LinkedIn"><i class="fa fa-linkedin"></i></a>
<a href="#" title="Instagram"><i class="fa fa-instagram"></i></a>
<a href="#" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="Google+"><i class="fa fa-google-plus"></i></a>
</div>
</footer>
</body>
</html>

0 comments on commit 551630d

Please sign in to comment.