finteractive

# Landing Page Guidelines by Funnel Stage

## Important: Funnel Stage Identification

Before creating any landing page, first identify the intended funnel stage based on the visitor's awareness level and intent. Then apply the appropriate layout and content rules for that specific stage. 

Each stage has distinct purposes, content structures, and conversion goals.

These landing pages are designed to receive traffic from PPC campaigns, newsletter promotions, and partnership events, where visitors arrive with varying levels of awareness and intent based on the source campaign messaging.

finteractive

# Create Symbolic Link from /Machintosh HD (or whatevery your system drive is) to /Users/Shared/_work
# See https://derflounder.wordpress.com/2020/01/18/creating-root-level-directories-and-symbolic-links-on-macos-catalina/
# NOTE: Must Use a Tab to "space" the first and second property
_work	Users/Shared/_work

finteractive

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Toolkit (v2.9.0)
// ----

@import 'toolkit';
$base-line-height: 24px;
$base-font-size: 16px;
/// Converts units from pixels to EMs

finteractive

// ----
// libsass (v3.3.2)
// ----

@import "singularitygs";

// settings.scss
@include add-grid(6);
@include add-gutter-style('split');
@include add-gutter(1em);

finteractive

// ----
// libsass (v3.2.5)
// ----

@import "breakpoint";

$base-font-size: 16px;
$base-line-height: 22px;

// Strips units (From Foundation Zurb Base File)

finteractive

// ----
// libsass (v3.2.5)
// ----

@import "breakpoint";

$base-font-size: 16px;
$base-line-height: 22px;

// Strips units (From Foundation Zurb Base File)

finteractive

// ----
// libsass (v3.2.5)
// ----

// From http://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/

$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px

finteractive

// ----
// libsass (v3.2.5)
// ----

/*
Source: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions
Source: http://www.sitepoint.com/sass-basics-control-directives-expressions/
Topic: Controll Directives
*/

finteractive

// ----
// libsass (v3.2.5)
// ----

$base-font-size: 21px !default;

@function em($px, $base: $base-font-size) {
  @return ($px / $base) * 1em;
}

finteractive

<div class="button">
  <!-- I don't use img tags but svg like below doesn't work here??? -->
  <img class="svg-img" src="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg" />
  
  <!-- This is the correct way...  
  <svg><use xlink:href="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg"></use>
  </svg> -->
</div>