- Please make sure you are building Mobile and Desktop at the same time
- Keep an open tab with Figma and toggle between build
- Matches Figma
- Meta Image + Basic meta content
/* some pre-defined custom properties in my code */ | |
:root { | |
--default-transition-duration: .2s; | |
--default-easing: ease-out; | |
} | |
/* define mixin */ | |
@define mixin transition(--transition-property: all, --transition-duration: var(--default-transition-duration), --easing: var(--default-easing) ) { | |
transition: --transition-property --transition-duration --easing; | |
} |
(function(d) { | |
const config = { | |
kitId: '{{typeKitId}}', | |
scriptTimeout: 3000, | |
async: true | |
}, | |
h = d.documentElement, | |
t = setTimeout(function() { | |
h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; | |
}, config.scriptTimeout), |
<!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 name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta name="format-detection" content="telephone=no" /> | |
<title>National Bankcard</title> | |
<style type="text/css"> |
<!-- typekit --> | |
<script> | |
(function(d) { | |
var config = { | |
kitId: 'ldj3frj', | |
scriptTimeout: 3000, | |
async: true | |
}, | |
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) | |
})(document); |
body { | |
margin: 0 auto; | |
text-align: center; | |
font-size: 100%; | |
} | |
#content { | |
width: 98%; | |
padding: 3% 0% 0% 2%; | |
max-width: 900px; |
/* breakpoints */ | |
:root { /* px size at 16px base font size */ | |
@custom-media --xs (width < 20em); /* 320px */ | |
@custom-media --s (width < 28em); /* 448px */ | |
@custom-media --m (width < 48em); /* 768px */ | |
@custom-media --l (width < 64em); /* 1024px */ | |
@custom-media --xl (width < 80em); |
/* breakpoints */ | |
:root { /* px size at 16px base font size */ | |
@custom-media --xs (width < 25em); /* 400px */ | |
@custom-media --s (width < 35.7em); /* 600px */ | |
@custom-media --m (width < 50em); /* 800px */ | |
@custom-media --l (width < 65.625em); /* 1050px */ | |
@custom-media --hd (width < 112.5 |