Skip to content

Instantly share code, notes, and snippets.

View clhenrick's full-sized avatar

Chris Henrick clhenrick

264 followers · 186 following
View GitHub Profile
@clhenrick
clhenrick / index.html
Last active August 29, 2015 14:04
mfa bootcamp day 3 demo code: more selectors
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CSS Selectors</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height, width: 100%;
}
@clhenrick
clhenrick / index.html
Created July 31, 2014 16:28
mfa bootcamp day 4 demo code: positioning and sizing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Day 04</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="box box1">
@clhenrick
clhenrick / index.html
Created August 1, 2014 17:18
mfa bootcamp web day 5 in-class code
<!doctype HTML>
<html>
<!-- the head contains things such as our meta information, title and external links. Nothing visible in the browser's viewport goes in here -->
<head>
<!-- telling the browser what character encoding we are using. super important. -->
<meta charset="utf-8">
<!-- the title will show up in the browser's tab -->
@clhenrick
clhenrick / index.html
Last active August 29, 2015 14:04
mfa dt bootcamp web class css positioning example 1: static
<!DOCTYPE html >
<html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<head>
<meta charset="utf-8">
<title>Boxes positioned static</title>
<style>
body{
height: 100%;
@clhenrick
clhenrick / index.html
Created August 1, 2014 19:21
mfa dt bootcamp web class css positioning example 2: relative
<!DOCTYPE html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<html>
<head>
<meta charset="utf-8">
<title>Boxes positioned relative</title>
<style>
.box {
position: relative; /* positioning our boxes relative */
@clhenrick
clhenrick / index.html
Last active August 29, 2015 14:04
mfa dt bootcamp web class css positioning example 3: relative with child
<!doctype html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>box inside a box positioned relative</title>
<style>
/* CSS hasn't changed! */
.box {
@clhenrick
clhenrick / index.html
Last active August 29, 2015 14:04
mfa dt bootcamp web class css positioning example 4: absolute
<!DOCTYPE html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<html>
<head>
<meta charset="utf-8">
<title>Example E</title>
<style>
h1, h3, div {
z-index: 10;
@clhenrick
clhenrick / index.html
Last active August 29, 2015 14:04
mfa dt bootcamp web class css positioning example 5: absolute with Children
<!DOCTYPE html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<html>
<head>
<meta charset="utf-8">
<title>Example F</title>
<style>
h1, h3, div {
z-index: 10;
@clhenrick
clhenrick / index.html
Last active August 29, 2015 14:04
mfa dt bootcamp web class css positioning example 6: stretching block elements using position absolute & offset
<!DOCTYPE html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<html>
<head>
<meta charset="utf-8">
<title>Boxes positioned absolute and streched out</title>
<style>
h1, h3 {
z-index: 10;
@clhenrick
clhenrick / index.html
Created August 1, 2014 19:25
mfa dt bootcamp web class css positioning example 7: using absolute positioning to make a two column layout
<!DOCTYPE html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<html>
<head>
<meta charset="utf-8">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example H</title>
<style>