<!DOCTYPE html>
<html lang="en">
<head>
<title>China Bimagic Square of Order 17</title>
<meta name="keywords" content="bimagic square order 17, china,
h. yuanli, w. sutian, c. qinwu c. mutian" />
<meta name="description" content="china bimagic square of order 17,
by h. yuanli, w. sutian, c.
qinwu c. mutian" />
<meta name="robots" content="noindex" />
<meta http-equiv="author" content="mikael hermansson" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="UTF-8" />
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bj.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
display: autoflex;
justify-content: center;
align-items: center;
float: center;
width: 100%;
min-height: 100vh;
overflow: hidden;
margin: 0;
}
<!-- /* coding dna script with micke */ -->
.material {
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transform: rotateZ(90deg);
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateX(360deg);
}
}
.dna {/*line*/
position: relative;
width: 1px;
height: 112px;
border: 1px dotted white;
box-shadow: 0 0 15px white;
background: transparent;
margin: 0px 10px;
animation: rotate 3s linear infinite;
}
.dna::before {/*top dot*/
content: "";
position: absolute;
top: -2px;
left: -5px;
width: 10px;
height: 10px;
background: yellow;
border-radius: 50%;
box-shadow: 0 0 15px yellow;
}
.dna::after {/*bottom dot*/
content: '';
position: absolute;
bottom: -2px;
left: -5px;
width: 10px;
height: 10px;
background: deepskyblue;
border-radius: 50%;
box-shadow: 0 0 12px deepskyblue;
}
.dna:nth-child(1) {
animation-delay: 0.15s;
}
.dna:nth-child(2) {
animation-delay: 0.3s;
}
.dna:nth-child(3) {
animation-delay: 0.45s;
}
.dna:nth-child(4) {
animation-delay: 0.6s;
}
.dna:nth-child(5) {
animation-delay: 0.75s;
}
.dna:nth-child(6) {
animation-delay: 0.9s;
}
.dna:nth-child(7) {
animation-delay: 1.05s;
}
.dna:nth-child(8) {
animation-delay: 1.2s;
}
.dna:nth-child(9) {
animation-delay: 1.35s;
}
.dna:nth-child(10) {
animation-delay: 1.5s;
}
.dna:nth-child(11) {
animation-delay: 1.65s;
}
.dna:nth-child(12) {
animation-delay: 1.8s;
}
.dna:nth-child(13) {
animation-delay: 1.95s;
}
.dna:nth-child(14) {
animation-delay: 2.1s;
}
.dna:nth-child(15) {
animation-delay: 2.25s;
}
.dna:nth-child(16) {
animation-delay: 2.4s;
}
.dna:nth-child(17) {
animation-delay: 2.55s;
}
.dna:nth-child(18) {
animation-delay: 2.7s;
}
.dna:nth-child(19) {
animation-delay: 2.85s;
}
.dna:nth-child(20) {
animation-delay: 3.0s;
}
.dna:nth-child(21) {
animation-delay: 3.15s;
}
.dna:nth-child(22) {
animation-delay: 3.3s;
}
.dna:nth-child(23) {
animation-delay: 3.45s;
}
.dna:nth-child(24) {
animation-delay: 3.6s;
}
.dna:nth-child(25) {
animation-delay: 3.75s;
}
.dna:nth-child(26) {
animation-delay: 3.9s;
}
.dna:nth-child(27) {
animation-delay: 4.05s;
}
.dna:nth-child(28) {
animation-delay: 4.2s;
}
<!-- /* coding dna script with micke */ -->
/* coding menu-bar in header with micke */
.menu{
background-color: rgba(0, 0, 0, 0.0);
width: 100%;
height: 100px;
text-align: center;
}
.leftmenu {
width: 25%;
float: left;
margin-top: 3%;
}
.rightmenu {
width: 55%;
float: right;
margin-top: 2%;
}
.leftmenu h4{
font-family: 'montserrat', sans-serif;
padding-left: 70px;
font-weight: bold;
color: greenyellow;
font-size: 22px;
}
.menu-bar ul{
display: inline-flex;
list-style: none;
}
.menu-bar ul li{
width: 100px;
margin: 5px;
padding: 5px;
font-size: 16px;
}
.menu-bar ul li a{
font-family: 'montserrat', sans-serif;
color: white;
text-decoration: none;
}
.menu-bar ul li :hover{
color: red;
border-radius: 0px;
}
.menu-bar .fa{
margin-right: 0px;
margin-top: 0px;
}
.sub-menu-1{
display: none;
}
.menu-bar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: rgba(0,0,0,0.25);
margin-top: 1px;
margin-left: 0px;
}
.menu-bar ul li:hover .sub-menu-1 ul{
display: block;
margin-top: 5px;
}
.menu-bar ul li:hover .sub-menu-1 ul li{
width: 140px;
height: 30px;
padding: 8px;
border-bottom: 1px dotted #fff;
background: transparent;
border-radius: 0;
text-align: left;
margin-top: 0px;
}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none
margin-right: 0px;
margin-top: 2px;
}
.menu-bar ul li:hover .sub-menu-1 ul li a:hover{
color: red;
}
.fa-angle-right{
float: right;
}
.sub-menu-2{
display: none;
}
.hover-me:hover .sub-menu-2{
position: absolute;
display: block;
margin-top: -13px;
margin-left: 132px;
background-color: rgba(0,0,0,0.25);
}
/* coding menu-bar in header with micke */
/* coding menu dropdown with micke */
/* Dropdown Content (Hidden by
Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);
padding: 5px 10px;
text-align: left;
font-size: 14px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 10px 5px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on
hover */
.dropdown-content a:hover {background-color: #eee}
.dropdown-content a:hover {color: red}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the
dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: greenyellow;
color: black;
font-weight: none;
}
/* coding menu dropdown with micke */
/* coding layout with micke */
body {
display: grid;
grid-template-areas:
"header header
header"
"nav article ads"
"footer footer
footer";
grid-template-rows: 5% 1fr 5%;
grid-template-columns: 25% 1fr 25%;
grid-gap: 0px; /* --pixel will give space between layout section-- */
height: 100vh;
margin: 0;
}
/* Stack the layout on small
devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 70px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
header, div {
background: none;
font-size: 17px;
font-family: 'montserrat', sans-serif;
color: white;
padding: 15px 0px;
text-align: center;
}
article, div {
padding: 0px 0px;
background: none;
font-size: 16px;
font-family: 'montserrat', sans-serif;
color: white;
text-align: center;
margin-top: -3%;
}
nav, div {
padding: 0px 0px;
background: none;
font-size: 16px;
color: white;
text-align: center;
margin-top: -4%;
}
ads, div {
padding: 0px 0px;
background: none;
font-size: 12px;
color: white;
text-align: center;
margin-top: 0px;
}
footer div {
padding: 0px 0px;
background: none;
font-size: 15px;
margin-top: 0px;
}
/* coding layout with micke */
/* coding gallery and text section
with micke */
.firstsection{
background-color: none;
height: 0%;
margin-top: 0%;
}
.firsthalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.secondsection{
background-color: none;
height: 0%;
margin-top: 5px;
}
.secondhalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.thirdsection{
background-color: none;
height: 0%;
margin-top: 0%;
}
.thirdhalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: right;
font-weight: none;
text-transform: none;
text-align: right;
}
.fourthsection{
background-color: none;
height: 0%;
margin-top: 0%;
}
.fourthhalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: right;
font-weight: none;
text-transform: none;
text-align: right;
}
.fifthsection{
background-color: none;
height: 0%;
margin-top: 0%;
}
.fifthhalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: right;
font-weight: none;
text-transform: none;
text-align: center;
}
.sixthsection{
background-color: none;
height: 0%;
margin-top: 0px;
}
.sixthhalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
font-weight: none;
text-transform: none;
}
.box-main{
display: flex;
justify-content: center;
align-items: center;
color: black;
font-size: 16px;
max-width: auto;
margin: auto;
height: 100%;
margin-top: 0%;
}
/* coding gallery and text section
with micke */
<!-- /* coding button with micke */ -->
.btn_1 {
background-color: rgba(255,255,255, 0.25);
color: white;
font-family: 'montserrat', sans-serif;
border: none;
font-size: 15px;
font-weight: none; /* font-weight: bold; -> big character, coding with micke */
text-transform: none; /* text-transform: uppercase; -> big character, coding
with micke */
line-height: 15px;
width: auto;
margin-top: 20px;
margin-bottom: 2px;
border: 3px solid white;
cursor: pointer;
padding: 3px 3px;
border-style: outset;
}
.btn_1:hover{
background-color: white;
color: blue;
font-weight: bold;
text-transform: uppercase;
}
.btn_2 {
background-color: lightgoldenrodyellow;
color: white;
font-family: 'montserrat', sans-serif ;
position: autofixed;
font-size: 0px;
font-weight: none;
text-transform: none;
line-height: 5px;
height: 30px;
width: auto;
margin-top: 4px;
border: 3px solid lightpink;
cursor: pointer;
padding: 3px 4px;
border-style: outset;
}
.btn_2:hover{
background-color: lightgoldenrodyellow;
color: none;
border: 3px inset lightgrey;
}
p.button_1 {
background-color: lightgoldenrodyellow;
color: blue;
text-align: center;
text-decoration: none;
font-weight: none;
text-transform: none;
display: inline-block;
font-size: 15px;
margin-top: 3%;
padding: 2px 5px;
border-style: inset;
}
p.button_1:hover {
background-color: purple;
color: white;
}
.button_2 {
background-color: lightgoldenrodyellow;
font-family: 'montserrat', sans-serif ;
border: 1px solid white;
color: blue;
padding: 5px 0px;
text-align: center;
text-decoration: none;
display: inline-table;
line-height: 0px;
width: 145px;
font-weight: none;
font-size: 14px;
margin: 0px 0px;
cursor: pointer;
margin-top: 2%;
justify-content: center;
align-items: center;
border-style: none;
}
.button_2:hover{
background-color: lightgoldenrodyellow;
color: red;
}
<!-- /* coding button with micke */ -->
/* coding text with micke */
.text{
width: 100%;
margin-top: 0%;
text-transform: uppercase;
color: lightcyan;
}
.text h1{
font-family: 'montserrat', sans-serif;
font-weight: 700px;
font-size: 32px;
margin-top: 2%;
text-align: center;
}
.text h2{
font-size: 18px;
font-family: 'montserrat', sans-serif;
font-weight: 500px;
text-align: left;
}
.text h3{
font-size: 13px;
font-family: 'open sans', sans-serif;
text-align: center;
}
.text h4{
font-size: 13px;
font-family: 'Helvetica';
text-align: center;
margin-top: 0%;
}
.text h5{
font-size: 13px;
font-family: 'open sans', sans-serif;
font-weight: none;
text-transform: none;
margin-top: 2px;
}
p{
text-align: center;
}
/* coding text with micke */
/* coding menu bar JS with micke+
*/
.dropbtn {
background-color: blueviolet;
color: white;
padding: 6px 10px;
font-size: 15px;
cursor: pointer;
text-align: center;
border: 2px solid white;
border-style: outset;
margin-top: 0%;
}
.dropbtn:hover, .dropbtn:focus {
background-color: yellowgreen;
color: black;
padding: 6px 10px;
border: 2px solid white;
border-style: inset;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 149px;
font-size: 14px;
overflow: auto;
text-align: left;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
z-index: 1;
}
.dropdown-content a {
color: blue;
padding: 5px 5px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
color: red;
}
.show {display: block;}
/* coding menu bar JS with micke+ */
/* coding table with micke */
table.one {
border-spacing: 1px 1px;
position: center;
}
td {
background-color: none;
padding: 2px 2px;
border: 1px solid white;
}
th_1 {
font-family: 'montserrat', sans-serif;
border: 1px solid none; /* --color will give
border line on table section - here none color-- */
padding: 10px;
font-size: 16px;
text-align: center;
}
table.two {
border-collapse: collapse;
width: auto;
margin-top: 0%; /* coding the top margin
of center column article div */
}
th, td_2 {
font-family: 'montserrat', sans-serif;
border: 1px solid none; /* --color will give
border line on table section - here none color-- */
padding: 0px;
height: auto;
width: auto;
font-size: 0px;
text-decoration: none;
text-align: center;
}
/* coding table with micke */
<!-- /* coding photocollection with micke - in
the body desplay above it needs grid */ -->
.gallery {
--s: 150px; /* control the size */
--g: 5px; /*
control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
height: calc(2*var(--s) + 1*var(--g));
aspect-ratio: 1;
grid-template-columns: repeat(2,auto);
margin-bottom: 5px;
}
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: .35s linear;
}
.gallery img:hover{
filter: grayscale(0);
width: calc(var(--s)*var(--f));
height: calc(var(--s)*var(--f));
}
<!-- /* coding photocollection with micke - in
the body desplay above it needs grid */ -->
/* coding gallery with micke */
div.gallery_1 {
margin: 9px 3px;
border: 1px solid none;
float: left;
height: 0%;
width: auto;
}
div.gallery_1:hover {
border: 1px solid none;
padding: 0px 0px;
width: auto;
}
div.desc_1 {
padding: 3px 2px;
font-size: 12px;
color: white;
text-align: center;
}
/* coding gallery with micke */
/* coding footer with micke */
:root {
box-sizing: border-box;
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body {
height: 100vh;
overflow: hidden;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: none;
color: greenyellow;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0;
gap: 0.2rem;
}
/* coding footer with micke */
/* coding JS footer with micke */
let year = document.querySelector("#year");
$(document).ready(function () {
year.innerText = new Date().getFullYear();
});
/* coding JS footer with micke */
</style>
<body>
<!-- /* ---------New Layout Section1---------- */ -->
<header id="pageHeader">
<div class="menu-bar">
<div class="menu">
<div class="leftmenu">
<section class="fourthsection">
<div class="box-main">
<div class="fourthHalf">
<table class="two">
<tr>
<td_2>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Chinasquare index</button>
<div id="myDropdown" class="dropdown-content">
<a style="color:purple;" href="bimagicsquare_n17.html">Bimagic Square 17</a>
<a href="bimagicsquare_n19.html">Bimagic Square 19</a>
<a href="bimagicsquare_n21.html">Bimagic Square 21</a>
<a href="bimagicsquare_n23.html">Bimagic Square 23</a>
<a href="bimagicsquare_n26.html">Bimagic Square 26</a>
<a href="bimagicsquare_n28.html">Bimagic Square 28</a>
<a href="bimagicsquare_n29.html">Bimagic Square 29</a>
<a href="bimagicsquare_n31.html">Bimagic Square 31</a>
</div>
</div>
</td_2>
</tr>
</table>
</div>
</div>
</section>
</div>
<div class="rightmenu">
<ul>
<li id="firstlist"> <a href="../../index.html"><i class="fa fa-home">Home</i></a> </li>
<li> <a href="../../Formula/formula.html"><i class="fa fa-formula">Formula</i></a> </li>
<li> <a style="color:aqua;" href="../database.html"><i class="fa fa-data">Database</i></a>
<div class="sub-menu-1">
<ul>
<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Fredrik Jansson</i></a>
<div class="sub-menu-2">
<ul>
<li><a href="../FJansson/bimagicsquare_n10.html"><i>Bimagic Sq. n10</i></a></li>
<li><a href="../FJansson/bimagicsquare_n11.html"><i>Bimagic Sq. n11</i></a></li>
</ul>
</div>
</li>
<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Jacques Guéron</i></a>
<div class="sub-menu-2">
<ul>
<li><a href="../JGueron/bimagicsquare_n13.html"><i>Bimagic Sq. n13</i></a></li>
<li><a href="../JGueron/bimagicsquare_n14.html"><i>Bimagic Sq. n14</i></a></li>
<li><a href="../JGueron/bimagicsquare_n17.html"><i>Bimagic Sq. n17</i></a></li>
<li><a href="../JGueron/bimagicsquare_n18.html"><i>Bimagic Sq. n18</i></a></li>
<li><a href="../JGueron/bimagicsquare_n19.html"><i>Bimagic Sq. n19</i></a></li>
<li><a href="../JGueron/bimagicsquare_n21.html"><i>Bimagic Sq. n21</i></a></li>
<li><a href="../JGueron/bimagicsquare_n22.html"><i>Bimagic Sq. n22</i></a></li>
<li><a href="../JGueron/bimagicsquare_n23.html"><i>Bimagic Sq. n23</i></a></li>
</ul>
</div>
</li>
<li class="hover-me"><a href="#"><i class="fa fa-angle-right">M. Hermansson</i></a>
<div class="sub-menu-2">
<ul>
<li><a href="../MHermansson/bimagicsquare_n16a1.html"><i>Bimagic n16 A1</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16a2.html"><i>Bimagic n16 A2</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16a3.html"><i>Bimagic n16 A3</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16b1.html"><i>Bimagic n16 B1</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16b2.html"><i>Bimagic n16 B2</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16b3.html"><i>Bimagic n16 B3</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16c1.html"><i>Bimagic n16 C1</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16c2.html"><i>Bimagic n16 C2</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16d1.html"><i>Bimagic n16 D1</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n16d2.html"><i>Bimagic n16 D2</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n25a.html"><i>Bimagic n25 A</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n25b.html"><i>Bimagic n25 B</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n25c.html"><i>Bimagic n25 C</i></a></li>
<li><a href="../MHermansson/bimagicsquare_n26.html"><i>Bimagic Sq. n26</i></a></li>
</ul>
</div>
</li>
<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Square of China</i></a>
<div class="sub-menu-2">
<ul>
<li><a href="bimagicsquare_n17.html"><i>Bimagic Sq. n17</i></a></li>
<li><a href="bimagicsquare_n19.html"><i>Bimagic Sq. n19</i></a></li>
<li><a href="bimagicsquare_n21.html"><i>Bimagic Sq. n21</i></a></li>
<li><a href="bimagicsquare_n23.html"><i>Bimagic Sq. n23</i></a></li>
<li><a href="bimagicsquare_n26.html"><i>Bimagic Sq. n26</i></a></li>
<li><a href="bimagicsquare_n28.html"><i>Bimagic Sq. n28</i></a></li>
<li><a href="bimagicsquare_n29.html"><i>Bimagic Sq. n29</i></a></li>
<li><a href="bimagicsquare_n31.html"><i>Bimagic Sq. n31</i></a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li> <a href="../../Trimagic/trimagic.html"><i class="fa fa-square">Trimagic</i></a> </li>
<li> <a href="../../History/history.html"><i class="fa fa-images">History</i></a> </li>
<li> <a href="../../Links/links.html"><i class="fa fa-links">Links</i></a> </li>
<li> <a href="../../Contact/contact.html"><i class="fa fa-mail">Contact</i></a> </li>
</ul>
</div>
</div></div>
</header>
<!-- /* ---------New Layout Section1---------- */ -->
<!-- /* ---------New Layout Section2---------- */ -->
<article id="mainArticle">
<section class="firstsection">
<div class="box-main">
<div class="firstHalf">
<div class="text">
<table class="two">
<tr>
<td_2>
<h4 style="color:lightgoldenrodyellow">DESIGN * DEVELOPMENT *
HIGHTECH</h4>
</td_2>
</tr>
<tr>
<td_2>
<h1>Bimagic Square of Order 17</h1>
</td_2>
</tr>
<tr>
<td_2>
<h3><p class="button_1"> Squaremagie
of China </p></h3>
</td_2>
</tr>
</table>
</div>
</div>
</div>
</section>
<section class="secondsection">
<div class="box-main">
<div class="secondHalf">
<table class="two">
<tr><th><td_2>
<button class="btn_1">
<table class="one">
<tr>
<td>011</td>
<td>130</td>
<td>286</td>
<td>079</td>
<td>062</td>
<td>177</td>
<td>137</td>
<td>096</td>
<td>162</td>
<td>024</td>
<td>259</td>
<td>219</td>
<td>240</td>
<td>197</td>
<td>041</td>
<td>236</td>
<td>109</td>
</tr>
<tr>
<td>258</td>
<td>133</td>
<td>082</td>
<td>065</td>
<td>214</td>
<td>245</td>
<td>147</td>
<td>287</td>
<td>089</td>
<td>235</td>
<td>106</td>
<td>021</td>
<td>038</td>
<td>014</td>
<td>175</td>
<td>190</td>
<td>166</td>
</tr>
<tr>
<td>213</td>
<td>180</td>
<td>007</td>
<td>196</td>
<td>231</td>
<td>265</td>
<td>280</td>
<td>151</td>
<td>243</td>
<td>046</td>
<td>114</td>
<td>056</td>
<td>161</td>
<td>099</td>
<td>127</td>
<td>026</td>
<td>070</td>
</tr>
<tr>
<td>017</td>
<td>289</td>
<td>085</td>
<td>168</td>
<td>103</td>
<td>086</td>
<td>018</td>
<td>035</td>
<td>136</td>
<td>189</td>
<td>218</td>
<td>256</td>
<td>239</td>
<td>068</td>
<td>150</td>
<td>237</td>
<td>171</td>
</tr>
<tr>
<td>088</td>
<td>105</td>
<td>037</td>
<td>066</td>
<td>134</td>
<td>083</td>
<td>015</td>
<td>148</td>
<td>020</td>
<td>167</td>
<td>215</td>
<td>232</td>
<td>288</td>
<td>241</td>
<td>192</td>
<td>261</td>
<td>173</td>
</tr>
<tr>
<td>104</td>
<td>285</td>
<td>238</td>
<td>221</td>
<td>257</td>
<td>188</td>
<td>149</td>
<td>172</td>
<td>019</td>
<td>087</td>
<td>084</td>
<td>242</td>
<td>036</td>
<td>016</td>
<td>135</td>
<td>067</td>
<td>165</td>
</tr>
<tr>
<td>282</td>
<td>217</td>
<td>107</td>
<td>039</td>
<td>090</td>
<td>064</td>
<td>131</td>
<td>022</td>
<td>263</td>
<td>230</td>
<td>013</td>
<td>195</td>
<td>174</td>
<td>247</td>
<td>146</td>
<td>164</td>
<td>081</td>
</tr>
<tr>
<td>138</td>
<td>091</td>
<td>248</td>
<td>216</td>
<td>260</td>
<td>229</td>
<td>178</td>
<td>284</td>
<td>170</td>
<td>193</td>
<td>012</td>
<td>063</td>
<td>108</td>
<td>080</td>
<td>023</td>
<td>132</td>
<td>040</td>
</tr>
<tr>
<td>009</td>
<td>028</td>
<td>044</td>
<td>057</td>
<td>078</td>
<td>092</td>
<td>111</td>
<td>121</td>
<td>145</td>
<td>169</td>
<td>179</td>
<td>198</td>
<td>212</td>
<td>233</td>
<td>246</td>
<td>262</td>
<td>281</td>
</tr>
<tr>
<td>250</td>
<td>158</td>
<td>267</td>
<td>210</td>
<td>182</td>
<td>227</td>
<td>278</td>
<td>097</td>
<td>120</td>
<td>006</td>
<td>112</td>
<td>061</td>
<td>030</td>
<td>074</td>
<td>042</td>
<td>199</td>
<td>152</td>
</tr>
<tr>
<td>209</td>
<td>126</td>
<td>144</td>
<td>043</td>
<td>116</td>
<td>095</td>
<td>277</td>
<td>060</td>
<td>027</td>
<td>268</td>
<td>159</td>
<td>226</td>
<td>200</td>
<td>251</td>
<td>183</td>
<td>073</td>
<td>008</td>
</tr>
<tr>
<td>125</td>
<td>223</td>
<td>155</td>
<td>274</td>
<td>254</td>
<td>048</td>
<td>206</td>
<td>203</td>
<td>271</td>
<td>118</td>
<td>141</td>
<td>102</td>
<td>033</td>
<td>069</td>
<td>052</td>
<td>005</td>
<td>186</td>
</tr>
<tr>
<td>117</td>
<td>029</td>
<td>098</td>
<td>049</td>
<td>002</td>
<td>058</td>
<td>075</td>
<td>123</td>
<td>270</td>
<td>142</td>
<td>275</td>
<td>207</td>
<td>156</td>
<td>224</td>
<td>253</td>
<td>185</td>
<td>202</td>
</tr>
<tr>
<td>119</td>
<td>053</td>
<td>140</td>
<td>222</td>
<td>051</td>
<td>034</td>
<td>072</td>
<td>101</td>
<td>154</td>
<td>255</td>
<td>272</td>
<td>204</td>
<td>187</td>
<td>122</td>
<td>205</td>
<td>001</td>
<td>273</td>
</tr>
<tr>
<td>220</td>
<td>264</td>
<td>163</td>
<td>191</td>
<td>129</td>
<td>234</td>
<td>176</td>
<td>244</td>
<td>047</td>
<td>139</td>
<td>010</td>
<td>025</td>
<td>059</td>
<td>094</td>
<td>283</td>
<td>110</td>
<td>077</td>
</tr>
<tr>
<td>124</td>
<td>100</td>
<td>115</td>
<td>276</td>
<td>252</td>
<td>269</td>
<td>184</td>
<td>055</td>
<td>201</td>
<td>003</td>
<td>143</td>
<td>045</td>
<td>076</td>
<td>225</td>
<td>208</td>
<td>157</td>
<td>032</td>
</tr>
<tr>
<td>181</td>
<td>054</td>
<td>249</td>
<td>093</td>
<td>050</td>
<td>071</td>
<td>031</td>
<td>266</td>
<td>128</td>
<td>194</td>
<td>153</td>
<td>113</td>
<td>228</td>
<td>211</td>
<td>004</td>
<td>160</td>
<td>279</td>
</tr>
</table></button>
</td_2></th></tr>
</table>
</div>
</div>
</section>
<h5> Bimagic
Square of Order 17. By H. Yuanli, W. Sutian, C. Qinwu and C. Mutian. </h5>
<section class="thirdsection">
<div class="box-main">
<div class="thirdHalf">
<table class="two">
<tr>
<td_2>
<div class="gallery_1">
<abbr title="Download Bimagic ChinaSquare of Order
17-31, put together by Mikael Hermansson 2024-25, xlsx-file."><button class="btn_2">
<a href="../../Squarespace_3/Chinasquare_2024.xlsx" class="button_2" target="_blank" download>Chinasquare 2024-25</a>
</button></abbr>
<div class="desc_1">Bimagic Square Order 17-31</div>
</div>
</td_2>
</tr>
</table>
</div>
</div>
</section>
</article>
<!-- /* ---------New Layout Section2---------- */ -->
<!-- /* ---------New Layout Section3---------- */ -->
<nav id="mainNav">
<table class="one">
<tr>
<th_1>Quantum Computing Squaremagie</th_1>
</tr>
</table>
<section class="fifthsection">
<div class="box-main">
<div class="fifthHalf">
<div class="text">
<table class="two">
<tr><th><td_2>
<div class="gallery"><!-- /* coding photocollection with micke - img 300px x 300px */
-->
<img src="../../images/Intel_quantum-qubit_chip2.jpg" alt="Intel
quantum computing">
<img src="../../images/Intel_quantum-qubit_chip4.jpg" alt="Intel
quantum computing">
<img src="../../images/Intel_quantum-qubit_chip6.jpg" alt="Intel
quantum computing">
<img src="../../images/Intel_quantum-qubit_chip8.jpg" alt="Intel
quantum computing">
</div><!-- /* coding photocollection with micke - - img 300px x 300px */
-->
<div class="gallery"><!-- /* coding photocollection with micke - img 300px x 300px */
-->
<img src="../../images/JAS-Gripen_39E.jpg" alt="Jas Gripen
39E">
<img src="../../images/JAS-Gripen_39E2.jpg" alt="Jas Gripen
39E">
<img src="../../images/semi1.jpg" alt="Nikon
semiconductor">
<img src="../../images/Intel_quantum_17-qubit-2.jpg" alt="Intel quantum
computing">
</div><!-- /* coding photocollection with micke - - img 300px x 300px */
-->
</td_2></th></tr>
</table>
</div>
</div>
</div>
</section>
</nav>
<!-- /* ---------New Layout Section3---------- */ -->
<!-- /* ---------New Layout Section4---------- */ -->
<div id="siteAds">
<table class="one">
<tr>
<th_1>dna Animation</th_1>
</tr>
</table>
<section class="sixthsection">
<div class="box-main">
<div class="sixthHalf">
<table class="two">
<tr><th><td_2>
<div class="material">
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
</div>
</td_2></th></tr>
</table>
</div>
</div>
</section>
</div>
<!-- /* ---------New Layout Section4---------- */ -->
<script>
/* When the user clicks on the button,
toggle between hiding and showing the
dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user
clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<!-- /* ---------New Layout Section5---------- */ -->
<footer id="pageFooter">
<div class="footer">©<span id="year">2025</span><span> Squaremagie
Space. All rights reserved.</span></div>
</footer>
<!-- /* ---------New Layout Section5---------- */ -->
</body>
</html>