Hi, I am...
Aury Silva
Front End Developer
Email Developer
Digital Designer

3 Years +

Commercial Experience

4 Years +

Freelance Experience

BA Digital Design

Currently at Hull University

3+

Years of commercial experience
Who am I?

About me

I am a Front End Developer from Hull, United Kingdom. With just over 3 years of commercial experience, I carry a robust digital design set of skills within Adobe Suite as well as a good understanding of 3D designs. I like to create digital magic and elevate user experience (UX) to the next level while learning new programming skills and languages.

  • Have worked from home
  • Able to deliver under pressure
  • Great communicator
  • Have an eye for detail
Why hire me?

My Expertise Area

These are some of the programming languages as well as tools and skills I acquired throughout the past few years working within the industry.

HTML & CSS (SASS, Grid, Flex Box, Bootstrap, FontAwsome) 95%
JavaScript (jQuery) 75%
React (API, Axios, JSON, Components, Props ) 55%
PHP 45%
phpMyAdmin (MySQL) 70%
C# (MVC / .NET Core / ASP.NET ) 40%
Email Development 92%
CRM (Salesforce / Marketo / Adestra / Pardot / Responsys) 88%
CMS (WordPress custom themes, layouts, ACF, post types etc.) 85%
Adobe Suite 82%
Ruby on Rails / SEO 80%
Page Builders (Instapages / Unbounce) 95%

Working Process

My top 3 most important rules when working remotely...

01.

Communication

I believe that often, constant communication with work colleagues avoids sudden mistakes.

02.

Set Daily Goals

As for me, this is one of the most important work-from-home rules for maximum productivity.

03.

Identify Most Productive Hours

Having nine to five job, you go to work and try to get things done but when working from home, allows any individual to make the most out of their peak productivity hours

What have I been doing?

Projects I created and colaborated

Salesforce (a modular email purposely built for Pardot)

Salesforce (a modular email purposely built for Pardot)

This email was specifically built to be used within Salesforce (Pardot). It is built with muiltiple section where the MA team can then choose and edit and only use the ones the need for an email.

British Gas

Full HTML code:

