!!!

%html{:lang => "fr", "xml:lang" => "fr", :xmlns => "http://www.w3.org/1999/xhtml"}
  %head
    %title Négos



    %meta{:name=>"viewport", :content=>"width=device-width,initial-scale=1"}
    %meta{ :"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8" }
    %meta{ :"name" => "Description", :content => @description }
    %meta{ :"name" => "Keywords", :content => @keywords }
    =#<script type="text/javascript" =#src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDSm3YlFVyeEa6KBPmRRkiylbd-xTl-dkQ">
    =#</script>




    = csrf_meta_tag
    =#render :partial => "public/shared/ga"


    <link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans:400,800" rel="stylesheet">

    =javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"



  %body{:style => "background:url('/fond-vs.jpg') #F8F9EA center bottom no-repeat;background-size:100%;"}



    .top
      =image_tag "/logo-vs.png", :style => "margin:auto;display:block;width:250px;margin:30px auto;"
      
    
    .row
    
      .columns
        %h2
          Entreprises – Commerçants
          Professions Libérales – Collectivités
          Associations
        .inner
          
         
          
          %center
            =link_to "Commander maintenant", "http://negos.pro/public/customers_auths/new?p=KJ6XC9", :target => "_blank", :style => "display:inline-block;margin:20px;padding:12px 20px;border:1px solid #f59c00;color:white;background:#f59c00;font-weight:bold;text-decoration:none;text-transform:uppercase;"
            
        
            =link_to image_tag( "/logo2.png", :style => "display:block;margin:20px auto;width:160px;"), "http://negos.pro", :target => "_blank"
        
      .columns
        %h2
          %br
          Particuliers
          %br
          %br
        .inner
          %p  
            =image_tag( "/declic.png", :style => "display:block;margin:20px auto;max-width:100%;")
          
          %p{:style => "text-align:center;font-weight:800 !important;font-size:1.3em;"}
            %strong Ou trouver mon Pack ?
            
          %p{:style => "text-align:center;"}
            =link_to "www.vouisstar.fr", "http://www.vouisstar.fr", :target => "_blank", :style => "display:inline-block;margin:20px;padding:12px 20px;border:1px solid #f59c00;color:white;background:#f59c00;font-weight:bold;text-decoration:none;text-transform:uppercase;"
        
      .clear
      %br
      %br
      %center
        <div style="width: 525px;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
        <span class="mejs-offscreen"></span><div id="mep_0" class="mejs-container wp-video-shortcode mejs-video" tabindex="0" role="application" aria-label="Lecteur vidéo" style="width: 525px; height: 295px; min-width: 217px;"><div class="mejs-inner"><div class="mejs-mediaelement"><mediaelementwrapper id="video-6-1"><video class="wp-video-shortcode" id="video-6-1_html5" width="525" height="295" poster="http://www.vouisstar.fr/wp-content/uploads/2017/11/Pack-Vouis-Star-E3D-1-Video_x264-mp4-image.png" loop="1" autoplay="1" preload="metadata" src="http://www.vouisstar.fr/wp-content/uploads/2017/11/Pack-Vouis-Star-E3D-1-Video_x264.mp4?_=1" style="width: 525px; height: 295px;"><source type="video/mp4" src="http://www.vouisstar.fr/wp-content/uploads/2017/11/Pack-Vouis-Star-E3D-1-Video_x264.mp4?_=1"><a href="http://www.vouisstar.fr/wp-content/uploads/2017/11/Pack-Vouis-Star-E3D-1-Video_x264.mp4">http://www.vouisstar.fr/wp-content/uploads/2017/11/Pack-Vouis-Star-E3D-1-Video_x264.mp4</a></video></mediaelementwrapper></div><div class="mejs-layers"><div class="mejs-poster mejs-layer" style="background-image: url(&quot;http://www.vouisstar.fr/wp-content/uploads/2017/11/Pack-Vouis-Star-E3D-1-Video_x264-mp4-image.png&quot;); width: 100%; height: 100%; display: none;"><img class="mejs-poster-img" width="0" height="0" src="http://www.vouisstar.fr/wp-content/uploads/2017/11/Pack-Vouis-Star-E3D-1-Video_x264-mp4-image.png"></div><div class="mejs-overlay mejs-layer" style="width: 100%; height: 100%; display: none;">
        </div></div></div>
      .clear
      %br
      %br
      
    :scss
      .columns{
        width:50%;
        float:left;
        box-sizing:border-box;
        padding:0 10px;
        .inner{
          background:rgba(255,255,255,0.8);
          max-width:480px;
          margin:auto;
          padding:20px;
          
          
        }
      }
      html {
         margin: 0px;
         min-height: 100%;
         width: 100%;
         
      }
      h2{
        font-family: 'Lobster', cursive;
        color:#077e2f !important;
        font-size:40px;
      }
      body {
         margin: 0px;
         min-height: 100%;
         width: 100%;
         font-family: 'Open Sans', sans-serif;
         h2{
           text-align:center;
           max-width:480px;
           margin:auto;
           color:white;
           margin-bottom:20px;
         }
         .row{
           margin:40px auto;
           max-width:1250px;
         }
         
         
      }
      
      @media screen and (max-width: 800px) {
        .columns{
          margin-bottom:50px;
          width:auto;
          padding:0 40px;
          float:none;
          
          
        }
      }