CSS Template


<!DOCTYPE html>
<html>
<title>CSS Template </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.netbax.net/pages/templates/templates1/style.css">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {font-family: "Open Sans", sans-serif}
</style>
<body class="netbax-theme-l5">

<!-- Navbar -->
<div class="netbax-top">
 <div class="netbax-bar netbax-theme-d2 netbax-left-align netbax-large">

  <a href="#" class="netbax-bar-item netbax-button netbax-padding-large netbax-theme-d4"><i class="fa fa-home"></i> Home</a>
  <a href="#" class="netbax-bar-item netbax-button netbax-hide-small netbax-padding-large netbax-hover-white" title="Forum"><i class="fa fa-forumbee"></i> Forum</a>
  <a href="#" class="netbax-bar-item netbax-button netbax-hide-small netbax-padding-large netbax-hover-white" title="Contact"><i class="fa fa-address-book"></i> Contact</a>
  <a href="#" class="netbax-bar-item netbax-button netbax-hide-small netbax-padding-large netbax-hover-white" title="About us"><i class="fa fa-info-circle"></i> About us</a>
  <a href="#" class="netbax-bar-item netbax-button netbax-hide-small netbax-padding-large netbax-hover-white" title="Share"><i class="fa fa-share"></i> Share</a>
  <a href="#" class="netbax-bar-item netbax-button netbax-hide-small netbax-padding-large netbax-hover-white" title="Login"><i class="fa fa-sign-in"></i> Login</a>
  <a href="#" class="netbax-bar-item netbax-button netbax-hide-small netbax-padding-large netbax-hover-white" title="Register"><i class="fa fa-user"></i> Register</a>

  
 </div>
</div>



<!-- Page Container -->
<div class="netbax-container netbax-content" style="max-width:1400px;margin-top:80px">    
  <!-- The Grid -->
  <div class="netbax-row">
    <!-- Left Column -->
    <div class="netbax-col m3">
      <!-- Profile -->
      <div class="netbax-card netbax-round netbax-white">
        <div class="netbax-container">
         
         <p class="netbax-center"><img src="images/logo-empty.png" class="netbax-circle" style="height:140px;width:140px" alt="logo-empty"></p>
         <hr>
<h4 class="netbax-center">Menu</h4>
 <hr>
<p><a href="#" target="_blank"> MENU#1</a></p>
<p><a href="#" target="_blank"> MENU#2</a></p>
<p><a href="#" target="_blank"> MENU#3</a></p>
<p><a href="#" target="_blank"> MENU#4</a></p>
<p><a href="#" target="_blank"> MENU#5</a></p>
<p><a href="#" target="_blank"> MENU#6</a></p>
<p><a href="#" target="_blank"> MENU#7</a></p>
<p><a href="#" target="_blank"> MENU#8</a></p>
<p><a href="#" target="_blank"> MENU#9</a></p>
        </div>
      </div>
      <br>
      
      <!-- Accordion -->
      <div class="netbax-card netbax-round">
        <div class="netbax-white">
          <button onclick="myFunction('Demo-text1')" class="netbax-button netbax-block netbax-theme-l1 netbax-left-align">  <i class="fa  fa-file-text-o"></i>  
  Title Enter Text Click Me</button>
          <div id="Demo-text1" class="netbax-hide netbax-container">
            <p>Enter other text..</p>
          </div>
          <button onclick="myFunction('Demo-text2')" class="netbax-button netbax-block netbax-theme-l1 netbax-left-align">  <i class="fa fa-file-text"></i>    Title 
Enter Text Click Me</button>
          <div id="Demo-text2" class="netbax-hide netbax-container">
            <p>Enter other text..</p>
          </div>
          <button onclick="myFunction('Demo-text3')" class="netbax-button netbax-block netbax-theme-l1 netbax-left-align">  <i class="fa  fa-photo"></i>    Photo 
Gallery</button>
          <div id="Demo-text3" class="netbax-hide netbax-container">
         <div class="netbax-row-padding">
         <br>
           <div class="netbax-half">
             <img src="images/7.png" style="width:100%" class="netbax-margin-bottom">
           </div>
           <div class="netbax-half">
             <img src="images/4.jpg" style="width:100%" class="netbax-margin-bottom">
           </div>
           <div class="netbax-half">
             <img src="images/6.jpg" style="width:100%" class="netbax-margin-bottom">
           </div>
           <div class="netbax-half">
             <img src="images/1.bmp" style="width:100%" class="netbax-margin-bottom">
           </div>
           <div class="netbax-half">
             <img src="images/2.jpg" style="width:100%" class="netbax-margin-bottom">
           </div>
           <div class="netbax-half">
             <img src="images/3.jpg" style="width:100%" class="netbax-margin-bottom">
           </div>
         </div>
          </div>
        </div>      
      </div>
      <br>
      

    
    <!-- End Left Column -->
    </div>
    
    <!-- Middle Column -->
    <div class="netbax-col m7">
    
      <div class="netbax-row-padding">
        <div class="netbax-col m12">
          <div class="netbax-card netbax-round netbax-white">
            <div class="netbax-container netbax-padding">
              <h6 class="netbax-opacity">HTML/CSS/JAVASCRIPT template by netbax.net</h6>
              <p contenteditable="true" class="netbax-border netbax-padding">Search</p>
             
            </div>
          </div>
        </div>
      </div>
      
      <div class="netbax-container netbax-card netbax-white netbax-round netbax-margin"><br>
        <img src="images/avatar2.png" alt="avatar2" class="netbax-left netbax-circle netbax-margin-right" style="width:60px">
        
        <h4>Stella Bax</h4><br>
        <hr class="netbax-clear">
       <p>Contrary to popular belief, Lorem Ipsum. Casamentiss faiz malandris se pirulitá. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.  In elementis 
