Skip to content

Instantly share code, notes, and snippets.

View WebsiteStudents's full-sized avatar

WebsiteStudents WebsiteStudents

View GitHub Profile
@WebsiteStudents
WebsiteStudents / CSS for alternating row colors
Created March 19, 2013 17:04
CSS code to create alternative background colors in our table. Paste this after the /* INSERT PSEUDO-CLASS CODE BELOW */ comment.
/* CHANGE BACKGROUND FOR ALTERNATING ROWS */
.maincontainer table.zebra tr:nth-child(2n+2) {
background-color: #B9D9F0;
}
@WebsiteStudents
WebsiteStudents / Table with content
Created March 19, 2013 17:02
Plain table with content. Copy this code and create a new HTML file that contains only this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table</title>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
@WebsiteStudents
WebsiteStudents / html-elements
Created February 18, 2013 22:55
This is the raw code for the HTML Elements (block-level and inline) exercise. Grab this code and paste it into a new HTML document. Then it is up to you to create CSS rules inside the existing code (we provide a wide variety of empty CSS rules) to see how different HTML elements respond to your CSS styles.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML Elements</title>
<style type="text/css">
@WebsiteStudents
WebsiteStudents / nav-button-active
Last active December 13, 2015 21:48
CSS code for the "active state" of our nav button.
.grissompage .mainnav ul li.grissom a {
background: url("images/nav-icon.png") no-repeat scroll 2% 50% rgba(0, 0, 0, 1);
color: #FFF;
}
@WebsiteStudents
WebsiteStudents / header-include-call
Created February 18, 2013 02:32
Code for the index.shtml file that will call the 'header' include file.
<!--#include file="i_header.html" -->
@WebsiteStudents
WebsiteStudents / week-5-source-code
Last active December 12, 2015 10:29
Week 5 source code - all the HTML and CSS ready to begin work. This does not include the completed exercises for Week 5 - this is the code that begins the exercise. Copy and paste this into a new HTML document to begin.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Apollo 1 Tragedy - Week 5</title>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
@WebsiteStudents
WebsiteStudents / section-transition
Last active December 12, 2015 10:29
Use this code to add a little transformation to the crew sections. Copy this code and replace the /* PASTE SECTION-GRISSOM TRANSITION CODE HERE */ comment in your CSS code.
.crew .crew.grissom {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
@WebsiteStudents
WebsiteStudents / nav-icon-trickery
Created February 11, 2013 23:05
Display an icon in our nav button with a bit of CSS trickery. Use this code to replace the /* NAV BUTTON STYLE - ICON TRICKERY CODE */ comment in the CSS code.
.mainnav ul li.grissom {
background: url("images/nav-icon.png") no-repeat scroll 2% 50% rgba(240, 240, 220, 1);
}
.mainnav ul li.grissom a {
background: rgba(240, 240, 220, .95);
}
.mainnav ul li.grissom:hover {
background: url("images/nav-icon.png") no-repeat scroll 2% 50% rgba(51, 102, 204, 1);
}
.mainnav ul li.grissom a:hover {
@WebsiteStudents
WebsiteStudents / nav-transition
Created February 11, 2013 21:49
Use this code to add a subtle, little transition to the hover state of your nav button. Use this code to replace the /* NAV BUTTON STYLE - HOVER TRANSITION */ comment inside the CSS code.
.mainnav ul li.grissom a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
@WebsiteStudents
WebsiteStudents / nav-hover
Last active December 12, 2015 10:08
Code to add a "hover state" to our first nav button. Use this to replace the /* NAV BUTTON STYLE - HOVER STATE CODE */ comment in the CSS code.
.mainnav ul li.grissom a:hover {
background: rgba(51,102,204,1);
}