Skip to content

Commit e26cbe3

Browse files
christinatruongchristinatruong
committed
Added homepage drop down exercise. Removed old files.
1 parent 89efce5 commit e26cbe3

12 files changed

+163
-806
lines changed

‎framework/extras-homepage.html

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<title>Ladies Learning Code: Intro to HTML & CSS</title>
7+
<!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
8+
<link rel="stylesheet" href="css/slideshow.css">
9+
10+
<!-- Theme-specific styles -->
11+
<link href='http://fonts.googleapis.com/css?family=Quicksand|Pacifico|Open+Sans:400,300' rel='stylesheet' type='text/css'>
12+
<link rel="stylesheet" href="css/font-awesome.css">
13+
<link rel="stylesheet" href="css/highlightjs-themes/monokai.css">
14+
<link rel="stylesheet" href="css/theme-llc.css">
15+
<link rel="shortcut icon" href="img/favicon.ico">
16+
17+
<!-- Workshop-specific styles -->
18+
<link rel="stylesheet" href="css/workshop.css">
19+
</head>
20+
21+
<body>
22+
23+
<base target="_blank">
24+
<main>
25+
<section class="slide" data-markdown>
26+
##Home page styles
27+
28+
Before creating the home page drop down menu, we'll need to talk about icon fonts and pseudo class selectors first.
29+
30+
###Icon fonts
31+
Icon fonts are an easy way to add imagery to your web page but still have the flexibility of styling properties like size and colour using CSS since they *are* fonts!
32+
33+
There's many to choose from but this example uses Font Awesome:
34+
[http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/)
35+
36+
Under **Getting Started**, there are different options for adding the font files. If using the CDN, remember to add the "http" to make it work when you run your page "locally" (on your computer).
37+
38+
Simple to use, pick an icon you'd like to use and copy the supplied markup and class and that's it!
39+
40+
###Pseudo Class
41+
A CSS pseudo-class is a selector that specifies a specific *state* of the selected element. This lesson uses `:hover` to apply a style only when the user hovers over the element specified by the selector.
42+
43+
More about pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
44+
</section>
45+
<section class="slide" data-markdown>
46+
##Home Page Drop down menu
47+
48+
1. Add [Font Awesome's CSS file](http://fortawesome.github.io/Font-Awesome/get-started/) to the `head` of your document and the markup for the [three-bar icon](http://fortawesome.github.io/Font-Awesome/icon/bars/) to the navigation.
49+
```
50+
&lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
51+
```
52+
```xml
53+
&lt;nav&gt;
54+
&lt;i class=&quot;fa fa-bars&quot; title=&quot;menu&quot;&gt;&lt;/i&gt;
55+
&lt;ul&gt;
56+
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
57+
&lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
58+
&lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
59+
&lt;/ul&gt;
60+
&lt;/nav&gt;
61+
```
62+
It should look like this:
63+
![](img/workshop/menu-with-icon.png)
64+
</section>
65+
<section class="slide" data-markdown>
66+
##Home Page Drop down menu
67+
68+
The next step is to override the horizontal navigation styles that are shared among the other pages and make it specific to the home page. There is already a class of `home` in the body so we can use that to make our selector more specific.
69+
70+
1. Set the list items to display block so they line up on top of each other.
71+
72+
```
73+
.home nav li {
74+
display: block;
75+
}
76+
```
77+
78+
1. Right align the icon and the list items. This can be added to the `nav` selector so icon and list items will inherit the styles. Change the font size to make it bigger too. The icon will also need a little bit of padding to make the hover target a little bigger and for alignment.
79+
```
80+
.home nav {
81+
text-align: right;
82+
font-size: 25px;
83+
}
84+
.fa-bars {
85+
padding: 15px;
86+
}
87+
```
88+
89+
1. Now hide the navigation list and show it when you hover over the icon. Hide the list first.
90+
```
91+
.home nav ul {
92+
display: none;
93+
}
94+
```
95+
96+
1. With CSS, you can apply a hover on a parent element and use the descendant selector to change the style of its child elements!
97+
98+
```
99+
.home nav:hover ul {
100+
display: block;
101+
}
102+
.home a:hover {
103+
color: black;
104+
}
105+
```
106+
107+
Your home page should now look similar to the [homepage-dropdown.html](../project/examples/homepage-dropdown.html) example.
108+
</section>
109+
</main><!-- cls main section -->
110+
111+
<footer>
112+
<p class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="img/cc-by-nc.svg" /></a> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
113+
<p class="instructions">Use the left <i class="fa fa-arrow-left"></i> and right <i class="fa fa-arrow-right"></i> arrow keys to navigate</p>
114+
</footer>
115+
116+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
117+
<script src="scripts/slideshow.js"></script>
118+
119+
<!-- Uncomment the plugins you need -->
120+
<script src="scripts/plugins/css-edit.js"></script>
121+
<script src="scripts/plugins/css-snippets.js"></script>
122+
<script src="scripts/plugins/css-Ctrls.js"></script>
123+
<!-- <script src="plugins/code-highlight.js"></script>-->
124+
125+
<script src="scripts/plugins/markdown/marked.js"></script>
126+
<script src="scripts/plugins/markdown/markdown.js"></script>
127+
<script src="scripts/plugins/highlight/highlight.js"></script>
128+
<script>hljs.initHighlightingOnLoad();</script>
129+
130+
<!-- Prettify -->
131+
<script src="scripts/plugins/prettify.js"></script>
132+
<script src="scripts/plugins/lang-css.js"></script>
133+
<script src="scripts/plugins/prism.js"></script>
134+
135+
<script>
136+
var slideshow = new SlideShow();
137+
138+
// Grabs all the .snippet elements
139+
var snippets = document.querySelectorAll('.snippet');
140+
for(var i=0; i<snippets.length; i++) {
141+
new CSSSnippet(snippets[i]);
142+
}
143+
144+
// Opens all links in a new window
145+
var links = document.getElementsByTagName("a");
146+
for (var i = 0; i < links.length; i++) {
147+
var link = links[i];
148+
link.addEventListener(function() {
149+
window.open(this.href);
150+
});
151+
}
152+
153+
jQuery(document).ready(function(){
154+
jQuery(".snippet").before("<span class=\"edit\">edit me</span>");
155+
});
156+
</script>
157+
</body>
158+
</html>

‎index.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1811,9 +1811,11 @@ <h2>Class Exercise #9 - Contact Form</h2>
18111811
* [Sticky Footer](framework/extras-sticky-footer.html)
18121812
* [Contact page](framework/extras-form-styles.html) - adding background images & form styling
18131813
* [Forms, pt 2](framework/extras-form-submission.html) - how to submit a form
1814-
* [Home page: additional styles]() - this includes using icon fonts.
1814+
* [Home page: additional styles](framework/extras-homepage.html) - includes using icon fonts and creating a drop down menu.
18151815
* [Add a favicon](http://blog.teamtreehouse.com/how-to-make-a-favicon)
1816-
* Use the [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) to add your social icons to the footer. See **final** folder files for examples.
1816+
* Use the [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) to add your social icons to the footer.
1817+
1818+
Take a look at the HTML & CSS files in the **final** folder and see what other tricks you can add to your project.
18171819
</div>
18181820
<section class="slide" data-markdown>
18191821
##Online resources

‎project/examples/css/exercise10.css

Lines changed: 0 additions & 156 deletions
This file was deleted.

0 commit comments

Comments
 (0)