This is the code for the email

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> </title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@font-face {
font-family: "BGFlame-Light";
src: url("https://go.business.britishgas.co.uk/l/465112/2020-04-06/23qvvd/465112/64465/BGFlame_Regular.ttf") format("truetype");
}
* {
padding: 0;
margin: 0;
}
#outlook a {
padding: 0;
}
a, a:link, a:visited {text-decoration: none; color: #009aff;} 
a:hover {text-decoration: underline;}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.full-width {
width: 100% !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (max-width: 650px) {
.mob-block {display: block !important;}
/* By Aury Silva*/
.full-width {
width: 100% !important;
text-align: center !important;
word-break: break-word;
}
table {
max-width: 650px !important;
}
td {
width: 100% !important;
max-width: 650px !important;
text-align: center !important;
}
.mob-inline {
display: inline-block;
}
.no-mob {
display: none !important;
}
.mob-pad {
padding: 20px 20px !important; 
}
.mob-center {
text-align: center !important;
}
}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
*[class~="hide_on_mobile"] {
display: none !important;
}
} 
</style>
</head>
<body style="word-spacing: normal; background-color: #e8e8e8;">
<table style="width: 100%; background: #e8e8e8;">
<tr>
<td>
<center>
<table style="width: 650px; background: #e8e8e8; margin: 0 auto; text-align: left;">
<tr>
<td>                  
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td style="max-width: 650px; margin: 0 auto;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="max-width: 650px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- Top header -->
<tr pardot-repeatable="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff" class="full-width">
<tr>
<td style="padding: 5px 5px 5px 5px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr pardot-repeatable="">                              
<td pardot-region="" align="center" style="padding: 15px 15px 15px 15px; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 2; text-align: center; color: #333333;" class="full-width">
Quarterly Report &nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" target="_blank">View in browser</a>                                  
</td>
</tr>
</table>
</td>
</tr>
</table>                      
</td>
</tr>
<!-- Banner 1 -->
<tr pardot-repeatable="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff" class="full-width">
<tr>
<td height="325" bgcolor="#009aff" style="padding: 0 0 0 0;" class="full-width mob-center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff" >
<tr>
<td height="325" bgcolor="#009aff" class="full-width mob-center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff" class="full-width">
<tr>
<!-- Left banner text -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td style="padding: 30px 5px 30px 30px;" class="mob-pad">
<table>
<tr>
<td width="100%" class="mob-center">                                                  
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td style="padding: 0px 0px 25px 0px;" class="mob-center">
<img pardot-region="" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png" width="130" alt="" class="full-width" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:130px;height:auto; ">
</td>
</tr>
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0px 0px 20px 0px; font-family: Arial, sans-serif;font-size: 32px;line-height: 1.2;text-align: left;color: #ffffff;" class="mob-center">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr pardot-repeatable="">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">                                                              
<td style="padding: 0px 0px 22px 0px;" class="mob-center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> 
<!-- Right banner image -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="no-mob">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td>
<img pardot-region="" class="full-width" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bx7/465112/1641918644EefQ88NE/banner_man.png" width="325" height="325" pardot-width="325" pardot-height="325" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:325px; height:325px; max-height: 325px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // Right banner image -->
</tr>
</table>                                
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Banner 2 -->
<tr pardot-repeatable="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td height="325" bgcolor="#009aff" style="padding: 0 0 0 0;" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td height="325" bgcolor="#009aff" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<!-- Left banner image -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="full-width no-mob">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td>
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-08-10/25r3kh/465112/1628587698dIl3wzyr/4819.005.BG.July.HTML.BannersOPT2_1.C5.png" width="325" height="325" pardot-width="325" pardot-height="325" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:325px; height:325px; max-height: 325px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- Right banner text -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td style="padding: 30px 30px 30px 5px;" class="mob-pad">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td class="mob-center">                                                  
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0px 0px 20px 0px; font-family: Arial, sans-serif;font-size: 32px;line-height: 1.2;text-align: left; color: #ffffff;" class="mob-center">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0px 0px 22px 0px;">
<img pardot-region="" class="full-width" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
<tr pardot-repeatable="">
<td align="right" width="325" style="padding: 0px 0px 21px 0px;" class="full-width mob-center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td align="right" class="mob-center">
<img pardot-region="" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png" width="130" alt="" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:130px;height:auto;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> 
<!-- // Right banner text -->
</tr>
</table>                                
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // Banner 2 -->
<!-- Body rows -->
<tr>
<td style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff" class="full-width">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 35px 60px 35px 60px;" class="full-width mob-pad">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="530" style="width:100%; max-width: 530px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<table  width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- First body row -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 0 0 40px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1; text-align: center; color: #0099ff">
Dear %%first_name%%,
</td>
</tr> 
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</td>
</tr> 
<tr pardot-repeatable="">
<td pardot-region="" align="center" width="100%" style="width: 100%;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr> 
</table>
</td>
</tr>
<!-- 2nd body row -->
<tr pardot-repeatable="">
<td width="530" align="left" style="padding: 0 0 40px 0;" class="full-width mob-pad mob-center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1; text-align: left; color: #0099ff" class="mob-center">
Dear %%first_name%%,
</td>
</tr> 
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; color: #333333;" class="mob-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</td>
</tr> 
<tr pardot-repeatable="">
<td align="left" width="100%" style="width: 100%;" class="mob-center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr> 
</table>
</td>
</tr>
<!-- 3rd body row -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 0 0 0 0; direction: ltr;" class="mob-center full-width">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td pardot-repeatable="" width="265" class="mob-inline">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>                                                      
<td align="left" style="padding: 0 0 0 0;" class="mob-center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="left" pardot-region="" style="padding: 0 0 20px 0; text-align: left;" class="mob-center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-08-11/25r723/465112/1628672080vpL6zKs7/4189.005.BG.July.HTML.ImagesOPT1_1.C5.png" width="250" height="250" pardot-width="250" pardot-height="250" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:240px; height:240px; max-height: 240px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" width="265" class="mob-inline" style="vertical-align: top; padding: 0px 5px 5px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; color: #333333;">
<table  width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td style="padding: 0;" class="full-width">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td pardot-region="" style="padding: 0 0 15px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1.2; text-align: left; color: #0099ff" class="mob-center">
Nam in accumsan metus
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 265px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td pardot-region="" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; color: #333333;" class="mob-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit.
<br><br>
Vivamus aliquam sem non blandit
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 20px 0 0 0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 265px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td align="center" width="100%" style="width: 100%;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 4th body row texts -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 35px 0 5px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td pardot-region="" align="center" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1; text-align: center; color: #0099ff">
Morbi non enim nulla
</td>
</tr> 
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim. Suspendisse viverra volutpat nisi sit amet mollis.
</td>
</tr>
</table>
</td>
</tr>
<!-- 5th body row 3 icons -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 5px 0 0px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="530" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- col -->
<td pardot-repeatable="" align="center" width="170" style="max-width: 170px; display: inline-block; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="170" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1k/465112/1641919297rozWJRBr/4819.005.BG.July.HTML.Icon.Blue_Electricity.C5.png" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
</tr>
<tr>
<td pardot-region="" align="center" style="padding: 0 0 10px 0; font-family: 'BGFlame-Light', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; text-align: center; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr> 
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</td>
</tr>
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- col -->
<td pardot-repeatable="" align="center" width="170" style="max-width: 170px; display: inline-block; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="170" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1p/465112/1641919318NqvIunjz/4819.005.BG.July.HTML.Icon.Blue_ReportDashboard.C5.pngg" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
</tr>
<tr>
<td pardot-region="" align="center" style="padding: 0 0 10px 0; font-family: 'BGFlame-Light', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; text-align: center; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr> 
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</td>
</tr>
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- col -->
<td pardot-repeatable="" align="center" width="170" style="max-width: 170px; display: inline-block; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="170" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1m/465112/1641919308orWqqfe8/4819.005.BG.July.HTML.Icon.Blue_Gas.C5.png" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
</tr>
<tr>
<td pardot-region="" align="center" style="padding: 0 0 10px 0; font-family: 'BGFlame-Light', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; text-align: center; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr> 
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</td>
</tr>
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 6th body row 1 icon and text -->
<tr pardot-repeatable="">
<td width="530" style="display: block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="530">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="110" align="left" class="mob-inline" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1h/465112/1641919285pfyshpv5/4819.005.BG.July.HTML.Icon.Blue_Diary_Calendar.C5.png" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
<td width="440" class="mob-inline" style="vertical-align: top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 450px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td pardot-region="" style="padding: 0 0 10px 0; font-family: Arial, sans-serif; font-size: 16px; line-height: 26px; text-align: left; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr>
<td pardot-region="" style="font-family: Arial, sans-serif;  font-size: 12px; line-height: 18px; text-align: left; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>                              
</td>
</tr>
</table>
</td>
</tr>
<!-- Grey footer -->
<tr pardot-repeatable="">
<td width="650" style="width: 650px; max-width: 650px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #505050; font-family: Arial, sans-serif;" width="100%" bgcolor="#505050">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #505050; font-family: Arial, sans-serif;" width="100%" bgcolor="#505050">
<tr>                                        
<td width="100%" align="center" pardot-region="" style="width: 650px;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bxt/465112/1641918836KSBABWUN/bg_grey.png" width="650" height="89" pardot-width="650" pardot-height="89" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:650px; height:auto; max-height: 89px; ">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650" align="center" bgcolor="#505050" style="background-color: #505050;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#505050">
<tr>
<td width="650" align="center" pardot-region="" style="width: 100%; max-width: 650px; padding: 20px 80px 50px 80px; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 10px; line-height: 17px; color: #ffffff; background-color: #505050;">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Blue footer -->
<tr pardot-repeatable="">
<td width="650" style="width: 650px; max-width: 650px;" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-region="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>                                        
<td width="100%" align="center" pardot-region="" style="width: 650px;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262cw3/465112/1641952840tv7DgmUJ/Bottom_DEV_Blue.V2.jpg" width="650" height="89" pardot-width="650" pardot-height="89" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:650px; height:89px; max-height: 89px; ">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-region="">
<td width="650" align="center" bgcolor="#009aff" style="background-color: #009aff;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 450px; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td width="650" align="center" pardot-region="" style="width: 100%; max-width: 650px; padding: 20px 80px 50px 80px; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 10px; line-height: 17px; color: #ffffff; background-color: #009aff;">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td width="650" style="width: 650px; max-width: 650px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td width="200" align="center" class="mob-inline full-width no-mob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td style="padding: 5px 5px 5px 5px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td align="center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-06-28/25n96c/465112/1624895655zhppdz8D/TW_DEV.png" width="25" height="25" pardot-width="25" pardot-height="25" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:25px; height:30px; max-height: 25px;">
</td>
<td align="center" style="width: 30px; padding: 5px 5px 5px 5px;">
<img pardot-region="" alt="" src="https://storage.pardot.com/465112/1624895735nEwjfOp6/YT_DEV.png" width="30" height="25" pardot-width="30" pardot-height="25" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:30px; height:25px; max-height: 25px;">
</td>
<td align="center">
<img pardot-region="" alt="" src="https://storage.pardot.com/465112/1624895987BrFKz3OK/LI_DEV.png" width="30" height="30" pardot-width="30" pardot-height="30" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:30px; height:30px; max-height: 30px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="325">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td class="mob-inline full-width" style=" padding: 20px 5px 20px 0; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; text-align: right; text-decoration: none; color: #333333;">
<a href="http://www.britishgas.co.uk/business" text-decoration="none">T&amp;Cs</a> | <a href="http://www.britishgas.co.uk/business" text-decoration="none">Privacy Policy</a> | <a href="%%unsubscribe%%" text-decoration="none">Unsubscribe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>

Here is an optimised version that contains less code and is fully compatible with Salesforce (Pardot) and different ESP including the most popular ones such as Outlook, Gmail, and Apple mail 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> </title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@font-face {
font-family: "BGFlame-Light";
src: url("https://go.business.britishgas.co.uk/l/465112/2020-04-06/23qvvd/465112/64465/BGFlame_Regular.ttf") format("truetype");
}    
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
color: #333333;
font-size: 13px; 
background-color: #e8e8e8;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table {
border-spacing: 0;
}
td {
padding: 0;
font-family: Arial, sans-serif;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
}
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #e8e8e8;
padding-bottom: 0px;
font-size: 13px;
color: #333333;
}
.main {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 650px;
border-spacing: 0;
font-size: 16px;
line-height: 21px;
font-family: sans-serif;
color: #171a1b;
}
.three-columns {
width: 33%;
display: inline-block;
}
.two-columns {
width: 50%;
display: inline-block;
}
.column {
width: 100%;
display: block;
}
.top-header-social {
padding: 0 3px;
}
/* General styles */
.align-top {
vertical-align: top;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.font-13 {
font-size: 13px;
}
.font-15 {
font-size: 14px;
}
.font-22 {
font-size: 22px;
}
.text-dark {
color: #333333;
}
.text-white {
color: #ffffff;
}
.text-blue {
color: #0099ff;
}
.white-bg {
background-color: #ffffff;
}
.blue-bg {
background-color: #0099ff;
}
/* Pardot Edit reset*/
*[pardot-region]:empty {
padding: 0px !important;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix {
width: 100% !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media all and (max-width: 650px) {
.no-mob {
display: none !important;
}
.mob-center {
text-align: center !important;
}
.three-columns, .two-columns, .column {
width: 100%;
display: inline-block;
}
td {
display: inline-block; text-align: center !important;
}
.mob-pd-35-0 {
padding: 35px 0 35px 0 !important;
}
.mob-pd-20-0 {
padding: 20px 0 20px 0 !important;
}
}
</style>
</style>
</head>
<body style="word-spacing: normal; background-color: #e8e8e8">
<center class="wrapper">
<table class="main">
<!-- TOP HEADER -->
<tr pardot-repeatable="">
<td class="column">
<table width="100%">
<tr>
<td align="center" class="culumn mob-pd-20-0" style="padding: 10px 20px 10px 20px;">
<table width="100%">
<tr>
<td align="center" class="column">                        
<p pardot-region="" class="text-center font-13 mob-center" style="text-align: center; font-size: 13px; color: #333333; ">
Quarterly Report | <a href="">View in browser</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // TOP HEADER -->
<!-- BANNER 1 -->
<tr pardot-repeatable="">
<td width="100%" height="auto" class="blue-bg" style="padding: 0 0 0 0;">
<table width="100%" bgcolor="#0099ff">
<tr>
<td pardot-repeatable="" class="two-columns" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<td class="mob-pd-35-0" style="padding: 35px 5px 35px 35px;">                      
<table width="100%">
<tr>
<td style="padding: 0 0 20px 0;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="150" height="92" style="width: 100%; max-width: 150px; height: 92px; max-height: 92px; border: 0; display: block; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td class="mob-center">
<p pardot-region="" class="mob-center" style="padding: 0px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 30px;line-height: 1.2;text-align: left; color: #ffffff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>                
<td pardot-repeatable="" class="two-columns no-mob" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<img pardot-region="" width="325" height="325" style="width: 100%; max-width: 325px; height: 325px; max-height: 325px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bx7/465112/1641918644EefQ88NE/banner_man.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>          
</tr>
<!-- // BANNER 1 -->
<!-- BANNER 2 -->
<tr pardot-repeatable="">
<td width="100%" height="auto" class="blue-bg" style="padding: 0 0 0 0;">
<table width="100%" bgcolor="#0099ff">
<tr>                
<td pardot-repeatable="" class="two-columns no-mob" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<img pardot-region="" width="325" height="325" style="width: 100%; max-width: 325px; height: 325px; max-height: 325px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-08-10/25r3kh/465112/1628587698dIl3wzyr/4819.005.BG.July.HTML.BannersOPT2_1.C5.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" class="two-columns" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<td class="mob-pd-35-0" style="padding: 35px 5px 35px 5px;">                      
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="150" height="92" style="width: 100%; max-width: 150px; height: 92px; max-height: 92px; border: 0; display: block; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td class="mob-center">
<p pardot-region="" class="mob-center" style="padding: 0px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 30px;line-height: 1.2;text-align: left; color: #ffffff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>          
</tr>
<!-- // BANNER 2 -->
<!-- BODY ROW 1 -->
<tr pardot-repeatable="">
<td style="padding: 35px 55px 35px 55px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr pardot-repeatable="">
<td align="center" style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="column">
<p pardot-region="" class="text-center font-22 text-blue" style="text-align: center; font-size: 22px; color: #0099ff;">
Dear %%first_name%%,
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="column">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="column text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 1 -->
<!-- BODY ROW 2 -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 35px 55px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-left font-22 text-blue mob-center" style="text-align: left; font-size: 22px; color: #0099ff;">
Dear %%first_name%%,
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-left font-13 text-dark mob-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column text-left mob-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 2 -->
<!-- BODY ROW 3 image and text -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 35px 55px;">
<table width="100%">
<tr>
<td class="two-columns">
<table width="100%">
<tr>
<td style="padding: 0 0 10px 0;">                        
<table width="100%">
<tr>
<td class="mob-center">
<img pardot-region="" width="250" height="250" style="width: 100%; max-width: 250px; height: 250px; max-height: 250px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-08-11/25r723/465112/1628672080vpL6zKs7/4189.005.BG.July.HTML.ImagesOPT1_1.C5.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" class="two-columns align-top">
<table width="100%">
<tr pardot-repeatable="">
<td class="mob-center">
<p pardot-region="" class="text-left font-22 text-blue mob-center" style="text-align: left; font-size: 22px; color: #0099ff;">
Nam in accumsan metus
</p>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 10px 0 0 0;">
<table width="100%">
<tr>
<td class="column">
<p pardot-region="" class="text-left font-13 text-dark mob-center" style="text-align: left; font-size: 13px; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit.us
<br><br>
Vivamus aliquam sem non blandit
</p>
</td>
</tr>
</table>                        
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 20px 0 0 0;">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td class="mob-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>                        
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 3 image and text -->
<!-- BODY ROW 4 text centered -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 35px 55px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-center font-22 text-blue" style="text-align: center; font-size: 22px; color: #0099ff;">
Morbi non enim nulla
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 5px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim. Suspendisse viverra volutpat nisi sit amet mollis.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 4 text centered -->
<!-- BODY ROW 5 image icon and text -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 15px 55px;">
<table width="100%" class="column">
<tr>
<!-- col -->
<td class="three-columns">
<table width="100%">
<tr>
<td style="padding: 0 10px 0 10px;">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1k/465112/1641919297rozWJRBr/4819.005.BG.July.HTML.Icon.Blue_Electricity.C5.png">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-15 text-blue" style="text-align: center; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 15px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 35px 0;">
<table width="100%">
<tr>                                  
<td align="center" class="text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
<!-- col -->
<td pardot-repeatable="" class="three-columns">
<table width="100%">
<tr>
<td style="padding: 0 10px 0 10px;">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1p/465112/1641919318NqvIunjz/4819.005.BG.July.HTML.Icon.Blue_ReportDashboard.C5.pngg">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-15 text-blue" style="text-align: center; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 15px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 35px 0;">
<table width="100%">
<tr>                                  
<td class="text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
<!-- col -->
<td pardot-repeatable="" class="three-columns">
<table width="100%">
<tr>
<td style="padding: 0 10px 0 10px;">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1m/465112/1641919308orWqqfe8/4819.005.BG.July.HTML.Icon.Blue_Gas.C5.png">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-15 text-blue" style="text-align: center; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 15px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 35px 0;">
<table width="100%">
<tr>                                  
<td class="text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 5 image and text -->
<!-- BODY ROW 6 icon and text -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 55px 55px;">
<table width="100%">
<tr>
<td class="column">
<table width="100%">
<tr pardot-repeatable="">
<td pardot-repeatable="" width="85" class="mob-center" style="padding: 0 0 10px 0;">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1h/465112/1641919285pfyshpv5/4819.005.BG.July.HTML.Icon.Blue_Diary_Calendar.C5.png">
</td>
<td pardot-repeatable="" width="30" height="15px" class="mob-center no-mob" style="height: 15px;">
&nbsp;
</td>
<td class="mob-center align-top">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0;">
<p pardot-region="" class="text-left font-15 text-blue mob-center" style="text-align: left; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
<tr pardot-repeatable="">
<td>
<p pardot-region="" class="text-left font-13 text-dark mob-center" style="text-align: left; font-size: 13px; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 6 icon and text -->
<!-- GREY FOOTER -->
<tr pardot-repeatable="">
<td style="background-color: #ffffff;">
<table width="100%" bgcolor="#505050" style="background-color: #505050;">
<tr pardot-repeatable="">
<td class="column" style="background-color: #505050;">
<table width="100%" class="column" bgcolor="#505050">
<tr>
<td class="column">
<img pardot-region="" width="650" height="auto" style="width: 100%; max-width: 650px; height: auto; max-height: 89px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bxt/465112/1641918836KSBABWUN/bg_grey.png">
</td>
</tr>
</table>                  
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 10px 85px 30px 85px; background-color: #505050;">
<table width="100%" class="column" bgcolor="#505050">
<tr>
<td class="column">
<table width="100%" class="column" bgcolor="#505050">
<tr>
<td align="center">                             
<p pardot-region="" class="text-center text-white" style="text-align: center; font-size: 10px; color: #ffffff; line-height: 1.4">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>         
</tr>
</table>
</td>
</tr>
<!-- // GREY FOOTER -->
<!-- BLUE FOOTER -->
<tr pardot-repeatable="">
<td style="background-color: #ffffff;">
<table width="100%" bgcolor="#505050" style="background-color: #505050;">
<tr pardot-repeatable="">
<td class="column" style="background-color: #0099ff;">
<table width="100%" class="column" bgcolor="#0099ff">
<tr>
<td class="column">
<img pardot-region="" width="650" height="auto" style="width: 100%; max-width: 650px; height: auto; max-height: 89px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262cw3/465112/1641952840tv7DgmUJ/Bottom_DEV_Blue.V2.jpg">
</td>
</tr>
</table>                  
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 10px 85px 30px 85px; background-color: #0099ff;">
<table width="100%" class="column" bgcolor="#0099ff">
<tr>
<td class="column">
<table width="100%" class="column" bgcolor="#0099ff">
<tr>
<td align="center">                             
<p pardot-region="" class="text-center text-white" style="text-align: center; font-size: 10px; color: #ffffff; line-height: 1.4">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>         
</tr>
</table>
</td>
</tr>
<!-- // BLUE FOOTER -->
<!-- SOCIALS AND FOOTER LINKS -->
<tr pardot-repeatable="">
<td class="column">
<table width="100%" bgcolor="#e8e8e8" style="background-color: #e8e8e8;">
<tr>
<td class="column">
<table width="100%" bgcolor="#e8e8e8">
<tr>
<td class="mob-pd-20-0" style="padding: 15px 5px 10px 35px;">                        
<table width="100%" bgcolor="#e8e8e8">
<tr>
<td pardot-repeatable="" class="two-columns mob-center">
<table width="100%" bgcolor="#e8e8e8">                               
<tr>
<td>
<table width="140" bgcolor="#e8e8e8" style="width: 140px;">
<tr>
<td pardot-repeatable="" style="width: 45px; display: inline-block;">
<a href="https://twitter.com/intent/tweet?url=https://twitter.com/BritishGas_UKB" target="_blank" text-decoration="none">
<img pardot-region="" width="30" height="25" style="width: 100%; max-width: 30px; height: 25px; max-height: 25px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-06-28/25n96c/465112/1624895655zhppdz8D/TW_DEV.png">
</a>
</td>
<td pardot-repeatable="" style="width: 45px; display: inline-block;">
<a href="https://www.youtube.com/user/BritishGasBusiness/" target="_blank" text-decoration="none">
<img pardot-region="" width="30" height="25" style="width: 100%; max-width: 30px; height: 25px; max-height: 25px; border: 0; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624895735nEwjfOp6/YT_DEV.png">
</a>
</td>
<td pardot-repeatable="" style="width: 45px; display: inline-block;">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.linkedin.com/company/british-gas-business/&title=&summary=&source=" target="_blank" text-decoration="none">
<img pardot-region="" width="30" height="25" style="width: 100%; max-width: 30px; height: 25px; max-height: 25px; border: 0; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624895987BrFKz3OK/LI_DEV.png">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" class="two-columns mob-center">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 11px; line-height: 18px; text-align: right; text-decoration: none; color: #333333;">
<a pardot-region="" href="http://www.britishgas.co.uk/business" target="_blank" text-decoration="none">T&amp;Cs</a>
| 
<a pardot-region="" href="http://www.britishgas.co.uk/business" target="_blank" text-decoration="none">Privacy Policy</a>
| 
<a pardot-region="" href="%%unsubscribe%%" target="_blank" text-decoration="none">Unsubscribe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> 
</tr>
</table>
</td>
</tr>
<!-- // SOCIALS AND FOOTER LINKS -->
</table>
</center>
</body>
</html>
View Live Version
View Optimised Version
Spread the love

“AS Finance” theme – HTML 5, CSS3 (SASS) & JS (Vanilla, jQuery)

“AS Finance” theme – HTML 5, CSS3 (SASS) & JS (Vanilla, jQuery)

I fully developed this responsive theme from scratch using HTML 5, CSS 3, Vanilla JavaScript, and jQuery. The purpose was to demonstrate some of my skills within mentioned languages, markup language, library and pre-processors.

Practice

The theme is a multipurpose theme however when I developed such, I specifically targeted a finance company hence the name “AS Finance”.

Features

Using the above-mentioned programming languages and libraries I first laid a full layout along with a plan before I started. Using Adobe XD, I have drawn a quick layout of it. Afterwards, I decided to use the following for development:

HTML 5 – hand-coded the entire layout

CSS 3 – The beauty of using CSS 3 what can I say?

What is Sass?

  • Sass stands for Syntactically Awesome Stylesheet
    • Sass is an extension to CSS
    • Sass is a CSS pre-processor
    • Sass is completely compatible with all versions of CSS
    • Sass reduces repetition of CSS and therefore saves time
    • Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
    • Sass is free to download and use

I used to full style the entire page where I made great use of both the CSS Grid system and FlexBox. Although I don’t think comparing the two should be an argument because they both have their own unique features depending on what you need to achieve but however, iI simply prefer to use them depending on what I think will achieve the task faster and better.

For example, I achieved the following end result using:

CSS Grid System:

Flexbox:

Then I also created single reusable cards using the Flexbox on which I could use on different sections of the site but however, that is not to say that the CSS grid wouldn’t achieve the same result (again my preference).

jQuery:

jQuery was used within different parts of the page such as the main slider, and testimonials all using Owl carousel.

However, in the below section, I included a play button on which when a user clicks it should popup a video ready to play. However, while opened, they are also presented with an “X” to close it or they can just press anywhere within the viewport.

Here is the code that achieved the below functionality:


// Open/close the homepage video
$('#playBtn').click(function() {
$('#playVideo').show().click(function() {
$(this).fadeOut(550);
});
});
$('#close').click(function() {
$('#playVideo').fadeOut(550);
});
Before the user clicks the PLAY button
After the user clicks the PLAY button

Another section using jQuery is the below section where when a user clicks “Contact us” it open/close a form while displaying different text for the title.

Before the user clicks the “Contact us” button
After the user clicks the “Contact us” button

Here is the code that achieved the above functionality: 

// Contact (to open/close form)
$('#contactBtn').click(function() {
$('#contactForm').toggle(1000);
$(this).text($(this).html() == 'Close' ? 'Contact us' : 'Close');
$('#formClosedText').toggle(500);
$('#formOpenedText').toggle(750);
});

JavaScript:

It was used for two main functionalities scroll to top, and the form.

The code for scroll to top:

// Scroll to top
var goToTop = $('.goToTop');
// logic
goToTop.on('click', () => {
$('html, body').animate({
scrollTop: $('html, body').offset().top,
});
});

The code for the form. It loops through different stages (Account, Personal, Image, and Finish)

// Form - home page
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
var current = 1;
var steps = $("fieldset").length;
setProgressBar(current);
$(".next").click(function() {
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'opacity': opacity
});
},
duration: 500
});
setProgressBar(++current);
});
$(".previous").click(function() {
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//Remove class active
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({
'opacity': opacity
});
},
duration: 500
});
setProgressBar(--current);
});
function setProgressBar(curStep) {
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width", percent + "%")
}
$(".submit").click(function() {
return false;
})

