Posts

Showing posts from July, 2019

Day 286

My first PayPal embeded code... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <table>   <tbody>     <tr>       <td>         <h2>Rooftops CD – $15</h2>         <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">           <input name="cmd" value="_s-xclick" type="hidden" /><input name="encrypted" value="-----BEGIN PKCS7----- My first PayPal embeded code goes here... AND IT WORKS!-----END PKCS7-----" type="hidden" /><input src="rooftop-cd.png" name="submit" alt="PayPal - The safer, easier way to pay online!" border="0" type="image" /><img alt="" src="../www.paypalobjects.com/en_US/i/scr/pixel.gif" border="0" height="1" width="1" /></form>       </td>     </tr>   <
Post a Comment
Read more

Day 285

A piece of a page for a friend of mine. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********       <div class="footer">         <table cellspacing="20">           <tbody>             <tr>               <td valign="top" width="250">                 <br />                 <b>Jeremiah 29:11</b><br />                 <br />                 "For I know the plans I have for you", declares the LORD, "plans                 to prosper you and not to harm you, plans to give you hope and a                 future". <br />                 <br />                 <b>Jesus thinks you are to die for!</b>               </td>               <td valign="top" width="250">                 <center>                   <b>Making of the Album Video</b><br />                   <a                    
Post a Comment
Read more

Day 284

Complete with hosted and tested images. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** "title": "Fly to Ireland with less that $700.00 round-trip, plus more!",   "dealOfTheDay": {     "location": "Ireland",     "description": "8 days with air,hotel and car rental. Use promo code CFDL110 to save. Price reflects NYC departure, other cities available.",     "saveAmount": "Save $110.00 with code",     "tinyInfo": "Gate 1 Travel",     "price": "$649.00",     "link": "#",     "image": "http://smchosting.com/kayakemails/ireland.png"   }
Post a Comment
Read more

Day 283

The data to loop through... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** "offers": [     {       "location": "Cancun",       "description": "4 nights with air and Melody Maker Cancun stay. Price reflects MIA departure, other cities available.",       "saveAmount": "Save up to 65%",       "tinyInfo": "CheapCaribbean.com",       "price": "$689.00",       "link": "#",       "image": "/assets/img/kayak_files/cancun.png"     },     {       "location": "China",       "description": "7 nights in the heart of Beijing. Price reflects BFE departure, other cities available.",       "saveAmount": "Save up to 34%",       "tinyInfo": "ChinaAir.com",       "price": "$666.00",       "link": "#",       "image&
Post a Comment
Read more

Day 282

How to loop through a large data block in a HTML email. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <container>   <row class="content-area">     <columns class="first-offer">       {{#each kayakemail.offers}}       <row class="offer">         <columns>           <img src="{{this.image}}" />           <p>             {{this.location}}: {{this.description}}           </p>           <span class="save-amount">{{this.saveAmount}}</span>           <span class="tiny-info">{{this.tinyInfo}}</span>           <span class="price">{{this.price}}</span>             <a href="{{this.link}}" class="button">See Deal</a>         </columns>       </row>       {{/each}}     </columns>   </row> </container>
Post a Comment
Read more

Day 281

How to access data from index... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <container>   <row class="deal-of-day">     <columns>       <h2>Deal of The Day</h2>       <img src="{{kayakemail.dealOfTheDay.image}}" />       <p>         {{kayakemail.dealOfTheDay.location}}: {{kayakemail.dealOfTheDay.description}}       </p>       <span class="save-amount">{{kayakemail.dealOfTheDay.saveAmount}}</span>       <span class="tiny-info">{{kayakemail.dealOfTheDay.tinyInfo}}</span>       <span class="price">{{kayakemail.dealOfTheDay.price}}</span>       <center>         <a href="{{kayakemail.dealOfTheDay.link}}" class="button">See Deal</a>       </center>     </columns>   </row> </container>
Post a Comment
Read more

Day 280

Email bigdata complete! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** {   "title": "Fly to Ireland with less that $700.00 round-trip, plus more!",   "dealOfTheDay": {     "location": "Ireland",     "description": "8 days with air,hotel and car rental. Use promo code CFDL110 to save. Price reflects NYC departure, other cities available.",     "saveAmount": "Save $110.00 with code",     "tinyInfo": "Gate 1 Travel",     "price": "$649.00",     "link": "#",     "image": "/assets/img/kayak_files/ireland.png"   },   "offers": [     {       "location": "Cancun",       "description": "4 nights with air and Melody Maker Cancun stay. Price reflects MIA departure, other cities available.",       "saveAmount": "Save up to 65%",       "
Post a Comment
Read more

Day 279

The beginnings of email "BIG DATA"... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** {   "title": "Fly to Ireland with less that $700.00 round-trip, plus more!",   "dealOfTheDay": {     "location": "Ireland",     "description": "8 days with air,hotel and car rental. Use promo code CFDL110     to save. Price reflects NYC departure, other cities available.",     "saveAmount": "Save $110.00 with code",     "tinyInfo": "Gate 1 Travel",     "price": "$649.00",     "linkToDeal": "#"   } }
Post a Comment
Read more

Day 278

Done with the structure and styling... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .footer-bottom {   background: #14181c;   background-color: #14181c;   & > tbody > tr > th {     padding-top: 30px !important;     padding-right: 30px !important;     padding-bottom: 30px;     padding-left: 30px !important;   }   .lower-links {     .link {       font-size: 12px;       font-weight: 600;       color: #fff;       margin-right: 10px;       &:nth-child(4) {         margin-right: 0;       }       &:hover {         color: $primary-color;       }     }   }   .privacy {     th {       padding-bottom: 0;     }     & > tbody > tr > th > table > tbody > tr > th {       padding-bottom: 30px;     }     p {       color: #a0a1a3;       font-size: 10px;       padding-bottom: 30px;     }   }   .copyright,   .address {     th {       padding-bottom: 0;     }     .columns {       p {         color: #d0d0d1;         font-size: 12px;       
Post a Comment
Read more

Day 277

Footer menu is done... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .footer-menu {   background: #14181c;   background-color: #14181c;   border-top: 1px solid #2d3e4b;   border-bottom: 1px solid #2d3e4b;   .columns {     padding-top: 5px;     padding-right: 5px !important;     padding-bottom: 5px;     padding-left: 5px !important;     a {       color: #fff;       font-size: 14px;       font-weight: 700;       .icons {         width: 20px;         margin-right: 10px;         display: inline-block;         vertical-align: bottom;       }     }     th {       text-align: center;     }     .menu-divider {       display: block;       height: 20px;       width: 1px;       background: #2d3e4b;       background-color: #2d3e4b;     }   } }
Post a Comment
Read more

Day 276

Jumping hurdles and making html emails... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <container>   <row class="footer-social">     <columns class="logo-section" small="6" large="9" valign="middle">       <img src="{{ root }}/assets/img/kayak_files/logo_orange.png" />     </columns>     <columns small="6" large="3" valign="middle">       <row class="social-icons">         <columns small="4" large="4">           <img src="{{ root }}/assets/img/kayak_files/facebook.png" />         </columns>         <columns small="4" large="4">           <img src="{{ root }}/assets/img/kayak_files/twitter.png" />         </columns>         <columns small="4" large="4">           <img src="{{ root }}/assets/img/ka
Post a Comment
Read more

Day 275

Aaaand, more email goodness! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <container>   <row class="content-area">     <columns>       <row class="offer last-offer">         <columns>           <row>             <columns>               <img src="{{root}}/assets/img/kayak_files/airplane_dark.png" class="group-icons">             </columns>           </row>                     <h4>             Still looking? There's more           </h4>           <p>             Search hundreds of deals to suit your budget on flights, packages, cruises and<br>more.           </p>             <a href="#" class="button">See All Deals</a>         </columns>       </row>     </columns>   </row> </container>
Post a Comment
Read more

Day 274

First header almost finished... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <row class="sub-header">     <columns></columns>     <columns style="width: 90%">       <row>         <columns>           <a href="#" class="text-center"             ><img               src="{{ root }}/assets/img/kayak_files/airplane.png"               class="icons float-left"             />Flights</a           >         </columns>         <columns style="width: 2%;">           <span class="menu-divider"></span>         </columns>         <columns>           <a href="#" class="text-center"             ><img               src="{{ root }}/assets/img/kayak_files/bed.png"               class="icons float-left"             />Hotels</a           >         </columns&g
Post a Comment
Read more

Day 273

Done building the basics of the framework... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** --- layout: promotional subject: 70% Off On Labor Day percentage: 70 --- <container>   <row class="collapse header">     <columns small="12" large="12">       <h1 class="text-center">{{ laborDay.title }}</h1>     </columns>   </row>   <row class="collapse menu">     <columns></columns>     <columns small="8" large="8">       <center>         <a href="#">Link1</a>         <a href="#">Link2</a>         <a href="#">Link3</a>         <a href="#">Link4</a>       </center>     </columns>     <columns></columns>   </row>   <row>     <columns small="12" large="12">Home</columns>   </row&
Post a Comment
Read more

Day 272

Another day at the email machine... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** --- layout: index-layout subject: My Email Templates --- <container>   <row class="collapse header">     <columns small="12" large="12">       <h1 class="text-center">Home</h1>     </columns>   </row>   <row>     <columns small="12" large="12">Home</columns>   </row>   <row class="collapse">     <columns small="6" large="6">About</columns>     <columns small="6" large="6">Contact</columns>   </row>   <row>     <columns small="4" large="4" class="large-offset-8 small-offset-8">Shop</columns>   </row> </container>
Post a Comment
Read more

Day 271

My first steps into Foundation for Emails... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** --- layout: index-layout subject: My Email Templates --- <container>   <row>     image   </row>   <row>     <columns>Home</columns>     <columns>About</columns>     <columns>Contact</columns>     <columns>Shop</columns>   </row> </container>
Post a Comment
Read more

Day 270

A portion of the instructions I wrote today finally ending the Foundation install mess.  And, yes.  I consider this coding since it directly impacts my coding. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** Run from the home directory: Install NVM: curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash Reload environment (Or close and reopen command shell / terminal): source ~/.profile Install NodeJS (Latest version 10 LTS version: nvm install v10 Check the install: node -v npm -v Install local gulp first: npm install gulp Install global gulp second: npm install gulp -g NOTE: If you install the gulp global version first, you run into errors and have to start over after removing gulp. NOTE: If you continue to get errors at this point (In Windows10 Ubuntu Bash), you will need to reset your WSL application and re-setup the Ubuntu Bash environment. You will need to google resetting the WSL. (Windows Sub-system for Linu
Post a Comment
Read more

Day 269

More project... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">     <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">     <link rel="stylesheet" href="css/main.css">     <link rel="stylesheet" href="css/mission.css">     <title>New Journey Church - Sapulpa</title>   </head>   <body>
Post a Comment
Read more

Day 268

Back to a project.  Done with HTML emails for a few days. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">     <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">     <link rel="stylesheet" href="css/main.css">     <link rel="stylesheet" href="css/about.css">     <title>New Journey Church - Sapulpa</
Post a Comment
Read more

Day 267

And non of this worked either... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** 1. Gulp is not supposed to be installed globally since 3 years ago—only gulp-cli is supposed to be installed globally now. Then, you install 'gulp' itself within the project. It says so right on Gulp's website. https://gulpjs.com/docs/en/getting-started/quick-start 2. change line 26 of package.json to this: "gulp": "4.0" ---- To solve the problem with messed up Gulp installations, run the following (you may need 'sudo' in front): npm rm --global gulp npm install --global gulp-cli - Go to your project directory and initialize npm... npm init - install gulp in the project locally: npm install --save-dev gulp - Now install Zurb foundation-cli globally: npm install --global foundation-cli - Now create your new Foundation project: foundation new --framework emails - Give your project the name 'frame-email' - Move into the 'frame-email
Post a Comment
Read more

Day 266

HULK! SMASH! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** smc@tosh:~/projects$ foundation new --framework emails ? What's the project called? (no spaces) frame-email           _____          /     \         /=   . |     ___| ==  | /    Thanks for using ZURB Foundation for Emails!    /   | ===  \     -------------------------------------------    |   | ====  |    Let's set up a new project.    /__/| =====  \   It shouldn't take more than a minute.        (   __   )         (O)  (O)        (   __,  )         \______/ Downloading the project template... Done downloading! Installing dependencies... npm ERR! git rev-list -n1 4.0: fatal: ambiguous argument '4.0': unknown revision or path not in the working tree. npm ERR! git rev-list -n1 4.0: Use '--' to separate paths from revisions, like this: npm ERR! git rev-list -n1 4.0: 'git <command> [<revision>...] -- [<file>...]' npm ERR! git rev-list -n1 4.0: There were so
Post a Comment
Read more

Day 265

Finishing up the responsive #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********        /* Mobile */       @media only screen and (max-width: 600px){         .container {           width: 100%;         }         .header-left {           width: 100%;         }         .header-right {           width: 100%;         }         .lets-you-row .left-column {           width: 50%;         }         .lets-you-row .center-column {           width: 50%;         }         .lets-you-row .right-column {           width: 100%;         }         .advanced-table .image-head {           width: 100%;         }         .advanced-table .left-column {           width: 100%;         }         .advanced-table .left-column .appstore-icon {           text-align: center;           width: 100%;         }         .advanced-table .right-column .playstore-icon {           text-align: center;           width: 100%;         }         .advanced-table .right-column {           width: 100%;         }      
Post a Comment
Read more

Day 264

BANG!  Into the wall! Turns out NodeJS 10.x dropped support for 32bit platforms. I need a new computer... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** smc@ThinkPad:~/training-projects/codingphase-courses/html-email-foundation$ curl -sL https://deb.nodesource.com/setup_10.x | sudo bash ## Installing the NodeSource Node.js 10.x repo... smc@ThinkPad:~/training-projects/codingphase-courses/html-email-foundation$ sudo apt-get -y install nodejs Reading package lists... Done Building dependency tree       Reading state information... Done nodejs is already the newest version (9.11.2-1nodesource1). The following package was automatically installed and is no longer required:   libllvm7 Use 'sudo apt autoremove' to remove it. 0 upgraded, 0 newly installed, 0 to remove and 24 not upgraded. smc@ThinkPad:~/training-projects/codingphase-courses/html-email-foundation$ node -v v9.11.2 smc@ThinkPad:~/training-projects/codingphase-courses/html-email-foundation$
Post a Comment
Read more

Day 263

And... responsive! #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********       /* Desktop */       @media only screen and (min-width: 960px){         .container {           width: 960px;         }         .header-left {           padding: 36px 65px 70px !important;         }         .header-right .sw-image {           padding-top: 37px !important;         }         .lets-you-row {           padding: 0 50px;         }         .advanced-table {           padding: 15px 50px 70px 50px !important;         }         .one-solution-table {           text-align: center;         }         .one-solution-table img {           max-width: 611px;         }         .join-together-table .left-column {           padding: 20px 75px !important;         }         .join-together-table .center-column {           padding: 20px 75px !important;         }         .join-together-table .right-column {           padding: 20px 75px !important;         }         .detail-table {           padding: 50px
Post a Comment
Read more

Day 262

And the footer is done! Now to move onto the responsive side of HTML emails. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********           <tr> <!-- Start footer row -->             <td>               <table class="advanced-table" width="100%" align="left" border="0" cellspacing="0" cellpadding="0" style="padding: 0; background: #ffffff;">                 <tr>                   <td align="center">                     <h2 style="font-weight: 700; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #1B1B1B; text-transform: uppercase; font-size: 28px;">Hero</h2>                   </td>                 </tr>                 <tr>                   <td>                     <table class="advanced-table" align="center" width=&q
Post a Comment
Read more

Day 261

Almost finished building the email... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <tr> <!-- Start interest row -->             <td>               <table class="interest-table" width="100%" align="left" border="0" cellspacing="0" cellpadding="0"               style="padding: 50px 0; background: #65fffd; background: -moz-linear-gradient(-45deg, #65fffd 0%, #2296ee 100%); background: -webkit-linear-gradient(-45deg, #65fffd 0%,#2296ee 100%); background: linear-gradient(135deg, #65fffd 0%,#2296ee 100%);">                 <tr>                   <td align="center" style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;">                     <h3 style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #
Post a Comment
Read more

Day 260

The next step in the email course... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!-- Start right-column -->               <table class="header-left" width="33.33%" align="left" border="0" cellspacing="0" cellpadding="0"                 style="padding: 15px 15px 70px 15px;">                 <tr>                   <td>                     <table class="title-icon" width="33.33%" align="left" border="0" cellspacing="0" cellpadding="0"                       style="padding: 0;">                       <tr>                         <td><img src="/img/wifi_icon.png"></td>                         <td                           style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #333333; p
Post a Comment
Read more

Day 259

Still with the html emails... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!-- Start row1 -->           <tr>             <td>               <!-- Start left column -->               <table class="header-left" width="50%" align="left" border="0" cellspacing="0" cellpadding="0"                 style="background: #65fffd; background: -moz-linear-gradient(-45deg, #65fffd 0%, #2296ee 100%); background: -webkit-linear-gradient(-45deg, #65fffd 0%,#2296ee 100%); background: linear-gradient(135deg, #65fffd 0%,#2296ee 100%); padding: 15px 15px 70px 15px;">                 <tr>                   <td                     style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #ffffff">                     <img src="/img/logo.png" alt="">                     &
Post a Comment
Read more

Day 258

Pluggin day two... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <table class="container" width="50%" align="left" border="0" cellspacing="0" cellpadding="0"                 style="background: #65fffd; background: -moz-linear-gradient(-45deg, #65fffd 0%, #2296ee 100%); background: -webkit-linear-gradient(-45deg, #65fffd 0%,#2296ee 100%); background: linear-gradient(135deg, #65fffd 0%,#2296ee 100%);">                 <tr>                   <td>                     <img src="/img/logo.png" alt="">                     <h2>Get ready for</h2>                     <h1>Hero</h1>                     <p>It seems like hundreds of new IWatch appspop up every week, but which ones should you bother                       trying?</p>                     <a href="#">Learn More</a>                   </td>  
Post a Comment
Read more

Day 257

The beginnings of my first HTML email. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head>   <meta charset="utf-8" />   <title></title>   <meta name="viewport" content="width=device-width, initial-scale=1" />   <link rel="stylesheet" href="/css/main.css" />   <script async defer src="https://buttons.github.io/buttons.js"></script> </head> <body>   <!-- Start html email -->   <table id="page" width="100%" border="0" cellspacing="0" cellpadding="0">     <tr>       <td>         <!-- Start container -->         <table class="container" width="600" align="center" border="0" cellspacing="0" cellpadding="0">           <!-- Start row1 -->           <tr>           
Post a Comment
Read more

Day 256

The completed HTML for the Responsive Website course. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>TaskManager</title>     <meta name="viewport" content="width=device-width, initial-scale=1" />     <link       href="https://fonts.googleapis.com/css?family=Megrim|Roboto&display=swap"       rel="stylesheet"     />     <link       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"       rel="stylesheet"       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"       crossorigin="anonymous"     />     <link rel="stylesheet" href="/css/main.css" />     <script async defer src="https://buttons.github.io/buttons.js"></script>   </head>
Post a Comment
Read more