<!DOCTYPE html>

<head>

<title>Trimagic Square of Order 12 A</title>

</head>

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/bx.jpg");

background-repeat: no-repeat;

background-size: 100% 100%;

display: autoflex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

}

/* 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: 23%;

float: left;

margin-top: 3%;

}

.rightmenu {

width: 57%;

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: lightcyan;

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: 0% 1fr 0%;

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: 17px;

font-family: 'montserrat', sans-serif;

color: white;

padding: 15px 0px;

text-align: center;

}

article, div {

padding: 0px 0px;

background: none;

font-size: 17px;

font-family: 'montserrat', sans-serif;

color: black;

text-align: center;

margin-top: -10px;

}

nav, div {

padding: 0px 0px;

background: none;

font-size: 16px;

text-align: center;

margin-top: 0px;

}

ads, div {

padding: 0px 0px;

background: none;

font-size: 0px;

color: black;

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%; /* coding the top margin of center column first section article div */

margin-top: -1%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.secondsection{

background-color: none;

height: 0%; /* coding the top margin of center column second section article div */

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.thirdsection{

background-color: none;

height: 0%; /* coding the top margin of button therd section article div */

}

.thirdhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.fourthsection{

background-color: none;

height: 0%; /* coding the top margin of button therd section article div */

}

.fourthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.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-style: 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: -38%;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_1:hover{

background-color: white;

color: black;

font-weight: bold;

text-transform: uppercase;

}

.btn_2{

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;

padding: 0px 0px;

margin-top: -32%;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_2:hover{

background-color: white;

color: black;

font-weight: bold;

text-transform: uppercase;

}

p.button {

background-color: lightgoldenrodyellow;

color: blue;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 14px;

margin-top: 3%;

padding: 2px 5px;

border-style: inset;

}

p.button:hover {

background-color: purple;

color: white;

}

/* coding button with micke */

/* coding text with micke */

.text{

width: 100%;

font-weight: none;

text-transform: none;

color: red;

margin-top: 0%;

}

.text h1{

font-family: 'montserrat', sans-serif;

font-weight: 700px;

font-weight: bold;

text-transform: uppercase;

font-size: 36px;

text-align: center;

margin-top: 2%;

}

.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: 1%;

}

.text h5{

font-size: 13px;

font-family: 'open sans', sans-serif;

font-weight: none;

text-transform: none;

margin-top: 2px;

}

p {

text-align: center;

}

.text-medium{

font-family: 'piazzolla', serif;

font-weight: bold;

font-size: 18px;

color: greenyellow;

margin-top: 1%;

}

.text-small{

font-size: 12px;

}

/* coding text with micke */

/* coding menu bar JS with micke+ */

.dropbtn {

background-color: blue;

color: white;

padding: 6px 12px;

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 12px;

border: 2px solid white;

border-style: inset;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 158px;

max-width: auto;

font-size: 13px;

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;

}

table.two {

border-collapse: collapse;

width: auto;

margin-top: 9%; /* 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 gallery with micke */

div.gallery {

margin: 4px 5px;

border: 1px solid none;

float: left;

height: 160px;

width: auto;

}

div.gallery:hover {

border: 1px solid none;

padding: 0px 0px;

width: auto;

}

div.desc {

padding: 4px;

font-size: 13px;

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>

<tr>

<td_2>

<button onclick="myFunction()" class="dropbtn">Walter Trump index</button>

<a style="color:purple;" href="trimagicsquare_n12a.html">Trimagic Square 12 A</a>

<a href="trimagicsquare_n12b.html">Trimagic Square 12 B</a>

<a href="trimagicsquare_n12c.html">Trimagic Square 12 C</a>

<a href="trimagicsquare_n12d.html">Trimagic Square 12 D</a>

<a href="trimagicsquare_n12e.html">Trimagic Square 12 E</a>

<a href="trimagicsquare_n12f.html">Trimagic Square 12 F</a>

<a href="newsnurnberger_article.html">Walter Trump article</a>

</div>

</td_2>

</tr>

</table>

</div>

</section>

</div>

<ul>

<li> <a href="../../Formula/formula.html"><i class="fa fa-formula">Formula</i></a> </li>

<li> <a href="../../Database/database.html"><i class="fa fa-data">Database</i></a> </li>

<li> <a style="color:aqua;" href="../trimagic.html"><i class="fa fa-square">Trimagic</i></a>

<ul>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Bimagic Square</i></a>

<ul>

<li><a href="../BimagicSquare/bimagicsquare_n8a.html"><i>Bimagic n8 A</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n8b.html"><i>Bimagic n8 B</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n8c.html"><i>Bimagic n8 C</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n8d.html"><i>Bimagic n8 D</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n8e.html"><i>Bimagic n8 E</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n20a.html"><i>Bimagic n20 A</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n20b.html"><i>Bimagic n20 B</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n24a.html"><i>Bimagic n24 A</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n24b.html"><i>Bimagic n24 B</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n24c.html"><i>Bimagic n24 C</i></a></li>

<li><a href="../BimagicSquare/bimagicsquare_n26.html"><i>Bimagic n26</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right"> Latin Square 25</i></a>

<ul>

<li><a href="../LatinEuler/bimagicsquare_n25a1.html"><i>Latin Square A1</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25a2.html"><i>Latin Square A2</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25a3.html"><i>Latin Square A3</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25b1.html"><i>Latin Square B1</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25b2.html"><i>Latin Square B2</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25b3.html"><i>Latin Square B3</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25c1.html"><i>Latin Square C1</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25c2.html"><i>Latin Square C2</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25c3.html"><i>Latin Square C3</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25d1.html"><i>Latin Square D1</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25d2.html"><i>Latin Square D2</i></a></li>

<li><a href="../LatinEuler/bimagicsquare_n25d3.html"><i>Latin Square D3</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right"> Walter Trump 12</i></a>

<ul>

<li><a href="trimagicsquare_n12a.html"><i>Tmagic Square 1</i></a></li>

<li><a href="trimagicsquare_n12b.html"><i>Tmagic Square 2</i></a></li>

<li><a href="trimagicsquare_n12c.html"><i>Tmagic Square 3</i></a></li>

<li><a href="trimagicsquare_n12d.html"><i>Tmagic Square 4</i></a></li>

<li><a href="trimagicsquare_n12e.html"><i>Tmagic Square 5</i></a></li>

<li><a href="trimagicsquare_n12f.html"><i>Tmagic Square 6</i></a></li>

<li><a href="newsnurnberger_article.html"><i>W. Trump Article</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Trimagic Square</i></a>

<ul>

<li><a href="../TrimagicSquare/trimagicsquare_n16.html"><i>Trimagic Sq. n16</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n24a1.html"><i>Trimagic n24 A1</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n24a2.html"><i>Trimagic n24 A2</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n24a3.html"><i>Trimagic n24 A3</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n24b1.html"><i>Trimagic n24 B1</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n24b2.html"><i>Trimagic n24 B2</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n24b3.html"><i>Trimagic n24 B3</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n32a.html"><i>Trimagic n32 A</i></a></li>

<li><a href="../TrimagicSquare/trimagicsquare_n32b.html"><i>Trimagic n32 B</i></a></li>

</ul>

</div>

</li>

</ul>

</div>

</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>

<tr>

<td_2>

<h4 style="color:deepskyblue">DESIGN * DEVELOPMENT * HIGHTECH</h4>

</td_2>

</tr>

<tr>

<td_2>

<h1>Trimagic Square of Order 12 A</h1>

</td_2>

</tr>

<tr>

<td_2>

<h3><p class="button"> Walter Trump </p></h3>

</td_2>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<div class="desc">Trimagic Square of Order 12 #1</div>

</div>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<div class="desc">Trimagic Square of Order 12 #2</div>

</div>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<div class="desc">Trimagic Square of Order 12 #3</div>

</div>

</td_2></th></tr>

</table>

</div>

</div></div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<div class="desc">Trimagic Square of Order 12 #4</div>

</div>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<div class="desc">Trimagic Square of Order 12 #5</div>

</div>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<div class="desc">Trimagic Square of Order 12 #6</div>

</div>

</td_2></th></tr>

</table>

</div>

</div></div>

</section>

/* 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>

</article>

</footer>

</body>

</html>