Skip to content

Instantly share code, notes, and snippets.

@lukasborawski
Created January 12, 2012 11:25
Show Gist options
  • Save lukasborawski/1599960 to your computer and use it in GitHub Desktop.
Save lukasborawski/1599960 to your computer and use it in GitHub Desktop.
QDO Ventures Pure CSS Logo
<!DOCTYPE html>
<html>
<head>
<title>QDO Ventures - Pure CSS Logo</title>
<link rel="stylesheet" href="style.css"/>
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8" data-count="1">
</head>
<body>
<header>
<h1>QDO Ventures Pure CSS Logo</h1>
</header>
<section>
<div class="Q">
<div class="q1 border_radius"></div>
<div class="q2 border_radius"></div>
<div class="q3"></div>
</div>
<div class="D">
<div class="d1 border_radius"></div>
<div class="d2 border_radius"></div>
<div class="d3"></div>
</div>
<div class="O">
<div class="o1 border_radius"></div>
<div class="o2 border_radius"></div>
</div>
</section>
<footer>
<p>by Lukasz Borawski / <a href="" target="_blank">download source</a></p>
</footer>
</body>
</html>
body {
margin: 0;
font-weight: normal;
font-size:22px;
width: 100%;
background: #fff;
}
.border_radius {
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-o-border-radius: 200px;
}
header {
width: 900px;
margin: 0 auto;
text-align: center;
}
header h1 {
font-family: 'Alfa Slab One', cursive;
color: #f25a27;
}
section {
width: 960px;
margin: 0 auto;
padding-top:50px;
padding-left: 185px;
}
section .Q, section .D, section .O {
width: 320px;
height: 320px;
position: relative;
display: inline-block;
overflow: visible;
z-index: 97;
}
section .Q .q1, section .D .d1, section .O .o1 {
position: absolute;
width:280px;
height: 280px;
background-color: #58595a;
border: 20px solid #fff;
z-index: 98;
outline: 0 none;
background-clip: padding-box; /* opera border bug solution */
}
section .Q .q2, section .D .d2, section .O .o2 {
position: absolute;
width: 180px;
height: 180px;
background-color: #fff;
z-index: 99;
vertical-align: middle;
top: 70px;
left: 70px;
}
section .Q .q3 {
height: 50px;
width: 100px;
background-color: #58595a;
position: absolute;
z-index: 100;
bottom: 90px;
right: 65px;
-webkit-transform: rotate(40deg) scale(1);
-moz-transform: rotate(40deg) scale(1);
-o-transform: rotate(40deg) scale(1);
-ms-transform: rotate(40deg) scale(1);
}
section .D, section .O {
z-index: 96;
margin-left: -100px;
}
section .D .d1 {
background-color: #818285;
}
section .D .d3 {
border-right: 20px solid #fff;
height: 200px;
width: 50px;
background-color: #818285;
position: absolute;
right: 0;
top:-45px;
z-index: 101;
}
section .O {
z-index: 95;
}
section .O .o1 {
background-color: #a8a9ac;
}
footer {
width:710px;
margin: 0 auto;
position: relative;
}
footer p {
font-family: 'Alfa Slab One', cursive;
position: absolute;
right:0;
font-size: 12px;
color: #ccc;
font-weight: normal;
}
footer p a {
color: #ddd;
text-decoration: none;
}
footer p a:hover {
color: #f25a27;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment