Skip to content

Commit 75a2302

Browse files
WPBCWPBC
committed
Initial Commit
0 parents  commit 75a2302

File tree

5 files changed

+539
-0
lines changed

5 files changed

+539
-0
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

Diff for: ‎README.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# HTML Cheatsheet
2+
3+
This is a starting point for anyone who wishes to create their very own reference cheat sheet, whether it be HTML, CSS, JavaScript or any other coding language you would like to pursue. Although there are great places to learn HTML & CSS, the best reference for yourself is often your own notes and projects.
4+
5+
View Quote Generator [Demo](https://wpbc.github.io/html-cheatsheet/)
6+
7+
### Installation
8+
9+
1. Open your terminal and change the current working directory to the location where you want the cloned directory to be made.
10+
11+
```bash
12+
$ cd path/to/your/folder/html-cheatsheet/
13+
```
14+
15+
2. Clone repository by typing the following in your terminal:
16+
17+
```bash
18+
$ git clone [email protected]:WPBC/html-cheatsheet.git
19+
```
20+
21+
3. Open the index.html file to view the html cheatsheet.
22+
23+
24+
### Resources
25+
26+
HTML 5 Logo by [WC3](https://www.w3.org/)
27+
28+
### License
29+
30+
This package is released under the MIT license.

Diff for: ‎assets/css/styles.css

+189
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
/* General */
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
:root {
7+
--accent-color: tomato;
8+
}
9+
10+
body {
11+
margin: 0;
12+
font-family: Helvetica, "Segoe UI", Roboto, Ubuntu, "Open Sans",
13+
"Helvetica Neue", sans-serif;
14+
font-size: 16px;
15+
line-height: 1.5;
16+
background-color: #f6f6f6;
17+
}
18+
19+
a,
20+
a:visited {
21+
color: black;
22+
text-decoration: none;
23+
}
24+
25+
a:hover,
26+
a:focus,
27+
a:active {
28+
color: var(--accent-color);
29+
}
30+
31+
nav ul,
32+
td ul {
33+
list-style: none;
34+
margin: 0;
35+
padding: 0;
36+
}
37+
38+
/* Page Header */
39+
.header {
40+
display: flex;
41+
padding: 16px 40px;
42+
background-color: #333;
43+
margin-bottom: 40px;
44+
width: 100%;
45+
}
46+
.header img {
47+
width: 25px;
48+
margin-right: 20px;
49+
}
50+
.header h1 {
51+
margin: 0;
52+
font-size: 1.1em;
53+
font-weight: 400;
54+
}
55+
.header h1 a {
56+
color: #fff;
57+
}
58+
59+
/* Layout */
60+
.wrapper {
61+
padding: 0 40px;
62+
display: flex;
63+
flex-direction: column-reverse;
64+
}
65+
main {
66+
width: 100%;
67+
}
68+
aside {
69+
width: 180px;
70+
}
71+
72+
@media (min-width: 1180px) {
73+
aside {
74+
position: fixed;
75+
left: 40px;
76+
}
77+
.wrapper {
78+
flex-direction: row-reverse;
79+
}
80+
main {
81+
width: calc(100vw - 260px);
82+
}
83+
}
84+
85+
/* Navigation */
86+
nav h3 {
87+
margin-top: 0;
88+
margin-bottom: 12px;
89+
text-decoration: underline;
90+
text-underline-offset: 0.3em;
91+
}
92+
nav ul {
93+
margin-bottom: 30px;
94+
}
95+
nav li {
96+
padding: 3px 0;
97+
color: #888;
98+
}
99+
100+
/* Section Heading */
101+
section header {
102+
margin: 0 0 24px;
103+
display: flex;
104+
align-items: center;
105+
}
106+
section header h2 {
107+
margin-top: 0;
108+
margin-bottom: 0;
109+
}
110+
section header a {
111+
background-color: #ddd;
112+
margin-left: 15px;
113+
padding: 4px 5px 2px;
114+
font-size: 12px;
115+
color: #000;
116+
text-transform: uppercase;
117+
}
118+
section header a:hover {
119+
background-color: var(--accent-color);
120+
color: #fff;
121+
}
122+
123+
/* Tables */
124+
.table-wrapper {
125+
overflow-x: auto;
126+
margin-bottom: 30px;
127+
}
128+
table {
129+
width: 100%;
130+
min-width: 900px;
131+
background-color: #fff;
132+
border-collapse: collapse;
133+
}
134+
table,
135+
tr {
136+
border: 1px solid #ccc;
137+
}
138+
th {
139+
background-color: #ddd;
140+
}
141+
th:first-of-type {
142+
min-width: 200px;
143+
}
144+
th:nth-of-type(2) {
145+
min-width: 300px;
146+
}
147+
th:nth-of-type(3) {
148+
min-width: 400px;
149+
}
150+
th,
151+
td {
152+
padding: 10px;
153+
vertical-align: top;
154+
text-align: left;
155+
}
156+
157+
/* Code */
158+
.code {
159+
display: inline-block;
160+
font-family: monospace;
161+
background-color: #333;
162+
padding: 2px 6px;
163+
color: rgb(255, 255, 255);
164+
cursor: pointer;
165+
}
166+
.code:hover {
167+
background-color: var(--accent-color);
168+
}
169+
.code-alt {
170+
color: var(--accent-color);
171+
font-family: monospace;
172+
font-size: 1.1rem;
173+
}
174+
175+
/* Footer */
176+
footer {
177+
/* display: flex; */
178+
padding: 20px 40px;
179+
width: 100%;
180+
text-align: center;
181+
/* justify-content: space-between; */
182+
}
183+
footer p {
184+
font-size: 0.9em;
185+
margin: 0;
186+
}
187+
footer img {
188+
width: 80px;
189+
}

Diff for: ‎assets/img/github.png

12.7 KB
Loading

0 commit comments

Comments
 (0)