<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>

External CSS

  1. https://cdn.jsdelivr.net/npm/axentix@1.0.0/dist/css/axentix.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/axentix@1.0.0/dist/js/axentix.min.js