lukasborawski · January 12, 2012 11:25
diff --git a/index.html b/index.html
 <!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>
diff --git a/style.css b/style.css
 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;
                }
	<!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;
	}