Skip to content

Commit 504062f

Browse files
cassidoocassidoo
committed
Finished entire segregation section
1 parent 377cfba commit 504062f

File tree

4 files changed

+128
-55
lines changed

4 files changed

+128
-55
lines changed

‎DIVs/aboutpage.html

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,36 @@
22
<html>
33
<head>
44
<title> About Me </title>
5-
5+
66
<style>
77

88
</style>
9-
9+
1010
</head>
1111
<body>
12-
<div class="header"></div>
13-
<div class="menu"></div>
14-
<div class="content"></div>
12+
<div class="header">
13+
This is a header
14+
</div>
15+
<div class="menu">
16+
<a href = "homepage.html">Home</a>
17+
<br>
18+
<a href = "aboutpage.html">About</a>
19+
<br>
20+
<a href = "contactpage.html">Contact</a>
21+
<br>
22+
</div>
23+
<div class="content">
24+
<h1>About me</h1>
25+
<p style="font-style: italic;">A tragedy</p>
26+
<p>
27+
Now, this is the story all about how my life got flipped-turned upside down and I'd like to take a minute, just sit right there I'll tell you how I became the prince of a town called Bel Air. <br>
28+
In West Philadelphia, born and raised on the playground is where I spent most of my days chillin' out, maxin', relaxin' all cool and all shootin' some B-ball outside of the school. <br>
29+
When a couple of guys who were up to no good started makin' trouble in my neighborhood I got in one little fight and my mom got scaredand said, "You're movin' with your aunty and uncle in Bel Air." <br>
30+
I begged and pleaded with her the other day but she packed my suitcase and sent me on my way she gave me a kiss and then she gave me my ticket I put my Walkman on and said, "I might as well kick it!" <br>
31+
32+
33+
</p>
34+
</div>
1535
<div class="footer"></div>
1636
</body>
1737
</html>

‎DIVs/contactpage.html

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,19 @@
99

1010
</head>
1111
<body>
12-
<div class="header"></div>
13-
<div class="menu"></div>
14-
<div class="content"></div>
12+
<div class="header">This is a header</div>
13+
<div class="menu">
14+
<a href = "homepage.html">Home</a><br>
15+
<a href = "aboutpage.html">About</a><br>
16+
<a href = "contactpage.html">Contact</a><br>
17+
</div>
18+
<div class="content">
19+
<h1>Here's how you can contact me!</h1>
20+
<ul>
21+
<li>Phone: 555-555-5555</li>
22+
<li>Email: hottiepants314@cutie.com</li>
23+
</ul>
24+
</div>
1525
<div class="footer"></div>
1626
</body>
1727
</html>

‎DIVs/homepage.html

Lines changed: 4 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,15 @@
33
<head>
44
<title> My Website </title>
55
<style>
6-
html
7-
{
8-
height: 100%;
9-
}
10-
body
11-
{
12-
height: 100%;
13-
margin: 0px;
14-
}
15-
.header
16-
{
17-
background-color: #99B5DD;
18-
position: fixed;
19-
top: 0px;
20-
width: 100%;
21-
height: 60px;
22-
padding: 0px 10px;
23-
}
24-
.menu
25-
{
26-
background-color: #DE90B1;
27-
height: 100%;
28-
width: 15%;
29-
position: fixed;
30-
left: 0px;
31-
top: 60px;
32-
padding: 10px 0px 0px;
33-
}
34-
.content
35-
{
36-
height: 200px;
37-
position: absolute;
38-
top: 60px;
39-
left: 15%;
40-
padding: 10px;
41-
}
42-
.footer
43-
{
44-
background-color: #0F215D;
45-
position: fixed;
46-
bottom: 0px;
47-
height: 60px;
48-
width: 100%;
49-
}
6+
507
</style>
518
</head>
529
<body>
5310
<div class="header">This is a header</div>
5411
<div class="menu">
55-
Home <br>
56-
About <br>
57-
Contact <br>
12+
<a href = "homepage.html">Home</a><br>
13+
<a href = "aboutpage.html">About</a><br>
14+
<a href = "contactpage.html">Contact</a><br>
5815
</div>
5916
<div class="content">
6017
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

‎README.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -944,6 +944,92 @@ The same goes for `padding`, you can also do `padding: 5px 10px 15px 0px;`, etc.
944944
width: 100%;
945945
}
946946

947+
Now, with all that you've learned so far, you should probably make this a really great, functional website. I'll teach you just one more thing, and then I'll set you free like a bird or something.
948+
949+
######Z-Index
950+
951+
The property `z-index` isn't one that you'll run into super often, but it's something that will help you in the long run.
952+
953+
Now, if you think of your screen as a stack of layers, like a stack of paper on the screen. Layer 1 is the lowest layer, and the higher the number, the higher the layer.
954+
955+
The numbers in `z-index` are the same. If an element has `z-index: 0;`, then it is a bottom layer. If you have an element with a `z-index: 5;`, it's going to be on the 5th layer.
956+
957+
When you create a page and you don't add `z-index` to anything, the layers are just in order. So in our example, the `.header` was created first, so it's on the lowest layer, and the `.footer` was created last so it is on the top layer.
958+
959+
We don't want that. What if your `.content` had a ton of information and you had to scroll the page? The content would overlap on top of the header (because we just HAD to make our header `fixed`).
960+
961+
So, let's add some `z-index` magic to our page! A couple things to note first:
962+
963+
* `z-index` only works when you have already set the `position` of an element.
964+
* You can assign any number you want to `z-index`, as long as it is an integer (no decimals), and as long as the highest number is the highest level, and the lowest number is the lowest level.
965+
966+
Okay, I'm going to add some `z-index` properties to the page, and I'm also going to add some text changes that you have seen before (`text-align`, `font-family`) and one that you haven't seen before (`font-size`... you get one guess to figure out what this does):
967+
968+
html
969+
{
970+
height: 100%;
971+
}
972+
body
973+
{
974+
font-family: Arial;
975+
height: 100%;
976+
margin: 0px;
977+
}
978+
.header
979+
{
980+
background-color: #99B5DD;
981+
position: fixed;
982+
top: 0px;
983+
width: 100%;
984+
height: 60px;
985+
padding: 0px 10px;
986+
font-size: 50px;
987+
z-index: 10;
988+
}
989+
.menu
990+
{
991+
background-color: #DE90B1;
992+
height: 100%;
993+
width: 15%;
994+
position: fixed;
995+
left: 0px;
996+
top: 60px;
997+
padding: 10px 0px 0px;
998+
text-align: center;
999+
z-index: 5;
1000+
}
1001+
.content
1002+
{
1003+
height: 200px;
1004+
position: absolute;
1005+
top: 60px;
1006+
left: 15%;
1007+
padding: 10px;
1008+
z-index: 0;
1009+
}
1010+
.footer
1011+
{
1012+
background-color: #0F215D;
1013+
position: fixed;
1014+
bottom: 0px;
1015+
height: 60px;
1016+
width: 100%;
1017+
z-index: 10;
1018+
}
1019+
1020+
And there you have it! Look at your website in your browser and feel proud of yourself. Eat some cake. Do a dance.
1021+
1022+
Now you can see how flexible `<div>` tags really are. You can style them pretty much any different way you want without breaking a sweat.
1023+
1024+
So, you have this delightful homepage set up now, try adding some content and play with the CSS a bit to make it your own! Add colors, change sizes, the works.
1025+
When you click on the links to the other pages, About and Contact, you'll notice that they have no style right now (unlike you). Change that! Try making your own layout for each of those pages. If you're really digging what we've made here, that's cool too. You can copy over the styles to each page.
1026+
1027+
But hey, that's a LOT of reusing code. Plus what if someone is trying to read your code, and they don't get what you're doing (because they aren't as smart as you are)? Is there a better way?
1028+
1029+
Duh.
1030+
1031+
###The `<link>` Tag, Comments, and other Developer Joys
1032+
9471033
Psh like I'm going to write this before I eat another cookie. Break time.
9481034

9491035
## Wut

0 commit comments

Comments
 (0)