View Live Version
Spread the love

Nespresso – flavour profile quiz CRM

Nespresso – flavour profile quiz CRM

Official Nespresso® flavour quiz CRM “Find your your perfect Nespresso professional coffee moment.” A pure JavaScript, jQuery, HTML 5, and Bootstrap 4 web application.

ReallyB2B

This Nespresso Professional application has the core purpose of helping its consumers find out their best Nespresso coffee experience.

While working at ReallyB2B I had numerous opportunities to solely make huge modifications and amends to this particular web application. This was initially developed by the previous developer couple of years back. Credit to him, as in my opinion given the client’s requirements at the time he chose all the appropriate and most efficient programming languages to create the app.

Deployment
This is a pure hand-coded project hosted in Marketo.

While at ReallyB2B, one of Nespresso’s requests was to make some changes to the logic, changing and adding some images to it. While working on it I immediately noticed that this app has been almost created in two separated logics on which I kept wondering why.

Along with these changes, there were many more on which are impossible to write them all, therefore, I have left the link to both before after the changes were made at the bottom of this post.

Decision making (purely nightmare)

Nespresso (flavour profile quiz) Homepage

The app had a unique logic with its unique results for small (25ml) size coffees which on question 2 would then immediately reveal question 4 (Aroma) as question 3 no matter what the user’s choice on question 2 (Mild or Intense) would be. As part of the amend I was forced to practically restructure this application but merge this logic together so that onclick of question two would reveal question 3 (Kick) in its correct place and on click of question 3, it would then reveal question 4 (Aroma). However, on click question 2 (Mild or Intense), if the user chooses MILD it should still skip question 3 and show question 4 in its place instead, but if the user chooses INTENSE, then reveal question 3 and then question 4 as normal.

Ok, so I went ahead and made some modifications to a function called “question2Click“.

Before:

// Reusable function for when user selects an option
function question2Click() {
if (question1Answer === "Small") {
// Run code to show question 4 as question 3
narrowEarlyButtons();
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage4").css({
'display': 'block'
});
$("#heroImage4").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion4").show();
// Bring in first question
$("#containerQuestion4").animate({
'left': '0px'
}, 600);
}, 1250);
} else {
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage3").css({
'display': 'block'
});
$("#heroImage3").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion3").show();
// Bring in first question
$("#containerQuestion3").animate({
'left': '0px'
}, 600);
}, 1250);
}
}
// When user clicks a question 2 answer, assign them a value and progress the quiz
$("#question2Answer1").click(function() {
question2Answer = "Less";
question2Click();
});
$("#question2Answer2").click(function() {
question2Answer = "More";
question2Click();
});
$("#question2Answer3").click(function() {
question2Answer = "None";
question2Click();
});

Which would then reveal the following results:

  function narrowEarlyButtons() {
// Only show buttons relevant to the user's choices
if (question1Answer === "Small" && question2Answer === "Less") {
// Origin Guatemala
$("#question4Answer4").show();
// Origin Brazil
$("#question4Answer5").show();
} else if (question1Answer === "Small" && question2Answer === "More") {
// Ristretto Intenso
$("#question4Answer1").show();
// Ristretto
$("#question4Answer2").show();
}
}

However, in order to achieve the client’s request, I have changed both into the following 


// Result that shows when a user clicks on 25ml > MILD
function narrowEarlyButtons() {
// Only show buttons relevant to the user's choices
if (question1Answer === "Small" && question2Answer === "Less") {
// Origin Brazil
$("#question4Answer5").show()
// Bianco Delicato
$("#question4Answer9").show()
}
}
// Reusable function for when user selects an option
function question2Click() {
if (question1Answer === "Small" && question2Answer === "Less") {
// Run code to show question 4 as question 3
narrowEarlyButtons();
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage4").css({
'display': 'block'
});
$("#heroImage4").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion4").show();
// Bring in first question
$("#containerQuestion4").animate({
'left': '0px'
}, 600);
}, 1250);
} else {
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage3").css({
'display': 'block'
});
$("#heroImage3").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion3").show();
// Bring in first question
$("#containerQuestion3").animate({
'left': '0px'
}, 600);
}, 1250);
}
if (question1Answer === "Large" && question2Answer === "More") {
$("#question3Answer1").hide();
}
}
// When user clicks a question 2 answer, assign them a value and progress the quiz
$("#question2Answer1").click(function() {
question2Answer = "Less";
question2Click();
});
$("#question2Answer2").click(function() {
question2Answer = "More";
question2Click();
});
$("#question2Answer3").click(function() {
question2Answer = "None";
$("#question3Answer2").hide();
$("#question3Answer3").hide();
question2Click();
});
$("#goToQuestion2").click(function(){
// Go back to Q2
$("#containerQuestion3").animate({
'left': '100%'
}, 750);
setTimeout(function(){
$("#containerQuestion3").hide();
}, 850);
$("#heroImage3").animate({
'opacity': '0'
}, 500);
$("#heroImage2").css({
'display': 'block'
});
$("#heroImage2").animate({
'opacity': '1'
}, 500);
$("#question3Nav").removeClass('fill-nav');
$("#question3Nav").removeClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 2:").fadeIn();
});
setTimeout(function() {
$("#containerQuestion2").fadeIn(750);
}, 1000);
question2Answer = "";
});
// Reusable function for when user selects an option
function question3Click() {
// Fade out old text
$("#containerQuestion3").fadeOut(750);
// Animate background image transition
$("#heroImage3").animate({
'opacity': '0'
}, 500);
$("#heroImage4").css({
'display': 'block'
});
$("#heroImage4").animate({
'opacity': '1'
}, 500);
// Update nav menu
$("#question4Nav").addClass('fill-nav');
$("#question4Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 4:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion4").show();
// Bring in first question
$("#containerQuestion4").animate({
'left': '0px'
}, 600);
}, 1250);
}
View old version
View New version
View client’s site
Spread the love

Breaking Bad (React JS API, Axios, useState, useEffect )

Breaking Bad (React JS API, Axios, useState, useEffect )

Using a API from the series Breaking Bad, I decided to practice several React JS methods. The aim was to have a search field for when a user start typing something it would automatically loads up any actor’s name wich contains that letter.

Practice

Throughout this development, I have managed to have an understanding of several React methods such as useState, async, await (Axios), and getQuery from the search field.

View Live Version
DOWNLOAD THE BUILD VERSION
Spread the love

Pizza Restaurant (React JS), fully responsive React JS pizza restaurant theme.

Pizza Restaurant (React JS), fully responsive React JS pizza restaurant theme.

A fully responsive onepage React JS pizza restaurant theme, where I made a great use of React State, Components, JS data used for product attributes, all the way to hosting the website.

Practice

The design below is what I wanted to achieve using React JS.

Within Visual Studio Code I started by adding two main folders inside the source folder “components” where will hold all the different sections within the website such as the ones shown on the above image and “images” which will contain all images.

Each of these sections will contain its components this way is would be way easier for me to track them as I develop.

Once I had set all the folders I needed and got rid of unnecessary files, I started coding each section from top to bottom.

Unfortunately, I am unable to post the whole code/steps, however, I have included the download link for the build below.

