<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML & CSS code Squaremagie download</title>
<meta name="keywords" content="html & css code squaremagie
download" />
<meta name="description" content="html & css code squaremagie
download" />
<meta http-equiv="author" content="mikael hermansson" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta charset="utf-8" />
</head>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("images/mh.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0;
}
<!-- /* coding java script
with micke */
-->
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
color: black;
text-align: left;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
}
/* The Close Button */
.close {
color: red;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- /* coding java script
with micke */
-->
/* coding menu bar with micke+ */
/* Add a black background color to the
top navigation */
.topnav {
background-color: gray;
overflow: hidden;
padding: 12px 10px;
text-align: center;
}
/* Style the links inside the
navigation bar */
.topnav a {
float: inherit;
color: #f2f2f2;
text-align: center;
padding: 5px 4px;
text-decoration: none;
font-size: 15px;
}
/* Change the color of links on hover
*/
.topnav a:hover {
background-color: white;
color: black;
}
/* Add a color to the active/current
link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav a.active:hover {
background-color: greenyellow;
color: black;
}
/* coding menu bar with micke+ */
/* coding menu dropdown with micke */
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 15px;
border: none;
cursor: pointer;
margin-top: 10px;
}
/* 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: 221px;
box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.21);
padding: 5px 10px;
border: none;
text-align: left;
font-size: 14px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
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: 21% 1fr 21%;
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: 18px;
font-family: 'montserrat', sans-serif;
color: blueviolet;
padding: 20px 20px;
text-align: center;
margin-top: 0px;
}
article, div {
font-family: 'bold', sans-serif;
padding: 5px 5px;
background: none;
font-size: 19px;
color: yellow;
margin-top: 0px;
text-align: center;
}
nav, div {
padding: 0px 55px;
background: none;
font-size: 17px;
text-align: center;
}
ads, div {
padding: 0px 35px;
background: none;
font-size: 17px;
color: black;
text-align: center;
}
footer div {
padding: 0px 0px;
background: none;
font-size: 15px;
margin-top: 0px;
}
/* coding layout 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 text with micke */
.text{
width: 100%;
margin-top: 0%;
text-transform: uppercase;
color: white;
}
.text h1{
font-size: 36px;
font-family: 'open sans', sans-serif;
font-weight: 700px;
margin: 5px 0px;
}
p{
text-align: center;
}
/* coding text with micke */
/* coding button with micke */
.btn_1 {
background-color: rgba(255,255,255, 0.0);
color: blue;
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: 25px;
padding: 0px 10px;
width: auto;
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: white;
font-family: 'montserrat', sans-serif ;
border: none;
font-size: 15px;
font-weight: none;
text-transform: none;
line-height: 25px;
padding: 0px 10px;
width: auto;
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 JS images with micke */
img.medium {
width: 500px;
height: 500px;
}
img.align-center{
display: block;
margin: 0px auto;
}
/* coding JS images with micke */
/* coding table with micke */
table {
border-collapse: collapse;
width: 100%;
margin-top: 5px;
}
th {
font-family: 'montserrat', sans-serif;
border: 1px solid none; /* --color will give
border line on table section - here none color-- */
padding: 10px;
font-size: 17px;
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: 7px;
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;
}
/* coding table 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: purple;
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">
Welcome to Squaremagie
</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
*/ -->
<p style="color:red;"><b>Document Download</b></p>
<!-- /* coding table1 with micke */
-->
<table class="alt">
<tr>
<th>Bimagic Squares pdf</th>
<th>Bimagic Squares xps</th>
<th>Trimagic Squares pdf</th>
<th>Trimagic Squares xps</th>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie1.pdf" target="_blank" download><button class="btn_2">Squaremagie 01 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie1.xps" target="_blank" download><button class="btn_2">Squaremagie 01 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie14.pdf" target="_blank" download><button class="btn_2">Squaremagie 14 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie14.xps" target="_blank" download><button class="btn_2">Squaremagie 14 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie2.pdf" target="_blank" download><button class="btn_2">Squaremagie 02 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie2.xps" target="_blank" download><button class="btn_2">Squaremagie 02 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie15.pdf" target="_blank" download><button class="btn_2">Squaremagie 15 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie15.xps" target="_blank" download><button class="btn_2">Squaremagie 15 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie3.pdf" target="_blank" download><button class="btn_2">Squaremagie 03 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie3.xps" target="_blank" download><button class="btn_2">Squaremagie 03 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie16.pdf" target="_blank" download><button class="btn_2">Squaremagie 16 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie16.xps" target="_blank" download><button class="btn_2">Squaremagie 16 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie4.pdf" target="_blank" download><button class="btn_2">Squaremagie 04 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie4.xps" target="_blank" download><button class="btn_2">Squaremagie 04 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie17.pdf" target="_blank" download><button class="btn_2">Squaremagie 17 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie17.xps" target="_blank" download><button class="btn_2">Squaremagie 17 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie5.pdf" target="_blank" download><button class="btn_2">Squaremagie 05 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie5.xps" target="_blank" download><button class="btn_2">Squaremagie 05 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie18.pdf" target="_blank" download><button class="btn_2">Squaremagie 18 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie18.xps" target="_blank" download><button class="btn_2">Squaremagie 18 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie6.pdf" target="_blank" download><button class="btn_2">Squaremagie 06 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie6.xps" target="_blank" download><button class="btn_2">Squaremagie 06 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie19.pdf" target="_blank" download><button class="btn_2">Squaremagie 19 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie19.xps" target="_blank" download><button class="btn_2">Squaremagie 19 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie7.pdf" target="_blank" download><button class="btn_2">Squaremagie 07 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie7.xps" target="_blank" download><button class="btn_2">Squaremagie 07 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie20.pdf" target="_blank" download><button class="btn_2">Squaremagie 20 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie20.xps" target="_blank" download><button class="btn_2">Squaremagie 20 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie8.pdf" target="_blank" download><button class="btn_2">Squaremagie 08 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie8.xps" target="_blank" download><button class="btn_2">Squaremagie 08 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie21.pdf" target="_blank" download><button class="btn_2">Squaremagie 21 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie21.xps" target="_blank" download><button class="btn_2">Squaremagie 21 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie9.pdf" target="_blank" download><button class="btn_2">Squaremagie 09 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie9.xps" target="_blank" download><button class="btn_2">Squaremagie 09 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie22.pdf" target="_blank" download><button class="btn_2">Squaremagie 22 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie22.xps" target="_blank" download><button class="btn_2">Squaremagie 22 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie10.pdf" target="_blank" download><button class="btn_2">Squaremagie 10 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie10.xps" target="_blank" download><button class="btn_2">Squaremagie 10 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie23.pdf" target="_blank" download><button class="btn_2">Squaremagie 23 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie23.xps" target="_blank" download><button class="btn_2">Squaremagie 23 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie11.pdf" target="_blank" download><button class="btn_2">Squaremagie 11 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie11.xps" target="_blank" download><button class="btn_2">Squaremagie 11 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie24.pdf" target="_blank" download><button class="btn_2">Squaremagie 24 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie24.xps" target="_blank" download><button class="btn_2">Squaremagie 24 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie12.pdf" target="_blank" download><button class="btn_2">Squaremagie 12 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie12.xps" target="_blank" download><button class="btn_2">Squaremagie 12 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie25.pdf" target="_blank" download><button class="btn_2">Squaremagie 25 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie25.xps" target="_blank" download><button class="btn_2">Squaremagie 25 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie13.pdf" target="_blank" download><button class="btn_2">Squaremagie 13 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie13.xps" target="_blank" download><button class="btn_2">Squaremagie 13 xps</button></a></abbr></td>
<td><abbr title="Download Squaremagie pdf"><a href="squaremagie26.pdf" target="_blank" download><button class="btn_2">Squaremagie 26 pdf</button></a></abbr></td>
<td><abbr title="Download Squaremagie xps"><a href="squaremagie26.xps" target="_blank" download><button class="btn_2">Squaremagie 26 xps</button></a></abbr></td>
</tr>
</table>
<!-- /* coding table1 with micke */
-->
<!-- /* coding java script with micke
*/ -->
<!-- Trigger/Open The Modal -->
<p class="button"><button id="myBtn">Pop up Window</button></p>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal
content -->
<div class="modal-content">
<span class="close">×</span>
<p><b>A little magic step on the moon, an a big step for the humanity.</b></p>
<p class="button"><abbr title="The flag on the
moon."><img src="images/moon.jpg" alt="os" class="align-center medium" /></abbr></p>
</div>
</div>
<!-- /* coding java script with micke
*/ -->
</article>
<!-- /* ---------New Layout Section2---------- */ -->
<!-- /* ---------New Layout Section3---------- */ -->
<nav id="mainNav">
<!-- /* coding menu bar with micke1 */ -->
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#form">Download 2</a>
<a href="#data">Download 3</a>
</div>
<!-- /* coding menu bar with micke1 */ -->
<!-- /* coding table2 with micke */
-->
<table>
<tr>
<th>Mikael Hermansson 2025</th>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie1.pdf" target="_blank" download><button class="btn_1">Squaremagie 01 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie2.pdf" target="_blank" download><button class="btn_1">Squaremagie 02 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie3.pdf" target="_blank" download><button class="btn_1">Squaremagie 03 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie4.pdf" target="_blank" download><button class="btn_1">Squaremagie 04 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie5.pdf" target="_blank" download><button class="btn_1">Squaremagie 05 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie6.pdf" target="_blank" download><button class="btn_1">Squaremagie 06 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie7.pdf" target="_blank" download><button class="btn_1">Squaremagie 07 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie8.pdf" target="_blank" download><button class="btn_1">Squaremagie 08 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie9.pdf" target="_blank" download><button class="btn_1">Squaremagie 09 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie10.pdf" target="_blank" download><button class="btn_1">Squaremagie 10 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie11.pdf" target="_blank" download><button class="btn_1">Squaremagie 11 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie12.pdf" target="_blank" download><button class="btn_1">Squaremagie 12 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie13.pdf" target="_blank" download><button class="btn_1">Squaremagie 13 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie14.pdf" target="_blank" download><button class="btn_1">Squaremagie 14 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie15.pdf" target="_blank"download ><button class="btn_1">Squaremagie 15 pdf</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, pdf-file"><a href="squaremagie16.pdf" target="_blank" download><button class="btn_1">Squaremagie 16 pdf</button></a></abbr></td>
</tr>
</table>
<!-- /* coding table2 with micke */
-->
</nav>
<!-- /* ---------New Layout Section3---------- */ -->
<!-- /* ---------New Layout Section4---------- */ -->
<div id="siteAds">
<!-- /* coding dropdown menu with micke
*/ -->
<div class="dropdown">
<button class="dropbtn">Recommend Magic Square Links</button>
<div class="dropdown-content">
<a href="#">Squaremagie 1</a>
<a href="#">Squaremagie 2</a>
<a href="#">Squaremagie 3</a>
<a href="#">Squaremagie 4</a>
<a href="#">Squaremagie 5</a>
<a href="#">Squaremagie 6</a>
<a href="#">Squaremagie 7</a>
<a href="#">Squaremagie 8</a>
<a href="#">Squaremagie 9</a>
<a href="mailto:squaremagie@outlook.com" target="_blank">Squaremagie email Contact</a>
</div>
</div>
<!-- /* coding dropdown menu with micke
*/ -->
<!-- /* coding table3 with micke */
-->
<table>
<tr>
<th>Quality Document 2025</th>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie1.xps" target="_blank"><button class="btn_1">Squaremagie 01 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie2.xps" target="_blank"><button class="btn_1">Squaremagie 02 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie3.xps" target="_blank"><button class="btn_1">Squaremagie 03 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie4.xps" target="_blank"><button class="btn_1">Squaremagie 04 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie5.xps" target="_blank"><button class="btn_1">Squaremagie 05 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie6.xps" target="_blank"><button class="btn_1">Squaremagie 06 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie7.xps" target="_blank"><button class="btn_1">Squaremagie 07 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie8.xps" target="_blank"><button class="btn_1">Squaremagie 08 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie9.xps" target="_blank"><button class="btn_1">Squaremagie 09 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie10.xps" target="_blank"><button class="btn_1">Squaremagie 10 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie11.xps" target="_blank"><button class="btn_1">Squaremagie 11 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie12.xps" target="_blank"><button class="btn_1">Squaremagie 12 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie13.xps" target="_blank"><button class="btn_1">Squaremagie 13 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie14.xps" target="_blank"><button class="btn_1">Squaremagie 14 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie15.xps" target="_blank"><button class="btn_1">Squaremagie 15 xps</button></a></abbr></td>
</tr>
<tr>
<td><abbr title="Download Squaremagie, xps-fil"><a href="squaremagie16.xps" target="_blank"><button class="btn_1">Squaremagie 16 xps</button></a></abbr></td>
</tr>
</table>
<!-- /* coding table3 with micke */
-->
</div>
<!-- /* ---------New Layout Section4---------- */ -->
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that
closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button,
open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on
<span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere
outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</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>