Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Create demo index file, made some CSS tweaks and fixed some CSS bugs.

  • Loading branch information...
commit d26990ad614f8f1bcf3a21dba7a0a356760576a5 1 parent 9b53d05
@awayken authored
View
4 arresteddevelopment.css
@@ -0,0 +1,4 @@
+.arresteddevelopment { font-family: arial, sans-serif; font-size: 4em; letter-spacing: -.12em; text-transform: uppercase; color: black; text-align: center; clear: both; font-weight: bold; width: 8em; margin: 8px auto; }
+.arresteddevelopment .top span, .arresteddevelopment .bottom span { text-transform: lowercase; }
+.arresteddevelopment .top { display: block; position: relative; z-index: 1; }
+.arresteddevelopment .bottom { display: block; color: #F88228; margin-top: -.5em; }
View
4 backtothefuture.css
@@ -0,0 +1,4 @@
+.backtothefuture { background: #1F3777; color: silver; text-transform: uppercase; font-family: impact, sans-serif; font-size: 4em; width: 4em; margin: 0 auto; }
+.backtothefuture .top { display: block; }
+.backtothefuture .bottom { margin-top: -.4em; display: block; }
+.backtothefuture .bottom span { display: block; float: left; width: 1.5em; font-size: .4em; text-align: center; line-height: 1.1em; padding-top: .5em; }
View
2  greysanatomy.css
@@ -0,0 +1,2 @@
+.greysanatomy { text-transform: uppercase; color: #C8D2D4; font-size: 4em; font-family: impact, arial, sans-serif; width: 7em; margin: 8px auto; }
+.greysanatomy span { display: block; float: left; margin-top: -4px; margin-right: 6px; width: 2.7em; border-bottom: .18em solid #D21B17; line-height: .9em; }
View
79 index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>CSS Logos Demo</title>
+ <link rel="stylesheet" href="arresteddevelopment.css" />
+ <link rel="stylesheet" href="backtothefuture.css" />
+ <link rel="stylesheet" href="greysanatomy.css" />
+ <link rel="stylesheet" href="lost.css" />
+ <link rel="stylesheet" href="lotr.css" />
+ <link rel="stylesheet" href="theoffice.css" />
+ <link rel="stylesheet" href="projectrunway.css" />
+ <link rel="stylesheet" href="rushmore.css" />
+ <link rel="stylesheet" href="studio60.css" />
+ <link rel="stylesheet" href="westwing.css" />
+ </head>
+ <body>
+ <h1>CSS Logos</h1>
+
+ <p>Below are some logos that I tried to redo in pure CSS. They are pretty simple, but it was a fun exercise.</p>
+
+ <div class="arresteddevelopment">
+ <span class="top">Arr<span>e</span>st<span>e</span>d</span>
+ <span class="bottom">D<span>e</span>v<span>e</span>lopm<span>e</span>nt</span>
+ </div>
+
+ <div class="backtothefuture">
+ <span class="top">Back&laquo;&laquo;&laquo;</span>
+ <span class="bottom"><span>to the</span> Future</span>
+ </div>
+
+ <div class="greysanatomy">
+ <span>Grey's</span> Anatomy
+ </div>
+
+ <div class="lost">
+ Lost
+ </div>
+
+ <div class="lotr">
+ <span class="top">The Lord of the Rings</span>
+ <span class="middle"><span>The</span> <b>F</b>ellowshi<b>p</b></span>
+ <span class="bottom"><span>of the</span> Ring</span>
+ </div>
+
+ <div class="theoffice">
+ The Office
+ </div>
+
+ <div class="projectrunway">
+ Project <span>Runway</span>
+ </div>
+
+ <div class="rushmore">
+ <span>R</span>
+ <span>u</span>
+ <span>s</span>
+ <span>h</span>
+ <span>m</span>
+ <span>o</span>
+ <span>r</span>
+ <span>e</span>
+ </div>
+
+ <div class="studio60">
+ <span class="top">
+ Studio <span>60</span>
+ </span>
+ <span class="bottom">
+ on the Sunset Strip
+ </span>
+ </div>
+
+ <div class="westwing">
+ <span class="top">The</span> <span class="bottom">West Wing</span>
+ </div>
+
+ </body>
+</html>
View
1  lost.css
@@ -0,0 +1 @@
+.lost { text-transform: uppercase; color: #89A6AC; letter-spacing: .01em; font-size: 4em; text-align: center; font-family: impact, arial, sans-serif; width: 4em; margin: 8px auto; }
View
7 lotr.css
@@ -0,0 +1,7 @@
+.lotr { font-variant: small-caps; background: #423F3A; font-family: "times new roman", serif; color: #F5F39E; font-size: 4em; width: 6em; margin: 0 auto; }
+.lotr .top { font-size: .4em; display: block; padding-left: 3em; }
+.lotr .middle { display: block; margin-top: -.4em; }
+.lotr .middle span { font-size: .3em; display: block; float: left; padding-top: 1em; padding-left: .5em; }
+.lotr .middle b { font-weight: normal; text-transform: uppercase; }
+.lotr .bottom { display: block; margin-top: -.4em; }
+.lotr .bottom span { border: 2px solid #F5F39E; border-left: none; border-right: none; font-size: .5em; display: block; float: left; line-height: .8em; margin: .4em .2em 0 2em; }
View
2  projectrunway.css
@@ -0,0 +1,2 @@
+.projectrunway { font-size: 4em; text-transform: lowercase; font-family: "trebuchet ms", sans-serif; color: black; width: 4em; margin: 8px auto; }
+.projectrunway span { text-transform: uppercase; background: black; color: white; display: block; width: 4em; text-align: center; }
View
2  rushmore.css
@@ -0,0 +1,2 @@
+.rushmore { font-size: 4em; font-family: arial, sans-serif; color: #EEAF07; text-transform: uppercase; height: 1.4em; text-align: center; width: 11em; margin: 8px auto; }
+.rushmore span { display: inline-block; margin: 0 .02em; background: #600; padding: .08em; }
View
4 studio60.css
@@ -0,0 +1,4 @@
+.studio60 { background: black; color: white; text-transform: uppercase; font-size: 4em; font-family: arial, sans-serif; width: 8em; padding: .4em; margin: 8px auto; }
+.studio60 .top { position: relative; width: 5.2em; border: .04em solid #FF9A00; font-weight: bold; display: block; margin: 0 auto; padding-left: .1em; }
+.studio60 .top span { position: absolute; top: 0; right: 0; background: #FF9A00; color: black; display: block; text-align: center; padding: 0 .1em; }
+.studio60 .bottom { display: block; font-size: .25em; text-align: right; font-weight: normal; margin: 0 auto; padding: .6em 6em; }
View
1  theoffice.css
@@ -0,0 +1 @@
+.theoffice { font-family: "courier new", monospace; text-transform: lowercase; font-size: 4em; color: black; letter-spacing: -.05em; text-align: center; width: 6em; margin: 8px auto; }
View
3  westwing.css
@@ -0,0 +1,3 @@
+.westwing { font-size: 4em; color: silver; background: #003; text-align: center; font-family: "trajan pro", "times new roman", serif; text-transform: uppercase; letter-spacing: .1em; width: 9em; margin: 8px auto; }
+.westwing .top { display: block; margin: 0 auto; background: #003; font-size: .5em; margin-bottom: -.4em; position: relative; z-index: 2; width: 2.8em; }
+.westwing .bottom { border-top: 2px solid silver; }
Please sign in to comment.
Something went wrong with that request. Please try again.