Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save minakshi-sharma/f8891610745ef199e0f107cd24603ede to your computer and use it in GitHub Desktop.
Save minakshi-sharma/f8891610745ef199e0f107cd24603ede to your computer and use it in GitHub Desktop.
Designer circle with text overlay.html
<style>
.circle-ul {
list-style: none outside none;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
text-align: center;
}
.circle-ul li.it1 {
background: url(http://www.creditsuite.com/images/index3.jpg) no-repeat;
background-size: 100%;
}
.circle-ul li.it2 {
background: url(http://www.creditsuite.com/images/index2.jpg) no-repeat;
background-size: 100%;
}
.circle-ul li {
width: 400px;
height: 400px;
}
.circle-ul li {
display: inline-block;
vertical-align: top;
border-radius: 50%;
position: relative;
border: 18px solid #fff;
margin-right: 4%;
overflow: hidden;
box-shadow: inset 0px 1px 6px #666;
z-index: 1;
}
.circle-ul li a {
padding: 70px 58px 70px 58px;
top: -18px;
position: absolute;
margin-left: -230px;
color: #fff;
text-decoration: none;
}
.bt {
margin-top: 215px;
}
.bt {
background: #03b8d2;
overflow: hidden;
width: 500px;
position: relative;
text-align: center;
margin-left: -72px;
height: 140px;
z-index: 0;
}
.bt:hover {
background: rgb(69, 84, 86);}
.bt h2 {
font-family: 'Pathway Gothic One';
letter-spacing: -1px;
font-size: 18px;
line-height: 20px;
font-weight: 400;
width: 200px;
text-align: center;
text-transform: uppercase;
margin-left: -100px;
left: 50%;
position: relative;
}
.item-arrow {
background: #ffffff;
width: 40px;
height: 32px;
border-radius: 50%;
text-align: center;
position: relative;
left: 50%;
margin-left: -20px;
color: #03b8d2;
font-size: 20px;
padding-top: 3px;
}
em-arrow em {
margin-left: 0;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.fa-chevron-right:before {
content: "\f054";
}
</style>
<ul class=circle-ul>
<li class="it1"><a href="/business-credit">
<div class="bt">
<h2 style="color:#fff;">Business Credit Solutions</h2>
<div class="item-arrow"><em class="fa fa-chevron-right"></em></div>
</div>
</a>
</li>
<li class="it2"><a href="/financing">
<div class="bt">
<h2 style="color:#fff;">Funding Solutions</h2>
<div class="item-arrow"><em class="fa fa-chevron-right"></em></div>
</div>
</a>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment