Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gist for Daimond Logo
from https://codepen.io/littlesnippets/details/MKOYQM/
<div class="snip1326">
<div class="icon"><i class="ion-android-star-outline"></i></div>
<h1>Revolution</h1>
<h5>Neque porro quisquam</h5>
</div>
<div class="snip1326">
<div class="icon"><i class="ion-android-star-outline"></i></div>
<h1>Backstreet</h1>
<h5>At vero eos et</h5>
</div>
<div class="snip1326">
<div class="icon"><i class="ion-android-star-outline"></i></div>
<h1>Evergreen</h1>
<h5>Cras ornare tristique</h5>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:800);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1326 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
color: #bdbdbd;
margin: 70px 15px;
max-width: 300px;
width: 100%;
text-align: center;
font-size: 16px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1326 h1,
.snip1326 h5 {
margin: 0;
text-transform: uppercase;
}
.snip1326 h1 {
font-family: 'Fjalla One', Arial, sans-serif;
font-size: 2.4em;
position: relative;
}
.snip1326 h1:before {
content: '';
position: absolute;
width: 180px;
height: 180px;
border: 5px solid #bdbdbd;
left: 50%;
top: 50%;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(45deg) translate(-50%, -50%);
transform: rotate(45deg) translate(-50%, -50%);
border-radius: 10%;
}
.snip1326 h5 {
font-size: 0.7em;
font-weight: 800;
padding-bottom: 10px;
position: relative;
}
.snip1326 h5:after {
position: absolute;
content: '';
width: 135px;
height: 3px;
bottom: -15px;
background-color: #bdbdbd;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.snip1326 .icon {
position: relative;
display: inline-block;
}
.snip1326 .icon:before,
.snip1326 .icon:after {
position: absolute;
height: 3px;
content: '';
background: #bdbdbd;
width: 42px;
top: 50%;
}
.snip1326 .icon:before {
left: -50px;
}
.snip1326 .icon:after {
right: -50px;
}
.snip1326 i {
font-size: 3.6em;
color: #bdbdbd;
}
/* Demo purposes only */
body {
background-color: #212121;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment