Skip to content

Instantly share code, notes, and snippets.

@phawk

phawk/non-single-use.html.erb

Created December 4, 2017 22:06
Show Gist options
  • Save phawk/b748503799b520f9f9c1eadb435dd4a1 to your computer and use it in GitHub Desktop.
Save phawk/b748503799b520f9f9c1eadb435dd4a1 to your computer and use it in GitHub Desktop.
Download ZIP
Single use classes HTML bloat
Raw
non-single-use.html.erb
<%= page_title("Account") %>
<%= render 'my_account/shared/header', current_section: "rewards" %>
<div class="container">
<div class="tab-content">
<div class="grid">
<div class="col-2-3">
<h3 class="heading">Bonus Points <span>2/8 bonus points earned</span></h3>
<p>Get even greater value from your rewards points by redeeming them against these special offers below. These offers are a one time only use and only unlock as and when you reach the Rewards Level required to do so.</p>
<div class="bonus-tiles">
<div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile">
<h4>50 points</h4>
<span>
<i class="ico-ticket"></i>
</span>
<p>Sign up for a Sonic Academy Account</p>
</div>
</div>
<!-- /.bonus-tiles -->
</div><!--
--><div class="col-3">
<h3 class="heading-small-caps">Subscription loyalty bonuses</h3>
<div class="background-gradient-primary">
<p><span>50 points</span></p>
<p>Subscribe for 3 Months</p>
</div>
<div class="background-gradient-primary">
<p><span>50 points</span> <span class="float-right">10 days to go</span></p>
<p>Subscribe for 6 Months</p>
</div>
<div class="background-gradient-primary">
<p><span>50 points</span></p>
<p>Subscribe for 9 Months</p>
</div>
<div class="background-gradient-primary">
<p><span>50 points</span></p>
<p>Subscribe for 12 Months</p>
</div>
</div>
</div>
<div class="grid">
<div class="col-2-3">
<h3 class="heading">Rewards Points Available To Spend</h3>
<p>Get even greater value from your rewards points by redeeming them against these special offers below. These offers are a one time only use and only unlock as and when you reach the Rewards Level required to do so.</p>
</div>
</div>
<div class="grid">
<div class="col-3">
<div class="voucher-tile">
<h4>Level 1</h4>
<span class="logo"></span>
<p>Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile">
<h4>Level 1</h4>
<span class="logo"></span>
<p>Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile">
<h4>Level 1</h4>
<span class="logo"></span>
<p>Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile">
<h4>Level 1</h4>
<span class="logo"></span>
<p>Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile">
<h4>Level 1</h4>
<span class="logo"></span>
<p>Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile">
<h4>Level 1</h4>
<span class="logo"></span>
<p>Sign up for a Sonic Academy Account</p>
</div>
</div>
</div>
</div>
<!-- /tab-content rewards-tab -->
</div>
Raw
single-use.html.erb
<%= page_title("Account") %>
<%= render 'my_account/shared/header', current_section: "rewards" %>
<div class="container marginBottom-extra-large">
<div class="tab-content">
<div class="grid marginBottom-large">
<div class="col-2-3 paddingRight-extra-large">
<h3 class="heading color-dark">Bonus Points <span class="float-right fontSize-small">2/8 bonus points earned</span></h3>
<p class="fontSize-regular opacity-60 marginBottom-large">Get even greater value from your rewards points by redeeming them against these special offers below. These offers are a one time only use and only unlock as and when you reach the Rewards Level required to do so.</p>
<div class="bonus-tiles">
<div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div><!--
--><div class="square-tile bonus-tile marginBottom-medium marginRight-medium">
<h4 class="tile-title color-white heading-small-caps">50 points</h4>
<span class="circle display-inline-block border borderWidth-small borderRadius color-gold">
<i class="ico-ticket verticalAlign-middle"></i>
</span>
<p class="tile-description color-white">Sign up for a Sonic Academy Account</p>
</div>
</div>
<!-- /.bonus-tiles -->
</div><!--
--><div class="col-3">
<h3 class="color-dark heading-small-caps">Subscription loyalty bonuses</h3>
<div class="background-gradient-primary borderRadius-medium padding-medium marginBottom-medium">
<p class="opacity-60 color-white marginBottom-none"><span class="heading-small-caps">50 points</span></p>
<p class="paragraph-large color-white marginBottom-none">Subscribe for 3 Months</p>
</div>
<div class="background-gradient-primary borderRadius-medium padding-medium marginBottom-medium opacity-80">
<p class="opacity-60 color-white marginBottom-none"><span class="heading-small-caps">50 points</span> <span class="float-right">10 days to go</span></p>
<p class="paragraph-large color-white marginBottom-none">Subscribe for 6 Months</p>
</div>
<div class="background-gradient-primary borderRadius-medium padding-medium marginBottom-medium opacity-40">
<p class="opacity-60 color-white marginBottom-none"><span class="heading-small-caps">50 points</span></p>
<p class="paragraph-large color-white marginBottom-none">Subscribe for 9 Months</p>
</div>
<div class="background-gradient-primary borderRadius-medium padding-medium marginBottom-medium opacity-20">
<p class="opacity-60 color-white marginBottom-none"><span class="heading-small-caps">50 points</span></p>
<p class="paragraph-large color-white marginBottom-none">Subscribe for 12 Months</p>
</div>
</div>
</div>
<div class="grid">
<div class="col-2-3">
<h3 class="heading color-dark">Rewards Points Available To Spend</h3>
<p class="fontSize-regular opacity-60 marginBottom-large">Get even greater value from your rewards points by redeeming them against these special offers below. These offers are a one time only use and only unlock as and when you reach the Rewards Level required to do so.</p>
</div>
</div>
<div class="grid">
<div class="col-3">
<div class="voucher-tile padding-medium">
<h4 class="tile-title color-white heading-small-caps marginBottom-medium">Level 1</h4>
<span class="logo logo-small logo-white marginBottom-small"></span>
<p class="tile-description color-white marginBottom-none">Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile padding-medium">
<h4 class="tile-title color-white heading-small-caps marginBottom-medium">Level 1</h4>
<span class="logo logo-small logo-white marginBottom-small"></span>
<p class="tile-description color-white marginBottom-none">Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile padding-medium">
<h4 class="tile-title color-white heading-small-caps marginBottom-medium">Level 1</h4>
<span class="logo logo-small logo-white marginBottom-small"></span>
<p class="tile-description color-white marginBottom-none">Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile padding-medium">
<h4 class="tile-title color-white heading-small-caps marginBottom-medium">Level 1</h4>
<span class="logo logo-small logo-white marginBottom-small"></span>
<p class="tile-description color-white marginBottom-none">Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile padding-medium">
<h4 class="tile-title color-white heading-small-caps marginBottom-medium">Level 1</h4>
<span class="logo logo-small logo-white marginBottom-small"></span>
<p class="tile-description color-white marginBottom-none">Sign up for a Sonic Academy Account</p>
</div>
</div><!--
--><div class="col-3">
<div class="voucher-tile padding-medium">
<h4 class="tile-title color-white heading-small-caps marginBottom-medium">Level 1</h4>
<span class="logo logo-small logo-white marginBottom-small"></span>
<p class="tile-description color-white marginBottom-none">Sign up for a Sonic Academy Account</p>
</div>
</div>
</div>
</div>
<!-- /tab-content rewards-tab -->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment