AussieTheatre Logo

In this example below you will see how to do a AussieTheatre Logo with some HTML / CSS and Javascript

The Logo of AussieTheatre.com in CSS

Thumbnail
This awesome code was written by mtedwards, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mtedwards ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>AussieTheatre Logo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="logo">
  <span class="a">a</span>
  <span class="t">t</span>  
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mtedwards/aussietheatre-logo-hsvDi */
body {
  font-family: baskerville;
  font-size:320px;
  font-weight: 100;
  position:relative;
  background-postition:5
  color:#333;
}

.logo {
  //background:url('https://dl.dropbox.com/u/1488103/logo-at.jpg') no-repeat;
  width:250px;
  height:250px;
  line-height:150px;
  text-align:center;
  border-radius:150px; 
  background:#333;
  background-color: #222222;
  background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgb(68, 68, 68)), to(rgb(34, 34, 34)));
  background-image: -webkit-radial-gradient(50% 50%, rgb(34, 34, 34), rgb(68, 68, 68));
  background-image: -moz-radial-gradient(50% 50%, rgb(34, 34, 34), rgb(68, 68, 68));
  background-image: -o-radial-gradient(50% 50%, rgb(34, 34, 34), rgb(68, 68, 68));
  background-image: -ms-radial-gradient(50% 50%, rgb(34, 34, 34), rgb(68, 68, 68));
  background-image: radial-gradient(50% 50%, rgb(34, 34, 34), rgb(68, 68, 68));
  border:1px solid #333;
}

.a, .t {
 // opacity:0.5;
  display:block;
  position: absolute;
  top:6%;
}

.a {
  color: #fff;
  left:20px;
}

.t {
  color: #29a3cc;
  left:125px;
}

Comments