Skip to content

Instantly share code, notes, and snippets.

@A-J-C

A-J-C/index.html

Created May 30, 2013 20:34
Show Gist options
  • Save A-J-C/5680958 to your computer and use it in GitHub Desktop.
Save A-J-C/5680958 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Alex C.
Raw
index.html
<!DOCTYPE>
<html>
<head>
<title>My Website</title>
</head>
<body>
<div id = "container">
<h1>Welcome to My Website</h1>
<div id="left">
<h3>Completed Tracks:</h3>
<ul>
<li>JavaScript</li>
<li>Web</li>
<li>jQuery</li>
<li>Python</li>
<li>API's</li>
<li>Projects</li>
<li>MultiMedia</li>
</ul>
</div>
<div id="middle">
<h3>Completed Non Track Material:</h3>
<ul>
<li>Python</li>
<li>Almost all JavaScript</li>
<li>Almost all Web</li>
</ul>
</div>
<div id="right">
<h3>JS Left:</h3>
<ul>
<li><a href="http://www.codecademy.com/courses/javascript-beginner-en-jJ4wD/0/1">Challenges</a></li>
<li><a href="http://www.codecademy.com/courses/javascript-intermediate-en-BNaTs/0/1">More Challenges</a></li>
<li><a href="http://www.codecademy.com/courses/broken-calculator/0/5">Broken Calculator</a></li>
</ul>
</div>
</div>
</body>
</html>
Raw
style.css
#container{background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
padding:1px;
border-radius:10px;
width:710px;
height:400px;
}
body{}
h1{border:groove white 1px;
border-radius:10px;
padding:2px;
width:350px;
text-align:center;
position:center;
color:#CCFF99;
margin:1em;
margin-left:150px;}
h3{border:outset white 1px;border-radius:15px;width:200px;text-align:center;color:#CAE8E8}
#left
{
float: left;
width: 235px;
display: inline;
margin-left:5px;
}
#middle
{
float: left;
width: 235px;
}
#right
{
float: right;
width: 235px;
display: inline;
}
li {color:#F0EFAA}
a {color:#F0EFAA;text-decoration:none;}
a:hover{color:#F57A3D}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment