PDF from HTML EXAMPLE

def generate(request):
    '''
    Generate PDF
    '''
    data = {'response': 0}
    if request.method == 'POST':
        css_rules = '''
        .redalpha60 {
        /* Fallback for web browsers that don't support RGBa */
            background-color: rgb(255, 0, 0);
            /* RGBa with 0.6 opacity */
            background-color: rgba(255, 0, 0, 0.8);
        }
        .greenalpha60 {
            /* Fallback for web browsers that don't support RGBa */
            background-color: rgb(0, 255, 0);
            /* RGBa with 0.6 opacity */
            background-color: rgba(0, 255, 0, 0.6);
        }
        .yellowalpha60 {
            /* Fallback for web browsers that don't support RGBa */
            background-color: rgb(255, 255, 0);
            /* RGBa with 0.6 opacity */
            background-color: rgba(255, 255, 0, 0.7);
        }
        .orangealpha60 {
            /* Fallback for web browsers that don't support RGBa */
            background-color: rgb(0, 255, 0);
            /* RGBa with 0.6 opacity */
            background-color: rgba(0, 255, 0, 0.6);
        }
        #rack {
          display: none;
        }
        #box-networking-1 {
          position: absolute;
          top: 620px;
          left: 11px;
          width: 290px;
          height: 25px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #networking-1 {
          position: absolute;
          top: 620px;
          left: 11px;
          width: 290px;
        }
        #box-networking-2 {
          position: absolute;
          top: 645px;
          left: 11px;
          width: 290px;
          height: 25px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #networking-2 {
          position: absolute;
          top: 645px;
          left: 11px;
          width: 290px;
        }
        #box-ctrl-1 {
          position: absolute;
          top: 671px;
          left: 11px;
          width: 290px;
          height: 25px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #ctrl-1 {
          position: absolute;
          top: 671px;
          left: 11px;
          width: 290px;
        }
        #box-ctrl-2 {
          position: absolute;
          top: 696px;
          left: 11px;
          width: 290px;
          height: 25px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #ctrl-2 {
          position: absolute;
          top: 696px;
          left: 11px;
          width: 290px;
        }
        #box-compstor-1 {
          position: absolute;
          top: 721px;
          left: 11px;
          width: 290px;
          height: 60px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #compstor-1 { 
          position: absolute;
          top: 723px;
          left: 11px;
          width: 290px;
        }
        #box-compstor-2 {
          position: absolute;
          top: 781px;
          left: 11px;;
          width: 290px;
          height: 60px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #compstor-2 {
          position: absolute;
          top: 781px;
          left: 11px;
          width: 290px;;
        }
        #box-compstor-3 {
          display: none;
          position: absolute;
          top: 839px;
          left: 11px;
          width: 290px;;
          height: 60px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #compstor-3 {
          display: none;
          position: absolute;
          top: 839px;
          left: 11px;
          width: 290px;;
        }
        #box-compstor-4 {
          display: none;
          position: absolute;
          top: 897px;
          left: 11px;
          width: 290px;
          height: 60px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #compstor-4 {
          display: none;
          position: absolute;
          top: 897px;
          left: 11px;
          width: 290px;
        }
        #box-compstor-5 {
          display: none;
          position: absolute;
          top: 955px;
          left: 11px;
          width: 290px;
          height: 60px;
          color: white;
          font-weight: bold;
          text-align: center;
          border-top: 1px solid black;
        }
        #compstor-5 {
          display: none;
          position: absolute;
          top: 955px;
          left: 11px;
          width: 290px;
        }

        '''
        HTML(base_url=request.build_absolute_uri(), string='''
                <center>
                <img src="/static/images/KoolFit_logo_200x200t.png" class="login-logo">
                <h1>Configure your own Private Cloud</h1>
                <h2>Configura tu propio cloud privado</h2>
                </center>
                <h3>Estimated Capacity Summary</h3>
                <h4>{capacity_sumary}</h4>
                <h3>Total Estimated Monthly Recurrent Payment</h3>
                <h4>{total_general}</h4>
                <h3>Rack design</h3>
                <div>
                <center>
                {rack_design}
                </center>
                </div>
        '''.format(
            capacity_sumary=request.POST.get('capacity_sumary'),
            total_general=request.POST.get('total_general'),
            rack_design=request.POST.get('rack_design'),
        )).write_pdf(
            'main/media/quote.pdf',
            stylesheets=[CSS(string=css_rules)]
        )