View Live Version
DOWNLOAD THE BUILD VERSION
Spread the love

A Modern Responsive HTML Email – Compatible with Outlook, Gmail & Apple mail

A Modern Responsive HTML Email – Compatible with Outlook, Gmail & Apple mail

A fully responsive HTML email compactible with most ESP (Email Service Providers) including Outlook, Apple mail, and Gmail.

Practice


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern HTML Email Template - By Aury Silva</title>
<style type="text/css">
body {
margin: 0;
background-color: #cccccc;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 22px;
}
table {
border-spacing: 0;
}
tr {
padding: 0;
margin: 0;
}
td {
padding: 0;
}
img {
border: none;
}
/* Mobile Responsive Email Editor Standard Template built by Adestra Digital Design V2 Updated 07/16 RP*/
* {
-webkit-text-size-adjust: none !important;
}
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
/* Ensure text is not resized on Smartphones */
body,
td {
font-family: Arial, sans-serif;
margin: 0px;
}
/* Yahoo P tag override */
p {
margin-bottom: 14px
}
/* Outlook.com,Hotmail reset */
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
mso-line-height-rule: exactly;
line-height: 100%;
}
table,
td {
border-collapse: collapse;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 0px;
}
.main {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
line-height: 21px;
font-family: sans-serif;
color: #171a1b;
}
.three-columns {
width: 33%;
display: inline-block;
}
.two-columns {
width: 50%;
display: inline-block;
}
.column {
width: 100%;
display: table;
margin: 0 auto;
}
.top-header-social {
padding: 0 3px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
body,
td,
a,
span {
font-family: Arial, sans-serif !important;
}
}
@media screen and (max-width:599px) {
table[class="responsive"] {
width: 100% !important;
text-align: center;
}
.two-columns,
.three-columns,
.column {
width: 100%;
text-align: center;
}
.responsive {
width: 100%;
height: auto;
max-width: 600px;
}
}
</style>
</head>
<body style="background-color: #cccccc;">
<center class="wrapper">
<table class="main">
<!-- TOP BORDER -->
<tr>
<td height="5" style="background-color: #40618d;"></td>
</tr>
<!-- LOGO SECTION AND SOCIAL ICONS -->
<tr>
<td style="padding: 10px 20px 10px 20px;">
<table width="100%">
<tr>
<td class="two-columns">
<table width="100%">
<tr>
<td>
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/modern.jpg" alt="" width="180" height="50">
</a>
</td>
</tr>
</table>
</td>
<td class="two-columns">
<table width="100%">
<tr>
<td>
<table width="40%" align="center">
<tr>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-facebook.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-twitter.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-youtube.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-linkedin.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-instagram.png" alt="" width="35" height="35">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- BANNER IMAGE -->
<tr>
<td>
<table width="100%">
<tr>
<td>
<table width="">
<tr>
<td>
<img class="responsive" src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/banner.jpg" alt="" width="600" height="350">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- THREE COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td style="padding: 30px 30px 30px 30px;">
<table width="100%">
<tr>
<td class="three-columns">
<table width="100%" align="center">
<tr>
<td style="padding: 7px 7px 7px 7px;">
<table width="100%" align="center" class="column">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/email.png" alt="" width="100" height="100">
</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px;">
<span style="font-weight: bold; line-height: 20px; font-size: 18px;">Ecommerce</span>
</td>
</tr>
<tr>
<td align="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="three-columns">
<table width="100%" align="center">
<tr>
<td style="padding: 7px 7px 7px 7px;">
<table width="100%" align="center" class="column">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/settings.png" alt="" width="100" height="100">
</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px;">
<span style="font-weight: bold; line-height: 20px; font-size: 18px;">Web Design</span>
</td>
</tr>
<tr>
<td align="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="three-columns">
<table width="100%" align="center">
<tr>
<td style="padding: 7px 7px 7px 7px;">
<table width="100%" class="column">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/home.png" alt="" width="100" height="100">
</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px;">
<span style="font-weight: bold; line-height: 20px; font-size: 18px;">HTML Email</span>
</td>
</tr>
<tr>
<td align="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- TWO COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td style="padding: 30px; background-color: #171a1b;">
<table width="100%">
<tr>
<td class="two-columns">
<table class="column">
<tr>
<td>
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/keyboard.jpg" width="230" height="200">
</td>
</tr>
</table>
</td>
<td class="two-columns">
<table width="100%" align="center" class="column">
<tr>
<td align="center" style="padding-bottom: 10px; padding-top: 15px;">
<span style="color: #ffffff; font-weight: bold; line-height: 20px; font-size: 18px;"> Create Custom Designs </span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 25px;">
<span style="color: #ffffff;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </span>
</td>
</tr>
<tr>
<td width="100%" align="center">
<table width="130" align="center">
<tr>
<td style="background-color: #ffffff; border-radius: 5px; padding: 10px 20px; color: #171a1b; font-weight: bold; text-align: center;"> Read More </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- TITLE, TEXT & BUTTON -->
<tr>
<td>
<table width="100%">
<tr>
<td style="padding: 50px 30px; background-color: #ffffff;">
<table width="100%">
<tr>
<td>
<table class="column">
<tr>
<td align="center" style="padding: 0px 0px 20px 0px; font-weight: bold; line-height: 20px; font-size: 18px;">HTML Email Template</td>
</tr>
<tr>
<td align="center" style="font-size: 14px; line-height: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<table width="130" align="center">
<tr>
<td style="background-color: #171a1b; border-radius: 5px; padding: 10px 20px; color: #ffffff; font-weight: bold; text-align: center;"> Read More </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- FOOTER SECTION -->
<tr>
<td>
<table width="100%" style="background-color: #171a1b;">
<tr>
<td style="padding: 50px;">
<table width="100%">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/modern-white.png" alt="" width="180" height="50">
</a>
</td>
</tr>
<tr>
<td align="center" style="font-size: 11px; line-height: 20px; color: #ffffff; padding-bottom: 20px;"> Responsive HTML Email Template </td>
</tr>
<tr>
<td align="center" style="font-size: 14px; line-height: 20px; color: #ffffff; padding-bottom: 20px;"> 123 Street Road, City, HU8 7HU </td>
</tr>
<tr>
<td align="center" style="padding-bottom: 20px;">
<table>
<tr>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-facebook.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-twitter.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-youtube.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-linkedin.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-instagram.png" alt="" width="35" height="35">
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size: 14px; line-height: 20px; color: #ffffff;"> SUBSCRIBE </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- BOTTOM BORDER -->
<tr>
<td bgcolor="#40618d" style="background-color: #40618d;">
<table width="100%">
<tr>
<td height="3"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>

