<body class="layout">
<header>
<nav class="navbar shadow-1 primary">
<button class="btn rounded-1 white hide-md-up sidenav-trigger small mr-2" data-target="main-sidenav">
Menu
</button>
<a href="#" target="_blank" class="navbar-brand">Axentix</a>
<div class="navbar-menu ml-auto">
<a class="navbar-link active hide-sm-down" href="#">Link 1</a>
<a class="navbar-link hide-sm-down" href="#">Link 2</a>
<a class="navbar-link hide-sm-down" href="#">Link 3</a>
<div id="navbar-dropdown" data-ax="dropdown" class="dropdown" data-dropdown-prevent-viewport="true">
<a class="navbar-link dropdown-trigger" href="#">Dropdown</a>
<div class="dropdown-content white shadow-1 right-aligned">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
</div>
</div>
</div>
</nav>
</header>
<div class="sidenav white shadow-1" id="main-sidenav" data-ax="sidenav">
<div class="sidenav-header">
<img src="https://useaxentix.com/img/axentix.svg" alt="" class="sidenav-logo" />
</div>
<a href="#" class="sidenav-link active">Link 1</a>
<a href="#" class="sidenav-link">Link 2</a>
<a href="#" class="sidenav-link">Link 3</a>
</div>
<main>
<h1 class="txt-center font-w300 mx-2">Hello from Axentix !</h1>
<div class="container mt-5">
<div class="card rounded-2 shadow-1">
<div class="card-header">Material form example</div>
<div class="card-content">
<form class="form-material">
<div class="grix xs1 sm2">
<div class="form-field">
<label for="firstname">Firstname</label>
<input type="text" class="form-control" id="firstname" />
</div>
<div class="form-field">
<label for="firstname">Lastname</label>
<input type="text" class="form-control" id="firstname" placeholder="Toto" />
</div>
</div>
<button type="button" class="btn rounded-1 press secondary mx-auto mt-4">Submit</button>
</form>
</div>
</div>
</div>
<div class="container grix xs3">
<div class="card airforce light-1 shadow-1">
<div class="card-image">
<img src="https://picsum.photos/600/400" alt="logo" />
</div>
<div class="card-header">Card Header</div>
<div class="divider"></div>
<div class="card-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi suscipit harum repellat architecto unde vel numquam rem
doloribus maiores deserunt tenetur labore, aut, adipisci sit, sequi nihil voluptas commodi? Velit?
</div>
<div class="divider"></div>
<div class="card-footer">Card Footer</div>
</div>
<div class="card airforce light-1 shadow-1">
<div class="card-image">
<img src="https://picsum.photos/600/400" alt="logo" />
</div>
<div class="card-header">Card Header</div>
<div class="divider"></div>
<div class="card-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi suscipit harum repellat architecto unde vel numquam rem
doloribus maiores deserunt tenetur labore, aut, adipisci sit, sequi nihil voluptas commodi? Velit?
</div>
<div class="divider"></div>
<div class="card-footer">Card Footer</div>
</div>
<div class="card airforce light-1 shadow-1">
<div class="card-image">
<img src="https://picsum.photos/600/400" alt="logo" />
</div>
<div class="card-header">Card Header</div>
<div class="divider"></div>
<div class="card-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi suscipit harum repellat architecto unde vel numquam rem
doloribus maiores deserunt tenetur labore, aut, adipisci sit, sequi nihil voluptas commodi? Velit?
</div>
<div class="divider"></div>
<div class="card-footer">Card Footer</div>
</div>
</div>
<div class="container card shadow-1 fx-row">
<div class="primary d-flex vcenter fx-center px-4">
<h4>Content</h4>
</div>
<div class="flex fx-col fx-grow">
<div class="card-header">Header</div>
<div class="card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="container responsive-table">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Paul</td>
<td>24</td>
<td>Paris</td>
<td>France</td>
<td>Mustang</td>
</tr>
<tr>
<td>2</td>
<td>Patrick</td>
<td>34</td>
<td>Nice</td>
<td>France</td>
<td>Renault</td>
</tr>
<tr>
<td>3</td>
<td>Robert</td>
<td>62</td>
<td>Limoges</td>
<td>France</td>
<td>Ferrari</td>
</tr>
</tbody>
</table>
</div>
<div class="container tab shadow-1 mt-4" id="example-tab" data-ax="tab">
<!-- Here is the tab-arrow div -->
<div class="tab-arrow">
<!-- Here is the prev arrow -->
<div class="tab-prev shadow-1 white">
<a href=""><i class="fas fa-chevron-left"></i></a>
</div>
<ul class="tab-menu">
<li class="tab-link">
<a href="#tab1">Tab 1</a>
</li>
<li class="tab-link">
<a href="#tab2">Tab 2</a>
</li>
<li class="tab-link">
<a href="#tab3">Tab 3</a>
</li>
<li class="tab-link">
<a href="#tab4">Tab 4</a>
</li>
<li class="tab-link">
<a href="#tab5">Tab 5</a>
</li>
<li class="tab-link">
<a href="#tab6">Tab 6</a>
</li>
<li class="tab-link">
<a href="#tab7">Tab 7</a>
</li>
</ul>
<!-- Here is the next arrow -->
<div class="tab-next shadow-1 white">
<a href=""><i class="fas fa-chevron-right"></i></a>
</div>
</div>
<div id="tab1" class="p-3">Content 1</div>
<div id="tab2" class="p-3">Content 2</div>
<div id="tab3" class="p-3">Content 3</div>
<div id="tab4" class="p-3">Content 4</div>
<div id="tab5" class="p-3">Content 5</div>
<div id="tab6" class="p-3">Content 6</div>
<div id="tab7" class="p-3">Content 7</div>
</div>
</main>
<footer class="footer primary">
Copyright © 2020 - Example
</footer>
</body>
</html>