diff --git a/fancy/index.html b/fancy/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..7500bcebbd35d1c71e36d164acf7267bf29f7cc5
--- /dev/null
+++ b/fancy/index.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>WEBSITE</title>
+ <link rel="stylesheet" href="style.css">
+ <link rel="shortcut icon" href="./sample.jpg">
+ </head>
+ <body>
+ hey hey.
+
+ <h2>document as you go!</h2>
+
+ <div class="opener">
+ <div class="title">
+ HTML Basics
+ </div>
+ <a class="toc-1" href="#1">line breaks</a><br>
+ <a class="toc-1" href="#2">headers</a><br>
+ <a class="toc-1" href="#3">lists</a><br>
+ <a class="toc-1" href="#4">media</a><br>
+ <a class="toc-2" href="#4.1">images</a><br>
+ <a class="toc-2" href="#4.2">videos</a><br>
+ <a class="toc-1" href="#5">resources & tutorials</a><br>
+
+ </div>
+
+ <div class="main-text">
+
+ now you get fancy with with a css style script and <code><div></code>
+ tags which allow you to define blocks with sepcific styles on the html page !
+ <br><br>
+
+
+
+ <h2 id="1">line breaks</h2>
+ add a line break like
+ <br>
+ this
+ <br>
+ with <code><br></code>
+
+ <h2 id="2">Headers</h2>
+ You can organize all of the information in your page with nested header
+ fields of varying sizes
+ <div class="block-container">
+ <div>
+ <b>so that this:</b>
+ <br><br>
+ <xmp>
+<h1>header 1</h1>
+<h2>header 2</h2>
+<h3>header 3</h3>
+<h4>header 4 </h4>
+<h5>header 5</h5>
+ </xmp>
+ </div>
+ <div>
+ </b>should look like this:</b>
+ <br><br><br><br>
+ <h1>header 1</h1>
+ <h2>header 2</h2>
+ <h3>header 3</h3>
+ <h4>header 4 </h4>
+ <h5>header 5</h5>
+
+ </div>
+ </div>
+
+
+ <h2 id="3">Lists</h2>
+ you can create a numbered list (ordered list) with <code><ol>
+ </ol></code> or bullet points (unordered list) with <code><ul>
+ </ul></code> and then embed list items with <code><li>
+ </li></code>
+
+ <div class="block-container">
+ <div>
+ <b>so that this:</b>
+ <br><br>
+ <xmp>
+number list
+<ol>
+ <li>first point</li>
+ <li>second point</li>
+ <li>third point</li>
+</ol>
+or bullet points
+<ul>
+ <li>bullet one</li>
+ <li>bullet two</li>
+ <li>bullet three</li>
+</ul>
+ </xmp>
+
+ </div>
+
+ <div>
+ <b>should end up looking like this:</b>
+ <br><br><br><br>
+ number list
+ <ol>
+ <li>first point</li>
+ <li>second point</li>
+ <li>third point</li>
+ </ol>
+ or bullet points
+ <ul>
+ <li>bullet one</li>
+ <li>bullet two</li>
+ <li>bullet three</li>
+ </ul>
+
+ </div>
+
+ </div>
+
+ <h2 id="4">media</h2>
+ <h3 id="4.1">images</h3>
+ embed images with the <code><img></code> tag
+ <div class="block-container">
+ <div>
+ <xmp>
+<img src="path/to/img_file.png"
+alt="alternative text description"
+width="500" height="600"></xmp>
+ </div>
+
+ <div>
+ <img src="../media/sample.jpg" alt="example image" height="200">
+ </div>
+ </div>
+
+
+ <br></br>
+ <br><br>
+
+ <h3 id="4.2">videos</h3>
+ or videos with <code><video></code> tag
+ <br><br>
+
+ <div class="block-container">
+ <div>
+ <xmp>
+<video width="320" height="240" controls>
+ <source src="path/to/video.mp4" type="video/mp4">
+ Your browser does not support the video tag.
+</video>
+
+ </xmp>
+ </div>
+
+ <div>
+ <video width="320" height="240" controls>
+ <source src="../media/sample.mp4" type="video/mp4">
+ Your browser does not support the video tag.
+ </video>
+ </div>
+ </div>
+
+ <h2 id="5">more resources and tutorials</h2>
+ <ul>
+ <li><a href="https://www.w3schools.com/css/default.asp">css tutorial</a></li>
+ <li><a href="https://www.w3schools.com/css/css3_flexbox.asp">css flex blocks</a></li>
+ </ul>
+
+ </div>
+
+
+ </body>
diff --git a/fancy/style.css b/fancy/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..3be4bf09eb0d846f024aec4796e230015190a3d1
--- /dev/null
+++ b/fancy/style.css
@@ -0,0 +1,76 @@
+html {
+ padding: 100px;
+ padding-top: 0;
+}
+body {
+ font-family: 'Inter', sans-serif;
+ font-size: 14px;
+ font-weight: 300;
+ padding: 50px;
+ /*width: 800px;*/
+}
+
+a {
+ color: #009ECE;
+ transition: all 0.5s ease;
+ border-bottom: 2px solid transparent;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #006666;
+ border-bottom: 2px solid #006666
+}
+
+.vid {
+ margin-left: auto;
+ margin-right: auto;
+ width: 800;
+}
+
+.opener {
+ font: normal 20px/30px "Roboto", sans-serif, semi-expanded;
+ margin: 10px 10px 20px;
+ padding: 20px 20px 20px 20px;
+ background-color: #D6DBDF;
+}
+
+
+.title {
+ font: bold 36px/30px "Inter", sans-serif, semi-expanded;
+ background-color: #85929E;
+ padding: 20px 20px 10px 5px
+}
+
+.toc-1{
+ color:#009ECE;
+ outline:none;
+ border-bottom: 2px solid transparent;
+ margin: 10px 20px;
+}
+.toc-2{
+ color:#009ECE;
+ font-size: 15px;
+ outline:none;
+ border-bottom: 2px solid transparent;
+ margin: 10px 40px ;
+}
+
+.main-text {
+ font: normal 16px/18px "Roboto", sans-serif;
+ margin: 10px 20px 100px;
+ padding: 20px 20px 20px 20px;
+}
+
+.block-container {
+ display: flex;
+ #background-color: #85929E;
+ flex-flow: row wrap;
+ justify-content: center;
+}
+
+.block-container > div {
+ background-color: #f1f1f1;
+ margin:10px;
+ padding: 10px;
+}
diff --git a/media/sample.jpg b/media/sample.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f9769287cfce3260b7e87bbcbdbb418efdf1eeee
Binary files /dev/null and b/media/sample.jpg differ
diff --git a/simple/sample.mp4 b/media/sample.mp4
similarity index 100%
rename from simple/sample.mp4
rename to media/sample.mp4
diff --git a/simple/sample.jpg b/simple/sample.jpg
deleted file mode 100644
index 6799d4d32b588699dbef0f65b26ba70bc9ade29a..0000000000000000000000000000000000000000
Binary files a/simple/sample.jpg and /dev/null differ