From 8557cea087f0fc0dd731b92a8a0f300ac692dbb3 Mon Sep 17 00:00:00 2001
From: Orhan Mekic
Date: Sat, 2 Jun 2018 14:11:53 +0200
Subject: [PATCH 1/4] add folders html and css
---
.vscode/.gitignore | 1 +
animate.css => css/animate.css | 0
style.css => css/style.css | 0
animation.html => html/animation.html | 13 +++++++------
.../fixed-position-example.html | 2 +-
.../html-css-cheat-sheet.html | 10 +++++-----
tools.html => html/tools.html | 2 +-
7 files changed, 15 insertions(+), 13 deletions(-)
create mode 100644 .vscode/.gitignore
rename animate.css => css/animate.css (100%)
rename style.css => css/style.css (100%)
rename animation.html => html/animation.html (99%)
rename fixed-position-example.html => html/fixed-position-example.html (96%)
rename html-css-cheat-sheet.html => html/html-css-cheat-sheet.html (99%)
rename tools.html => html/tools.html (98%)
diff --git a/.vscode/.gitignore b/.vscode/.gitignore
new file mode 100644
index 0000000..6f1710d
--- /dev/null
+++ b/.vscode/.gitignore
@@ -0,0 +1 @@
+/settings.json
diff --git a/animate.css b/css/animate.css
similarity index 100%
rename from animate.css
rename to css/animate.css
diff --git a/style.css b/css/style.css
similarity index 100%
rename from style.css
rename to css/style.css
diff --git a/animation.html b/html/animation.html
similarity index 99%
rename from animation.html
rename to html/animation.html
index 2802f9b..8c76178 100644
--- a/animation.html
+++ b/html/animation.html
@@ -3,10 +3,11 @@
Animation and Transitions
-
+
+
-
+
@@ -15,16 +16,16 @@
-
-
Paragraph
-
- <p>content</p>
-
-
-
-
Line break
-
- <br>
-
-
-
-
Horizontal rule
-
-
- <hr>
-
-
-
-
Division
-
Block-level generic grouping element
-
- <div class="kind">
- content
- </div>
-
-
-
-
Span
-
Inline generic grouping element
-
- <span class="kind">
- content
- </span>
-
-
-
-
Article
-
A self-contained unit of content
-
- <article>
- <h2>Header</h2>
- content
- </article>
-
-
-
-
Section
-
A unit of content
-
- <section>
- <h2>Header</h2>
- content
- </section>
-
-
-
-
Figure
-
- <figure>
- content
- <figcaption>Caption</figcaption>
- </figure>
-
-
-
-
Navigation
-
-
- See navigation bar at the top.
-
-
<nav>
-
<ul>
-
<li><a href="#">First</a></li>
-
<li><a href="#">Second</a></li>
-
<li><a href="#">Third</a></li>
-
</ul>
-
</nav>
-
-
-
-
Text
-
-
-
- strong
-
-
<strong>strong</strong>
-
-
-
- emphasized
-
-
<em>emphasized</em>
-
-
-
- semantic
-
-
<i>semantic</i>
-
-
-
- strikethrough
-
-
<s>strikethrough</s>
-
-
-
-
<abbr title="abbreviation">abbr</abbr>
-
-
-
- mark
-
-
<mark>mark</mark>
-
-
-
- underline
-
-
<u>underline</u>
-
-
-
- x
- sup
-
-
<sup>sup</sup>
-
-
-
- x
- sub
-
-
<sub>sub</sub>
-
-
-
- inline quote
-
-
<q>inline quote</q>
-
-
-
-
-
-
<time datetime="2017-05-18T13:30">
May 18
</time>
-
-
-
-
<blockquote>block quote</blockquote>
-
-
-
- term definition
-
-
<dfn>term</dfn>
-
-
-
- citation
-
-
<cite>citation</cite>
-
-
-
- data
-
-
<data value="42">data</data>
-
-
-
-
-
Code
-
-
- code()
-
-
<code>code()</code>
-
-
-
- sample output
-
-
<samp>sample output</samp>
-
-
-
- Press
- Ctrl+
- S
-
-
<kbd>Ctrl</kbd>
-
-
-
- variable
-
-
<var>variable</var>
-
-
-
-
Forms
-
-
-
-
-
<form action="" method="get">
-
<label for="name">Name:</label>
-
<input id="name" name="name">
-
<input type="submit" value="Save">
-
</form>
-
-
-
-
-
-
<form action="" method="post">
-
<fieldset>
-
<legend>Title</legend>
-
<label for="fid">Label:</label>
-
<input id="fid" name="field">
-
<input type="submit" value="Save">
-
</fieldset>
-
</form>
-
-
-
-
UI elements
-
-
-
-
-
-
<button>button</button>
-
-
-
-
-
-
<meter value="0.6">
-
-
-
-
-
-
<select>
-
<option>Value 1</option>
-
<option>Value 2</option>
-
<option>Value 3</option>
-
</select>
-
-
-
-
-
-
<select>
-
<optgroup label="Group 1">
-
<option>Value 1</option>
-
<option>Value 2</option>
-
</optgroup>
-
<optgroup label="Group 2">
-
<option>Value 3</option>
-
<option>Value 4</option>
-
</optgroup>
-
</select>
-
-
-
-
<progress value="0.6">
-
-
-
-
-
-
<textarea>content</textarea>
-
-
-
-
- Summary
- The gory details.
-
-
-
<details>
-
<summary>Summary</summary>
-
<p>The gory details.</p>
-
</details>
-
-
-
-
-
-
<label>label <input></label>
-
-
-
-
-
-
<label for="name">label</label>
-
<input id="name">
-
-
-
-
-
Input types
-
-
-
-
-
-
<input type="button" value="ok">
-
-
-
-
-
-
<input type="checkbox">
-
-
-
-
-
-
<input type="color">
-
-
-
-
-
-
<input type="date">
-
-
-
-
-
-
<input type="datetime-local">
-
-
-
-
-
-
<input type="email">
-
-
-
-
-
-
<input type="file">
-
-
-
-
-
-
<input type="month">
-
-
-
-
-
-
<input type="number">
-
-
-
-
-
-
<input type="password">
-
-
-
-
-
-
<input type="radio">
-
-
-
-
-
-
<input type="range">
-
-
-
-
-
-
<input type="reset">
-
-
-
-
-
-
<input type="search">
-
-
-
-
-
-
<input type="submit">
-
-
-
-
-
-
<input type="tel">
-
-
-
-
-
-
<input type="text">
-
-
-
-
-
-
<input type="hidden">
-
-
-
-
-
-
<input type="time">
-
-
-
-
-
-
<input type="url">
-
-
-
-
-
-
<input type="week">
-
-
-
-
-
-
<input type="image">
-
-
-
-
-
- Links
-
-
Link
-
- <a href="URL">open link</a>
-
-
-
-
Link in new tab
-
See this
- article on the need for "noopener noreferrer"
-
-
- <a href="URL" target="_blank" rel="noopener noreferrer">open link in new tab</a>
-
-
-
-
- Images
-
-
Image
-
- <img src="URL">
-
-
-
-
Image with description
-
- <img src="URL" alt="image description">
-
-
-
-
- Lists
-
-
Unordered list
-
- <ul>
- <li>Item 1</li>
- <li>Item 2</li>
- </ul>
-
-
-
-
Ordered list
-
- <ol>
- <li>Item 1</li>
- <li>Item 2</li>
- </ol>
-
-
-
-
Description list
-
- <dl>
- <dt>Term</dt>
- <dd>Definition</dd>
- </dl>
-
-
-
-
-
- Tables
-
-
Basic table
-
-
-
-
<table>
<tr>
<td>data</td>
</tr>
</table>
-
-
-
-
Full Table
-
-
-
- caption
-
-
- | name |
- number |
-
-
-
-
- | Footer |
- Total |
-
-
-
-
- | Andy |
- 42 |
-
-
- | Kevin |
- 1024 |
-
-
-
-
<table>
<caption>caption</caption>
<thead>
<tr>
<th>col-header</th>
<th>col-header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>row-header</th>
<td>data</td>
</tr>
</tbody>
</table>
-
-
-
-
-
Span columns
-
-
-
-
-
- | name |
- number |
-
-
-
-
- | Andy |
- 42 |
-
-
- | Kevin |
-
-
-
-
-
<td colspan="2">Kevin</td>
-
-
-
-
Span rows
-
-
-
-
-
- | name |
- number |
-
-
-
-
- | Andy |
- 42 |
-
-
- | 1024 |
-
-
-
-
-
<td rowspan="2">Andy</td>
-
-
-
-
Column groups
-
Operate on an entire column
-
-
-
-
-
-
-
- | Andy |
- 42 |
-
-
- | Kevin |
- 1024 |
-
-
-
-
<colgroup>
<col style="..."></col>
</colgroup>
-
-
-
-
-
-
-
-
- | Andy |
- 42 |
-
-
- | Kevin |
- 1024 |
-
-
-
-
<colgroup>
<col span="2" style="..."></col>
</colgroup>
-
-
-
-
Footers
-
-
-
-
-
-
- | Name |
- Total |
-
-
-
-
- | Andy |
- 42 |
-
-
- | Kevin |
- 1024 |
-
-
-
-
-
<tfoot>
<tr>
<td>Name</td>
<td>Total</td>
</tr>
</tfoot>
-
-
-
-
-
-
CSS
diff --git a/html/html-cheat-sheet.html b/html/html-cheat-sheet.html
new file mode 100644
index 0000000..6ab62ab
--- /dev/null
+++ b/html/html-cheat-sheet.html
@@ -0,0 +1,836 @@
+
+
+
+
+ HTML5 and CSS cheat sheet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
100px
+
+
+
+ HTML
+
+ Templates
+
+
HTML Document
+
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <title>Title</title>
+ <link href="style.css" type="text/css" rel="stylesheet">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta charset="utf-8">
+ </head>
+ <body>
+ ...
+ </body>
+ </html>
+
+
+
+
+ Elements
+
+
Headers
+
+
+
+
+
+
+
+
+
Paragraph
+
+ <p>content</p>
+
+
+
+
Line break
+
+ <br>
+
+
+
+
Horizontal rule
+
+
+ <hr>
+
+
+
+
Division
+
Block-level generic grouping element
+
+ <div class="kind">
+ content
+ </div>
+
+
+
+
Span
+
Inline generic grouping element
+
+ <span class="kind">
+ content
+ </span>
+
+
+
+
Article
+
A self-contained unit of content
+
+ <article>
+ <h2>Header</h2>
+ content
+ </article>
+
+
+
+
Section
+
A unit of content
+
+ <section>
+ <h2>Header</h2>
+ content
+ </section>
+
+
+
+
Figure
+
+ <figure>
+ content
+ <figcaption>Caption</figcaption>
+ </figure>
+
+
+
+
Navigation
+
+
+ See navigation bar at the top.
+
+
<nav>
+
<ul>
+
<li><a href="#">First</a></li>
+
<li><a href="#">Second</a></li>
+
<li><a href="#">Third</a></li>
+
</ul>
+
</nav>
+
+
+
+
Text
+
+
+
+ strong
+
+
<strong>strong</strong>
+
+
+
+ emphasized
+
+
<em>emphasized</em>
+
+
+
+ semantic
+
+
<i>semantic</i>
+
+
+
+ strikethrough
+
+
<s>strikethrough</s>
+
+
+
+
<abbr title="abbreviation">abbr</abbr>
+
+
+
+ mark
+
+
<mark>mark</mark>
+
+
+
+ underline
+
+
<u>underline</u>
+
+
+
+ x
+ sup
+
+
<sup>sup</sup>
+
+
+
+ x
+ sub
+
+
<sub>sub</sub>
+
+
+
+ inline quote
+
+
<q>inline quote</q>
+
+
+
+
+
+
<time datetime="2017-05-18T13:30">
May 18
</time>
+
+
+
+
<blockquote>block quote</blockquote>
+
+
+
+ term definition
+
+
<dfn>term</dfn>
+
+
+
+ citation
+
+
<cite>citation</cite>
+
+
+
+ data
+
+
<data value="42">data</data>
+
+
+
+
+
Code
+
+
+ code()
+
+
<code>code()</code>
+
+
+
+ sample output
+
+
<samp>sample output</samp>
+
+
+
+ Press
+ Ctrl+
+ S
+
+
<kbd>Ctrl</kbd>
+
+
+
+ variable
+
+
<var>variable</var>
+
+
+
+
Forms
+
+
+
+
+
<form action="" method="get">
+
<label for="name">Name:</label>
+
<input id="name" name="name">
+
<input type="submit" value="Save">
+
</form>
+
+
+
+
+
+
<form action="" method="post">
+
<fieldset>
+
<legend>Title</legend>
+
<label for="fid">Label:</label>
+
<input id="fid" name="field">
+
<input type="submit" value="Save">
+
</fieldset>
+
</form>
+
+
+
+
UI elements
+
+
+
+
+
+
<button>button</button>
+
+
+
+
+
+
<meter value="0.6">
+
+
+
+
+
+
<select>
+
<option>Value 1</option>
+
<option>Value 2</option>
+
<option>Value 3</option>
+
</select>
+
+
+
+
+
+
<select>
+
<optgroup label="Group 1">
+
<option>Value 1</option>
+
<option>Value 2</option>
+
</optgroup>
+
<optgroup label="Group 2">
+
<option>Value 3</option>
+
<option>Value 4</option>
+
</optgroup>
+
</select>
+
+
+
+
<progress value="0.6">
+
+
+
+
+
+
<textarea>content</textarea>
+
+
+
+
+ Summary
+ The gory details.
+
+
+
<details>
+
<summary>Summary</summary>
+
<p>The gory details.</p>
+
</details>
+
+
+
+
+
+
<label>label <input></label>
+
+
+
+
+
+
<label for="name">label</label>
+
<input id="name">
+
+
+
+
+
Input types
+
+
+
+
+
+
<input type="button" value="ok">
+
+
+
+
+
+
<input type="checkbox">
+
+
+
+
+
+
<input type="color">
+
+
+
+
+
+
<input type="date">
+
+
+
+
+
+
<input type="datetime-local">
+
+
+
+
+
+
<input type="email">
+
+
+
+
+
+
<input type="file">
+
+
+
+
+
+
<input type="month">
+
+
+
+
+
+
<input type="number">
+
+
+
+
+
+
<input type="password">
+
+
+
+
+
+
<input type="radio">
+
+
+
+
+
+
<input type="range">
+
+
+
+
+
+
<input type="reset">
+
+
+
+
+
+
<input type="search">
+
+
+
+
+
+
<input type="submit">
+
+
+
+
+
+
<input type="tel">
+
+
+
+
+
+
<input type="text">
+
+
+
+
+
+
<input type="hidden">
+
+
+
+
+
+
<input type="time">
+
+
+
+
+
+
<input type="url">
+
+
+
+
+
+
<input type="week">
+
+
+
+
+
+
<input type="image">
+
+
+
+
+
+ Links
+
+
Link
+
+ <a href="URL">open link</a>
+
+
+
+
Link in new tab
+
See this
+ article on the need for "noopener noreferrer"
+
+
+ <a href="URL" target="_blank" rel="noopener noreferrer">open link in new tab</a>
+
+
+
+
+ Images
+
+
Image
+
+ <img src="URL">
+
+
+
+
Image with description
+
+ <img src="URL" alt="image description">
+
+
+
+
+ Lists
+
+
Unordered list
+
+ <ul>
+ <li>Item 1</li>
+ <li>Item 2</li>
+ </ul>
+
+
+
+
Ordered list
+
+ <ol>
+ <li>Item 1</li>
+ <li>Item 2</li>
+ </ol>
+
+
+
+
Description list
+
+ <dl>
+ <dt>Term</dt>
+ <dd>Definition</dd>
+ </dl>
+
+
+
+
+
+ Tables
+
+
Basic table
+
+
+
+
<table>
<tr>
<td>data</td>
</tr>
</table>
+
+
+
+
Full Table
+
+
+
+ caption
+
+
+ | name |
+ number |
+
+
+
+
+ | Footer |
+ Total |
+
+
+
+
+ | Andy |
+ 42 |
+
+
+ | Kevin |
+ 1024 |
+
+
+
+
<table>
<caption>caption</caption>
<thead>
<tr>
<th>col-header</th>
<th>col-header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>row-header</th>
<td>data</td>
</tr>
</tbody>
</table>
+
+
+
+
+
Span columns
+
+
+
+
+
+ | name |
+ number |
+
+
+
+
+ | Andy |
+ 42 |
+
+
+ | Kevin |
+
+
+
+
+
<td colspan="2">Kevin</td>
+
+
+
+
Span rows
+
+
+
+
+
+ | name |
+ number |
+
+
+
+
+ | Andy |
+ 42 |
+
+
+ | 1024 |
+
+
+
+
+
<td rowspan="2">Andy</td>
+
+
+
+
Column groups
+
Operate on an entire column
+
+
+
+
+
+
+
+ | Andy |
+ 42 |
+
+
+ | Kevin |
+ 1024 |
+
+
+
+
<colgroup>
<col style="..."></col>
</colgroup>
+
+
+
+
+
+
+
+
+ | Andy |
+ 42 |
+
+
+ | Kevin |
+ 1024 |
+
+
+
+
<colgroup>
<col span="2" style="..."></col>
</colgroup>
+
+
+
+
Footers
+
+
+
+
+
+
+ | Name |
+ Total |
+
+
+
+
+ | Andy |
+ 42 |
+
+
+ | Kevin |
+ 1024 |
+
+
+
+
+
<tfoot>
<tr>
<td>Name</td>
<td>Total</td>
</tr>
</tfoot>
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/tools.html b/html/tools.html
index a15731b..72b033b 100644
--- a/html/tools.html
+++ b/html/tools.html
@@ -76,10 +76,10 @@
-
- HTML
+ HTML
-
- CSS
+ CSS
-
Animation
From 666f74b0e9c2c9096a14e34838c41f818f16dc88 Mon Sep 17 00:00:00 2001
From: Orhan Mekic
Date: Sat, 2 Jun 2018 15:45:46 +0200
Subject: [PATCH 3/4] add sidebar to all pages
---
css/sidebar.css | 49 ++++++++++++++++++++
css/style.css | 6 ++-
html/animation.html | 21 +++++++--
html/css-cheat-sheet.html | 34 ++++++++++++--
html/fixed-position-example.html | 2 +
html/html-cheat-sheet.html | 21 +++++++--
html/tools.html | 79 +++++++-------------------------
js/sidebar.js | 12 +++++
js/tools_transform.js | 57 +++++++++++++++++++++++
9 files changed, 205 insertions(+), 76 deletions(-)
create mode 100644 css/sidebar.css
create mode 100644 js/sidebar.js
create mode 100644 js/tools_transform.js
diff --git a/css/sidebar.css b/css/sidebar.css
new file mode 100644
index 0000000..090dafc
--- /dev/null
+++ b/css/sidebar.css
@@ -0,0 +1,49 @@
+/* //////////////////////// The side navigation menu */
+.sidenav {
+ height: 100%; /* 100% Full-height */
+ width: 0; /* 0 width - change this with JavaScript */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Stay on top */
+ top: 0; /* Stay at the top */
+ left: 0;
+ background-color: #111; /* Black*/
+ overflow-x: hidden; /* Disable horizontal scroll */
+ padding-top: 60px; /* Place content 60px from the top */
+ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+}
+
+/* The navigation menu links */
+.sidenav a {
+ padding: 8px 8px 8px 32px;
+ text-decoration: none;
+ font-size: 25px;
+ color: #818181;
+ display: block;
+ transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+ color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidenav .closebtn {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ margin-left: 50px;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+ transition: margin-left .5s;
+ padding: 5px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+ .sidenav {padding-top: 15px;}
+ .sidenav a {font-size: 18px;}
+}
diff --git a/css/style.css b/css/style.css
index aeee1d0..9b5d22d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -106,7 +106,7 @@ body {
#html,
#css,
#animation-transitions {
- padding-top: 60px;
+ padding-top: 0px;
}
.size-box {
@@ -259,6 +259,10 @@ h6 {
font-weight: normal;
}
+section {
+ padding-top: 30px;
+}
+
section > h1 {
grid-column: 1/-1;
}
diff --git a/html/animation.html b/html/animation.html
index 0eeef4e..0111bab 100644
--- a/html/animation.html
+++ b/html/animation.html
@@ -10,6 +10,7 @@
+
@@ -19,10 +20,7 @@
HTML
-
- HTML
-
- -
- CSS
+ CSS
-
Animation
@@ -34,11 +32,23 @@
+
+ ☰
+
+
+
+
Animation and Transitions
@@ -1058,6 +1068,7 @@ rollOut
+
\ No newline at end of file
diff --git a/html/css-cheat-sheet.html b/html/css-cheat-sheet.html
index 4d1fd97..ae79f47 100644
--- a/html/css-cheat-sheet.html
+++ b/html/css-cheat-sheet.html
@@ -4,10 +4,12 @@
HTML5 and CSS cheat sheet
+
+
@@ -31,7 +33,7 @@
@@ -64,6 +66,29 @@
100px
+
+ ☰
+
+
+
+
CSS
@@ -2086,7 +2111,7 @@ Display order of an item
-
+
Grid containers
Experimental. Limited support in Safari, Edge.
@@ -2487,7 +2512,7 @@
Highlighted grid cell has grid position explicitly set.
-
+
Grid items
grid-column:
@@ -3661,7 +3686,7 @@
Transparent colors
@@ -4456,6 +4481,7 @@
Media queries
+
diff --git a/html/html-cheat-sheet.html b/html/html-cheat-sheet.html
index 6ab62ab..34453f9 100644
--- a/html/html-cheat-sheet.html
+++ b/html/html-cheat-sheet.html
@@ -4,10 +4,12 @@
HTML5 and CSS cheat sheet
+
+
@@ -31,7 +33,7 @@
@@ -63,7 +65,21 @@
100px
100px
+
+ ☰
+
+
+
HTML
@@ -829,8 +845,7 @@ Footers
-
-
+
diff --git a/html/fixed-position-example.html b/html/fixed-position-example.html
index abcfe8f..b6bf347 100644
--- a/html/fixed-position-example.html
+++ b/html/fixed-position-example.html
@@ -4,8 +4,10 @@