Skip to content

Commit f91ec80

Browse files
gitdagraygitdagray
committed
Added lesson 13
1 parent add6d2d commit f91ec80

File tree

5 files changed

+245
-0
lines changed

5 files changed

+245
-0
lines changed

‎13_lesson/css/style.css

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Lobster&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
font-family: "Roboto", sans-serif;
11+
font-size: 1.5rem;
12+
min-height: 200vh;
13+
}
14+
15+
.outer-container {
16+
border: 3px dashed #000;
17+
width: 75vw;
18+
height: 85vh;
19+
margin: 40px auto;
20+
position: relative;
21+
}
22+
23+
.inner-container {
24+
border: 2px solid #00f;
25+
width: 40vw;
26+
height: 50vh;
27+
margin: 200px auto;
28+
}
29+
30+
.box {
31+
width: 150px;
32+
height: 150px;
33+
color: #fff;
34+
padding: 1rem;
35+
}
36+
37+
.absolute {
38+
background-color: #00f;
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
z-index: 1;
43+
}
44+
45+
.relative {
46+
background-color: #f00;
47+
position: relative;
48+
top: 300px;
49+
left: 100px;
50+
}
51+
52+
.fixed {
53+
background-color: green;
54+
position: fixed;
55+
top: 100px;
56+
}
57+
58+
.sticky {
59+
background-color: #000;
60+
position: sticky;
61+
top: 0;
62+
}
63+
64+
/* Remember, how to make things disappear! */
65+
66+
/*//////////////////////////*/
67+
68+
html { scroll-behavior: smooth; }
69+
70+
section {
71+
height: 100vh;
72+
}
73+
74+
.blue { background-color: #00f;}
75+
.red { background-color: #f00;}
76+
.green { background-color: green;}
77+
78+
header, footer {
79+
color: #fff;
80+
text-align: center;
81+
height: 100px;
82+
}
83+
84+
header {
85+
position: sticky;
86+
top: 0;
87+
font-size: 5rem;
88+
}
89+
90+
footer {
91+
background-color: #000;
92+
position: sticky;
93+
bottom: 0;
94+
font-size: 3rem;
95+
}
96+
97+
a:visited {
98+
color: #fff;
99+
}
100+
101+
.social {
102+
background-color: royalblue;
103+
color: #fff;
104+
font-size: inherit;
105+
padding: 1rem;
106+
position: fixed;
107+
top: 30%;
108+
left: 0;
109+
z-index: 1;
110+
}

‎13_lesson/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>CSS Position</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<!-- <div class="outer-container">
14+
<div class="inner-container">
15+
<div class="box absolute">
16+
<p>Absolute</p>
17+
</div>
18+
<div class="box relative">
19+
<p>Relative</p>
20+
</div>
21+
<div class="box fixed">
22+
<p>Fixed</p>
23+
</div>
24+
<div class="box sticky">
25+
<p>Sticky</p>
26+
</div>
27+
</div>
28+
</div> -->
29+
<button class="social">🚀</button>
30+
<section id="one">
31+
<header class="blue">Header One</header>
32+
<h2>One</h2>
33+
</section>
34+
<section id="two">
35+
<header class="red">Header Two</header>
36+
<h2>Two</h2>
37+
</section>
38+
<section id="three">
39+
<header class="green">Header Three</header>
40+
<h2>Three</h2>
41+
</section>
42+
<footer>
43+
<a href="#one">One</a> |
44+
<a href="#two">Two</a> |
45+
<a href="#three">Three</a>
46+
</footer>
47+
</body>
48+
49+
</html>

‎13_lesson_starter/css/style.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Lobster&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
font-family: "Roboto", sans-serif;
11+
font-size: 1.5rem;
12+
min-height: 200vh;
13+
}
14+
15+
.outer-container {
16+
border: 3px dashed #000;
17+
width: 75vw;
18+
height: 85vh;
19+
margin: 40px auto;
20+
}
21+
22+
.inner-container {
23+
border: 2px solid #00f;
24+
width: 40vw;
25+
height: 50vh;
26+
margin: 200px auto;
27+
}
28+
29+
.box {
30+
width: 150px;
31+
height: 150px;
32+
color: #fff;
33+
padding: 1rem;
34+
}

‎13_lesson_starter/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>CSS Position</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<div class="outer-container">
14+
<div class="inner-container">
15+
<div class="box absolute">
16+
<p>Absolute</p>
17+
</div>
18+
<div class="box relative">
19+
<p>Relative</p>
20+
</div>
21+
<div class="box fixed">
22+
<p>Fixed</p>
23+
</div>
24+
<div class="box sticky">
25+
<p>Sticky</p>
26+
</div>
27+
</div>
28+
</div>
29+
<!-- <button class="social">🚀</button>
30+
<section id="one">
31+
<header class="blue">Header One</header>
32+
<h2>One</h2>
33+
</section>
34+
<section id="two">
35+
<header class="red">Header Two</header>
36+
<h2>Two</h2>
37+
</section>
38+
<section id="three">
39+
<header class="green">Header Three</header>
40+
<h2>Three</h2>
41+
</section>
42+
<footer>
43+
<a href="#one">One</a> |
44+
<a href="#two">Two</a> |
45+
<a href="#three">Three</a>
46+
</footer> -->
47+
</body>
48+
49+
</html>

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
- 🔗 [MDN: Floats](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats)
6262
- 🔗 [MDN: Basic Concepts of MultiCol](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol)
6363
- 🔗 [MDN: Margin Collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
64+
- 🔗 [MDN: Position](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)
6465

6566
### 📚 Typography Resources:
6667
- 🔗 [MDN: Fundamental Text and Font Styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
@@ -107,5 +108,7 @@
107108
- 🔗 [Chapter 10 Starter Code](https://github.com/gitdagray/css_course/tree/main/10_lesson_starter)
108109
- 🔗 [Chapter 11 Starter Code](https://github.com/gitdagray/css_course/tree/main/11_lesson_starter)
109110
- 🔗 [Chapter 12 Starter Code](https://github.com/gitdagray/css_course/tree/main/12_lesson_starter)
111+
- 🔗 [Chapter 13 Starter Code](https://github.com/gitdagray/css_course/tree/main/13_lesson_starter)
112+
- 🔗 [Chapter 13 Completed Code](https://github.com/gitdagray/css_course/tree/main/13_lesson)
110113

111114

0 commit comments

Comments
 (0)