View Live Version
Spread the love
View More

Awesome Journey

Qualifications & Experiences

Education

.

Experience

.

University of Hull

Studying BA Digital Design

2017 - Present

Udemy

Certified Web Developer

2014 - 2014

Hull College

Pathway (Progression to Business)

2012 - 2013

Really B2B

Front End Developer

September 2021 - Present

Teal & Mackrill

SEO Technician

May 2015 - July 2016

Avert

Front End Developer/Web Assistant

March 2014 - August 2015
Download CV
What do I find interesting?

Materials I find interesting

Design | Design Research Diary | University Projects

Tufte (Envisioning Information) Micro-macrocosm

| January 5, 2022
COVID-19 has been the main topic around the world for…
Design | Design Research Diary | University Projects

Tufte (Envisioning Information) Layering and separation

| January 5, 2022
Visual layering and separation is a simple method of simplifying…
Design | Design Research Diary | University Projects

Narrative over a specific time within a specific space

| January 5, 2022
The narrative over a specific time and a specific space…
Design | Design Research Diary | University Projects

Tufte (Comparison of small multiples) – analytical act in statistical reasoning

| January 5, 2022
The fundamental analytical act in statistical reasoning is to answer…
Design | Design Research Diary | University Projects

Tufte (Envisioning Information) the use of colour

| January 5, 2022
It would be almost impossible on this modern-day to digitally…