Skip to content

Instantly share code, notes, and snippets.

@yicui

yicui/assignments.html

Last active December 11, 2015 11:58
Show Gist options
  • Save yicui/4597504 to your computer and use it in GitHub Desktop.
Save yicui/4597504 to your computer and use it in GitHub Desktop.
Download ZIP
A simple static website with unified styling. The placeholder text is created by a Lorem Ipsum generator (http://www.lipsum.com/). The icon used in the navigation bar is provided by http://glyphicons.com/
Raw
assignments.html
<!DOCTYPE html>
<html>
<head>
<title>Web Development: Assignments</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web development, styling, assignments" />
<meta name="description" content="Assignments of the web development course" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var defaultbackground;
$(".editinplace span").hover(function(){
defaultbackground = $(this).css("background"); $(this).css("background", "yellow");}, function() {
$(this).css("background", defaultbackground);
});
$(".editinplace span").click(function() {
$(this).parent().children(":text").val($(this).text());
$(this).parent().children().toggle();
});
$(".editinplace [value='Save']").click(function() {
$(this).parent().children("span").text($(this).parent().children(":text:first").val());
$(this).parent().children().toggle();
});
$(".editinplace [value='Cancel']").click(function() {
$(this).parent().children().toggle();
});
$(".accordion").accordion();
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1><span></span>Special Topics on Web Development</h1>
<h3>Lecturer: <span class="tooltip">Yi Cui<span><a href="https://github.com/yicui">Github Repository</a></span></span></h3>
<h3 id="mobilenavigation"><a href="#navigation">Navigate</a></h3>
</div>
<div id="navigation">
<ul>
<li><a href="syllabus.html">Syllabus</a></li>
<li><a href="lectures.html">Lecture Notes</a></li>
<li><a href="assignments.html">Assignments</a></li>
</ul>
</div>
<div id="content">
<h2>Assignments</h2>
<div class="accordion">
<h3>Assignment 1</h3>
<div>
<h5>Due Date
<span class="editinplace">
<span>02/07/2012</span>
<input type="text" class="datepicker"/><input type="button" value="Save"/>
<input type="button" value="Cancel"/>
</span>
</h5>
<p>urna orci, volutpat nec pretium vitae, tincidunt ut arcu. In vestibulum nulla sit amet libero vulputate egestas.</p>
</div>
<h3>Assignment 2</h3>
<div>
<h5>Due Date
<span class="editinplace">
<span>02/21/2012</span>
<input type="text" class="datepicker"/><input type="button" value="Save"/>
<input type="button" value="Cancel"/>
</span>
</h5>
<p>Aenean nulla dolor, ornare ac eleifend vel, varius ac tortor. Quisque placerat auctor justo, eu dignissim elit sagittis vel.</p>
</div>
<h3>Assignment 3</h3>
<div>
<h5>Due Date
<span class="editinplace">
<span>03/07/2012</span>
<input type="text" class="datepicker"/><input type="button" value="Save"/>
<input type="button" value="Cancel"/>
</span>
</h5>
<p>Maecenas consequat rhoncus velit, nec congue arcu vehicula vel. Vestibulum vel tellus elit, et sagittis neque.</p>
</div>
<h3>Assignment 4</h3>
<div>
<h5>Due Date
<span class="editinplace">
<span>03/21/2012</span>
<input type="text" class="datepicker"/><input type="button" value="Save"/>
<input type="button" value="Cancel"/>
</span>
</h5>
<p>Ut commodo ante at sem congue condimentum. Sed sed est turpis. Sed ut tortor neque. Morbi id metus sed dui iaculis volutpat gravida blandit elit.</p>
</div>
</div>
</div>
<div id="pushdown"></div>
</div>
<div id="footer">
<a href="#">About</a> - <a href="contactus.html">Contact Us</a> - <a href="#">Terms of Use</a>
</div>
</body>
</html>
Raw
contactus.html
<!DOCTYPE html>
<html>
<head>
<title>Web Development: Lectures</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web development, styling, lectures" />
<meta name="description" content="Lectures of the web development course" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://raw.github.com/jbdemonte/gmap3/master/gmap3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var lightbox = $("<img/>").attr({src:$(".lightbox").attr("href"), title:$(".lightbox").attr("title")}).dialog({ autoOpen: false });
$(".lightbox").click(function() {
lightbox.dialog("open");
return false;
});
var params = $("#map").attr("src").split('&');
var addr = {"address":""};
var zoom = {"maxZoom":10};
for (var i = 0; i < params.length; i++) {
var pair = params[i].split('=');
if (pair[0] == "markers" && pair[1].split(':')[0] == "address")
addr.address = decodeURIComponent(pair[1]).split(':')[1];
if (pair[0] == "zoom" || pair[0] == "maxZoom")
zoom.maxZoom = pair[1];
}
$('#map').replaceWith($("<div></div>").width("400px").height("250px").css({"margin":"auto"}).gmap3({
map:{options:zoom}, marker:addr}, "autofit" ));
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1><span></span>Special Topics on Web Development</h1>
<h3>Lecturer: <span class="tooltip">Yi Cui<span><a href="https://github.com/yicui">Github Repository</a></span></span></h3>
</div>
<div id="navigation">
<ul>
<li><a href="syllabus.html">Syllabus</a></li>
<li><a href="lectures.html">Lecture Notes</a></li>
<li><a href="assignments.html">Assignments</a></li>
</ul>
</div>
<div id="content">
<h2>Contact Us</h2>
<p class="contactinfo">Send me an <a href="mailto:yicui2004@gmail.com?subject=Hello">Email</a></p>
<a class="lightbox" href="https://secure.gravatar.com/avatar/d0907d511f4560ebea7eee262068226b?s=400" title="Full-size Portrait">
<img src="https://secure.gravatar.com/avatar/d0907d511f4560ebea7eee262068226b?s=200" alt="portrait"/>
</a>
<p class="contactinfo">My office is at FGH 379, 400 24th Ave S, Nashville, TN 37212</p>
<img id="map" src="http://maps.googleapis.com/maps/api/staticmap?size=400x250&markers=address:400%2024th%20Ave%20S,%20Nashville,%20TN%2037212&maxZoom=17&sensor=false"/>
</div>
<div id="pushdown"></div>
</div>
<div id="footer">
<a href="#">About</a> - <a href="contactus.html">Contact Us</a> - <a href="#">Terms of Use</a>
</div>
</body>
</html>
Raw
lectures.html
<!DOCTYPE html>
<html>
<head>
<title>Web Development: Lectures</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web development, styling, lectures" />
<meta name="description" content="Lectures of the web development course" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header">
<h1><span></span>Special Topics on Web Development</h1>
<h3>Lecturer: <span class="tooltip">Yi Cui<span><a href="https://github.com/yicui">Github Repository</a></span></span></h3>
<h3 id="mobilenavigation"><a href="#navigation">Navigate</a></h3>
</div>
<div id="navigation">
<ul>
<li><a href="syllabus.html">Syllabus</a></li>
<li><a href="lectures.html">Lecture Notes</a></li>
<li><a href="assignments.html">Assignments</a></li>
</ul>
</div>
<div id="content">
<h2>Lecture Notes</h2>
<p>
Lorem ipsum dolor sit amet, <span class="tooltip">consectetur<span>This is a toolbox</span></span> adipiscing elit. Etiam et nisi eu elit elementum vestibulum sit amet vitae urna.
Quisque sapien leo, mollis vitae pellentesque sit <span class="tooltip">amet<span>This is a toolbox</span></span>, semper sit amet nulla. Quisque ornare nisi magna. Donec et pretium purus.
Nunc tincidunt consectetur auctor. Nullam a ligula eget mi dignissim condimentum. In iaculis diam in ligula euismod non tristique turpis cursus.
Sed eget odio laoreet lacus scelerisque feugiat pulvinar eu arcu. Nam lobortis mauris massa. Ut sed nisi elit, et sagittis sem. Phasellus id volutpat tortor.
Curabitur aliquam, urna nec tincidunt ornare, ipsum lectus vulputate nunc, in varius risus odio nec orci. Fusce laoreet adipiscing elit eu dictum.
Nunc et aliquam nisl. Ut dignissim gravida lorem eget fermentum.
</p>
</div>
<div id="pushdown"></div>
</div>
<div id="footer">
<a href="#">About</a> - <a href="contactus.html">Contact Us</a> - <a href="#">Terms of Use</a>
</div>
</body>
</html>
Raw
style.css
* {
margin:0;
padding:0;
}
body{
width:800px;
margin:auto;
font-family:Arial, helvetica, Verdana, San-Serif;
font-size:20px;
}
html, body {
height:100%;
}
h1 {
font-size:2em;
}
p {
text-indent:2.5em;
font-size:0.875em;
}
#container {
min-height:100%;
margin-bottom:-30px;
}
#header {
text-align:center;
background-image:-webkit-linear-gradient(90deg, red, white);
background-image:-moz-linear-gradient(90deg, red, white);
background-image:-o-linear-gradient(90deg, red, white);
}
#mobilenavigation {
display:none;
}
#navigation {
background-color:green;
border-radius:15px;
}
#navigation ul {
text-align:center;
}
#navigation li {
display:inline;
padding-left:1.5em;
}
#navigation li:hover {
background:url(https://dl.dropbox.com/u/101451130/glyphicons_065_tag.png) no-repeat left;
}
#navigation a:active {
background-color:purple;
}
#content {
background-image:-webkit-radial-gradient(grey, white);
background-image:-moz-radial-gradient(grey, white);
background-image:-o-radial-gradient(grey, white);
}
#content img{
display:block;
margin:auto;
}
.tooltip {
position:relative;
box-shadow:5px 5px 3px;
}
.tooltip span {
display:none;
position:absolute;
left:0;
top:100%;
white-space:nowrap;
font-size:1rem;
font-weight:normal;
text-indent:0;
padding:0.5rem;
background:pink;
}
.tooltip:hover span {
display:block;
}
.editinplace input {
display:none;
}
.contactinfo {
text-align:center;
}
#pushdown {
clear:both;
height:30px;
}
#footer {
background-color:orange;
text-align:center;
height:30px;
}
@media screen and (max-device-width:800px) {
body{
width:400px;
}
#mobilenavigation {
display:block;
}
#navigation {
display:none;
position:absolute;
z-index:9999;
left: 10%;
right: 10%;
}
#navigation:target {
display:block;
}
#navigation li {
list-style-type:none;
padding-top:0.5em;
display:block;
padding-left:1.5em;
}
}
Raw
syllabus.html
<!DOCTYPE html>
<html>
<head>
<title>Web Development: Syllabus</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web development, styling, syllabus" />
<meta name="description" content="Syllabus of the web development course" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header">
<h1><span></span>Special Topics on Web Development</h1>
<h3>Lecturer: <span class="tooltip">Yi Cui<span><a href="https://github.com/yicui">Github Repository</a></span></span></h3>
<h3 id="mobilenavigation"><a href="#navigation">Navigate</a></h3>
</div>
<div id="navigation">
<ul>
<li><a href="syllabus.html">Syllabus</a></li>
<li><a href="lectures.html">Lecture Notes</a></li>
<li><a href="assignments.html">Assignments</a></li>
</ul>
</div>
<div id="content">
<h2>Syllabus</h2>
<p>
Nam orci mi, cursus id facilisis sit amet, viverra vitae leo. Vestibulum fermentum condimentum enim, in feugiat nibh luctus et.
Curabitur sem nibh, sodales vitae ultrices non, facilisis et turpis. Nunc blandit nunc nec mauris ultricies consectetur. Aliquam ac dui nisi.
Quisque pellentesque neque venenatis purus elementum vel mattis quam rhoncus. Duis tincidunt placerat erat non cursus. In eu mauris id nulla euismod blandit.
Sed gravida sodales ligula, sed pharetra massa elementum vitae. Sed vitae diam est. Maecenas orci mi, aliquet vulputate laoreet non, interdum non lorem.
Vestibulum ligula quam, tincidunt eu tincidunt non, malesuada vitae velit. Pellentesque eu urna velit, eu viverra sapien. Duis tristique vestibulum vulputate.
Nulla facilisi. Vivamus urna quam, hendrerit quis semper in, sollicitudin sit amet justo.
</p>
</div>
<div id="pushdown"></div>
</div>
<div id="footer">
<a href="#">About</a> - <a href="contactus.html">Contact Us</a> - <a href="#">Terms of Use</a>
</div>
</body>
</html>
@yicui
Copy link
Author

