Skip to content
This repository was archived by the owner on Jun 7, 2021. It is now read-only.

Commit c50d51c

Browse files
author
Cristiana Yambo
committed
Initial Commit
0 parents  commit c50d51c

14 files changed

+173
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
learn-html-css
2+
==============
3+
4+
Women Who Code NYC HTML/CSS Workshop
5+
6+
Resources
7+
---------
8+
9+
* [HTML5 Doctor Element Index](http://html5doctor.com/element-index/): A list of all HTML elements and their usage.
10+
* [HTML Color Names](http://www.w3schools.com/html/html_colornames.asp)
11+
* [CSS Zen Garden](http://csszengarden.com)

‎finished-example.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
body {
2+
font-family: sans-serif;
3+
margin: 0;
4+
color: #333;
5+
}
6+
7+
h1,
8+
h2 {
9+
font-family: Bitter, sans-serif;
10+
}
11+
12+
h1 {
13+
color: white;
14+
font-size: 48px;
15+
margin-bottom: 0;
16+
}
17+
18+
p, ul, ol {
19+
line-height: 1.5;
20+
}
21+
22+
a {
23+
color: #38A88F;
24+
}
25+
26+
header {
27+
text-align: center;
28+
background: pink;
29+
background: url(images/background.jpg);
30+
background-size: cover;
31+
background-attachment: fixed;
32+
}
33+
34+
header img {
35+
border-radius: 50%;
36+
border: 3px solid #fff;
37+
padding: 10px;
38+
}
39+
40+
.padded {
41+
padding: 50px 100px;
42+
}
43+
44+
#about {
45+
background: #FFCA59;
46+
}
47+
48+
ul.websites {
49+
padding: 0;
50+
margin-bottom: 1em;
51+
}
52+
53+
ul.websites li {
54+
list-style: none;
55+
display: inline-block;
56+
}
57+
58+
.websites a {
59+
background: #38A88F;
60+
padding: 10px 20px;
61+
color: #fff;
62+
text-decoration: none;
63+
border-radius: 5px;
64+
font-size: 24px;
65+
display: block;
66+
}
67+
68+
.websites a:hover {
69+
background: #666;
70+
}
71+
72+
.links h2 {
73+
color: #FF572B;
74+
}
75+
76+
.contact {
77+
background: #666;
78+
text-align: center;
79+
background: url(images/dark_embroidery.png);
80+
}
81+
82+
.contact h2 {
83+
color: white;
84+
}
85+
86+
.contact img {
87+
border-radius: 50%;
88+
width: 100px;
89+
margin: 10px;
90+
}
91+
92+
.contact img:hover {
93+
opacity: .5;
94+
}

‎finished-example.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Your Name</title>
5+
<link href="finished-example.css" rel="stylesheet" type="text/css">
6+
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
7+
</head>
8+
<body>
9+
<header class="header padded">
10+
<img src="images/female.jpg">
11+
<h1>Your Name</h1>
12+
<h2>This is my amazing website!</h2>
13+
</header>
14+
15+
<section class="padded" id="about">
16+
17+
<h2>About Me</h2>
18+
19+
<p>Today I am learning to code! Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.</p>
20+
21+
</section>
22+
23+
<section class="links padded">
24+
25+
26+
<h2>Websites I visit a lot:</h2>
27+
28+
<ul class="websites">
29+
<li><a href="http://www.facebook.com">Facebook</a></li>
30+
<li><a href="http://www.twitter.com">Twitter</a></li>
31+
</ul>
32+
33+
<h2>My favorite hobbies are:</h2>
34+
<ol>
35+
<li><strong>Karaoke</strong>: Belting out songs in dive bars is my ideal Friday night.</li>
36+
<li><strong>Design</strong>: Because everything should be pretty!</li>
37+
<li><strong>Being Canadian</strong>: I don't really have a choice in that one.</li>
38+
</ol>
39+
40+
</section>
41+
42+
<section class="contact padded">
43+
44+
<h2>Contact Me</h2>
45+
46+
<a href="mailto:christy@nyiri.ca"><img src="images/email.png"></a>
47+
<a href="https://twitter.com/nyiriland"><img src="images/twitter.png"></a>
48+
<a href="#"><img src="images/facebook.png"></a>
49+
<a href="#"><img src="images/linkedin.png"></a>
50+
51+
</section>
52+
53+
</body>
54+
</html>

‎finished-html-section.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
</head>
6+
<body>
7+
<img title="female" src="images/female.jpg">
8+
<h1>Cristiana Yambo</h1>
9+
<h2>My Tagline</h2>
10+
<p>
11+
Description about me, this is a paragraph with some text
12+
</p>
13+
</body>
14+
</html>

‎images/background-small.jpg

15.6 KB
Loading

‎images/background.jpg

65.8 KB
Loading

‎images/dark_embroidery.png

286 Bytes
Loading

‎images/email.png

2.94 KB
Loading

‎images/facebook.png

1.21 KB
Loading

‎images/female.jpg

5.24 KB
Loading

‎images/linkedin.png

1.55 KB
Loading

‎images/twitter.png

2.22 KB
Loading

‎index.html

Whitespace-only changes.

‎styles.css

Whitespace-only changes.

0 commit comments

Comments
 (0)