This repository has been archived by the owner on Nov 16, 2023. It is now read-only.
/
index.html
132 lines (115 loc) · 2.81 KB
/
index.html
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
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="html,result"
>
<pre data-lang="css">
/* Targeting the entire page */
//body {
font: 1.2em sans-serif;
}
/* Targeting an HTML tag */
//h1 {
/* Color name */
color: black;
/* 6-digit hex */
background: #ababab;
/* Margin: specified separately for each side */
margin-bottom: 15px;
margin-top: 15px;
/* Shorthand: Padding applies to all sides */
padding: 10px;
/* Border shorthand and 3-digit hex */
border: 1px solid #ddd;
}
/* Overriding inherited styles */
//span {
color: #004578;
}
/* Sibling selector */
//a + a {
/* Changing elements from inline to block */
display: block;
}
/* Targeting a class name */
//.tiles {
display: flex;
}
/* Descendant selector */
//.tiles img {
width: 100%;
}
/* Direct descendant selector */
//.tiles > div {
/* rgb color */
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
/* Padding/margin shorthand. Goes clockwise from top.
10px - all
10px 20px - top/bottom left/right
10px 20px 15px - top left/right bottom
*/
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
border: 1px solid white;
}
/* Qualified selector */
//div.important-links {
background: #004578;
}
/* Style inheritance only works for unstyled elements */
//a {
color: white;
}
/* Hover pseudo-selector */
//a:hover {
color: #ccc;
}
/* Positional pseudo-selector */
//.tiles > div:last-child {
/* overrides margin-right but leaves other margins alone */
margin-right: 0;
}
/* ID selector */
//#contact-form {
display: flex;
flex-direction: column;
}
/* Attribute selector */
//input[type='submit'] {
margin-top: 10px;
}
</pre>
<pre data-lang="html">
<h1>This is my <span>Title</span></h1>
<div class="tiles">
<div class="important-links">
<h2>Important Links</h2>
<a href="#">We're Awesome</a>
<a href="#">Learn More</a>
<a href="#">Hire Us</a>
</div>
<div>
<h2>Our Logo</h2>
<img src="https://github.com/microsoft/frontend-bootcamp/blob/master/assets/fabric.jpg?raw=true" width="100" alt="fabric logo" />
</div>
<div>
<h2>Contact Us</h2>
<div id="contact-form">
<label>Email</label><input type="email" />
<input value="Submit" type="submit" />
</div>
</div>
</div>
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>