<!DOCTYPE html>
<html lang="en">
<head>
<title>Squaremagie Download 5</title>
<meta name="keywords" content="bimagic and trimagic squares on
word-html document, mikael hermansson" />
<meta name="description" content="bimagic and trimagic squares on
word-html document, mikael hermansson" />
<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/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
display: grid;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
/* coding menu dropdown with micke */
/* Style The Dropdown Button */
.dropbtn {
font-family: 'montserrat', sans-serif;
background-color: blueviolet;
color: white;
padding: 9px 17px;
font-size: 16px;
border: none;
cursor: pointer;
margin-top: 5px;
}
/* The container <div> - needed
to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by
Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 154px;
box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);
padding: 5px 10px;
border: none;
text-align: left;
font-size: 13px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: blue;
padding: 10px 14px;
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;
}
/* 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: 576px) {
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: 18px;
font-family: 'montserrat', sans-serif;
color: white;
padding: 0px 0px;
text-align: center;
margin-top: 3%;
}
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;
text-align: center;
color: greenyellow;
margin-top: -1%;
}
ads, div {
padding: 0px 0px;
background: none;
font-size: 16px;
color: greenyellow;
text-align: center;
margin-top: -1%;
}
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: 1%;
}
.firsthalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.secondsection{
background-color: none;
height: 0%;
margin-top: 3%;
}
.secondhalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.thirdsection{
background-color: none;
height: 0%;
font-weight: none;
text-transform: none;
margin-top: 2%;
}
.thirdhalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: right;
font-weight: none;
text-transform: none;
text-align: right;
}
.box-main{
display: flex;
justify-content: center;
align-items: center;
color: black;
font-size: 16px;
max-width: 80%;
margin: auto;
height: 100%;
margin-top: 0%;
}
/* coding gallery and text section
with micke */
/* coding color script with micke */
.animate-charcter
{
text-transform: uppercase;
background-image: linear-gradient(
225deg,
purple 10%,
blueviolet 30%,
deeppink 70%,
yellow 90%
);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip
3s linear infinite;
display: inline-block;
font-size: 48px;
text-align: center;
}
@keyframes textclip {
to {
background-position: -200% center;
}
}
/* coding color script with micke */
/* coding button with micke */
.btn_1 {
background-color: rgba(255,255,255, 0.0);
color: white;
font-family: 'montserrat', sans-serif ;
border: none;
font-size: 14px;
font-weight: none; /* font-weight: bold; -> big character, coding with micke */
text-transform: none; /* text-transform: uppercase; -> big character, coding
with micke */
line-height: 25px;
padding: 0px 10px;
width: 210px;
margin-top: 0px;
border: 1px solid lightgray;
cursor: pointer;
border-style: solid;
}
.btn_1:hover{
background-color: white;
color: red;
border: 1px solid pink;
}
.btn_2 {
background-color: rgba(255,255,255, 0.0);
color: blue;
font-family: 'montserrat', sans-serif ;
border: none;
font-size: 14px;
font-weight: none; /* font-weight: bold; -> big character, coding with micke */
text-transform: none; /* text-transform: uppercase; -> big character, coding
with micke */
line-height: 25px;
padding: 0px 10px;
width: 210px;
margin-top: 0px;
border: 1px solid lightgray;
cursor: pointer;
border-style: solid;
}
.btn_2:hover{
background-color: white;
color: red;
border: 1px solid pink;
}
p.button {
background-color: none;
color: white;
padding: 1px, 1px;
text-align: center;
text-decoration: none;
margin-top: 12px;
display: inline-block;
font-size: 0px;
position: relative;
border-style: outset;
}
p.button:hover {
background-color: white;
}
/* coding button with micke */
/* coding text with micke */
.text{
width: 100%;
margin-top: 0%;
text-transform: uppercase;
color: white;
}
.text h1{
font-family: 'montserrat', sans-serif;
font-weight: 700px;
font-size: 36px;
margin-top: 0%;
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: 'Helvetica';
text-align: center;
margin-top: 0%;
}
.text h4{
font-size: 14px;
font-family: sans-serif;
font-weight: 500;
text-transform: none;
margin-top: 3%;
}
.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 table with micke */
table.one {
border-collapse: collapse;
width: 100%;
margin-top: 0%;
}
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;
}
td {
font-family: 'montserrat', sans-serif;
border: 1px solid none; /* --color will give
border line on table section - here none color-- */
padding: 5px;
font-size: 17px;
text-align: center;
}
table.alt td {
font-family: 'montserrat', sans-serif;
border: 1px solid none; /* --color will give
border line on table section - here none color-- */
padding: 5px;
font-size: 17px;
text-align: left;
}
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-align: center;
}
/* coding table with micke */
/* coding dropdown in header with micke */
.leftmenu {
width: 25%;
float: left;
margin-top: 1%;
}
.rightmenu {
width: 25%;
float: right;
margin-top: 1%;
}
/* coding dropdown in header with micke */
<!-- /* coding photocollection with micke - in
the body desplay above it needs grid */ -->
.gallery {
--s: 150px; /* control the size */
--g: 8px; /*
control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(3*var(--s) + 2*var(--g));
aspect-ratio: 1;
grid-template-columns: repeat(4,auto);
}
.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 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: gold;
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">Squaremagie Download 5
<div class="leftmenu">
<div class="dropdown">
<button class="dropbtn">Download Space</button>
<div class="dropdown-content">
<a href="driveorder1.html">Download page 1</a>
<a href="driveorder2.html">Download page 2</a>
<a href="driveorder3.html">Download page 3</a>
<a href="driveorder4.html">Download page 4</a>
<a style="color:purple;" href="driveorder5.html">Download page 5</a>
<a href="driveorder6.html">Download page 6</a>
</div></div>
</div>
<div class="rightmenu">
<div class="dropdown">
<button class="dropbtn">Download Space</button>
<div class="dropdown-content">
<a style="font-size:15px;" href="../index.html">Home</a>
<a style="font-size:15px;" href="../Formula/formula.html">Formula</a>
<a style="font-size:15px;" href="../Database/database.html">Database</a>
<a style="font-size:15px;" href="../Trimagic/trimagic.html">Trimagic</a>
<a style="font-size:15px;" href="../History/history.html">History</a>
<a style="font-size:15px;" href="../Links/links.html">Links</a>
<a style="font-size:15px;" href="../Contact/contact.html">Contact</a>
</div></div>
</div>
</header>
<!-- /* ---------New Layout Section1---------- */ -->
<!-- /* ---------New Layout Section2---------- */ -->
<article id="mainArticle">
<!-- /* coding color script with micke
*/ -->
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="animate-charcter">SQUAREMAGIE SPACE</h1>
</div>
</div>
</div>
<!-- /* coding color script with micke
*/ -->
<section class="firstsection">
<div class="box-main">
<div class="firstHalf">
<div class="text">
<table class="two">
<tr>
<td_2>
<h3 style="color:aquamarine">DESIGN * DEVELOPMENT *
HIGHTECH</h3>
</td_2>
</tr>
</table>
</div>
</div>
</div>
</section>
<section class="secondsection">
<div class="box-main">
<div class="secondHalf">
<div class="gallery"><!-- /* coding photocollection with micke - img 300px x 300px */
-->
<img src="../../images/photochampion.jpg" alt="Nikon
Photochampion">
<img src="../../images/micke_2012.jpg" alt="Mikael
Hermansson">
<img src="../../images/soliden_2017.jpg" alt="Soliden
Slott 2017">
<img src="../../images/estelle_2021.jpg" alt="Prinsessan
Estelle">
<img src="../../images/magic_square_of_order4.jpg" alt="Magic
Square">
<img src="../../images/anna_k2.jpg" alt="Anna
Korotkova">
<img src="../../images/lewis_h.jpg" alt="Lewis
Hamilton">
<img src="../../images/lara_g.jpg" alt="Lara
Gut-Behrami">
<img src="../../images/flag_on_the_moon.jpg" alt="The Flag">
<img src="../../images/michelle_c.jpg" alt="Michelle
Coleman">
<img src="../../images/sebastian_v.jpg" alt="Sebastian
Vettel">
<img src="../../images/tilde_j2.jpg" alt="Tilde
Johansson">
<img src="../../images/a_gerardin2.jpg" alt="Andre
Gerardin">
<img src="../../images/michael_p.jpg" alt="Michael
Phelps">
<img src="../../images/cristiano_r.jpg" alt="Cristiano
Ronaldo">
<img src="../../images/katinka_h.jpg" alt="Katinka
Hosszu">
</div><!-- /* coding photocollection with micke - - img 300px x 300px */
-->
</div>
</div>
</section>
<h5> By @ Mikael Hermansson,
2025. </h5>
<section class="thirdsection">
<div class="box-main">
<div class="thirdHalf">
<div class="text">
<h4 style="color:green" >Quality Document 2025</h4>
<table class="one">
<tr>
<td><abbr title="Trimagic Square of Order
32, txt-file transformed to Word-html."><a href="WordDocument/TrimagicSquare2025_Order32.html" target="_blank"><button class="btn_2">Trimagic Squares of Order 32</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Trimagic Square of Order
64, txt-file transformed to Word-html."><a href="WordDocument/TrimagicSquare_Order64.html" target="_blank"><button class="btn_2">Trimagic Squares of Order 64</button></a></abbr></td>
</tr>
</table>
</div>
</div>
</div>
</section>
</article>
<!-- /* ---------New Layout Section2---------- */ -->
<!-- /* ---------New Layout Section3---------- */ -->
<nav id="mainNav">
<!-- /* coding table3 with micke */
-->
<table class="one">
<tr>
<th_1>Quality Document 2025</th_1>
</tr>
<tr>
<td><abbr title="Magic Square of
Order 5, txt-file transformed to Word-html."><a href="WordDocument/MagicSquare2025_Order5.html" target="_blank"><button class="btn_1">Magic Square of Order 05</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Magic Square of
Order 6, txt-file transformed to Word-html."><a href="WordDocument/MagicSquare2025_Order6.html" target="_blank"><button class="btn_1">Magic Square of Order 06</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Magic Square of
Order 7, txt-file transformed to Word-html."><a href="WordDocument/MagicSquare2025_Order7.html" target="_blank"><button class="btn_1">Magic Square of Order 07</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 8, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order8.html" target="_blank"><button class="btn_1">Bimagic Square of Order 08</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 9, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare2025%20_Order9.html" target="_blank"><button class="btn_1">Bimagic Square of Order 09</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 10, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare2025_Order10.html" target="_blank"><button class="btn_1">Bimagic Square of Order 10</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 11, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare2025_Order11.html" target="_blank"><button class="btn_1">Bimagic Square of Order 11</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Trimagic Square of Order 12, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order12.html" target="_blank"><button class="btn_1">Bimagic Square of Order 12</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 13, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order13.html" target="_blank"><button class="btn_1">Bimagic Square of Order 13</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 14, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order14.html" target="_blank"><button class="btn_1">Bimagic Square of Order 14</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 15, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order15.html" target="_blank"><button class="btn_1">Bimagic Square of Order 15</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 16, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order16.html" target="_blank"><button class="btn_1">Bimagic Square of Order 16</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 17, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order17.html" target="_blank"><button class="btn_1">Bimagic Square of Order 17</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 18, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order18.html" target="_blank"><button class="btn_1">Bimagic Square of Order 18</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 19, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order19.html" target="_blank"><button class="btn_1">Bimagic Square of Order 19</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 20, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order20.html" target="_blank"><button class="btn_1">Bimagic Square of Order 20</button></a></abbr></td>
</tr>
</table>
<!-- /* coding table3 with micke */
-->
</nav>
<!-- /* ---------New Layout Section3---------- */ -->
<!-- /* ---------New Layout Section4---------- */ -->
<div id="siteAds">
<!-- /* coding table3 with micke */
-->
<table class="one">
<tr>
<th_1>Quality Document 2025</th_1>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 21, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order21.html" target="_blank"><button class="btn_1">Bimagic Square of Order 21</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 22, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order22.html" target="_blank"><button class="btn_1">Bimagic Square of Order 22</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 23, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order23.html" target="_blank"><button class="btn_1">Bimagic Square of Order 23</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Trimagic Square of Order 24, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order24.html" target="_blank"><button class="btn_1">Bimagic Square of Order 24</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 25, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order25.html" target="_blank"><button class="btn_1">Bimagic Square of Order 25</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 26, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order26.html" target="_blank"><button class="btn_1">Bimagic Square of Order 26</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 27, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order27.html" target="_blank"><button class="btn_1">Bimagic Square of Order 27</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 28, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order28.html" target="_blank"><button class="btn_1">Bimagic Square of Order 28</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 29, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order29.html" target="_blank"><button class="btn_1">Bimagic Square of Order 29</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 30, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order30.html" target="_blank"><button class="btn_1">Bimagic Square of Order 30</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 31, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order31.html" target="_blank"><button class="btn_1">Bimagic Square of Order 31</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Trimagic Square of Order 32, txt-file transformed to
Word-html."><a href="WordDocument/TrimagicSquare_Order32.html" target="_blank"><button class="btn_1">Bimagic Square of Order 32</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 33, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order33.html" target="_blank"><button class="btn_1">Bimagic Square of Order 33</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 34, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order34.html" target="_blank"><button class="btn_1">Bimagic Square of Order 34</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 35, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order35.html" target="_blank"><button class="btn_1">Bimagic Square of Order 35</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Bimagic Square of Order 36, txt-file transformed to
Word-html."><a href="WordDocument/BimagicSquare_Order36.html" target="_blank"><button class="btn_1">Bimagic Square of Order 36</button></a></abbr></td>
</tr>
</table>
<!-- /* coding table3 with micke */
-->
</div>
<!-- /* ---------New Layout Section4---------- */ -->
<!-- /* ---------New Layout Section3---------- */ -->
<footer id="pageFooter">
<div class="footer">©<span id="year">2025</span><span>Squaremagie Space. All rights reserved.</span></div>
</footer>
<!-- /* ---------New Layout Section3---------- */ -->
</body>
</html>