Thomas Williams

Week-1/bio/css/style.css

@@ -0,0 +1,199 @@
+@charset "utf-8";
+/*------------------------------------*\
+    $RESET
+\*------------------------------------*/
+/* A more considered reset; more of a restart... As per: csswizardry.com/2011/10/reset-restarted */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
+a, abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strong, sub, sup, tt, var,
+b, u, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+}
+article, aside, details, figcaption, figure, footer,
+header, hgroup, menu, nav, section {
+    display: block;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+strong, b, mark {
+    font-weight: bold;
+    font-style: inherit;
+}
+em, i, cite, q, address, dfn, var {
+    font-style: italic;
+    font-weight: inherit;
+}
+abbr[title], dfn[title] {
+    cursor: help;
+    border-bottom: 1px dotted;
+}
+ins {
+    border-bottom: 1px solid;
+}
+a, u, ins {
+    text-decoration: none;
+}
+del, s {
+    text-decoration: line-through;
+}
+pre, code, samp, kbd {
+    font-family: monospace;
+}
+small {
+    font-size: 0.75em;
+}
+img {
+    border: none;
+    font-style: italic;
+}
+input,
+select, option, optgroup,
+textarea {
+    font: inherit;
+}
+
+
+
+
+
+/*------------------------------------*\
+    $MAIN
+\*------------------------------------*/
+html {
+    background-color: #f6f9f9;
+    color: #95a4a9;
+    font: 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+body {
+    margin: 10%;
+}
+
+.avatar {
+    float: left;
+    margin: 0 40px 20px 0;
+}
+    .avatar img {
+        max-width: 200px;
+        max-height: 200px;
+        border-radius: 125px;
+    }
+
+.content {
+    float: left;
+    width: 300px;
+}
+    .title {
+        font-size: 48px;
+        font-weight: normal;
+        line-height: 1;
+    }
+
+    .social-icons li {
+        display: inline;
+    }
+        .social-icons a {
+            display: inline-block;
+            margin-right: 10px;
+            text-indent: -9999px;
+        }
+            .twitter {
+                background-image: url(../img/twitter.png);
+                width: 20px;
+                height: 17px;
+            }
+            .facebook {
+                background-image: url(../img/facebook.png);
+                width: 10px;
+                height: 19px;
+            }
+            .googleplus {
+                background-image: url(../img/googleplus.png);
+                width: 21px;
+                height: 19px;
+            }
+            .dribbble {
+                background-image: url(../img/dribbble.png);
+                width: 21px;
+                height: 19px;
+            }
+            .instagram {
+                background-image: url(../img/instagram.png);
+                width: 20px;
+                height: 19px;
+            }
+            .flickr {
+                background-image: url(../img/flickr.png);
+                width: 20px;
+                height: 9px;
+            }
+
+
+
+
+
+/*------------------------------------*\
+    $TYPOGRAPHY
+\*------------------------------------*/
+p,
+ul, ol, dl,
+.title {
+    margin-bottom: 20px;
+}
+p {
+    font-weight: bold;
+}
+ul, ol, dl {
+    list-style-type: none;
+}
+a {
+    color: #339999;
+    font-weight: bold;
+}
+a:hover, a:focus {
+    color: #95a4a9;
+    -webkit-transition: color 0.2s ease;
+    -moz-transition: color 0.2s ease;
+    -o-transition: color 0.2s ease;
+    -ms-transition: color 0.2s ease;
+    transition: color 0.2s ease;
+}
+
+
+
+
+
+
+
+/*------------------------------------*\
+    $MOBILE
+\*------------------------------------*/
+@media handheld, only screen and (max-width: 720px) {
+    .avatar,
+    .content {
+        float: none;
+
+    }
+
+    .avatar img {
+        max-width: 125px;
+        max-height: 125px;
+    }
+
+    .content {
+        width: 100%;
+    }
+}

Week-1/bio/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<title>Thomas Williams</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<link rel="stylesheet" href="css/style.css">
+
+		<!--[if lt IE 9]>
+			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+		<![endif]-->
+	</head>
+
+	<body class="animated bounceInDown">
+		<div class="avatar">
+			<img src="img/me2.jpg" alt="Avatar">
+		</div>
+
+		<div class="content">
+			<h1 class="title">Thomas<br>Williams</h1>
+
+			<p>
+				This is where I tell you how cool I am. All the things I like to do. And everything I've done.
+				I will tell you about my excellent life. Thank you for reading my wonderful bio.
+			</p>
+
+			<ul class="social-icons">
+				<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
+				<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
+				<li><a class="googleplus" href="#" title="Google+">Google+</a></li>
+				<li><a class="dribbble" href="#" title="Dribbble">Dribbble</a></li>
+				<li><a class="instagram" href="#" title="Instagram">Instagram</a></li>
+				<li><a class="flickr" href="#" title="Flickr">Flickr</a></li>
+			</ul>
+
+			<p>
+				<br>
+				<a href="#"></a><br>
+				<a href="">austincodingacademy.com</a>
+			</p>
+
+			<p>Want to send me a note? <a href="#">Email me</a>.</p>
+		</div>
+	</body>
+</html>

Week-1/resume/index.html

@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>Hello World!</title>
+  </head>
+
+  <body>
+    <header>
+      <h1>Thomas Williams</h1>
+      <h2>123 Testing Ave. Dallas, TX 75206 545-444-4444
+      </h2>
+    </header>
+    <section>
+      This is my main section where I will tell you how awesome my skills are.
+This is a my test change
+    </section>
+  </body>
+</html>

Week-2/Positioning/index.html

@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <link rel="text/css" href="css/stylesheet.css" />
+  </head>
+  <body>
+  <span class="title">
+    Box Positioning
+  </span>
+  <div class="box1" >Box 1 </div>
+  <div class="box2" >Box 2</div>
+  <div class="box3" > Box 3</div>
+  <div class="box4" ></div>
+  <div class="box5" ></div>
+  <div class="box6" ></div>
+
+  </body>
+</html>

Week-3/Team-Project-2-Box-Model/css/stylesheet.css

@@ -0,0 +1,91 @@
+
+.container {
+  height: 250px;
+  width: 400px;
+
+}
+.box1 {
+  background-color: black;
+  border: 1px black solid;
+  width: 150px;
+  height: 50;
+  padding-top: 10px;
+  padding-left: 10px;
+  margin: 10px;
+  font-weight: bold;
+  color: white;
+  float: left;
+}
+
+.box2 {
+  background-color: white;
+  border: 1px black solid;
+  width: 150px;
+  height: 50;
+  padding-top: 10px;
+  padding-left: 10px;
+  margin: 10px;
+  font-weight: bold;
+  color: black;
+  margin-left: 40px;
+  float: left;
+
+}
+.box3 {
+  background-color: black;
+  border: 1px black solid;
+  width: 150px;
+  height: 50;
+  padding-top: 10px;
+  padding-left: 10px;
+  margin: 10px;
+  font-weight: bold;
+  color: white;
+  margin-left: 70px;
+  float: left;
+  clear: left;
+  position: absolute;;
+  top: 50%;
+  left: 50%;
+}
+.box4 {
+  background-color: white;
+  border: 1px black solid;
+  width: 150px;
+  height: 50;
+  padding-top: 10px;
+  padding-left: 10px;
+  margin: 10px;
+  font-weight: bold;
+  color: black;
+  margin-left: 100px;
+  float: left;
+}
+.box5 {
+  background-color: black;
+  border: 1px black solid;
+  width: 150px;
+  height: 50;
+  padding-top: 10px;
+  padding-left: 10px;
+  margin: 10px;
+  font-weight: bold;
+  color: white;
+  margin-left: 130px;
+  float: left;
+  clear: left;
+
+}
+.box6 {
+  background-color: white;
+  border: 1px black solid;
+  width: 150px;
+  height: 50;
+  padding-top: 10px;
+  padding-left: 10px;
+  margin: 10px;
+  font-weight: bold;
+  color: black;
+  margin-left: 160px;
+  float: left;
+}

Week-3/Team-Project-2-Box-Model/index.html

@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="css/stylesheet.css" />
+  </head>
+  <body>
+  <span class="title">
+    Box Positioning
+  </span>
+  <div class="container">
+</div>
+  <div class="container">
+
+  <div class="box1" >Box 1 </div>
+  <div class="box2" >Box 2</div>
+  <div class="box3" > Box 3</div>
+  <div class="box4" > Box 4 </div>
+  <div class="box5" >Box 5</div>
+  <div class="box6" > Box 6</div>
+
+  </div>
+  </body>
+</html>