[text] Financing Page

Viewer

copydownloadembedprintName: Financing Page
  1.  <script src="https://connect.breadpayments.com/sdk.js"></script>
  2.    
  3.    <style>
  4.  
  5.       <!--
  6.           /* ADJUST YOUR PRIMARY AND SECONDARY FONTS HERE */
  7.           @import url("https://fonts.googleapis.com/css?family=stalematelf:400");
  8.           @teximport url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800");
  9.           @import url("https://fonts.googleapis.com/css?family=play:400,600,700");
  10.  
  11.  
  12.           /* SET UNIVERSAL COLORS AND IMAGE HERE */
  13.  
  14.             :root {
  15.           --brand-color-medium: #59bec9;
  16.           --buttons-hover-color: #007dba;
  17.           --header-color: #13294b;
  18.           --background-photo-url: url('https://i.imgur.com/7wWlEcZ.png');
  19.           --brand-font-family: 'Poppins',Arial,sans-serif;
  20.           --font-color:#13294b;
  21.  
  22.           }
  23.  
  24.           body {
  25.             margin: 0;
  26.             padding: 0;
  27.           }
  28.  
  29.  
  30.           .bread-content-inner {
  31.             position: absolute;
  32.             width: 90%;
  33.             top: 50%;
  34.             left: 50%;
  35.             -webkit-transform: translate(-50%, -50%);
  36.             -ms-transform: translate(-50%, -50%);
  37.             transform: translate(-50%, -50%);
  38.           }
  39.  
  40.           .bread-points {
  41.             margin-top: 50px;
  42.           }
  43.  
  44.           .bread-section {
  45.             position: relative;
  46.             width: 100%;
  47.             text-align: center;
  48.           }
  49.  
  50.  
  51.           .bread-style {
  52.             box-sizing: border-box;
  53.             font-family: var(--brand-font-family);
  54.             font-size: 16px;
  55.           }
  56.  
  57.           .bread-main p {
  58.             color: var(--font-color);
  59.           }
  60.  
  61.           .bread-header {
  62.           min-height: 300px;
  63.           background: var(--header-color);
  64.           color: #fff;
  65.           background-size:cover;
  66.           background-position: center;
  67.           background-repeat: repeat;
  68.           background-image:  /* linear-gradient( rgba(0, 0, 0, .7), rgba(0, 0, 0, 0.7) ), */ var(--background-photo-url);--> */
  69.   
  70.   
  71.         }
  72.  
  73.         .bread-header h6 {
  74.           margin: 0;
  75.           font-family: var(--brand-font-family);
  76.           font-size: 50px;
  77.           line-height: 50px;
  78.           font-weight: 800;
  79.           color:#fff;
  80.         }
  81.  
  82.           .bread-header h1 {
  83.             margin: 0;
  84.             font-family: var(--brand-font-family);
  85.             font-size: 50px;
  86.             line-height: 50px;
  87.             font-weight: 800;
  88.             color:#fff;
  89.           }
  90.  
  91.           .bread-header p {
  92.             margin: 2em 0;
  93.           }
  94.  
  95.  
  96.           .bread-style h2 {
  97.             font-family: var(--brand-font-family);
  98.             font-style: normal;
  99.             font-weight: 800;
  100.             font-size: 40px;
  101.             line-height: 49px;
  102.             color: var(--font-color);
  103.           }
  104.  
  105.  
  106.           .bread-style h3 {
  107.             margin: 0;
  108.             font-family: var(--brand-font-family);
  109.             font-size: 1em;
  110.             color: var(--font-color);
  111.           }
  112.  
  113.  
  114.           .bread-main {
  115.             background: #fff;
  116.             color: #333;
  117.           }
  118.  
  119.  
  120.           .bread-check-your-rate {
  121.             color: #FFFFFF;
  122.             font-family: var(--brand-font-family);
  123.             margin-bottom: 20px;
  124.             font-size: 23px;
  125.             line-height: 40px;
  126.             font-weight: 800;
  127.             margin-bottom: 6px;
  128.             max-width: 625px;
  129.             width: 80%;
  130.             margin: 0 auto;
  131.           }
  132.  
  133.           /* 'CHECK YOUR RATE' BOX */
  134.           .bread-rate-box {
  135.             height: 250px;
  136.             background: var(--buttons-hover-color);
  137.             color: #333;
  138.           }
  139.  
  140.           .bread-footer {
  141.             background: #edeeef;
  142.             color: #333;
  143.             overflow-wrap: break-word;
  144.             margin: auto;
  145.  
  146.           }
  147.  
  148.           .bread-contact {
  149.             margin-bottom: 50px;
  150.           }
  151.  
  152.           .bread-disclosure {
  153.             font-size: 14px;
  154.             margin: 0 auto;
  155.             width: 70%;
  156.             padding: 10px 0;
  157.           }
  158.  
  159.           a,
  160.           .bread-contact-info {
  161.             text-decoration: none;
  162.             color: var(--brand-color-medium);
  163.           }
  164.           .bread-promo.one {
  165.           background: none;
  166.           border-radius:25px;
  167.           font-family: var(--brand-font-family);
  168.           font-style: normal;
  169.           font-weight: bold;
  170.           font-size: 16px;
  171.           line-height: 22px;
  172.           display: flex;
  173.           align-items: center;
  174.           text-align: center;
  175.           color: #FFFFFF;
  176.           width: 100%;
  177.           height: 50px;
  178.           max-width: 280px;
  179.           justify-content: center;
  180.           border: 1px solid var(--brand-color-medium);
  181.           text-transform: uppercase;
  182.           cursor: pointer;
  183.           margin: 30px auto 0px auto;
  184.           border: 1px solid #FFFFFF;
  185.           border-radius:25px;
  186.           padding: 0px, 21px, 0px, 21px;
  187.   
  188.         }
  189.  
  190.           .bread-promo.one:hover {
  191.             background-color:  #007dba;
  192.             border: 1px solid #fff;
  193.             text-decoration: none;
  194.             color: #fff;
  195.             transition: all 0.4s ease;
  196.           }
  197.  
  198.  
  199.  
  200.  
  201.           .bread-promo.bread-promo-two {
  202.           background: var(--buttons-hover-color);
  203.           border: 1px solid #FFFFFF;
  204.           border-radius: 25px;
  205.           padding: 0px, 21px, 0px, 21px;
  206.           min-width: 15px;
  207.           width: 100%;
  208.           max-width: 250px;
  209.           font-style: normal;
  210.           font-weight: bold;
  211.           font-size: 16px;
  212.           line-height: 22px;
  213.           display: flex;
  214.           margin: auto;
  215.           text-align: center;
  216.           height: 50px;
  217.           justify-content: center;
  218.           color: #FFFFFF;
  219.           margin: 30px auto 0px auto;
  220.           align-items: center;
  221.           font-family: var(--brand-font-family);
  222.   
  223.         }
  224.  
  225.  
  226.           .bread-promo.bread-promo-two:hover {
  227.             color: #fff;
  228.             border: 1px solid #FFFFFF;
  229.             transition: all 0.4s ease;
  230.             background: #13294b;
  231.             transition: all 0.4s ease;
  232.           }
  233.  
  234.           .bread-learn-more {
  235.             font-family: var(--brand-font-family);
  236.             font-style: normal;
  237.             font-weight: 800;
  238.             font-size: 18px;
  239.             line-height: 28px;
  240.             color: var(--brand-color-medium);
  241.             text-transform: uppercase;
  242.             position: relative;
  243.             width: 100%;
  244.             text-align: center;
  245.           }
  246.  
  247.       #subhead-terms {
  248.         color: black !important;
  249.       }
  250.  
  251.       .bread-three-col div {
  252.         margin: 50px 20px 0;
  253.       }
  254.  
  255.       .bread-three-col img {
  256.         margin-bottom: 15px;
  257.       }
  258.  
  259.       p{
  260.         padding: 5px 0;
  261.         line-height: 1.3;
  262.       }
  263.  
  264.       @media ALL and (min-width: 768px) {
  265.  
  266.         .bread-three-col {
  267.           display: flex;
  268.           padding: 0px 15px;
  269.           justify-content: space-between;
  270.         }
  271.  
  272.         .bread-three-col div {
  273.           width: 30%;
  274.           margin: 0;
  275.         }
  276.  
  277.         .bread-points {
  278.           margin-top: 75px;
  279.         }
  280.  
  281.         .bread-style h3 {
  282.               font-size: 1.25em !important;
  283.         }
  284.  
  285.         p {
  286.           padding: 0;
  287.         }
  288.       }
  289.  
  290.       -->
  291.     </style>
  292.  
  293.     <body>
  294.       <div class="bread-header bread-section bread-style">
  295.         <div class="bread-content-inner">
  296.           <h6>0% Financing Available</h6>
  297.           <p>
  298.             Clear, transparent terms. Fair rates. No prepayment penalties.<br /><br />
  299.           </p>
  300.           <div class="bread-promo one" id="bread-placement-1">GET MY RATE</div><br />
  301.         <p>  Click here, to check your rate in seconds without leaving our site</p>
  302.         </div>
  303.       </div>
  304.  
  305.       <script>    
  306.  
  307.     var placements = [
  308.     {
  309.       allowCheckout: false,
  310.       domID: "bread-placement-1",
  311.     },
  312.     {
  313.       allowCheckout: false,
  314.       domID: "bread-placement-2",
  315.     },
  316.       ];
  317.   
  318.       BreadPayments.setup({ 
  319.     integrationKey: "f793527b-b6c7-40f8-b871-ab27559bb26e"
  320.       });
  321.   
  322.       BreadPayments.registerPlacements(placements);
  323.       
  324.       BreadPayments.on("INSTALLMENT:APPLICATION_CHECKOUT", () => {});
  325.   
  326.       BreadPayments.on("INSTALLMENT:APPLICATION_DECISIONED", () => {});
  327.  
  328.         </script>
  329.     
  330.     </body>
  331.     <!-- END FINANCING PAGE CODE -->

Editor

You can edit this paste and save as new:


File Description
  • Financing Page
  • Paste Code
  • 23 Mar-2023
  • 8.31 Kb
You can Share it: