Skip to content

Commit 551630d

Browse files
christinatruongchristinatruong
committed
Added last slide content, revised final project CSS.
1 parent eaf2f6c commit 551630d

File tree

5 files changed

+142
-18
lines changed

5 files changed

+142
-18
lines changed

‎framework/css/theme-llc.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,48 @@ table img {
287287
font-weight: 400;
288288
}
289289

290+
/* Last slide
291+
-------------------------------*/
292+
.last .title {
293+
color: white;
294+
margin-top: 40px;
295+
}
296+
.last ul {
297+
margin: 0;
298+
padding: 0;
299+
list-style-type: none;
300+
font-size: 2.2rem;
301+
}
302+
.last .fa {
303+
padding-right: 10px;
304+
}
305+
.last .title-bg {
306+
background: rgba(177, 9, 170, 0.8);
307+
border-radius: 5px;
308+
padding: 0 10px 0 6px;
309+
}
310+
.last .instructor-img {
311+
border-radius: 50%;
312+
width: 100px;
313+
float: left;
314+
margin-right: 20px;
315+
}
316+
.last h3 {
317+
margin-bottom: 20px;
318+
}
319+
.last h3 span {
320+
color: #b109aa;
321+
font-family: "Pacifico", cursive;
322+
margin-right: 4px;
323+
font-size: 3rem;
324+
text-transform: lowercase;
325+
font-weight: 400;
326+
}
327+
.last .attribution {
328+
position: absolute;
329+
bottom: 20px;
330+
}
331+
290332
/* highlight.js customizations
291333
-------------------------------*/
292334
.hljs {

‎framework/sass/theme-llc.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,50 @@ table {
315315
}
316316
}
317317

318+
319+
/* Last slide
320+
-------------------------------*/
321+
.last {
322+
.title {
323+
color: $white;
324+
margin-top: 40px;
325+
}
326+
ul {
327+
@include list-reset();
328+
font-size: 2.2rem;
329+
}
330+
.fa {
331+
padding-right: 10px;
332+
}
333+
.title-bg {
334+
background: rgba($llc-pink, 0.8);
335+
border-radius: 5px;
336+
padding: 0 10px 0 6px;
337+
}
338+
.instructor-img {
339+
border-radius: 50%;
340+
width: 100px;
341+
float: left;
342+
margin-right: 20px;
343+
}
344+
h3 {
345+
margin-bottom: 20px;
346+
span {
347+
color: $llc-pink;
348+
font-family: $cursive;
349+
margin-right: 4px;
350+
font-size: 3rem;
351+
text-transform: lowercase;
352+
font-weight: $normal;
353+
}
354+
}
355+
.attribution {
356+
position: absolute;
357+
bottom: 20px;
358+
}
359+
}
360+
361+
318362
/* highlight.js customizations
319363
-------------------------------*/
320364
.hljs {

‎index.html‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ <h2><span>with</span> Instructor Name</h2>
3939
<img class="instructor-img" src="framework/img/profile-generic.jpg" alt="instructor name">
4040
<ul>
4141
<li><i class="fa fa-envelope"></i><a href="mailto:">hello@email.com</li>
42-
<li><i class="fa fa-desktop"></i><a href="#" target="_blank">mywebsite.com</a></li>
43-
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/" target="_blank">@twitter_name</a></li>
42+
<li><i class="fa fa-desktop"></i><a href="#">mywebsite.com</a></li>
43+
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/">@twitter_name</a></li>
4444
</ul>
4545
</div>
4646
<div class="presenter-notes">
@@ -886,7 +886,7 @@ <h2>CSS Font Styles</h2>
886886
<section class="slide">
887887
<h2>Lunchtime! (Optional Exercise)</h2>
888888

889-
<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>
889+
<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>
890890

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

17421742
You will need to register a domain name (www.mysite.com) and get hosting. Here are a couple domain & hosting options:
17431743

1744-
* [hover.com](hover.com/ladiescode)
1744+
* [hover.com](http://hover.com/ladiescode)
17451745
* [dreamhost.com](http://www.dreamhost.com/r.cgi?205190)
17461746
* [bluehost.com](http://www.bluehost.com/)
17471747

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

17621762
<!-- Last slide -->
1763-
<section class="slide">
1763+
<section class="slide last">
17641764
<h2>Thank you!</h2>
1765-
<p>Closing remarks</p>
1766-
<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>
1765+
1766+
<h2 class="title">
1767+
<span class="title-bg">INTRO TO HTML & CSS</span><br>
1768+
<span class="title-bg">BUILDING A MULTI-PAGE WEBSITE</span>
1769+
</h2>
1770+
<h3><span>with</span> Instructor Name</h3>
1771+
1772+
<img class="instructor-img" src="framework/img/" alt="Your Name">
1773+
<ul>
1774+
<li><i class="fa fa-envelope"></i><a href="mailto:">email@mail.com</li>
1775+
<li><i class="fa fa-desktop"></i><a href="http:">mywebsite.com</a></li>
1776+
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/">@twitter_name</a></li>
1777+
</ul>
1778+
1779+
<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>
17671780
</section>
17681781

17691782
</main><!-- cls main section -->

‎project/final/css/final.css‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ nav .current {
9494
/* HOME PAGE
9595
-----------------------------------------*/
9696
.home {
97-
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), url(../images/background-6.jpg) no-repeat 50%;
97+
background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)), url(../images/background-6.jpg) no-repeat 50%;
9898
background-size: cover;
9999
}
100100
.home header {
@@ -123,13 +123,18 @@ nav .current {
123123
.home li {
124124
display: block;
125125
}
126-
.home a:hover {
126+
.home nav a {
127+
display: inline-block;
128+
font-size: 22px;
129+
padding: 10px 15px;
130+
}
131+
.home nav a:hover {
127132
color: black;
128-
background: rgba(0, 0, 0, 0.1);
133+
background: rgba(255, 255, 255, 0.6);
129134
border-radius: 5px;
130135
}
131136
.fa-bars {
132-
padding: 15px;
137+
padding: 0 15px 15px 15px;
133138
cursor: pointer;
134139
font-size: 40px;
135140
color: #bf6d50;
@@ -160,9 +165,9 @@ blockquote p {
160165
}
161166
.contact-form {
162167
width: 600px;
163-
margin: 10px auto;
168+
margin: 0 auto;
164169
background: white;
165-
padding: 20px;
170+
padding: 18px;
166171
border-radius: 4px;
167172
}
168173
.contact-form input,
@@ -208,8 +213,21 @@ footer {
208213
background: #222;
209214
color: #ccc;
210215
clear: both;
211-
padding: 5px; /* adds space inside the footer */
216+
padding: 0 5px; /* adds space inside the footer */
217+
line-height: 35px;
218+
}
219+
footer .copyright {
220+
margin: 0; /* removes default margin from paragraph */
221+
float: left;
222+
}
223+
footer .social {
224+
float: right;
212225
}
213-
footer p {
214-
margin: 0; /* removes default margin from paragraph */
226+
footer .social a {
227+
display: inline-block;
228+
padding: 0 6px;
215229
}
230+
footer .social a:hover {
231+
color: white;
232+
}
233+

‎project/final/index.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,16 @@ <h2>Web Developer + City Girl</h2>
2424
</nav>
2525
</header>
2626
</div><!-- close .page-wrap -->
27-
2827
<footer>
29-
<p>&#169; 2014 <span class="cursive">by</span> <span class="highlight">jane</span>smith</p>
28+
<p class="copyright">&#169; 2014 <span class="cursive">by</span><span class="highlight">jane</span>smith</p>
29+
30+
<div class="social">
31+
<a href="#" title="Twitter"><i class="fa fa-twitter"></i></a>
32+
<a href="#" title="LinkedIn"><i class="fa fa-linkedin"></i></a>
33+
<a href="#" title="Instagram"><i class="fa fa-instagram"></i></a>
34+
<a href="#" title="Facebook"><i class="fa fa-facebook"></i></a>
35+
<a href="#" title="Google+"><i class="fa fa-google-plus"></i></a>
36+
</div>
3037
</footer>
3138
</body>
3239
</html>

0 commit comments

Comments
 (0)