☰
Apply Styler
Client Name
Border Radius
4px
Primary Button
Background
Text
Border
Secondary Button
Background
Text
Border
Warning Button
Background
Text
Border
Primary action
Secondary action
Warning action
Header
Copy header
<div id="wrapper"> <div id="header" role="banner"> <div class="inner"> <div class="navbar-brand"> <img src="{LogoURL}" alt="logo" class="brands-logo" title="Client name"/> </div> </div> </div> <div id="main"> <style> @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700|Montserrat:300,800&subset=latin,latin-ext"); /* Theme variables */ :root { --font-body: 'Nunito Sans', sans-serif; --font-heading: "Montserrat", Helvetica, Arial, sans-serif; --font-size-base: 15px; --font-size-sm: 13px; --font-size-heading: 20px; --font-size-subheading: 15px; --font-size-nav: 15px; --font-size-button: 15px; --button-radius: 4px; --button-primary-bg: #2D4156; --button-primary-text: #FFFFFF; --button-primary-border: #2D4156; --button-secondary-bg: #EAEFF2; --button-secondary-text: #2D4156; --button-secondary-border: #EAEFF2; --button-warning-bg: #F2DEDE; --button-warning-text: #B94A48; --button-warning-border: #F2DEDE; --transition-interactive: all 0.2s ease; } /* Map */ #mapTable #map_canvas { width: 100% !important; } /* Page layout */ .inner, #mainInner { margin: 0 auto; padding-right: 15px; padding-left: 15px; max-width: 1140px; } #main { padding-bottom: 100px; } /* Header / footer */ #header { background: #fafafa !important; border-bottom: 1px solid #eaeaea !important; } .navbar-brand { float: none; height: auto; padding: 25px 0; color: #2D4156; font-family: var(--font-heading); font-weight: 800; font-size: 20px; } .brands-logo { width: 100%; height: auto; max-width: 200px; } #footer { margin-top: -93px; color: #aaa; background: transparent; text-align: center; border: none; height: auto; } #footer .inner { padding: 20px 0; } #footer a { color: inherit; } #copyright { font-size: var(--font-size-sm); } #pageupLink { float: none; font-size: 12px; text-align: right; } /* Base typography */ body { color: #666; } body, p, ol, ul { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 400; line-height: 1.7em; } span, div { font-family: var(--font-body); font-size: var(--font-size-base); } td { font-size: var(--font-size-base); } th { font-size: var(--font-size-base); } a { color: #004982; } .heading, h2 { font-family: var(--font-heading); font-weight: 800; font-size: var(--font-size-heading); margin-bottom: 40px !important; letter-spacing: normal; color: #333; } .subHeading { font-family: var(--font-heading); font-weight: 800; font-size: var(--font-size-subheading); color: inherit; } h3 { color: #333 !important; } /* Main navigation */ .navbar-inner { background: #fafafa !important; border: 1px solid #eaeaea !important; } .navbar-inner { box-shadow: none; } .navbar .brand { color: #333; font-family: var(--font-heading); font-weight: 800; font-size: 17px; padding: 0; line-height: 50px; } .navbar .nav > li.divider-vertical { display: none; } .navbar .icon-home { display: none; } .navbar .nav > li > a { text-shadow: none; font-family: var(--font-body) !important; font-weight: 700; font-size: var(--font-size-nav); color: #333; padding: 16px 20px 12px !important; border-bottom: 3px solid transparent; } @media (max-width: 979px) { .navbar .nav > li > a { border-bottom: none; } } .navbar .nav .active > a, .navbar .nav .active > a:hover { border-bottom-color: #004982; color: #004982; background: none; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { border-bottom-color: transparent; } .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { border-top-color: #333; opacity: 0.8; margin-left: 5px; } /* Breadcrumbs / profile navigation */ .crumbs { font-size: inherit; padding-bottom: 30px; } .crumbs span { color: #aaa; font-size: var(--font-size-sm); } .crumbs input { font-weight: bold; font-family: inherit !important; color: #004982; text-decoration: none; } .crumbs input:focus { outline: none; } .profileTable { width: 150px; margin-left: -30px; border-radius: 4px; border: 1px solid #ddd; overflow: hidden; } .profileMenuSelected { color: #333; } .profileMenuTop { background-color: #fafafa; padding: 7px 10px; border: none; border-bottom: 1px solid #ddd; } /* Forms / inputs */ label, ol, ul, select, input, textarea { font-family: var(--font-body); font-size: var(--font-size-base); } input, textarea { border-radius: 4px; } input:focus, textarea:focus, .form-control:focus { box-shadow: none; outline: 1px solid rgba(82, 168, 236, 0.8); } input, textarea, select, .uneditable-input { padding: 6px 10px; } .form-horizontal .control-group { margin-bottom: 20px; } .cb_option.selected { background-color: transparent; color: #004982; font-weight: bold; } .pu-select .input-group-btn .btn { background: #f5f5f5 !important; border: 1px solid #ccc !important; z-index: 1; padding: 14px; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .pu-select .input-group-btn .btn .caret { margin-top: 0; } .compact-file-picker ul.providers { border-radius: 4px; border: 1px solid #ddd; } /* Panels / messages / content blocks */ .personalDetailsSection { margin: 20px 0; border-bottom-color: #eee; } .panel { border: 1px solid #eaeaea !important; box-shadow: none !important; max-width: 600px; width: 100% !important; border-radius: 8px !important; } .panelHeader { background: #fafafa !important; border-bottom: 1px solid #eaeaea !important; padding: 15px 20px !important; margin-bottom: 10px; } .messageBox { box-shadow: none; background: none; padding: 0; } .messageBox p { font-size: 16px; } .profileCompleteHeader p { font-size: var(--font-size-sm); } .profileCompleteContainer { display: none; } /* Alerts */ .alert { text-shadow: none; padding: 15px 20px !important; border-radius: 8px !important; } .alert a { font-weight: bold; color: inherit; text-decoration: underline; } .alert-info { color: #0c4c6b; background: #F1F4F6; border-color: transparent; } .info { border-right: #bfdbfe 1px solid; padding-right: 15px; background-position: left top; border-top: #bfdbfe 1px solid; padding-left: 15px; background-image: none; margin-bottom: 10px; padding-bottom: 18px; border-left: #bfdbfe 1px solid; padding-top: 18px; border-bottom: #bfdbfe 1px solid; background-repeat: no-repeat; background-color: #eff6ff; color: #1e3a5f; border-radius: 8px; } /* Buttons / actions */ .buttonArea { margin: 0 !important; padding: 20px 0 !important; font-size: 0; } .buttonArea .btn { margin: 0 10px; } .action-buttons { font-size: 0; } a.btn, a.btn:hover, a.btn:visited, a.btn:link { font-weight: 600 !important; text-shadow: none !important; transition: var(--transition-interactive); } .btn, .button { border-radius: var(--button-radius) !important; font-family: var(--font-body) !important; font-size: var(--font-size-button) !important; padding: 10px 20px; text-shadow: none; box-shadow: none; font-weight: 600 !important; transition: var(--transition-interactive); } .link-btn, a.btn.link-btn, .btn-local, .btn-saveExit, #button_saveExit { background: var(--button-secondary-bg) !important; color: var(--button-secondary-text) !important; border: 1px solid var(--button-secondary-border) !important; transition: var(--transition-interactive); } .btn-large, .btn-login, #button_submit, .btn-next, a.btn.btn-primary, a.btn-primary, .btn-continue, #saveContinue, #button_save, #button_saveContinue, a.btn-backToHome, button#upload, .upload-recentResume .btn-recentResume, #button_submitApplication { background: var(--button-primary-bg) !important; color: var(--button-primary-text) !important; border: 1px solid var(--button-primary-border) !important; transition: var(--transition-interactive); } .form-bootstrap .form-integration .btn-primary { background: var(--button-primary-bg) !important; color: var(--button-primary-text) !important; border: 1px solid var(--button-primary-border) !important; font-family: var(--font-body) !important; font-size: var(--font-size-button) !important; } a.btn.btn-danger, .btn-danger, a.btn-danger, a.btn-delete { background: var(--button-warning-bg) !important; color: var(--button-warning-text) !important; border: 1px solid var(--button-warning-border) !important; } .btn[disabled] { background: #eee !important; color: #bbb !important; } .btn:hover, .btn:focus, a.btn:hover, a.btn:focus { transition: var(--transition-interactive); } .btn, a.btn { color: inherit !important; } .form-bootstrap.ng-scope .text-center { padding-left: 0; margin-top: 10px; } .SitePreferenceTable input { border: 1px solid var(--button-secondary-border) !important; border-radius: var(--button-radius) !important; font-family: var(--font-body) !important; font-size: var(--font-size-button) !important; padding: 10px 15px; font-weight: 600 !important; background: var(--button-secondary-bg) !important; color: var(--button-secondary-text) !important; outline: none !important; box-shadow: none !important; transition: var(--transition-interactive); } .SitePreferenceTable input:hover, .SitePreferenceTable input:focus { transition: var(--transition-interactive); } /* Tables / data views */ table { width: 100%; border-color: #dddddd !important; } .homeTable .job-title { padding-left: 0; } .SitePreferenceTable th, .profileDataTableHeading { background: #fafafa !important; border-bottom-color: #dddddd; padding: 10px !important; color: #333; font-weight: bold; font-size: var(--font-size-base); } .profileDataTable td { padding: 5px 10px; } .locationsPane { padding: 10px !important; } #r_ProfileSitePreferenceItem_1 td.locationOptions { border-right-color: #dddddd; } select, input[type="file"] { height: auto !important; } </style>
Footer
Copy footer
</div> </div> <div id="footer" role="contentinfo"> <div class="inner"> <p id="copyright"> © <script language="javascript" type="text/javascript"> var today = new Date() var year = today.getFullYear() document.write(year) </script> Client name </p> <p id="pageupLink"> <a href="https://www.pageuppeople.com/powered-by-pageup/" target="_blank">Powered By PageUp People</a> </p> <p></p> </div> </div>