Skip to content

Instantly share code, notes, and snippets.

@thomasbritton

thomasbritton/index.html

Created October 23, 2015 09:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thomasbritton/afe8340e12a060138eb7 to your computer and use it in GitHub Desktop.
Save thomasbritton/afe8340e12a060138eb7 to your computer and use it in GitHub Desktop.
Download ZIP
uStyle Tabs style final
Raw
index.html
<div class="container">
<div class='us-tabs'>
<nav class='us-tabs-nav'>
<div class='us-tabs-nav-wrapper'>
<div class='us-tabs-nav-menu'>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab1">Broadband news</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab2">Broadband guides</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab3">Compare broadband</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab4">Broadband tools</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab5">Broadband Awards</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab6">What's new in broadband</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab7">About this site</a>
</div>
</div>
</nav>
<div class='us-tabs-container'>
<div class='us-tab' id='tab1'>
<h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab1"><svg version="1.1" id="Chevron_small_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M11,10L7.859,6.58c-0.268-0.27-0.268-0.707,0-0.978c0.268-0.27,0.701-0.27,0.969,0l3.83,3.908
c0.268,0.271,0.268,0.709,0,0.979l-3.83,3.908c-0.267,0.272-0.701,0.27-0.969,0c-0.268-0.269-0.268-0.707,0-0.978L11,10z"/>
</svg>Broadband news</a></h2>
<div class='us-tab-content'>
<section class="news_list">
<article class="us-news-item ">
<a class="us-news-item-link" href="/broadband/news/2015/10/ofcom_calls_on_customers_to_report_difficult_cancellations/">
<div class="us-news-meta">
<span class="category">News</span>
<span class="date">16 Oct 2015</span>
</div>
<div class="us-news-item-content">
<h3 class="us-news-item-title">Ofcom calls on customers to report difficult cancellations</h3>
<p class="us-news-item-snippet">Ofcom wants to get a better idea on the cancellation process.</p>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">Read story</span>
</div>
</a>
</article>
<article class="us-news-item ">
<a class="us-news-item-link" href="/broadband/news/2015/10/virgin_rolls_out_free_wi_fi_under_pavements_of_chesham/">
<div class="us-news-meta">
<span class="category">News</span>
<span class="date">15 Oct 2015</span>
</div>
<div class="us-news-item-content">
<h3 class="us-news-item-title">Virgin rolls out free Wi-Fi under pavements of Chesham</h3>
<p class="us-news-item-snippet">The new service will be available to 21,000 people in Chesham.</p>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">Read story</span>
</div>
</a>
</article>
<article class="us-news-item ">
<a class="us-news-item-link" href="/broadband/news/2015/10/government_suspends_broadband_voucher_scheme/">
<div class="us-news-meta">
<span class="category">News</span>
<span class="date">13 Oct 2015</span>
</div>
<div class="us-news-item-content">
<h3 class="us-news-item-title">Government suspends Broadband Voucher scheme</h3>
<p class="us-news-item-snippet">Funding remains an issue for the government's Broadband Voucher scheme.</p>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">Read story</span>
</div>
</a>
</article>
<article class="us-news-item last-child">
<a class="us-news-item-link" href="/broadband/news/2015/10/talktalk_scraps_speedy_payment_discount/">
<div class="us-news-meta">
<span class="category">News</span>
<span class="date">12 Oct 2015</span>
</div>
<div class="us-news-item-content">
<h3 class="us-news-item-title">TalkTalk scraps speedy payment discount</h3>
<p class="us-news-item-snippet">Ofcom has warned rises are affecting the whole industry.</p>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">Read story</span>
</div>
</a>
</article>
<article class="us-news-item ">
<a class="us-news-item-link" href="/broadband/news/2015/10/vodafone_rolls_out_broadband_and_home_phone_services/">
<div class="us-news-meta">
<span class="category">News</span>
<span class="date">12 Oct 2015</span>
</div>
<div class="us-news-item-content">
<h3 class="us-news-item-title">Vodafone rolls out broadband and home phone services</h3>
<p class="us-news-item-snippet">New customers will receive a year of Netflix for free.</p>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">Read story</span>
</div>
</a>
</article>
<article class="us-news-item ">
<a class="us-news-item-link" href="/broadband/news/2015/10/talktalk_offering_testers_for_tv_service_upgrades/">
<div class="us-news-meta">
<span class="category">News</span>
<span class="date">9 Oct 2015</span>
</div>
<div class="us-news-item-content">
<h3 class="us-news-item-title">TalkTalk offering free trial weekends for TV add-ons, inc Disney Channel and Cartoon Netwo...</h3>
<p class="us-news-item-snippet">Half term will be greeted with top children's entertainment.</p>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">Read story</span>
</div>
</a>
</article>
<article class="us-news-item ">
<a class="us-news-item-link" href="/broadband/news/2015/10/sky_urges_separation_of_openreach_from_bt/">
<div class="us-news-meta">
<span class="category">News</span>
<span class="date">9 Oct 2015</span>
</div>
<div class="us-news-item-content">
<h3 class="us-news-item-title">Sky urges separation of Openreach from BT</h3>
<p class="us-news-item-snippet">Sky claims investment in the UK's broadband network is being held back.</p>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">Read story</span>
</div>
</a>
</article>
<article class="us-news-item see_all last-child">
<a class="us-news-item-link" href="/broadband/news/" rel="nofollow">
<div class="us-news-item-content">
<h3 class="us-news-item-title">See more broadband news stories</h3>
</div>
<div class="us-news-item-readmore">
<span class="us-news-item-readmorelink">View more</span>
</div>
</a>
</article>
</section>
</div>
</div>
<div class='us-tab' id='tab2'>
<h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab2"><svg version="1.1" id="Chevron_small_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M11,10L7.859,6.58c-0.268-0.27-0.268-0.707,0-0.978c0.268-0.27,0.701-0.27,0.969,0l3.83,3.908
c0.268,0.271,0.268,0.709,0,0.979l-3.83,3.908c-0.267,0.272-0.701,0.27-0.969,0c-0.268-0.269-0.268-0.707,0-0.978L11,10z"/>
</svg>Broadband guides</a></h2>
<div class='us-tab-content'>
<p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick
chuck shankle spare ribs tri-tip.</p>
</div>
</div>
<div class='us-tab' id='tab3'>
<h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab3"><svg version="1.1" id="Chevron_small_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M11,10L7.859,6.58c-0.268-0.27-0.268-0.707,0-0.978c0.268-0.27,0.701-0.27,0.969,0l3.83,3.908
c0.268,0.271,0.268,0.709,0,0.979l-3.83,3.908c-0.267,0.272-0.701,0.27-0.969,0c-0.268-0.269-0.268-0.707,0-0.978L11,10z"/>
</svg>Compare broadband</a></h2>
<div class='us-tab-content'>
<p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola
meatball. Pork belly beef ham landjaeger.</p>
</div>
</div>
<div class='us-tab' id='tab4'>
<h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab4"><svg version="1.1" id="Chevron_small_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M11,10L7.859,6.58c-0.268-0.27-0.268-0.707,0-0.978c0.268-0.27,0.701-0.27,0.969,0l3.83,3.908
c0.268,0.271,0.268,0.709,0,0.979l-3.83,3.908c-0.267,0.272-0.701,0.27-0.969,0c-0.268-0.269-0.268-0.707,0-0.978L11,10z"/>
</svg>Broadband tools</a></h2>
<div class='us-tab-content'>
<p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola
meatball. Pork belly beef ham landjaeger.</p>
</div>
</div>
<div class='us-tab' id='tab5'>
<h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab5"><svg version="1.1" id="Chevron_small_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M11,10L7.859,6.58c-0.268-0.27-0.268-0.707,0-0.978c0.268-0.27,0.701-0.27,0.969,0l3.83,3.908
c0.268,0.271,0.268,0.709,0,0.979l-3.83,3.908c-0.267,0.272-0.701,0.27-0.969,0c-0.268-0.269-0.268-0.707,0-0.978L11,10z"/>
</svg>Broadband Awards</a></h2>
<div class='us-tab-content'>
<p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola
meatball. Pork belly beef ham landjaeger.</p>
</div>
</div>
<div class='us-tab' id='tab6'>
<h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab6"><svg version="1.1" id="Chevron_small_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M11,10L7.859,6.58c-0.268-0.27-0.268-0.707,0-0.978c0.268-0.27,0.701-0.27,0.969,0l3.83,3.908
c0.268,0.271,0.268,0.709,0,0.979l-3.83,3.908c-0.267,0.272-0.701,0.27-0.969,0c-0.268-0.269-0.268-0.707,0-0.978L11,10z"/>
</svg>What's new in broadband</a></h2>
<div class='us-tab-content'>
<div class="whats_new">
<h4>Broadband package deals &amp; offers</h4>
<p>the best broadband deals</p>
<p>Looking for the best broadband plan? Want to browse the best UK broadband deals? Good news: 2014 is set to be another great year for cheap broadband online. So switch broadband today! </p>
<p>Broadband deal hunters can enjoy all the best value home broadband &amp; call packages from the UK's top-rated broadband providers on uSwitch.com. Compare broadband packages from just £2.50 a month. <a href="/broadband/packages/" title="Compare Broadband Packages">Compare broadband packages</a></p>
<p><a href="/broadband/providers/virgin_media/" title="Virgin Media Broadband">Virgin Media Broadband</a> offers cheap fibre broadband with 8 months at just £4 for up to 30Mb broadband speed and home phone; plus <a href="/broadband/products/virgin_media_tv/" title="Virgin Media TV Deals">Virgin Media TV</a> bundles starting at just £4 a month. New offers include the amazing TiVo Service which allows you to record up to 500 hours of TV as well as live pause - TiVo even learns what shows you like. Deals now include offers on the TiVo 500GB box. As well as amazing TV bundles, Virgin Media now offer broadband up to 100Mb in more locations than ever before. Virgin Media's Collections offer great value if you require Broadband, TV and Calls in a single, easy-to-manage package.</p>
<p>Sky TV and <a href="/broadband/providers/sky/" title="Sky Broadband">Sky Broadband</a> have released new broadband deals including truly unlimited broadband with no usage caps from just £5 (with further savings available for existing Sky TV customers). There's no requirement to get Sky TV with Sky's broadband products. In the world of Sky TV &amp; Sky+ HD, savers can now enjoy new <a href="/broadband/products/sky_tv/" title="Sky TV Deals">Sky TV</a> bundle deals (featuring broadband and calls) from just £21.50 a month with a range of viewing options (including HD and 3D) and TV packs including Sky Sports and Sky Atlantic with Sky+ HD Box options. Look out for Sky TV offers including an M&amp;S voucher as well! Sky's bundle &amp; package deals offer tremendous value. uSwitch now has a range of <a href="/broadband/products/sky_existing_customers/" title="Sky Existing Customer Deals">offers for existing Sky TV customers</a>.</p>
<p>New <a href="/broadband/providers/bt/" title="BT Broadband">BT Broadband</a> Deals offer new broadband packages with calls from just £6.50 a month (sometimes with a free Sainsbury's voucher or Marks &amp; Spencer voucher). BT matches Sky with its 'Truly Unlimited Broadband' service, which features no usage caps or traffic management on its unlimited broadband products. </p>
<p>Further BT options include their <a href="/broadband/products/bt_vision/" title="BT YouView Deals">BT YouView</a> TV service and super-fast <a href="/broadband/products/bt_infinity/" title="BT Infinity Deals">BT Infinity</a> fibre optic broadband. There's a range of Infinity options featuring discounted prices starting at only £9 (February 2013). BT also now offer line rental with a new <a href="/broadband/products/bt_phone_lines/" title="BT Line">BT Phoneline</a> for just £10.75 a month (if you pay upfront) - one of the lowest line rental prices in the UK.</p>
<p>You can now get <a href="/broadband/providers/talktalk/" title="TalkTalk Broadband">TalkTalk Broadband</a> with 3 months free (March 2013), plus free connection worth £30 (limited offer). TalkTalk Essentials broadband &amp; home phone is now £6.50 a month including unlimited downloads. Plus look out for free high street shopping vouchers from time to time!</p>
<p>Brand new EE broadband has replaced the popular Orange broadband products and limited launch promotional offers start from just £2.50 per month for the first 12 months (exclusive to Orange &amp; T-Mobile mobile customers), which is an exclusive offer to uSwitch.com! More info here: <a href="/broadband/providers/ee/" title="EE Broadband">EE Broadband</a>.</p>
<p>Plusnet have recently restructured their high-value broadband products and as part of the launch are offering half price deals lasting the full 12 months tenure. Prices start at just £2.99 a month (February 2013). Check out the latest Plusnet broadband and calls deals here: <a href="/broadband/providers/plusnet/" title="Plusnet Broadband">Plusnet Broadband</a>.</p>
<p>O2 customers can also now get <a href="/broadband/providers/o2/" title="O2 Broadband">O2 Broadband</a> with 12 months half price, priced at £6.25 per month on the 'All-Rounder' package. O2 offers low-cost broadband &amp; with home phone options too.</p>
<h4>Mobile broadband deals &amp; offers!</h4>
<p>While 3G devices such as the iPad now offer unrivalled broadband on the go options, online mobile broadband dongle deals for laptops continue to offer amazing flexibility and value. </p>
<p><a href="/broadband/providers/vodafone/" title="Vodafone Mobile Broadband">Vodafone Mobile Broadband</a> offers mobile broadband from just £3 a month for a casual data allowance.</p>
<p><a href="/broadband/providers/3/" title="Three Mobile Broadband">Three Mobile Broadband</a> offers a new range of mobile broadband deals with download limits of up to 15GB (£15.99 a month), plus amazing laptop &amp; netbook deals from £26.20. Three also offers a range of deals on MiFi (more info further down). Mifi deals start from £7.50.</p>
<h4>The best of our new broadband deals</h4>
<p>uSwitch.com now offers <a href="/broadband/compare/ipad_broadband_deals//" title="iPad Deals">iPad deals</a> with Three - this includes iPad 2 deals, as well as offers on the New iPad aka the iPad 3 (when in stock), plus iPad Micro SIM deals with mobile broadband. Get an iPad SIM from just £5 a month from Vodafone, 3 Mobile, O2 and Orange: <a href="/broadband/compare/ipad_microsim_deals/" title="iPad MicroSIM Deals">iPad Micro-SIM deals</a></p>
<p>As previously mentioned, we now offer deals on the latest mobile WiFi gadget: <a href="/broadband/compare/mifi_mobile_broadband/" title="MiFi">the MiFi</a>. Get mobile broadband on the go without a dongle or wireless router with mobile WiFi and share your <a href="/broadband/compare/mifi_mobile_broadband/" title="MiFi Broadband">MiFi mobile broadband</a> connection with friends, family and colleagues in the same room. MiFi is the new, mobile WiFi face of mobile broadband – now from just £7.50 a month.</p>
<h4>What happened to Top 10 Broadband on Top10.com?</h4>
<p>In July 2011, the mobiles &amp; broadband deal comparison on Top10.com was acquired by uSwitch and the existing broadband page was moved here: <a href="/broadband/packages" title="Top 10 Broadband Packages">Top 10 Broadband Packages</a> . Just like Top10.com, uSwitch highlights the best broadband deals to help you find the right one for your needs. </p>
</div>
</div>
</div>
<div class='us-tab' id='tab7'>
<h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab7">
<svg version="1.1" id="Chevron_small_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M11,10L7.859,6.58c-0.268-0.27-0.268-0.707,0-0.978c0.268-0.27,0.701-0.27,0.969,0l3.83,3.908
c0.268,0.271,0.268,0.709,0,0.979l-3.83,3.908c-0.267,0.272-0.701,0.27-0.969,0c-0.268-0.269-0.268-0.707,0-0.978L11,10z"/>
</svg>
About this site</a></h2>
<div class='us-tab-content'>
<p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola
meatball. Pork belly beef ham landjaeger.</p>
</div>
</div>
</div>
</div>
</div>
Raw
script.js
var tabs = new Tabs({
tabContainer: ".us-tabs",
tabLinks: ".us-tabs-nav-mainlink",
tabTitle: "us-tab-title",
activeClass: "active",
changeUrls: true,
collapsible: true,
autoScroll: false
});
Raw
scripts
<script src="http://assets0.uswitch.com/broadband/resources/application-23e66f5af35c449ec1972096e7881b57.js"></script>
Raw
style.css
.container {margin-top:50px;}
.us-tabs-nav-wrapper {
padding-top: 0;
}
.us-tabs-nav {
background-color: #f4f4f4;
}
.us-tabs-nav-link {
flex-grow: 1;
background: transparent;
font-size: 16px;
padding: 8px 1em 12px;
border-radius: 0;
border-top: 5px solid #f4f4f4;
color: #97999a;
border-right: 1px solid #fff;
transition: all 150ms;
&:last-child {
border-right: 0;
}
&:hover {
border-top: 5px solid #008fe9;
background-color: rgba(255,255,255,0.35);
color: #008fe9;
}
}
.us-tabs-nav-link.active {
box-shadow: none;
border-top: 5px solid #008fe9;
color: #008fe9;
cursor: default;
&:hover {
background-color: #fff;
}
}
.us-tab-title a {
background-color: #f4f4f4;
border-top: 4px solid #f4f4f4;
color: #97999a;
&:before {
display: none;
}
&:hover {
background-color: rgba(255,255,255,0.35);
border-top: 4px solid #008fe9;
color: #008fe9;
transition: transform 150ms linear;
#Chevron_small_right {
fill: #008fe9;
transform: rotate(90deg);
transition: transform 150ms linear;
}
}
#Chevron_small_right {
height: 25px;
fill: #97999a;
float: right;
transform: rotate(90deg);
}
.active & {
background-color: #fff;
border-top: 4px solid #008fe9;
color: #008fe9;
#Chevron_small_right {
fill: #008fe9;
transform: rotate(-90deg);
}
}
}
Raw
styles
<link href="https://assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-content.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment