227 lines
5.4 KiB
HTML
227 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
|
<title>CSS3 Fedora Logo</title>
|
||
|
<style type="text/css">
|
||
|
/**
|
||
|
* Fedora CSS3 Logo
|
||
|
* Copyright (C) 2012 Red Hat, Inc.
|
||
|
* Original CSS3 code created by Daniel Rodríguez
|
||
|
* http://sadasant.com/
|
||
|
*
|
||
|
* Fedora®, the Fedora word design, and the Infinity
|
||
|
* design logo, either separately or in combination,
|
||
|
* are hereinafter referred to as "Fedora Trademarks"
|
||
|
* and are trademarks of Red Hat, Inc., registered in
|
||
|
* the United States and other countries.
|
||
|
*
|
||
|
* For licensing terms on this file, see: COPYING (as
|
||
|
* included with the fedora-logos source)
|
||
|
*/
|
||
|
|
||
|
div {
|
||
|
background: #fff;
|
||
|
margin: 50px auto;
|
||
|
}
|
||
|
|
||
|
#fedora {
|
||
|
background: #294172;
|
||
|
width: 196px;
|
||
|
height: 196px;
|
||
|
-moz-border-radius: 150px 150px 150px 30px;
|
||
|
border-radius: 150px 150px 150px 30px;
|
||
|
box-shadow: 0 5px 10px rgba(0,0,0,.3);
|
||
|
}
|
||
|
|
||
|
#fedora:before {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
margin-top:96px;
|
||
|
margin-left:10px;
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
border: 20px solid #3c6eb4;
|
||
|
-moz-border-radius: 50px 50px 0 50px;
|
||
|
border-radius: 50px 50px 0 50px;
|
||
|
-webkit-transform: rotate(-90deg);
|
||
|
-moz-transform: rotate(-90deg);
|
||
|
-ms-transform: rotate(-90deg);
|
||
|
-o-transform: rotate(-90deg);
|
||
|
transform: rotate(-90deg);
|
||
|
}
|
||
|
|
||
|
#fedora:after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
margin-top:26px;
|
||
|
margin-left:80px;
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
border: 20px solid #3c6eb4;
|
||
|
-moz-border-radius: 50px 50px 0 50px;
|
||
|
border-radius: 50px 50px 0 50px;
|
||
|
-webkit-transform: rotate(90deg);
|
||
|
-moz-transform: rotate(90deg);
|
||
|
-ms-transform: rotate(90deg);
|
||
|
-o-transform: rotate(90deg);
|
||
|
transform: rotate(90deg);
|
||
|
}
|
||
|
|
||
|
#fedora-f {
|
||
|
position: absolute;
|
||
|
top: 97px;
|
||
|
margin-left: 50px;
|
||
|
background: white;
|
||
|
width: 80px;
|
||
|
height: 19px;
|
||
|
-moz-border-radius: 50px;
|
||
|
border-radius: 50px;
|
||
|
z-index:2;
|
||
|
}
|
||
|
|
||
|
#fedora-f:after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: -46px;
|
||
|
margin-left: 32px;
|
||
|
background: white;
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
-moz-border-radius: 50px;
|
||
|
border-radius: 50px;
|
||
|
z-index:1;
|
||
|
}
|
||
|
|
||
|
#fedora-f:before {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 45px;
|
||
|
margin-left: 28px;
|
||
|
background: white;
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
-moz-border-radius: 50px;
|
||
|
border-radius: 50px;
|
||
|
z-index:1;
|
||
|
}
|
||
|
|
||
|
#fedora-f-top {
|
||
|
position:absolute;
|
||
|
top: 23px;
|
||
|
margin-left: 80px;
|
||
|
width : 100px;
|
||
|
height: 54px;
|
||
|
background:transparent;
|
||
|
border: 20px solid white;
|
||
|
border-color:transparent transparent transparent white;
|
||
|
-moz-border-radius: 50px 0 0 0;
|
||
|
border-radius: 50px 0 0 0;
|
||
|
z-index:1;
|
||
|
}
|
||
|
|
||
|
#fedora-f-top:before {
|
||
|
content: "";
|
||
|
position:absolute;
|
||
|
top:-17px;
|
||
|
margin-left:-19px;
|
||
|
width: 45px;
|
||
|
height: 45px;
|
||
|
border:20px solid white;
|
||
|
-moz-border-radius: 50px;
|
||
|
border-radius:50px;
|
||
|
border-color: white transparent transparent transparent;
|
||
|
-webkit-transform: rotate(-29deg);
|
||
|
-moz-transform: rotate(-29deg);
|
||
|
-ms-transform: rotate(-29deg);
|
||
|
-o-transform: rotate(-29deg);
|
||
|
transform: rotate(-29deg);
|
||
|
}
|
||
|
|
||
|
#fedora-f-top:after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: -16px;
|
||
|
margin-left: 23px;
|
||
|
background: white;
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
-moz-border-radius: 50px;
|
||
|
border-radius: 50px;
|
||
|
z-index:1;
|
||
|
}
|
||
|
|
||
|
#fedora-f-bottom {
|
||
|
position:absolute;
|
||
|
top: 96px;
|
||
|
margin-left: -40px;
|
||
|
width : 100px;
|
||
|
height: 54px;
|
||
|
background:transparent;
|
||
|
border: 20px solid white;
|
||
|
border-color:transparent white transparent transparent;
|
||
|
-moz-border-radius: 0 0 50px 0;
|
||
|
border-radius: 0 0 50px 0;
|
||
|
z-index:1;
|
||
|
}
|
||
|
|
||
|
#fedora-f-bottom:before {
|
||
|
content: "";
|
||
|
position:absolute;
|
||
|
top:-14px;
|
||
|
margin-left:34px;
|
||
|
width: 45px;
|
||
|
height: 45px;
|
||
|
border: 20px solid white;
|
||
|
-moz-border-radius: 50px;
|
||
|
border-radius:50px;
|
||
|
border-color: transparent transparent white transparent;
|
||
|
-webkit-transform: rotate(-30deg);
|
||
|
-moz-transform: rotate(-30deg);
|
||
|
-ms-transform: rotate(-30deg);
|
||
|
-o-transform: rotate(-30deg);
|
||
|
transform: rotate(-30deg);
|
||
|
}
|
||
|
|
||
|
#fedora-f-bottom:after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 50px;
|
||
|
margin-left: 58px;
|
||
|
background: white;
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
-moz-border-radius: 50px;
|
||
|
border-radius: 50px;
|
||
|
z-index:1;
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
|
||
|
<!--
|
||
|
Fedora CSS3 Logo
|
||
|
Copyright (C) 2012 Red Hat, Inc.
|
||
|
Original CSS3 code created by Daniel Rodríguez
|
||
|
http://sadasant.com/
|
||
|
|
||
|
Fedora®, the Fedora word design, and the Infinity
|
||
|
design logo, either separately or in combination,
|
||
|
are hereinafter referred to as "Fedora Trademarks"
|
||
|
and are trademarks of Red Hat, Inc., registered in
|
||
|
the United States and other countries.
|
||
|
|
||
|
For licensing terms on this file, see: COPYING (as
|
||
|
included with the fedora-logos source)
|
||
|
-->
|
||
|
|
||
|
<div id="fedora">
|
||
|
<div id="fedora-f"></div>
|
||
|
<div id="fedora-f-top"></div>
|
||
|
<div id="fedora-f-bottom"></div>
|
||
|
</div>
|
||
|
|
||
|
</body>
|
||
|
</html>
|
||
|
|