Skip to content

Commit da34825

Browse files
jacobtranjacobtran
committed
add day 6 files
1 parent 6aec488 commit da34825

File tree

10 files changed

+431
-0
lines changed

10 files changed

+431
-0
lines changed

‎day_6/0_boilerplate/0_style.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!-- styling HTML -->
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Styling</title>
7+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css"> -->
8+
<link rel="stylesheet" href="css/0_style.css">
9+
</head>
10+
<body>
11+
<h1>Rec<span>i</span>pe</h1>
12+
13+
<div class="highlight">
14+
Th<span class="fancy highlight">i</span class="highlight">s <span class="">i</span class="highlight">s my recipe card!
15+
<div id="greeting">Hello!</div>
16+
</div>
17+
18+
<p>Lorem <span class="highlight">i</span>psum dolor s<span class="highlight fancy">i</span>t 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.</p>
19+
</body>
20+
</html>

‎day_6/0_boilerplate/css/0_style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* css rule */
2+
body {
3+
background-color: lightblue;
4+
margin: 0px;
5+
}
6+
7+
h1 {
8+
font-family: sans-serif;
9+
color: teal;
10+
background-color: firebrick;
11+
margin: 10px;
12+
padding: 20px;
13+
border: 20px gold dotted;
14+
border-radius: 20px;
15+
}
16+
17+
div {
18+
background-color: orange;
19+
width: 50%;
20+
width: 100px;
21+
}
22+
23+
/* id we use # */
24+
#greeting {
25+
background-color: purple;
26+
}
27+
28+
div#greeting {
29+
background-color: purple;
30+
}
31+
32+
/* class we use . */
33+
span.fancy {
34+
background-color: red;
35+
font-style: italic;
36+
font-family: cursive;
37+
}
38+
39+
div.highlight {
40+
background-color: yellow;
41+
font-weight: bold;
42+
}
43+
44+
span.highlight {
45+
background-color: orange;
46+
font-weight: bold;
47+
}
48+
49+
50+
51+
52+
53+
54+
55+
56+
57+
/* */

‎day_6/1_block_inline.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Block vs Inline</title>
6+
<style>
7+
h2 {
8+
border: thin red solid;
9+
display: block;
10+
height: 500px;
11+
width: 400px;
12+
}
13+
div {
14+
border: thin green solid;
15+
display: block;
16+
}
17+
p {
18+
border: thin blue solid;
19+
display: block;
20+
}
21+
span {
22+
border: thin purple solid;
23+
height: 500px;
24+
width: 400px;
25+
display: inline-block;
26+
}
27+
jacob {
28+
border: thin yellow solid;
29+
display: inline;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<jacob>Andy</jacob>
35+
<jacob>Andy</jacob>
36+
<jacob>Andy</jacob>
37+
<jacob>Andy</jacob>
38+
39+
<h1>Block</h1>
40+
<h2>Header</h2>
41+
<div>Div 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.</div>
42+
<p>Paragraph 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.</p>
43+
44+
<h1>Inline</h1>
45+
<span>i</span>
46+
<span>i</span>
47+
<span>i</span>
48+
<span>i</span>
49+
<span>i</span>
50+
<span>i</span>
51+
52+
<a href="tel:+16045555555">604.555.5555</a>
53+
<a href="tel:+16045555555">604.555.5555</a>
54+
<a href="tel:+16045555555">604.555.5555</a>
55+
<a href="tel:+16045555555">604.555.5555</a>
56+
<a href="tel:+16045555555">604.555.5555</a>
57+
<a href="tel:+16045555555">604.555.5555</a>
58+
59+
<img src="http://fillmurray.com/200/300" />
60+
<img src="http://fillmurray.com/200/300" />
61+
<img src="http://fillmurray.com/200/300" />
62+
<img src="http://fillmurray.com/200/300" />
63+
<img src="http://fillmurray.com/200/300" />
64+
<img src="http://fillmurray.com/200/300" />
65+
<img src="http://fillmurray.com/200/300" />
66+
<img src="http://fillmurray.com/200/300" />
67+
<img src="http://fillmurray.com/200/300" />
68+
69+
</body>
70+
</html>
71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
<!-- -->

‎day_6/2_float.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Float</title>
6+
<style>
7+
div {
8+
width: 100px;
9+
height: 100px;
10+
}
11+
.red {
12+
background-color: red;
13+
float: left;
14+
width: 100%;
15+
position: fixed;
16+
}
17+
.green {
18+
background-color: green;
19+
float: left;
20+
width: 25%;
21+
height: 5000px;
22+
}
23+
.blue {
24+
background-color: blue;
25+
float: left;
26+
width: 75%;
27+
height: 5000px;
28+
}
29+
.yellow {
30+
background-color: yellow;
31+
float: left;
32+
width: 100%;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div class="red"></div>
38+
<div class="green"></div>
39+
<div class="blue"></div>
40+
<div class="yellow"></div>
41+
</body>
42+
</html>

‎day_6/3_wrap.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Floating Inline</title>
6+
<style>
7+
img {
8+
float: right;
9+
margin-right: 15px;
10+
}
11+
p {
12+
font-size: 30px;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<h1>Summer The Dog</h1>
18+
<p><img src="dog.jpg">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.</p>
19+
</body>
20+
</html>

‎day_6/4_position.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Position Example</title>
6+
<style>
7+
body {
8+
background: url( background.jpg );
9+
background-size: cover;
10+
background-repeat: no-repeat;
11+
/* position: static; */
12+
}
13+
img {
14+
max-width: 100px;
15+
position: absolute;
16+
top: 200px;
17+
/* right:
18+
bottom: */
19+
left: 507px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div>
25+
<img src="mario.png" />
26+
</div>
27+
</body>
28+
</html>

‎day_6/background.jpg‎

120 KB
Loading

‎day_6/dog.jpg‎

25.4 KB
Loading

‎day_6/mario.png‎

1.72 MB
Loading

0 commit comments

Comments
 (0)