3 X 3 Homepage Grid

This article shows you how to recreate the 3 x 3 homepage grid system offered by Bizness Apps

David Hall
Written by David HallLast update 1 year ago

Watch the below video to see how to create the BizApps 3 X 3 Grid Homepage system using our content tab as your homepage.

The code to copy as shown in the video is below










<div class="ai_custom_html">
<div class="ai_custom_html"><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My App Home Screen</title>
</div>
</div>
<style><!--
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#button-table {
margin: 0 auto;
max-width: 900px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-collapse: collapse;
border: none;
}
#button-table td {
width: 33.33%;
height: auto;
padding: 0;
border: none;
}
#button-table img {
display: block;
max-width: 100%;
height: auto;
}
#button-table span {
display: block;
font-size: 12px;
margin-top: 5px;
}
--></style>
<div class="ai_custom_html">
<table id="button-table">
<tbody>
<tr>
<td><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"></a><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/116812084743754.png" /></a>Book</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/216812084743859.png" /></a>Register</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/316812084743786.png" /></a>Gallery</span></td>
</tr>
<tr>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/416812084750442.png" /></a>Email Us</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/516812084750477.png" /></a>Our Work</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/616812084750442.png" /></a>Upload Image</span></td>
</tr>
<tr>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/716812084755867.png" /></a>Message Us</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/816812084756145.png" /></a>Stream</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/916812084756351.png" /></a>Direction</span></td>
</tr>
</tbody>
</table>
</div>

Did this answer your question?