diff --git a/index.html b/index.html index d855a4e..bf2c180 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@

Day 1

+ Step 0 Step 1 Step 2 Step 3 diff --git a/step1-00/css-demo.css b/step1-00/css-demo.css new file mode 100644 index 0000000..62b4a88 --- /dev/null +++ b/step1-00/css-demo.css @@ -0,0 +1,49 @@ +h1 { + padding: 10px; + margin-bottom: 15px; + margin-top: 15px; + color: black; + background: #ddd; + border: 1px solid #ababab; +} + +a { + color: white; +} +a:hover { + color: #ccc; +} + +.tiles { + display: flex; +} + +.tiles img { + display: block; + margin: 0 auto; + max-width: 75%; +} + +.tiles > div { + background: rgb(10, 10, 10); + color: white; + flex-basis: 100%; + padding: 10px 20px 15px; + margin-right: 20px; +} + +.tiles > div:last-child { + margin-right: 0; +} + +a + a { + display: block; +} + +#contact-form > * { + display: block; +} + +input[type='submit'] { + margin-top: 10px; +} diff --git a/step1-00/css-demo.html b/step1-00/css-demo.html new file mode 100644 index 0000000..99ecc74 --- /dev/null +++ b/step1-00/css-demo.html @@ -0,0 +1,29 @@ + + + + + +
+

This is my Title

+
+
+

Important Links

+ We're Awesome + Learn More + Hire Us +
+
+

Our Logo

+ fabric logo +
+
+

Contact Us

+
+ + +
+
+
+
+ + diff --git a/step1-00/fabric.jpg b/step1-00/fabric.jpg new file mode 100644 index 0000000..27722a2 Binary files /dev/null and b/step1-00/fabric.jpg differ diff --git a/step1-00/html-demo.html b/step1-00/html-demo.html new file mode 100644 index 0000000..c15b04d --- /dev/null +++ b/step1-00/html-demo.html @@ -0,0 +1,229 @@ + + + Intro to HTML + + + + + + HTML Element Reference + +

Document Meta Data

+

head, title, link, style

+ +

Content Sections

+ +
+
+

My Website

+ +
+ +
+

My Blog

+
+

Blog Title 1

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+
+
+

Blog Title 2

+ + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi + iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+
+
+
Copyright 2019
+
+
+

Block Text content

+ +

Blockquote

+ +
+

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.

+
+ + – Aldous Huxley, Brave New World + +

Definition List

+
+
Beast of Bodmin
+
A large feline inhabiting Bodmin Moor.
+ +
Morgawr
+
A sea serpent.
+ +
Owlman
+
A giant owl-like creature.
+
+ +

Figure

+
+ Fabric Logo +
The Fabric Logo
+
+ +

Ordered List

+
    +
  1. Ordered
    2. +
  2. list
    3. +
  3. items
    4. +
+ +

Unordered List

+ + +

Paragraph

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel + eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum. +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit + enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non? +

+

Pre

+ 
+        // This is a pre tag            --           It respects spacing and tabs
+        // But actual code still needs to be escaped
+        <ul>
+          <li>Unordered</li>
+          <li>list</li>
+          <li>items</li>
+        </ul>
+
+
+
+

Inline text elements

+ +

Anchor tag, br and span

+ + Website address
+ Email
+ Phone
+ +

Inline style tags

+

b tag em tag i tag sub tag sup tab code tag

+
+
+

Table content

+ + + + + + + + + + + + + + + + + +
The table header
The table bodywith two columns
Another table rowwith two columns
+
+
+

Forms

+ +
+
+ + +
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+
+ + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + + +
+ +
+ +
+
+
+ + diff --git a/step1-00/index.html b/step1-00/index.html new file mode 100644 index 0000000..be6fabc --- /dev/null +++ b/step1-00/index.html @@ -0,0 +1,2 @@ +HTML Demo
+CSS Demo diff --git a/step1-00/style.css b/step1-00/style.css new file mode 100644 index 0000000..b1a4247 --- /dev/null +++ b/step1-00/style.css @@ -0,0 +1,10 @@ +aside { + float: right; + width: 33%; + padding: 10px; + background: #eee; +} + +form > div { + margin-bottom: 20px; +}