<?php get_header();?>
<?php
  session_start();
  $_SESSION['message'] = $_POST['message'];
?>


<div class="container" id="container">
  
  <div class="top-bar"></div>
  <div class="action-bar-mobile">
    <img class="logo" src="wp-content/themes/newline/images/logo.svg">
  </div>

  <div class="action-bar" id="action-bar">
    <img class="logo" src="wp-content/themes/newline/images/logo.svg">
    <ul>
      <li id="s0" onclick="changePage('s0', 0)"><a href="#section0">Home</a></li>
      <li id="s1" onclick="changePage('s1', 1)"><a href="#section1">About</a></li>
      <li id="s2" onclick="changePage('s2', 2)"><a href="#section2">Services</a></li>
      <li id="s3" onclick="changePage('s3', 3)"><a href="#section3">Gallery</a></li>
      <li id="s4" onclick="changePage('s4', 4)"><a href="#section4">Clients</a></li>
      <li id="s5" onclick="changePage('s5', 5)"><a href="#section5">Contacts</a></li>
    </ul>
    <div class="divider-vertical"></div>
  </div>



  <section class="section section0" id="section0">
    <video autoplay muted loop id="myVideo">
      <source src="wp-content/themes/newline/assets/video.mp4" type="video/mp4">
    </video>
    <div class="content">
      <div class="about" id="about">
        <h2>We design</h2>
        <h1>We Build</h1>
        <div class="divider"></div>
        <p>
          <span>NewLine</span> is a Saudi company specialized in advertisement,
          interior decoration and construction of exhibitions and events. We
          guarantee <span>innovative</span> solutions, strating from designing a
          <span>creative</span> concept, to building this idea
        </p>
        <img class="arrow" src="wp-content/themes/newline/images/arrow.svg">

      </div>
      <img class="mouse-img" src="wp-content/themes/newline/images/mouse.svg">
    </div>

    <div class="social-bar1">
      <div class="divider-vertical-white"></div>
      <ul>
        <li><a href="https://www.facebook.com/" target="_blank"><img src="wp-content/themes/newline/images/facebook.svg"></a></li>
        <li><a href="https://www.linkedin.com/company/newlinesa/" target="_blank"><img src="wp-content/themes/newline/images/linkedin.svg"></a></li>
        <li><a href="https://mobile.twitter.com/newline_sa?fbclid=IwAR3ZondZxKYHXBLLexz8gVEHhJhCAPVqyKBDHY3TvbEshO4QZLNDwta3NIs" target="_blank"><img src="wp-content/themes/newline/images/twitter.svg"></a></li>
        <li><a href="https://instagram.com/" target="_blank"><img src="wp-content/themes/newline/images/instagram.svg"></a></li>
      </ul>        
    </div>
  </section>



  <section class="section section1" id="section1">
    <div class="color-overlay"></div>
    <div class="content-container">
      <div class="content">
        <h1>9</h1>
        <h2>YEARS</h2>
        <div class="divider"></div>
        <p>We are a <span>family</span> run business with many years’ <span>experience</span> of the exhibition industry. Our talented team manage every project from beginning to end, from venue liaison through to installation, take down and storage. With award winning designs we deliver unique exhibition stands and high quality graphics that reflect your brand’s credentials.</p>
        <div class="numbers-mobile">
          <div>
            <h3>243</h3>
            <p>Events</p>
          </div>
          <div>
            <h3>184</h3>
            <p>Customers</p>
          </div>
          <div>
            <h3>243</h3>
            <p>Contries</p>
          </div>
        </div>
      </div>
    </div>

    <div class="social-bar2">
      <div class="numbers">
        <div>
          <div><p>Events</p></div>
          <h3 id="n1">243</h3>
        </div>
        <div>
          <div><p>Customers</p></div>
          <h3 id="n2">184</h3>
        </div>
        <div>
          <div><p>Contries</p></div>
          <h3 id="n3">243</h3>
        </div>
      </div>
    </div>
  </section>




  <section class="section section2" id="section2">
    <div class="content-mobile">
      <div class="title">
        <h2>SERVICES</h2>
        <div class="divider"></div>
      </div>
      <h4>Exhibitions and Events</h4>
      <h1>Solutions</h1>
      <p>
        We have a large team of exhibition designers, project managers, transport and logistics staff who can undertake any size of project.<br>
        Designing, building and project management are all strings to our bow when it comes to creating innovative spaces for your audience to interact with at exhibitions.
      </p>
      <div class="extending-lists">
        <div class="extending-list">
          <div class="wrap">
            <div onclick="show('ul1')">
              <h3>Exhibitions</h3>
              <img src="wp-content/themes/newline/images/extend.svg" >
            </div>
            <ul id="ul1">
              <li>- Project Management</li>
              <li>- Construction & Floor</li>
              <li>- Audio Visual System</li>
              <li>- Development of Exhibition Concept</li>
            </ul>
          </div>
          <div class="divider"></div>
        </div>
        <div class="extending-list">
          <div class="wrap">
            <div onclick="show('ul2')">
              <h3>Stands </h3>
              <img src="wp-content/themes/newline/images/extend.svg" >
            </div>
            <ul id="ul2">
              <li>- Stands according to the floorplan</li>
              <li>- Modular Stands</li>
              <li>- Custom Build</li>
              <li>- 3D Visuals</li>
            </ul>
          </div>
          <div class="divider"></div>
        </div>
        <div class="extending-list">
          <div class="wrap">
            <div onclick="show('ul3')">
              <h3>Logistic</h3>
              <img src="wp-content/themes/newline/images/extend.svg" >
            </div>
            <ul id="ul3">
              <li>- Venue Liaison</li>
              <li>- Groups Accompanying</li>
              <li>- In-conferance translations mics</li>
              <li>- Private translators</li>
            </ul>
          </div>
          <div class="divider"></div>
        </div>
      </div>  
      <h4>Brand identity</h4>
      <h1>Creation</h1>
      <p>
        Whether you are looking for a modular stand or custom built one-off stand, our creative team will work towards providing you with the most innovative solutions), to In-Mall Signage networks, digital screens and Static Print media, we are proud to help businesses target and reach their audiences nationwide.
      </p>
      <div class="extending-lists">
        <div class="extending-list">
          <div class="wrap">
            <div onclick="show('ul4')">
              <h3>Print</h3>
              <img src="wp-content/themes/newline/images/extend.svg" >
            </div>
            <ul id="ul4">
              <li>- Logo Branding</li>
              <li>- Graphic charter Elements</li>
              <li>- Billboard ads</li>
              <li>- Company Profiles</li>
              <li>- Brochures and Event Booklets</li>
              <li>- Invitations</li>
            </ul>
          </div>
          <div class="divider"></div>
        </div>
        <div class="extending-list">
          <div class="wrap">
            <div onclick="show('ul5')">
              <h3>Digital</h3>
              <img src="wp-content/themes/newline/images/extend.svg" >
            </div>
            <ul id="ul5">
              <li>- Mobile and web Apps</li>
              <li>- Websites</li>
              <li>- Infographic Videos</li>
              <li>- Event Filming</li>
              <li>- Social Media Elements</li>
            </ul>
          </div>

          <div class="divider"></div>
        </div>
        <div class="extending-list">
          <div class="wrap">
            <div onclick="show('ul6')">
              <h3>Marketing</h3>
              <img src="wp-content/themes/newline/images/extend.svg" >
            </div>
            <ul id="ul6">
              <li>- Email Marketting</li>
              <li>- Social Media Marketing</li>
              <li>- Content Marketing</li>
              <li>- Pay-Per-Click Advertising</li>
              <li>- Affiliate Marketing</li>
            </ul>
          </div>
          <div class="divider"></div>
        </div>
      </div>  
    </div>
    <div class="content">
      <div class="img-container" onclick="closeinfos()">
        <div class="img" id="img1">
          <div class="side-infos" id="side-infos-1">
            <div class="infos-content">
              <div class="col1">
                <h3>Exhibitions and Events</h3>
                <h1>Solutions</h1>
                <p>
                  We have a large team of exhibition designers, project managers, transport and logistics staff who can undertake any size of project.<br>
                  Designing, building and project management are all strings to our bow when it comes to creating innovative spaces for your audience to interact with at exhibitions.
                </p>
              </div>
              <div class="col2">
                <div class="row">
                  <h2>Exhibitions</h2>
                  <ul>
                    <li>- Project Management</li>
                    <li>- Construction & Floor</li>
                    <li>- Audio Visual System</li>
                    <li>- Development of Exhibitions Concept</li>
                  </ul>
                </div>
                <div class="row">
                  <h2>Stands</h2>
                  <ul>
                    <li>- Stands according to the floorplan</li>
                    <li>- Modular Stands</li>
                    <li>- Custom Build</li>
                    <li>- 3D Visuals</li>
                  </ul>
                </div>
                <div class="row">
                  <h2>Logistie</h2>
                  <ul>
                    <li>- Venue Liaison</li>
                    <li>- Groups Accompanying</li>
                    <li>- In-conference translations mics</li>
                    <li>- Private translators</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="hover-overlay hover-o" id="hover-overlay-1">
            <h3>Exhibitions and Events</h3>
            <h2>Solutions</h2>
            <button onclick="showinfos('side-infos-1', 'side-infos-2', 'img1', 'img2')">Discover</button>
          </div>
        </div>
        <div class="img" id="img2">
          <div class="side-infos" id="side-infos-2"> 
            <div class="infos-content">
              <div class="col1">
                <h3>Brand identity</h3>
                <h1>Creation</h1>
                <p>
                  Whether you are looking for a modular stand or custom built one-off stand, our creative team will work towards providing you with the most innovative solutions), to In-Mall Signage networks, digital screens and Static Print media, we are proud to help businesses target and reach their audiences nationwide.
                </p>
              </div>
              <div class="col2">
                <div class="row">
                  <h2>Print</h2>
                  <ul>
                    <li>- Logo Branding</li>
                    <li>- Graphic charter Elements</li>
                    <li>- Billboard ads</li>
                    <li>- Company Profiles</li>
                    <li>- Brochures and Event Booklets</li>
                    <li>- Invitations</li>
                  </ul>
                </div>
                <div class="row">
                  <h2>Digital</h2>
                  <ul>
                    <li>- Mobile and web Apps</li>
                    <li>- Websites</li>
                    <li>- Infographic Videos</li>
                    <li>- Event Filming</li>
                    <li>- Social Media Elements</li>
                  </ul>
                </div>
                <div class="row">
                  <h2>Marketing</h2>
                  <ul>
                    <li>- Email Marketting</li>
                    <li>- Social Media Marketing</li>
                    <li>- Content Marketing</li>
                    <li>- Pay-Per-Click Advertising</li>
                    <li>- Affiliate Marketing</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="hover-overlay hover-o" id="hover-overlay-2">
            <h3>Brand identity</h3>
            <h2>Creation</h2>
            <button onclick="showinfos('side-infos-2', 'side-infos-1', 'img2', 'img1')">Discover</button>
          </div>        
        </div>  
      </div>
    </div>
  </section>




  <section class="section section3" id="section3">
    <div class="content">
      <h3>Because we love</h3>
      <h2>What we do!</h2>
      <div class="divider"></div>
      <div class="gallery gm">
        <div class="img-container-mobile">
          <img src="/wp-content/themes/newline/assets/11.jpg">
          <img src="/wp-content/themes/newline/assets/22.jpg">
          <img src="/wp-content/themes/newline/assets/33.jpg">
        </div>
        <div class="img-container-mobile" id="img-container-mobile-2">
          <img src="/wp-content/themes/newline/assets/11.jpg">
          <img src="/wp-content/themes/newline/assets/22.jpg">
          <img src="/wp-content/themes/newline/assets/33.jpg">
        </div>
        <p class="show-more" id="mobile" onclick="showmore('img-container-mobile-2','mobile' ,'inline')">+ Show More</p>
      </div>

     
      <div class="gallery gd">
        <div class="img-container">
          <div class="div1 img">
            <img src="/wp-content/themes/newline/assets/1.jpg">
          </div> 
          <div class="div4 img">
            <img src="/wp-content/themes/newline/assets/2.jpg">
          </div> 
          <div class="div3 img">
            <img src="/wp-content/themes/newline/assets/3.jpg">
          </div> 
          <div class="div2 img">
            <img src="/wp-content/themes/newline/assets/4.jpg">
          </div> 
          <div class="div5 img">
            <img src="/wp-content/themes/newline/assets/5.jpg">
          </div> 
          <div class="div6 img">
            <img src="/wp-content/themes/newline/assets/6.jpg">
          </div> 
        </div>
        <div class="img-container" id="img-container-2">
          <div class="div1 img">
            <img src="/wp-content/themes/newline/assets/1.jpg">
          </div> 
          <div class="div4 img">
            <img src="/wp-content/themes/newline/assets/2.jpg">
          </div> 
          <div class="div3 img">
            <img src="/wp-content/themes/newline/assets/3.jpg">
          </div> 
          <div class="div2 img">
            <img src="/wp-content/themes/newline/assets/4.jpg">
          </div> 
          <div class="div5 img">
            <img src="/wp-content/themes/newline/assets/5.jpg">
          </div> 
          <div class="div6 img">
            <img src="/wp-content/themes/newline/assets/6.jpg">
          </div> 
        </div>
        <p class="show-more-desktop" id="desktop" onclick="showmore('img-container-2', 'desktop','grid')">+ Show More</p>
    </div>
  </section>



  <section class="section section4" id="section4">
    <div class="content">
      <div class="contact">
        <h3>They Belived</h3>
        <h2>We Supplied</h2>
        <div class="divider"></div>
        <p>They all believe that a great user experience is the key to ensure success, growth and long-term awesomeness.<br> And we are more than happy to add your logo to this list!</p>
        <button onclick="changePage('s5', 5)">Contact us</button>
        <img id="logos-vertical" class="logos-vertical" src="/wp-content/themes/newline/assets/logos-vertical.jpg">
      </div>
      <img class="logos" src="/wp-content/themes/newline/assets/logos.jpg">      
    </div>
  </section>





  <section class="section section5" id="section5">
    <div class="content">
      <h3>Contact us</h3>
      <div class="divider"></div>
      <div class="contact">
        <div class="form">
          <form action="/" method="post">
            <div>
              <input type="text" placeholder="Full Name" name="fullname" required>
            </div>
            <div><input type="tel" name="tel" placeholder="Phone Number" required></div>
            <div><input type="text" name="subject" placeholder="Subject" required></div>
            
            <div class="message">
              <label for="message">Message</label>
              <textarea name="message" type="textarea" required></textarea>
            </div>
            <button type="submit" name="submit">Send Message</button>
          </form>
          <?php 
            $fullname = $_POST['fullname'];
            $tel = $_POST['tel'];
            $subject = $_POST['subject'];
            $message = $_POST['message'];
            $to = "m.alammar@newline.sa";
            $headers = array('Content-Type: text/html; charset=UTF-8');
            $body = "By: " . $fullname . "<br>Phone Number: " . $tel . "<br>Message: " . $message;
            
            if (isset($_POST['submit']) ){
              if(wp_mail( $to, $subject, $body, $headers )){
                echo '<p class="sent">Message sent !</p>';
              }else echo '<p class="error">error.</p>';
            }
            
 
          ?>
        </div>
        <div class="infos">
          <h4>Get in touch</h4>
          <p class="location">
            8TH Floor, Grand Tower<br>King Fahad Road, P.O.Box 32218<br>Saudi Arabia ‏Riyadh 11428
          </p>
          <div class="icons">
            <div class="icon">
              <img src="wp-content/themes/newline/images/message-icon.svg">
              <p>m.alammar@newline.sa</p>
            </div>
            <div class="icon">
              <img src="wp-content/themes/newline/images/tel-icon.svg">
              <p>059 0888 780</p>
            </div>
            <div class="icon">
              <img src="wp-content/themes/newline/images/phone-icon.svg">
              <p>011 8102 628</p>
            </div>
          </div>
        </div>
        <p class="rights">© 2020 NewLine<sup>TM</sup> All Rights Reserved</p>
      </div>
    </div>
  </section>
</div>
<?php get_footer();?>
