templates/includes/company-footer.html.twig line 1

Open in your IDE?
  1.     
  2.        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
  3.         
  4.         
  5.         {#font awesome cdn link#}
  6.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  7.         
  8.         {#custom css file link#}
  9.         <style>
  10.        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
  11.        
  12.     :root{
  13.         --orange:#ff7800;
  14.         --black:#130f40;
  15.         --light-color:#666;
  16.         --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
  17.         --border:.2rem solid rgba(0,0,0,.1);
  18.         --outline:.1rem solid rgba(0,0,0,.1);
  19.         --outline-hover:.2rem solid var(--black);
  20.     }
  21.        
  22.     * {
  23.     font-family: 'Poppins', sans-serif;
  24.     margin:0; padding:0;
  25.     box-sizing: border-box;
  26.     outline: none; border:none;
  27.     text-decoration: none;
  28.     text-transform: capitalize;
  29.     transition: all .2s linear;
  30.     }
  31.     
  32.     html{
  33.         font-size: 62.5%;
  34.         overflow-x: hidden;
  35.         scroll-behavior: smooth;
  36.         scroll-padding-top: 7rem;
  37.     }
  38.     
  39.     body{
  40.         background:#FCFFFE;
  41.     }
  42.     
  43.     section{
  44.         padding:2rem 9%;
  45.     }
  46.     
  47.     .heading{
  48.         text-align: center;
  49.         padding:2rem 0;
  50.         padding-bottom: 3rem;
  51.         font-size: 3.5rem;
  52.         color:var(--white);
  53.     }
  54.     
  55.     .heading span{
  56.         background: var(--black);
  57.         color:#fff;
  58.         display:inline-block;
  59.         padding:.5rem 3rem;
  60.         clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
  61.     }
  62.     
  63.     .btn{
  64.         margin-top: 1rem;
  65.         display: inline-block;
  66.         padding: .8rem 3rem;
  67.         font-size: 1.7rem;
  68.         border-radius: .5rem;
  69.         border:.2rem solid #fff;
  70.         color:var(--black);
  71.         cursor:pointer;
  72.         background: #eee;
  73.     }
  74.     
  75.     .btn:hover{
  76.         background: var(--orange);
  77.         color:#000;
  78.     }
  79.     .footer{
  80.         background-color:#092A2C;
  81.         z-index: 9999;
  82.         margin-top: auto;
  83.         width:100%;
  84.         left: 0;
  85.         bottom: 0;
  86.         margin-bottom:-50px;
  87.         display: flex;
  88.         flex-direction: column;
  89.     }
  90.     
  91.     .footer .box-container{
  92.         display:grid;
  93.         grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  94.         gap:1.5rem;
  95.     }
  96.     
  97.     .footer .box-container .box h3{
  98.         font-size: 2.5rem;
  99.         color:#fff;
  100.         padding:1rem 0;
  101.     }
  102.     
  103.     .footer .box-container .box h3 i{
  104.         color:orange;
  105.     }
  106.     
  107.     .footer .box-container .box .links{
  108.         display: block;
  109.         font-size: 1.5rem;
  110.         color:var(--light-color);
  111.         padding:1rem 0;
  112.     }
  113.     
  114.     .footer .box-container .box .links i{
  115.         color:var(--orange);
  116.         padding-right: .5rem;
  117.     }
  118.     
  119.     .footer .box-container .box .links:hover i{
  120.         padding-right: 2rem;
  121.     }
  122.     
  123.     .footer .box-container .box p{
  124.         line-height:1.8;
  125.         font-size: 1.5rem;
  126.         color:var(--light-color);
  127.         padding:1rem 0;
  128.     }
  129.     
  130.     .footer .box-container .box .share a{
  131.         height:4rem;
  132.         width:4rem;
  133.         line-height:4rem;
  134.         border-radius: .5rem;
  135.         font-size: 2rem;
  136.         color:var(--black);
  137.         margin-left: .2rem;
  138.         background:#eee;
  139.         text-align: center;
  140.     }
  141.     
  142.     .footer .box-container .box .share a:hover{
  143.         background:var(--orange);
  144.         color:var(--orange);
  145.     }
  146.     {# .footer .box-container .box .fa-shopping-baske{
  147.         color:orange !important;
  148.     } #}
  149.     .footer .box-container .box .email{
  150.         width:100%;
  151.         margin:.7rem 0;
  152.         padding:1rem;
  153.         border-radius: .5rem;
  154.         background: #eee;
  155.         font-size: 1.6rem;
  156.         color:#063D40;
  157.         text-transform:none;
  158.     }
  159.     
  160.     .footer .box-container .box .payment-img{
  161.         margin-top: 2rem;
  162.         height:5rem;
  163.     }
  164.     .footer .box-container .box .links:hover{
  165.         color:#ffffff !important;
  166.     }
  167.     .footer .credit{
  168.         text-align:center;
  169.         margin-top: 2rem;
  170.         padding:1rem;
  171.         padding-top: 2.5rem;
  172.         font-size:2rem;
  173.         color:#fff;
  174.         border-top: var(--border);
  175.     }
  176.     .email, .fa-facebook-f, .fa-twitter, .fa-instagram, .fa-linkedin{
  177.         background-color: #FFFDF8 !important;
  178.     }
  179.     
  180.     .footer .credit span{
  181.         color:var(--orange);
  182.     }
  183.     /*media queries*/
  184.     @media (max-width:991px){
  185.         html{
  186.             font-size:55%;
  187.         }
  188.         
  189.         .header{
  190.             padding:2rem;
  191.         }
  192.         
  193.         section{
  194.         padding:2rem;
  195.     }
  196.     }
  197.     
  198.     @media (max-width:768px){
  199.         
  200.         #menu-btn{
  201.             display: inline-block;
  202.         }
  203.         
  204.         .header .search-form{
  205.             width:90%;
  206.         }
  207.         
  208.         .header .navbar{
  209.             position: absolute;
  210.             top:110%; right:-110%;
  211.             width:30rem;
  212.             box-shadow: var(--box-shadow);
  213.             border-radius: .5rem;
  214.             background:#fff;
  215.         }
  216.         
  217.         .header .navbar.active{
  218.            right:2rem;
  219.            transition: .4s linear;
  220.         }
  221.         
  222.         .header .navbar a{
  223.             font-size: 2rem;
  224.             margin:2rem 2.5rem;
  225.             display: block;
  226.         }
  227.        
  228.     }
  229.     
  230.     @media (max-width:450px){
  231.         html{
  232.             font-size:50%;
  233.         }
  234.         
  235.         .heading{
  236.             font-size:2.5rem;
  237.         }
  238.         
  239.         .footer{
  240.             text-align:center;
  241.             background-color:#fcf2d7;
  242.         }
  243.     }
  244.     </style>
  245.         {#footer section starts#}
  246.         
  247.         <section class="footer">
  248.             <div class="box-container">
  249.                 <div class="box">
  250.                     <h3>News Repos <i class="fas fa-shopping-basket"></i></h3>
  251.                     <p>This repository is the culmination of our commitment to cultivating a culture of shared learning, continuous improvement, and effective knowledge management.</p>
  252.                     <div class="share">
  253.                         <a href="#" class="fab fa-facebook-f"></a>
  254.                         <a href="#" class="fab fa-twitter"></a>
  255.                         <a href="#" class="fab fa-instagram"></a>
  256.                         <a href="#" class="fab fa-linkedin"></a>
  257.                     </div>
  258.                 </div>
  259.                 
  260.                 <div class="box">
  261.                     <h3>Contact info</h3>
  262.                     <a href="#" class="links"> <i class="fas fa-phone"></i> +123-456-7890</a>
  263.                     <a href="#" class="links"> <i class="fas fa-phone"></i> +111-345-6669</a>
  264.                     <a href="#" class="links"> <i class="fas fa-envelope"></i>navabrindsol@gmail.com</a>
  265.                     <a href="#" class="links"> <i class="fas fa-map-marker-alt"></i> chennai, India - 600983</a>
  266.                 </div>
  267.                 
  268.                  <div class="box">
  269.                     <h3>Quick links</h3>
  270.                   <a href="https://pimcore.navabrinditsolutions.com/Companies/Home" class="links"> <i class="fas fa-arrow-right"></i> Home</a>
  271.                     <a href="https://pimcore.navabrinditsolutions.com/Companies/Companies" class="links"> <i class="fas fa-arrow-right"></i> Companies</a>
  272.                     <a href="https://pimcore.navabrinditsolutions.com/Companies/Articles" class="links"> <i class="fas fa-arrow-right"></i> Articles</a>
  273.                     <a href="https://pimcore.navabrinditsolutions.com/Companies/RatingsReviews" class="links"> <i class="fas fa-arrow-right"></i> Reviews</a>
  274.                 </div>
  275.                 
  276.                 <div class="box">
  277.                     <h3>Newsletter</h3>
  278.                     <p>Subscribe for latest updates</p>
  279.                     <input type="text" placeholder="Your Email" class="email">
  280.                     <input type="submit" value="subscribe" class="btn">
  281.                     
  282.                 </div>
  283.             </div>
  284.             
  285.             <div class="credit">Powered by <span>Navabrind IT Solutions</span> | All rights reserved </div>
  286.         </section>
  287.         
  288.         {#footer section ends#}
  289.         
  290.         {#custom js file link#}
  291.         {#<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>#}
  292.         {#<script>#}
  293.         {#    let searchForm = document.querySelector('.search-form');#}
  294.         {#    document.querySelector('#search-btn').onclick = () => {#}
  295.         {#        searchForm.classList.toggle('active');#}
  296.         {#        shoppingCart.classList.remove('active');#}
  297.         {#        loginForm.classList.remove('active');#}
  298.         {#        navbar.classList.remove('active');#}
  299.         {#    }#}
  300.             
  301.         {#    let shoppingCart = document.querySelector('.shopping-cart');#}
  302.         {#    document.querySelector('#cart-btn').onclick = () => {#}
  303.         {#        shoppingCart.classList.toggle('active');#}
  304.         {#        searchForm.classList.remove('active');#}
  305.         {#        loginForm.classList.remove('active');#}
  306.         {#        navbar.classList.remove('active');#}
  307.         {#    }#}
  308.             
  309.         {#    let loginForm = document.querySelector('.login-form');#}
  310.         {#    document.querySelector('#login-btn').onclick = () => {#}
  311.         {#        loginForm.classList.toggle('active');#}
  312.         {#        searchForm.classList.remove('active');#}
  313.         {#        shoppingCart.classList.remove('active');#}
  314.         {#        navbar.classList.remove('active');#}
  315.         {#    }#}
  316.             
  317.         {#    let navbar = document.querySelector('.navbar');#}
  318.         {#    document.querySelector('#menu-btn').onclick = () => {#}
  319.         {#        navbar.classList.toggle('active');#}
  320.         {#        searchForm.classList.remove('active');#}
  321.         {#        shoppingCart.classList.remove('active');#}
  322.         {#        loginForm.classList.remove('active');#}
  323.         {#    }#}
  324.             
  325.         {#    window.onscroll = () =>{#}
  326.         {#        searchForm.classList.remove('active');#}
  327.         {#        shoppingCart.classList.remove('active');#}
  328.         {#        loginForm.classList.remove('active');#}
  329.         {#        navbar.classList.remove('active');#}
  330.         {#    }#}
  331.         {#</script>#}
  332. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  333. <script>
  334. jQuery(function($) {
  335.     var path = window.location.href; 
  336.     var para = path.split("/");
  337.     var x = para[3].split("?");
  338.     //alert(x[0]);
  339.     $('.menu li a').each(function() {
  340.         //alert(this.href);
  341.         if (this.href === path) {
  342.             jQuery(this).closest('li').addClass('active');
  343.         }
  344.         if(x[0] === "companyDetails"){
  345.             jQuery(".menu li").eq(0).addClass("active");
  346.         }
  347.     });
  348. });
  349. </script>