-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathselector_exercise.html
More file actions
220 lines (183 loc) · 5.92 KB
/
Copy pathselector_exercise.html
File metadata and controls
220 lines (183 loc) · 5.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html>
<head>
<title>Selector Exercise</title>
<link rel="stylesheet" type="text/css" href="selector_exercise.css">
</head>
<body>
<h1>Selector Exercise</h1>
<p>PARAGRAPH NOT INSIDE A DIV</p>
<div>
<p class="hello">I am a paragraph with a class</p>
<p id="special">I am a paragraph with an ID</p>
<h2>I am an awesome h2</h2>
<p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever.</p>
</div>
<div>
<h2>Things I need to do</h2>
<ul>
<li>Walk Dog <input type="checkbox" checked></li>
<li>Feed Dog <input type="checkbox" checked></li>
<li>Wasg Dog <input type="checkbox"></li>
</ul>
</div>
<div>
<h2>I am another awesome h2</h2>
<p>
Cardigan Tumblr mlkshk, fap tilde 3 wolf moon Portland. Heirloom health goth taxidermy blog lo-fi selfies, post-ironic master cleanse fingerstache normcore. Kickstarter plaid twee, bespoke single-origin coffee sustainable lo-fi vinyl Pinterest pork belly <em>cronut skateboard</em> 3 wolf moon. Normcore single-origin coffee salvia, bespoke Austin swag Godard before they sold out kogi disrupt locavore. Lumbersexual Shoreditch Vice, artisan American Apparel master cleanse yr salvia vegan. Bespoke letterpress heirloom kale chips deep v four loko. Lomo sustainable put a bird on it trust fund post-ironic
</p>
<p>I'm the second paragraph inside this div!</p>
</div>
<p>PARAGRAPH NOT INSIDE A DIV</p>
<h2>A less awesome h2</h2>
<div>
<p>
Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever
</p>
<p>
One last paragraph here!
</p>
</div>
<div>
<a href="http://www.google.com" target="_blank">I am a link to facebook</a>
<a href="http://www.google.com" target="_blank">I am another link to facebook</a><br>
<input type="text" name="name">
<label>Name</label><br>
<input type="password" name="password">
<label>Password</label>
</div>
<p>PARAGRAPH NOT INSIDE A DIV</p>
</body>
</html>
<!--for this html i left css material to see your mistakes,if it will help you i will be happy :) -->
/* Give the <body> element a background of #bdc3c7*/
body {
background-color: #bdc3c7;
}
/* Make the <h1> element #9b59b6*/
h1 {
color: #9b59b6;
}
/* Make all <h2> elements orange */
h2 {
color: orange;
}
/* Make all <li> elements blue(pick your own hexadecimal blue)*/
li {
color: #1d1dee;
}
/*Change the background on every paragraph to be yellow*/
p {
background: yellow;
}
/*Make all inputs have a 3px red border*/
/*
input {
border: 3px solid red;
} */
input[type="checkbox"],
input[type="text"],
input[type="password"] {
border: 3px solid red;
}
/* Give everything with the class 'hello' a white background*/
.hello {
background: white;
}
/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
#special {
border: 2px solid rgb(63, 116, 191);
}
/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
div p {
font-size: 25px;
}
/*Make only inputs with type 'text' have a gray background*/
input[type="text"] {
background: gray;
}
/* Give both <p>'s inside the 3rd <div> a pink background*/
div:nth-of-type(3) > p {
background: pink;
}
/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
/* div:nth-of-type(3) > p:nth-last-child(1) {
border: 5px solid white;
} */
div:nth-of-type(3)>p:nth-of-type(2) {
border: 5px solid white;
}
/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/
div:nth-of-type(3) em {
font-size: 20px;
color: white;
}
/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/
input[type="checkbox"]:checked {
margin-left: 50px;
}
/* does not work this option
input:checked {
margin-left: 50px;
}
*/
/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/
label {
text-transform: uppercase;
}
/*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/
#special:first-letter {
color: green;
font-size: 100px;
}
/*Make the <h1> element's color change to blue when hovered over */
h1:hover {
color: blue;
}
/*Make the <a> element's that have been visited gray */
a:visited {
color: gray;
}
<!--Another model Tic Tac Toe Board!-->
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
</head>
<body>
<h1> Tic Tac Toe </h1>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!--for html above css file below-->
h1 {
text-align: auto;
}
td {
width: 100px;
height: 100px;
}
tr:nth-of-type(2) td {
border-top: 2px dotted #000;
border-bottom: 2px dotted #000;
}
td:nth-of-type(2) {
border-right: 2px dotted #000;
border-left: 2px dotted #000;
}