JSFiddle - React, Tailwind, and code Playground
by eleventhend
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Modified from the original Released for free under a Creative Commons
Attribution 2.5 License A two-column fixed-width website. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Dicks & Janes Acappella</title>
<meta name="keywords" content="" />
<meta name="description" content="University of Michigan Dicks and Janes Co-Ed Acappella"
/>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="page">
<div id="page-bgtop">
<div id="content2">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);
});
$(function handleResize() {
var slideshowElement = document.getElementById("slideshow");
slideshowElement.style.height = (slideshowElement.Width * .75) + "0";
})
</script>
<div id="slideshow">
<div>
<img...CSS
/*
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
margin-top: 40px;
background: #1A1A1A url("images/darklinenfinal.jpg") repeat left top scroll;
;
/*
original #1A1A1A
test: #5C5C5C
*/
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #CCC;
}
h1, h2, h3 {
color: #AA2808;
}
h1 {
}
h2 {
}
h3 {
}
p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}
p {
}
blockquote {
}
ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}
a {
text-decoration: underline;
color: #D65600;
}
a:hover {
text-decoration: none;
color: #838383;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header {
width: 70%;
height: 91px;
margin: 0 auto;
}
/* Logo */
#logo {
float: right;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px 0px;
}
#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}
#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}
#logo a {
text-decoration: none;
color: #F0F0F0;
}
/* Slideshow */
#slideshow {
margin: 50px auto;
position: relative;
width: 80%;
height: 500px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
/* Menu */
#menu {
width: 70%;
height: 60px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 20px 0 0 0px;
list-style: none;
line-height: normal;
margin-left: 0px;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float:...