Skip to content

Instantly share code, notes, and snippets.

@tas33n

tas33n/carrier-listing.markdown

Created November 20, 2022 17:58
Show Gist options
  • Save tas33n/9a1c83e432bc778a4d8d1976097b2431 to your computer and use it in GitHub Desktop.
Save tas33n/9a1c83e432bc778a4d8d1976097b2431 to your computer and use it in GitHub Desktop.
Download ZIP
Carrier listing
Raw
carrier-listing.markdown
Raw
index.html
<script type="text/javascript" src="//use.typekit.net/uvs8amk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div><span>Progressive</span><b><i>$</i>74</b><small><i>$</i>354</small><strong><em class="icon icon-chevron-down"></em>7%</strong><a href="#">SELECT</a></div>
<div><span>The General</span><b><i>$</i>89</b><small><i>$</i>379</small><strong><em class="icon icon-chevron-down"></em>5%</strong><a href="#">SELECT</a></div>
<div><span>Esurance</span><b><i>$</i>92</b><small><i>$</i>432</small><strong><em class="icon icon-down icon-chevron-up"></em>4%</strong><a href="#">SELECT</a></div>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body{text-align:center; margin:50px 0 0 0; background:#f1f1f1; font-family:"proxima nova", "proxima-nova";}
a {background:#0bb4a6; color:#fff; display:inline-block; text-decoration:none; height:45px; line-height:48px; padding:0 25px; border-radius:2px; border-bottom:3px solid #07736a; font-size:14px; letter-spacing:0.08em; float:right;}
a:hover{border-bottom:5px solid #07736a; position:relative; top:-2px; background:#0fbbad;}
a:active{border-bottom:3px solid #07736a; position:relative; top:0px;}
span{font-size:24px; font-weight:500; color:#444; float:left; line-height:48px; padding:0 0 0 5px; display:inline-block; width:160px;}
b{float:left; line-height:48px; font-weight:600; color:#0bb4a6; font-size:28px; padding:0 0 0 25px; display:inline-block; width:50px; }
i{font-style:normal; font-size:20px; position:relative; top:-5px; left:-4px; opacity:0.6}
small{float:left; line-height:48px; font-weight:600; color:#ccc; font-size:28px; padding:0 0 0 25px; display:inline-block; width:95px;}
small i{opacity:0.8;}
strong{float:left; display:inline-block; background:#ededed; padding:4px 6px; border-radius:2px; margin:10px 0 0 0; color:#999; letter-spacing:1px; }
.icon{color:#54afa3; font-size:14px; display:inline-block; margin:0 3px 0 0;}
.icon-down{color:#b14739;}
div{background:#fff; width:600px; margin:0 auto; text-align:left; padding:20px; box-shadow:1px 1px 1px rgba(0,0,0,0.05); height:45px; margin-bottom:3px; border-radius:1px;}
div:nth-child(even){background:#fafafa}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment