fancy webpage

b56fd8f3 · Camron Blackburn · 49c7a0d5 · b56fd8f3 · b56fd8f3 · b56fd8f3
Commit b56fd8f3 authored 4 years ago by Camron Blackburn
--- a/fancy/index.html
+++ b/fancy/index.html
+<!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>&ltdiv&gt</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>&ltbr&gt</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>&ltol&gt
+        &lt/ol&gt</code> or bullet points (unordered list) with <code>&ltul&gt
+        &lt/ul&gt</code> and then embed list items with <code>&ltli&gt
+        &lt/li&gt</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>&ltimg&gt</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>&ltvideo&gt</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>
--- a/fancy/style.css
+++ b/fancy/style.css
+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;
+}
--- a/media/sample.jpg
+++ b/media/sample.jpg
--- a/simple/sample.mp4
+++ b/simple/sample.mp4
--- a/simple/sample.jpg
+++ b/simple/sample.jpg