mé pra quem é amistosis quis leo.  Manduma pindureta quium dia nois paga.  </p><p>Suco de cevadiss deixa as pessoas mais interessantis.  Si num tem leite então bota uma pinga aí cumpadi!  
Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget.  Aenean aliquam molestie leo, vitae iaculis nisl.  </p>
          <div class="netbax-row-padding" style="margin:0 -16px">
            <div class="netbax-half">
              <img src="images/7.png" style="width:100%" alt="7" class="netbax-margin-bottom">
            </div>
            <div class="netbax-half">
              <img src="images/4.jpg" style="width:100%" alt="4" class="netbax-margin-bottom">
          </div>
        </div>
        
      </div>
      
      <div class="netbax-container netbax-card netbax-white netbax-round netbax-margin"><br>
        <img src="images/avatar5.png" alt="avatar5" class="netbax-left netbax-circle netbax-margin-right" style="width:60px">
        
        <h4>Chris Bax</h4><br>
        <hr class="netbax-clear">
       <p>Contrary to popular belief, Lorem Ipsum. Casamentiss faiz malandris se pirulitá. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.  In elementis 
mé pra quem é amistosis quis leo.  Manduma pindureta quium dia nois paga.  </p><p>Suco de cevadiss deixa as pessoas mais interessantis.  Si num tem leite então bota uma pinga aí cumpadi!  
Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget.  Aenean aliquam molestie leo, vitae iaculis nisl.  </p>
       
      </div>  

      <div class="netbax-container netbax-card netbax-white netbax-round netbax-margin"><br>
        <img src="images/avatar6.png" alt="avatar6" class="netbax-left netbax-circle netbax-margin-right" style="width:60px">
      
        <h4>Billy Bax</h4><br>
        <hr class="netbax-clear">
        <p>Images</p>
        <img src="images/5.jpg" style="width:100%" class="netbax-margin-bottom">
        <p>Contrary to popular belief, Lorem Ipsum. Casamentiss faiz malandris se pirulitá. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.  In elementis 
mé pra quem é amistosis quis leo.  Manduma pindureta quium dia nois paga.  </p><p>Suco de cevadiss deixa as pessoas mais interessantis.  Si num tem leite então bota uma pinga aí cumpadi!  
Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget.  Aenean aliquam molestie leo, vitae iaculis nisl.  </p>
      
      </div> 
      
    <!-- End Middle Column -->
    </div>
    
    <!-- Right Column -->
    <div class="netbax-col m2">
      <div class="netbax-card netbax-round netbax-white netbax-center">
        <div class="netbax-container">
          <p>Title Enter Text:</p>
          <img src="images/freelancing.png" alt="freelancing" style="height:112px;width:112px">
          <p><strong>Enter other text..</strong></p>
          <p>Enter other text..</p>
          <p><button class="netbax-button netbax-block netbax-orange netbax-section"><i class="fa fa-mail-forward"></i> Button#1</button></p>
        </div>
      </div>
      <br>
      
      <div class="netbax-card netbax-round netbax-white netbax-center">
        <div class="netbax-container">
          <p>Title Enter Text</p>
          <img src="images/avatar6.png" alt="avatar6" style="width:50%"><br>
          <span>Billy Bax</span>
          <div class="netbax-row">
            <div class="netbax-half">
              <button class="netbax-button  netbax-block netbax-blue netbax-section" title="button#2"><i class="fa fa-mail-forward"></i> button#2</button>
            </div>
            <div class="netbax-half">
              <button class="netbax-button  netbax-block netbax-red netbax-section" title="button#3"><i class="fa fa-mail-forward"></i> button#3</button>
            </div>
          </div>
        </div>
      </div>
      <br>
      
      <div class="netbax-card netbax-round netbax-white netbax-padding-32 netbax-center">
        <p>ADS</p>
      </div>
      <br>
      
      <div class="netbax-card netbax-round netbax-white netbax-padding-32 netbax-center">
      <p>ADS</p>
      </div>
        <br>
<div class="netbax-card netbax-round netbax-white netbax-padding-32 netbax-center">
      <p>ADS</p>
      </div>
        <br>
<div class="netbax-card netbax-round netbax-white netbax-padding-32 netbax-center">
      <p>ADS</p>
      </div>
        
    <!-- End Right Column -->
    </div>
    
  <!-- End Grid -->
  </div>
  
<!-- End Page Container -->
</div>
<br>

<!-- Footer -->
<footer class="netbax-container netbax-theme-d3 netbax-center">
  <h5>Footer</h5>
</footer>

<footer class="netbax-container netbax-theme-d4">
  <p>Powered by <a href="https://www.netbax.net/pages/templates.html" target="_blank">netbax.net</a></p>
</footer>
 

<script>

function myFunction(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("netbax-show") == -1) {
    x.className += " netbax-show";
    x.previousElementSibling.className += " netbax-theme-d1";
  } else { 
    x.className = x.className.replace("netbax-show", "");
    x.previousElementSibling.className = 
    x.previousElementSibling.className.replace(" netbax-theme-d1", "");
  }
}


function openNav() {
  var x = document.getElementById("navDemo-text");
  if (x.className.indexOf("netbax-show") == -1) {
    x.className += " netbax-show";
  } else { 
    x.className = x.className.replace(" netbax-show", "");
  }
}
</script>