Created
October 31, 2014 20:09
-
-
Save drawby/8e7384ba1fd223822e17 to your computer and use it in GitHub Desktop.
A Pen by drawby.
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
<!-- / Loading bootstrap 3 from CDN: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css --> | |
<!-- / need a nav bar? | |
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav past-carousel" id="docs top" role="navigation"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
<span class="sr-only">Toggle navigation</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand past-carousel" href="http://redtapedesign.com/xhome/xhome/indexslide.html"> | |
<svg version="1.1" id="xlogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="88.172px" height="86.021px" viewBox="0 0 88.172 86.021" enable-background="new 0 0 88.172 86.021" xml:space="preserve"> | |
<g> | |
<polygon id="xlogo2a" opacity="0.84" fill="#ffffff" points="48.111,28.731 45.342,32.702 42.588,28.731 28.423,28.731 38.219,42.055 | |
28.116,55.731 35.411,55.731 55.322,28.731 "></polygon> | |
<polygon id="xlogo1a" fill="#ffffff" points="45.238,51.36 48.273,55.731 62.42,55.731 52.383,42.014 62.164,28.731 55.322,28.731 | |
35.411,55.731 42.187,55.731 "></polygon> | |
<path id="xlogo1b" fill="#ffffff" d="M67.596,10.871l-4.734,6.68c7.779,5.582,12.861,14.692,12.861,24.975c0,16.942-13.783,30.725-30.726,30.725 | |
c-6.565,0-12.651-2.075-17.648-5.596l-4.735,6.68c6.337,4.473,14.055,7.111,22.384,7.111c21.46,0,38.919-17.461,38.919-38.92 | |
C83.916,29.489,77.467,17.937,67.596,10.871z"></path> | |
<path id="xlogo2b" opacity="0.84" fill="#ffffff" d="M14.271,42.526c0-16.942,13.784-30.726,30.726-30.726c6.659,0,12.826,2.136,17.864,5.75 | |
l4.734-6.68C61.22,6.305,53.42,3.606,44.997,3.606c-21.46,0-38.919,17.46-38.919,38.919c0,13.132,6.544,24.757,16.536,31.809 | |
l4.735-6.68C19.448,62.089,14.271,52.904,14.271,42.526z"></path> | |
</g> | |
</svg> | |
</a> | |
</div> | |
<div class="collapse navbar-collapse"> | |
<ul class="nav navbar-nav navbar-right"> | |
<li class=""><a href="http://redtapedesign.com/xhome/xhome/indexslide.html">Tour</a></li> | |
<li><a href="http://redtapedesign.com/xhome/xhome/docs.html">Docs</a></li> | |
<li><a href="http://www.redtapex.com/signup/newuser">Sign Up</a></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
--> | |
<div class='container main'> | |
<div class='row'> | |
<div class='col-md-12 head'> | |
<button type="button" class="btn btn-default shareit pull-right" >Share with my team</button> | |
<img class='artistpic' src='https://graph.facebook.com/therealjustivy/picture?width=100&height=100'> | |
<h1>Just Ivy Insights</h1> | |
<a class=''>Change artist account</a> | |
</div> | |
</div> | |
<div class='row js-masonry' data-masonry-options-itemSelector='.col-sm-4'> | |
<div class='col-md-4'> | |
<div class='card newvid highlite'> | |
<h4>Fresh Video: "We Are Here featuring DJ khaled "</h4> | |
<div class='mapwrap'> | |
<img class='img-responsive full-width' src='http://img.youtube.com/vi/HrKmDgk8Edg/hqdefault.jpg'> | |
</div> | |
<div class'row '> | |
<div class='col-xs-4 text-center stats'> | |
<h4>999K</h4> | |
<small data-toggle='tooltip' data-placement='bottom' title='How many times the video was played'>VIEWS</small> | |
</div> | |
<div class='col-xs-4 text-center stats'> | |
<h4>301</h4> | |
<small data-toggle='tooltip' data-placement='bottom' title='How many times the video was shared across social'>SHARES</small> | |
</div> | |
<div class='col-xs-4 text-center stats'> | |
<h4>99</h4> | |
<small data-toggle='tooltip' data-placement='bottom' title='How many thumbs up the video has on YouTube'>LIKES</small> | |
</div> | |
</div> | |
<small class='time'>about 1 min ago</small> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
<div class='col-md-4'> | |
<div class='card'> | |
<h4>Top Fans V1</h4> | |
<p>Top fans in a solid row across. get 100x100 thumbs now</p> | |
<div class='fanbox mapwrap'> | |
<img class='fanpic' src='https://graph.facebook.com/darby.kaighinshields/picture?width=100&height=100'> | |
<img class='fanpic' src='https://graph.facebook.com/ryanhickman/picture?width=100&height=100' data-toggle='tooltip' data-placement='bottom' title='Ryan hickman liked Just Ivy 289 times this week'> | |
<img class='fanpic' src='https://graph.facebook.com/ajohnsonmusic/picture?width=100&height=100'> | |
<img class='fanpic' src='https://graph.facebook.com/zuck/picture?width=100&height=100'> | |
<img class='fanpic' src='https://graph.facebook.com/JSBrown89/picture?width=100&height=100'> | |
<img class='fanpic' src='https://graph.facebook.com/MikeTunz/picture?width=100&height=100'> | |
<img class='fanpic' src='https://graph.facebook.com/darby.kaighinshields/picture?width=100&height=100'> | |
<img class='fanpic' src='https://graph.facebook.com/xdrpdeadx/picture?width=100&height=100'> | |
</div> | |
<small class='time'>about 1 min ago</small> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
<div class='col-md-4'> | |
<div class='card'> | |
<h4>Top Fans V2</h4> | |
<p>Top fans in circles across </p> | |
<div class='fanbox'> | |
<img class='fanpic2' src='http://graph.facebook.com/darby.kaighinshields/picture?type=square'> | |
<img class='fanpic2' src='http://graph.facebook.com/ryanhickman/picture?type=square'> | |
<img class='fanpic2' src='http://graph.facebook.com/sarfraz.anees/picture?type=square'> | |
<img class='fanpic2' src='http://graph.facebook.com/67563683055/picture?type=square'> | |
<img class='fanpic2' src='http://graph.facebook.com/sarfraz.anees/picture?type=square'> | |
<img class='fanpic2' src='http://graph.facebook.com/67563683055/picture?type=square'> | |
<img class='fanpic2' src='http://graph.facebook.com/ryanhickman/picture?type=square'> | |
<img class='fanpic2' src='http://graph.facebook.com/ryanhickman/picture?type=square'> | |
</div> | |
<small class='time'>about 1 min ago</small> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
<div class='col-md-4'> | |
<div class='card recap'> | |
<h4>Radio Recap</h4> | |
<p>Top 5 networks where fans are engaging with you online.</p> | |
<small class='time'>about 1 min ago</small> | |
<ul> | |
<li class='darbicon-fb'> | |
<h5>75K fan actions</h5> | |
<small>Facebook.com/justivy</small> | |
</li> | |
<li class='darbicon-sc'> | |
<h5>52K Fan actions</h5> | |
<small>Youtube.com/ak</small> | |
</li> | |
<li class='darbicon-tw'> | |
<h5 class=''>23K Plays</h5> | |
<small>Soundcloud.com/ak</small> | |
</li> | |
</ul> | |
<a class='coolbar'>Show More</a> | |
</div> | |
</div> | |
<div class='col-sm-4'> | |
<div class='card'> | |
<h4>Alicia Keys Fan engagement is up this week!"</h4> | |
<p>102k people have seen your content and 29k fans like, shared or commented.</p> | |
<h3 id="gauge-value" class="text-center">1,242</h3> | |
<canvas width="339" height="200" id="foo"></canvas> | |
<small class='time'>about 1 min ago</small> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
<div class='col-sm-4'> | |
<div class='card'> | |
<h4>Just Ivy Top Youtube Videos</h4> | |
<p>We are tracking 42 Just Ivy songs and videos on YouTube and Soundcloud. </p> | |
<small class='time'>about 1 min ago</small> | |
<ul class='videothumblist'> | |
<li> | |
<img class='videothumb' src='http://img.youtube.com/vi/HrKmDgk8Edg/3.jpg'> | |
<h5 class=''>We Are Here (Official video..</h5> | |
<small>2M Plays 2k Shares</small> | |
</li> | |
<li> | |
<img class='videothumb' src='http://img.youtube.com/vi/hqFmULkxX90/3.jpg'> | |
<h5 class=''>Bad Girl Takeover feta Dj K..</h5> | |
<small>100k Plays 1k Shares</small> | |
</li> | |
<li> | |
<img class='videothumb' src='http://img.youtube.com/vi/hqFmULkxX90/3.jpg'> | |
<h5 class=''>Light Me Up</h5> | |
<small>1.8M play - 290 shares</small> | |
</li> | |
</ul> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
<div class='col-sm-4'> | |
<div class='card geo'> | |
<h4>Where your fans are</h4> | |
<p>Top 5 cities in the USA where fans are engaging with you online.</p> | |
<small class='time'>about 1 min ago</small> | |
<div class='mapwrap'> | |
<iframe class='DRAGDIS_iframe' frameborder='0' height='150' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3368.2641217754035!2d-88.22686!3d32.4120825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8884541553945b47%3A0x7d1622eec6464dcc!2sIntercourse%2C+AL+36925!5e0!3m2!1sen!2sus!4v1414437784635' style='border:0' width='100%'></iframe> | |
</div> | |
<ol> | |
<li> | |
<h5>Houston, TX</h5> | |
<small>1,473 fan actions - 208 fans</small> | |
</li> | |
<li> | |
<h5>Chicago, IL</h5> | |
<small>1,473 fan actions - 208 fans</small> | |
</li> | |
<li> | |
<h5>Los Angeles, CA</h5> | |
<small>1,108 fan actions</small> | |
</li> | |
</ol> | |
<a class='coolbar'>Show More</a> | |
</div> | |
</div> | |
<div class='col-md-4'> | |
<div class='card error'> | |
<h4>Uh Oh! we can't find seem to find Just Ivy on these networks</h4> | |
<p>We found Just Ivy and we want to tap that ukranian ass.</p> | |
<small class='time'>about 1 min ago</small> | |
<ul> | |
<li class='darbicon-rdio'> | |
<h5>rdio - missing</h5> | |
<small>streaming music service</small> | |
</li> | |
<li class='darbicon-sp'> | |
<h5>spotify - missing</h5> | |
<small>streaming music service</small> | |
</li> | |
</ul> | |
<a class='coolbar'>Get me setup on these networks </a> | |
</div> | |
</div> | |
<div class='col-md-4'> | |
<div class='card tracking'> | |
<h4>Just Ivy Music and videos are being tracked</h4> | |
<p>We are tracking 40 Just Ivy songs and or videos to let you know when fans spike</p> | |
<small class='time'>about 1 min ago</small> | |
<ul> | |
<li class='darbicon-yt'> | |
<h5>34 videos</h5> | |
<small>1M total views!</small> | |
</li> | |
<li class='darbicon-sc'> | |
<h5>12 Songs</h5> | |
<small>256K total plays</small> | |
</li> | |
</ul> | |
<a class='coolbar'>Get me setup on these networks </a> | |
</div> | |
</div> | |
<div class='col-sm-4'> | |
<div class='card'> | |
<h4>When your fans are online</h4> | |
<div class="row times"> | |
<div class="center-block text-center time_one"> | |
<h3>9:00</h3> | |
<p class="tiny">PM</p> | |
</div> | |
<div class="col-md-8 center-block text-center"> | |
<div class="time_two pull-left"> | |
<h4>5:00</h4> | |
<p class="tiny">PM</p> | |
</div> | |
<div class="time_three pull-right"> | |
<h6>9:00</h6> | |
<p class="tiny">PM</p> | |
</div> | |
</div> | |
</div> | |
<p>On average your Facebook gets the most engagement (likes,shares, comments) at the times.</p> | |
<small class='time'>about 1 min ago</small> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
<div class='col-sm-4'> | |
<div class='card'> | |
<h4>You have 1 new message</h4> | |
<img> | |
<small class='time'>about 1 min ago</small> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
<div class='col-sm-4'> | |
<div class='card'> | |
<h4>Last Card</h4> | |
<p>This is your recap yada ya, This is your recap yada yada da This is just a recap yada yada</p> | |
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on it">Get the App</button> | |
<small class='time'>about 1 min ago</small> | |
<a class='coolbar' id='cooldude'>Show More</a> | |
</div> | |
</div> | |
</div> | |
</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
$('[data-toggle="tooltip"]').tooltip({'placement': 'bottom'}); |
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
*{transition: all .5s ease-out;} | |
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
.stats {padding-top:30px; | |
padding-bottom:20px; | |
} | |
.stats h4 {margin-bottom:0px;} | |
body { | |
padding: 30px; | |
background-color: #EBECED; | |
font-family: "karla", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
color: #9494A2; | |
-webkit-font-smoothing: antialiased; | |
} | |
p {font-size:16px; | |
font-weight:200;} | |
a{color:#646EF8;} | |
a:hover{color:#4444DD;} | |
ul h5, ol h5 {margin-bottom:1px;} | |
h1 { | |
margin-bottom: 10px; | |
color:#363942; | |
} | |
ul{ | |
padding-left: 0px; | |
list-style: none; | |
padding-top: 0px; | |
margin-bottom:0px; | |
} | |
ul li {padding-left:0px;} | |
ol {margin-left:0px; | |
padding-left:20px; | |
margin-top:0px; | |
margin-bottom:0px;} | |
li { | |
padding-top: 18px; | |
padding-bottom: 18px; | |
padding-left: 15px; | |
border-top:1px solid #fff; | |
border-bottom:1px solid #fff; | |
} | |
ol li:first-child{ | |
padding-top:30px; | |
} | |
ol li:last-child, ul li:last-child{ | |
border-bottom:0px solid #F4F4F4; | |
} | |
ul.videothumblist li { | |
padding-top:15px; | |
padding-bottom:27px; | |
} | |
li:hover { | |
border-top:1px solid #F4F4F4; | |
border-bottom:1px solid #F4F4F4; | |
} | |
h4 { | |
margin-top: 0px; | |
color:#363942; | |
font-size:20px; | |
} | |
h5 { | |
margin-top: 0px; | |
color:#363942; | |
font-size:16px; | |
} | |
small {color:#D8D8DC; | |
font-size:90%;} | |
.time { | |
margin-bottom: 15px; | |
display: inline-block; | |
} | |
.head{margin-bottom:30px; | |
margin-bottom:50px;} | |
.main{margin-top:} | |
.darbicon-fb { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/facebookc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-yt { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/youtubec.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-sc { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/soundcloudc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-tw { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/twitterc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-ig { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/instagramc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-lfm { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/lastfmc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-pd { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/pandorac.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-beats { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/beatsc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-rdio { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/rdioc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.darbicon-sp { | |
padding-left:50px; | |
background: url(http://www.redtapedesign.com/x/images/spotifyc.png) no-repeat 0 0; | |
background-size:40px; | |
background-position:0px 14px;} | |
.card { | |
background: white; | |
padding: 25px; | |
padding-top:22px; | |
padding-bottom:0px; | |
border-radius: 2px; | |
margin-bottom: 40px; | |
box-shadow:rgba(0, 0, 0, 0.089) 0px 0px 3px 0px; | |
border-top: 5px solid #fff; | |
opacity:1; | |
} | |
.card:hover{ | |
box-shadow:rgba(0, 0, 0, 0.16) 0px 0px 3px 0px; | |
opacity:1; | |
} | |
.card.error { | |
border-top: 5px solid #F1387F; | |
} | |
.card.error:hover { | |
border-top: 5px solid #D61D71; | |
} | |
.card.highlite { | |
border-top: 5px solid #3AEE98; | |
} | |
.card.highlite:hover { | |
border-top: 5px solid #fff; | |
} | |
.card:hover li small, .card:hover .stats small {color:#9494A2;} | |
.mapwrap{ | |
/* display:block; */ | |
margin-left:-25px; | |
margin-right:-25px; | |
margin-top:15px; | |
background-color:#EBECED; | |
} | |
.artistpic{ | |
float:left; margin-right:20px; | |
border-radius:35px; | |
height:70px; | |
width:70px; | |
margin-top:18px; | |
box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 1px 0px; | |
} | |
.fanbox{ | |
display:; | |
background:white; | |
min-height:200px; | |
margin-top:20px; | |
} | |
.fanpic { | |
float:left; | |
width:25%; | |
} | |
.fanpic:hover { | |
-webkit-filter: brightness(0.7); | |
} | |
.fanpic2 { | |
float:left; | |
border-radius:25px; | |
margin-right:25px; | |
margin-bottom:20px; | |
box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 1px 0px; | |
} | |
.videothumb{ | |
width:65px; | |
float:left; | |
margin-right:15px; | |
border-radius:3px; | |
} | |
.coolbar { | |
border-radius: 0px 0px 2px 2px; | |
width:auto; | |
display:block; | |
background: #fff; | |
margin-left:-25px; | |
margin-right:-25px; | |
padding-left:25px; | |
padding-top:20px; | |
padding-bottom:20px; | |
color:#646EF8; | |
text-decoration:none; | |
border-top:1px solid #F4F4F4; | |
margin-top:; | |
font-size:18px; | |
transition: all .5s ease-out; | |
} | |
.card:hover .coolbar { | |
background: #F7F8FA; | |
text-decoration: none; | |
} | |
.card:hover .coolbar:hover { | |
background-position:-100px; | |
background: #855de9; | |
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg1NWRlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjdhZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
background: -moz-linear-gradient(top, #855de9 0%, #4f7aff 100%); | |
background: -webkit-gradient(linear, left top, left bottom, | |
color-stop(0%,#855de9), color-stop(100%,#4f7aff)); | |
background: -webkit-linear-gradient(top, #855de9 0%,#4f7aff 100%); | |
background: -o-linear-gradient(top, #855de9 0%,#4f7aff 100%); | |
background: -ms-linear-gradient(top, #855de9 0%,#4f7aff 100%); | |
background: linear-gradient(to bottom, #855de9 0%,#4f7aff 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( | |
startColorstr='#855de9', endColorstr='#4f7aff',GradientType=0 ); | |
color: #fff; | |
text-decoration: none; | |
} | |
.shareit { | |
padding: 15px; | |
padding-left:20px; | |
padding-right:20px; | |
margin-top: 20px;; | |
font-size:20px; | |
color: #fff; | |
text-decoration: none; | |
border-radius:4px; | |
-webkit-font-smoothing: antialiased; | |
background: linear-gradient(to bottom, #AB5DE9,#4573FF); | |
transition: background-position 0.5s; | |
background-size: auto 200%; | |
background-position: 0 60%; | |
} | |
.shareit:hover{ | |
color: #fff; | |
background: linear-gradient(to bottom, #AB5DE9,#4573FF); | |
background-size: auto 200%; | |
background-position: 0 30%; | |
transition: background-position 0.5s; | |
} | |
.times { | |
padding-bottom: 20px; | |
} | |
.time_one { | |
border: 2px solid #7BDC4E; | |
border-radius: 50%; | |
background: transparent; | |
width: 150px; | |
height: 150px; | |
margin-bottom: 15px; | |
margin-top: 10px; | |
} | |
.time_one p { | |
color: #7BDC4E; | |
padding: 0px; | |
} | |
.time_two { | |
background-color: #646EF8; | |
border-radius: 50%; | |
width: 100px; | |
height: 100px; | |
} | |
.time_two h4 { | |
color: #7BDC4E; | |
margin-bottom: 0px; | |
margin-top: 30%; | |
padding: 0px; | |
} | |
.time_two p { | |
color: #101779; | |
padding: 0px; | |
} | |
.time_three { | |
border: 1px solid #3ADB99; | |
border-radius: 50%; | |
background: transparent; | |
width: 60px; | |
height: 60px; | |
} | |
.time_one h3 { | |
color: #646EF8; | |
margin-top: 30%; | |
margin-bottom: 0px; | |
padding: 0px; | |
font-size: 45px; | |
font-weight: bold; | |
} | |
.time_three h6 { | |
color: #3ADB99; | |
margin-bottom: 0px; | |
padding: 0px; | |
margin-top: 15px; | |
font-size:15px; | |
} | |
.time_three p { | |
padding: 0px; | |
} | |
.center-block { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
float: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment