Skip to content

Instantly share code, notes, and snippets.

@jinan-kordab

jinan-kordab/Phi-Phase-2.html

Created November 5, 2018 01:52
Show Gist options
  • Save jinan-kordab/06c7165fed314c405164b7291cd63edd to your computer and use it in GitHub Desktop.
Save jinan-kordab/06c7165fed314c405164b7291cd63edd to your computer and use it in GitHub Desktop.
Download ZIP
Fibonacci Sequence Responsive Web Template
Raw
Phi-Phase-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var GRWidth = computeGoldenRatio($(window).width());
var GRHeight = computeGoldenRatio($(window).height());
$("#tblMain").height($(window).height() + "px");
$("#tblMain").width($(window).width() + "px");
$("#col3").width(GRWidth.left + "px");
$("#col5").width(GRWidth.right + "px");
$("#col3").height(GRHeight.left + "px");
var GRcol3332H = computeGoldenRatio(GRHeight.left);
$("#col33").height(GRcol3332H.right + "px");
$("#col32").height(GRcol3332H.left + "px");
$("#col31").height((GRcol3332H.left/2) + "px");
$("#col311").height((GRcol3332H.left/2) + "px");
});
function computeGoldenRatio(widthOrHeight) {
if (!widthOrHeight) {
return {};
}
return {
width: widthOrHeight,
right: Math.round(widthOrHeight/ 1.61803),
total: Math.round(widthOrHeight* 1.61803),
left: widthOrHeight- Math.round(widthOrHeight/ 1.61803)
};
}
</script>
<style type="text/css">
table
{
table-layout:fixed;
border:0px solid grey;
cell-padding:0px;
cell-spacing:0px;
border-collapse:collapse
}
td{
border:0px solid grey;
white-space: nowrap;
overflow:hidden
}
</style>
</head>
<body style="width:100%">
<table width="100%" id="tblMain" bgcolor="#FFFFFF">
<tr>
<td id="col3">
<table border="1" width="100%">
<tr>
<td colspan="2" id="col33" style="overflow-y: scroll;text-overflow: ellipsis;white-space: nowrap;position:relative;vertical-align:top">
<div class="container" style="position:absolute">
<div class="list-group" style="max-width: 100%;">
<a href="#!" class="list-group-item list-group-item-action">
Lorem ipsum dolor sit amet, mollis diceret est in.</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-primary">
Ut sea periculis argumentum suscipiantur.</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-secondary">
Mei persequeris reprehendunt in, an qui malorum contentiones</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-success">
Pri hinc tamquam maiestatis te</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-danger">
Percipit legendos argumentum ut eam</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-warning">
Mutat commodo pro ad</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-info">
Ea nihil mollis definitionem sea</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-light">
Ius saepe dicunt ne, movet dicunt tamquam ei pri</a>
<a href="#!" class="list-group-item list-group-item-action list-group-item-dark">
Ex diceret placerat adipisci nec, sumo audiam platonem vix
id</a> </div>
</div>
</td>
</tr>
<tr>
<td id="col32">
<img src="phi-logo-2.png" style="width:100%;height:100%"></td>
<td>
<table width="100%">
<tr>
<td id="col31">
<button type="button" class="btn btn-info" style="width:100%;height:100%">
Sign In</button></td>
</tr>
<tr>
<td id="col311">
<button type="button" class="btn btn-info" style="width:100%;height:100%">
Sign Up</button></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td id="col5" style="overflow-y: scroll;text-overflow: ellipsis;white-space: nowrap;position:relative;vertical-align:top">
<div class="container" style="position:absolute">
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Te adipisci salutatus duo</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary float-right">Go somewhere</a>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 100%;">
<div class="card-header">
Lorem ipsum</div>
<div class="card-body text-secondary">
<h5 class="card-title">Pro an postea tacimates</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 100%;">
<div class="card-header">
Lorem ipsum</div>
<div class="card-body">
<h5 class="card-title">At dictas commodo vim</h5>
<p class="card-text text-white">Lorem ipsum dolor sit amet,
mollis diceret est in. Ut sea periculis argumentum suscipiantur.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 100%;">
<div class="card-header">
Lorem ipsum</div>
<div class="card-body">
<h5 class="card-title">Suas vituperatoribus sit no</h5>
<p class="card-text text-white">Lorem ipsum dolor sit amet,
mollis diceret est in. Ut sea periculis argumentum suscipiantur.</p>
</div>
</div>
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Assum vivendum tacimates per id</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary float-right">Go somewhere</a>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 100%;">
<div class="card-header">
Lorem ipsum</div>
<div class="card-body">
<h5 class="card-title">Primary Panel title</h5>
<p class="card-text text-white">Lorem ipsum dolor sit amet,
mollis diceret est in. Ut sea periculis argumentum suscipiantur.</p>
</div>
</div>
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">His quem sumo latine cu, vix quod</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary">Go somewhere</a> </div>
</div>
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Mei porro aperiri suavitate te</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary">Go somewhere</a> </div>
</div>
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Mel te volumus placerat philosophia</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary">Go somewhere</a> </div>
</div>
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Ea mei iisque sapientem</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary">Go somewhere</a> </div>
</div>
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Ea posse oblique eos</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary float-right">Go somewhere</a>
</div>
</div>
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Ea sale alienum pri</h5>
<p class="card-text">Lorem ipsum dolor sit amet, mollis diceret
est in. Ut sea periculis argumentum suscipiantur.</p>
<a href="#!" class="btn btn-primary">Go somewhere</a> </div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" id="col8" style="overflow-y: scroll;text-overflow: ellipsis;white-space: nowrap;position:relative;vertical-align:top">
<div class="container" style="position:absolute;max-width:100%">
<div class="card">
<h5 class="card-header h5">Lorem ipsum</h5>
<div class="card-body">
<h5 class="card-title">Data Table</h5>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Middle</th>
<th scope="col">Last</th>
</tr>
</thead>
<tr>
<th scope="row">1</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Fname</td>
<td>Mname</td>
<td>@logo</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Fname</td>
<td>Mname</td>
<td>Lnaem</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">14</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">15</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">16</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">17</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
<tr>
<th scope="row">18</th>
<td>Fname</td>
<td>Mname</td>
<td>Lname</td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment