nfg_Day1

Day 1
<< main | course director notes

code <!doctype html>
 * 1. Basic HTML template**

code

code <!doctype html>
 * 2. Image and link**

 img{ border:none; }



code

code <!doctype html>
 * 3. grid example**

 body{ background:black; }

#container{ width:600px; height:600px; position:relative; margin:auto; border: 1px solid red; -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg);

}

.box{ width:200px; height:200px; position:absolute; overflow:visible; }

/* This is Row 1*/ #box1{ left:100px; top:0px; z-index:1; -moz-transform:rotate(30deg); -moz-border-radius:100px; background:purple; opacity:0.5; }

#box2{ left:200px; top:0px; background:gray; }

#box3{ left:400px; top:0px; background:purple; }

/* This is Row 2*/ #box4{ left:0px; top:200px; background:red; }

#box5{ left:200px; top:200px; background:purple; text-align:center; font-size:20px; font-weight:bold; z-index:1; }

#box6{ left:400px; top:200px; background:red; }

/* This is Row 3*/ #box7{ left:0px; top:400px; background:green; }

#box8{ left:200px; top:400px; background:red; }

#box9{ left:400px; top:400px; background:purple; }

code