Created
October 15, 2018 02:36
-
-
Save CodeMyUI/b5665fb3d0e9f836e7c2fadfd27f169e to your computer and use it in GitHub Desktop.
Gist for Daimond Logo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
from https://codepen.io/littlesnippets/details/MKOYQM/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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