Ebay-Google Font design using CSS

A simple way to generate the eBay and Google logo using css

HTML

<span class="logo-ebay">
    <span class="ebay-e">e</span><span class="ebay-b">b</span><span class="ebay-a">a</span><span class="ebay-y">y</span></span><span>
        
    </span>
<br><br>
<span class="google-logo">
    <span class="google-G">M</span><span class="google-o1">o</span><span class="google-o2">o</span><span class="google-g">g</span><span class="google-l">l</span><span class="google-e">e</span>
    </span>

CSS

.logo-ebay { 
	font-family: Helvetica,Sans-serif;
    font-size: 50px;
    letter-spacing: -4px;
}
.ebay-e { color: #CC0000; }
.ebay-b { color: #0000FF; }
.ebay-a { color: #FFA500; }
.ebay-y { color: #008000; }

@-moz-font-face{ font-family: Catull; src: url(../font/Catull.ttf); font-weight:400; }
@-webkit-font-face{ font-family: Catull; src: url(../font/Catull.ttf); font-weight:400; }
@-o-font-face{ font-family: Catull; src: url(../font/Catull.ttf); font-weight:400; }
@-ms-font-face{ font-family: Catull; src: url(../font/Catull.ttf); font-weight:400; }
@font-face{ font-family: Catull; src: url(../font/Catull.ttf); font-weight:400; }

.google-logo {
	font-family: Catull,Sans-Serif;
    font-size: 50px;
}
.google-G { color:#0047F1; }
.google-o1 { color:#DD172C; }
.google-o2 { color:#F9A600; }
.google-g { color:#0047F1; }
.google-l { color:#00930E; }
.google-e { color:#E61B31; }