yicui commented Jan 22, 2013

Original Gist: paddings & margins reset for all elements, and main divisions colored
1st Revision: two-column layout created with the navigation bar on the left
2nd Revision: layout as well as title & footer texts aligned to the center, navigation list style cleared
3rd Revision: sticky & clean footer
4th Revision: navigation bar turned horizontal and its list items aligned to the center
5th Revision: default font family & size set, as well as the font sizes of <h1> and <p> & text indent of <p>
6th Revision: background image set for the content division
7th Revision: gradient text effect applied to header
8th Revision: hover & active pseudo classes added to the navigation bar
9th & 10th Revisions: tooltips added to the header subtitle and content area of lectures.html
11th Revision: navigation bar turned to dropdown menu to fit mobile devices
12th Revision: media queries added to make the stylesheet fit both mobile and desktop screens
13th Revision: CSS3 features, i.e., linear gradient applied to the header, radial gradient applied to the content division, rounded border applied to the navigation bar, shadow box applied to tooltips
14th Revision: Edit-in-place in barebone Javascript
15th Revision: Edit-in-place rewritten in jQuery
16th Revision: Accordion in jQuery
17th Revision: Accordion and Datepicker in jQuery UI
18th Revision: Contact us page addded featuring lightbox & google map plugin based on jQuery
19th Revision: Lightbox & google map plugin revised for unobtrusiveness
20th Revision: Edit-in-place revised for unobtrusiveness

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment