Skip to content

Instantly share code, notes, and snippets.

@jinan-kordab

jinan-kordab/PhaseOnePhi.html

Created November 5, 2018 01:49
Show Gist options
  • Save jinan-kordab/de45767850d964151372b3e8d6ea756b to your computer and use it in GitHub Desktop.
Save jinan-kordab/de45767850d964151372b3e8d6ea756b to your computer and use it in GitHub Desktop.
Download ZIP
Fibonacci Sequence Responsive Web Template - Phase One
Raw
PhaseOnePhi.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-ca">
<script src="jquery-3.3.1.min.js"></script>
<meta charset="utf-8" />
<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:1px solid grey;
cell-padding:0px;
cell-spacing:0px;
border-collapse:collapse
}
td{
border:1px solid grey
}
</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" >
<p align="center"><font style="font-size:27px"><b>(3)</b></font></td>
</tr>
<tr>
<td id="col32">
<p align="center"><font style="font-size:27px"><b>(2)</b></font></td>
<td>
<table width="100%" >
<tr>
<td id="col31">
<p align="center"><font style="font-size:27px"><b>(1)</b></font></td>
</tr>
<tr>
<td id="col311">
<p align="center"><font style="font-size:27px"><b>(1)</b></font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td id="col5">
<p align="center"><font style="font-size:27px"><b>(5)</b></font></td>
</tr>
<tr>
<td colspan="2" id="col8">
<p align="center"><font style="font-size:27px"><b>(8)</b></font></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment