diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6937180
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode/settings.json
\ No newline at end of file
diff --git a/README.md b/README.md
index e029324..d756271 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ A simple, curated HTML5 and CSS cheat sheet.
## Viewing the cheat sheet
-Just open [html-css-cheat-sheet.html](https://acchou.github.io/html-css-cheat-sheet/html-css-cheat-sheet.html) in your browser. There are no external dependencies.
+Just open [html/html-cheat-sheet.html](https://acchou.github.io/html-css-cheat-sheet/html/html-cheat-sheet.html) in your browser. There are no external dependencies.
## Features
diff --git a/animate.css b/css/animate.css
similarity index 100%
rename from animate.css
rename to css/animate.css
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/style.css b/css/style.css
similarity index 99%
rename from style.css
rename to css/style.css
index 821e255..9b5d22d 100644
--- a/style.css
+++ b/css/style.css
@@ -104,8 +104,9 @@ body {
}
#html,
+#css,
#animation-transitions {
- padding-top: 60px;
+ padding-top: 0px;
}
.size-box {
@@ -258,6 +259,10 @@ h6 {
font-weight: normal;
}
+section {
+ padding-top: 30px;
+}
+
section > h1 {
grid-column: 1/-1;
}
diff --git a/animation.html b/html/animation.html
similarity index 97%
rename from animation.html
rename to html/animation.html
index 2802f9b..0111bab 100644
--- a/animation.html
+++ b/html/animation.html
@@ -3,38 +3,52 @@
Animation and Transitions
-
+
+
-
+
+
+