<!DOCTYPE html>

<html lang="en">

<head>

<title>Squaremagie source code html & css of photocollection</title>

<meta name="keywords" content="squaremagie source code html & css. photocollection, sportmagie, modern quantum mechanics" />

<meta name="description" content="html & css code. photocollection, sportmagie, modern quantum mechanics introduction" />

<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.164), rgba(0, 0, 0, 0.164)), url("images/mh.jpg");

    background-repeat: no-repeat;

    background-size: 100% 100%;

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

  box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);

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

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

  color: black;

  text-align: center;

  margin-top: 0px;

}

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

}

.firsthalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;  

}

.secondsection{

    background-color: none;

    height: 8%; /* 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: 26%; /* coding the top margin of button therd section article div */

    }

.thirdhalf{

    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: 80%;

    margin: auto;

    height: 100%;

    margin-top: 0%;

}

/* coding gallery and text section with micke */

   

/* coding button with micke */    

.btn {

    background-color: rgba(255,255,255, 0.25);

    color: white;

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

    border: none;

    position: autofixed;

    font-size: 0px;

    font-weight: bold;

    text-transform: uppercase;

    line-height: 5px;

    height: 134px;

    width: auto;

    margin-top: 5px;

    border: 3px solid white;

    cursor: pointer;

}

.btn:hover{

    background-color: white;

    color: black;

}

.button {

   background-color: rgba(255,255,255, 0.0);

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

   border: 0px solid none;

   color: white;

   padding: 0px 0px;

   text-align: center;

   text-decoration: none;

   display: inline-table;

   line-height: 0px;

   width: auto;

   font-weight: none;

   font-size: 15px;

   margin: 0px 0px;

   cursor: pointer;

   margin-top: 25%;

   justify-content: center;

   align-items: center;

   border-style: none;

}

.button:hover{

    background-color: none;

    color: red;

}

 p.button_1 {

    background-color: none;

    color: none;

    padding: 1px, 1px;

    text-align: left;

    text-decoration: none;

    display: inline-block;

    font-size: 0px;

    margin-top: 0px;

    height: 110px;

    width: 165px;

    border: 4px;

    border-style: outset;

}

 p.button_1:hover {

    background-color: white;

    color: black;

}

p.button_2 {

    background-color: none;

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

    color: lightskyblue;

    padding: 0px, 0px;

    text-align: left;

    text-decoration: none;

    margin-top: 0%;

    display: inline-block;

    font-size: 15px;

    width: 1265px;

    height: 224px;

    border-style: inset;

}

 p.button_2:hover {

    background-color: white;

    color: black;

}

/* coding button with micke */

   

/* coding text with micke */

.text{

    width: 100%;

    margin-top: 0%;

    text-transform: uppercase;

    color: white;

}

.text h1{

    font-size: 36px;

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

    font-weight: 700px;

    margin: 9px 0px;

    text-align: center;

}

.text h2{

    font-size: 18px;

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

    font-weight: 500px;

}

h1{

    text-align: left;

}

h2{

    text-align: left;

    margin: 0px 0px;

}

.text-medium{

    font-family: 'piazzolla', serif;

    font-weight: bold;

    font-size: 18px;

    color: greenyellow;

    margin-top: 1%;

}

.text-small{

    font-size: 12px;

}

p{

    text-align: center;

}  

/* coding text 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: 5px;

  font-size: 12px;

  color: white;

  text-align: center;

}  

/* coding gallery with micke */  

   

/* coding table with micke */

table {

                border-collapse: collapse;

                width: auto;

                margin-top: 10%; /* coding the top margin of center column article div */

            }

            th, td {

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

                border: 1px solid none; /* --color will give border line on table section - here none color-- */

                padding: 0px 0px;

                height: auto;

                width: auto;

                font-size: 0px;

                text-align: center;

            }

/* coding table with micke */

   

/* coding dropdown in header with micke */    

.leftmenu {

    width: 13%;

    float: left;

    margin-top: 1%;

 }

.rightmenu {

    width: 13%;

    float: right;

    margin-top: 1%;

 }  

/* coding dropdown in header 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 */

   

/* coding text scroll with micke */    

.scroll {

    border: 1px;

    padding: 1px

    width: auto;

    height: 224px;

    overflow-x: hidden;

    overflow-y: auto;

    text-align: left;

}

/* coding text scroll with micke */  

</style>

   

<body>

            <!-- /* ---------New Layout Section1---------- */ -->

            <header id="pageHeader">Squaremagie Photocollection 1

 

            <div class="leftmenu">

                <div class="dropdown">

                 <button class="dropbtn">Welcome Home</button>

                 <div class="dropdown-content">

                 <a href="index.html">Home</a>

                 <a href="special1.html">Special 1</a>  

                 <a href="special2.html">Special 2</a>

                 <a href="special3.html">Special 3</a>

                 <a href="special4.html">Special 4</a>

                 <a href="special5.html">Special 5</a>

                 <a href="special6.html">Special 6</a>

                 </div></div>

            </div>

             

            <div class="rightmenu">

                <div class="dropdown">

                 <button class="dropbtn">Welcome Home</button>

                 <div class="dropdown-content">

                 <a href="index.html">Home</a>

                 <a href="special1.html">Special 1</a>  

                 <a href="special2.html">Special 2</a>

                 <a href="special3.html">Special 3</a>

                 <a href="special4.html">Special 4</a>

                 <a href="special5.html">Special 5</a>

                 <a href="special6.html">Special 6</a>

                 </div></div>

            </div>    

               

            </header>

            <!-- /* ---------New Layout Section1---------- */ -->

   

           <!-- /* ---------New Layout Section2---------- */ -->  

           <article id="mainArticle">

             

            <section class="firstsection">

            <div class="box-main">

            <div class="firstHalf">

               

            <table>

            <tr>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>    

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

            </tr>

            <tr>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

            </tr>

            <tr>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>    

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

                <td>

                    <div class="gallery">

                    <abbr title="Click on photo, new style about 100%."><button class="btn"><p class=button_1>

                    <a href="images/photo.jpg" style="max-width:100%" alt="name photo" target="_blank">

                    <img src="images/photo.jpg" width="165" height="110" alt="name photo"></a>

                    </p></button></abbr>

                    <div class="desc">name photo</div>

                    </div>  

                </td>

            </tr>  

           </table>    

         

         </div>      

        </div>

      </section>

             

            <section class="thirdsection">

              <div class="box-main">

                <div class="thirdHalf">

               <table>

                 <tr>

                  <td>

                    <abbr title="Mickes Download 3"><a href="../../Download/driveorder3.html" class="button">Mikael Hermansson</a></abbr>

                  </td>

                 </tr>  

               </table>  

               </div>      

            </div>

          </section>    

               

            <section class="secondsection">

              <div class="box-main">

                <div class="secondHalf">

                    <h2 class="text-medium" id="program">The speed of light</h2>

                    <div class="scroll"><p class="button_2">

                    <B>Modern Quantum Mechanics</B> are written in one way to find the speed of light corresponding what the light speed is in nature. This know how is important for the future of nature science, hightech development and human nature resource. Through this work of investigation I can confirm that there are no photons going up in the S-orbital in <ins>Hydrogen</ins> and that there exists one another speed of light on Hydrogen atoms surface, then whatīs known today. Self I hope through this paper to become a doctor in medicine and/or medical physiology. Max Planck (1858-1947). M. Planck received 1919 the Noble Prize in Physics for year 1918 <cite>"in recognition of the service he rendered to the advancement of physics by his descovery of the enery quanta"</cite> [13]. He also proposed that light energy travels in discrete packed called quanta. Before M. Planck`s work with blackbody radiation, light energy was from classical ideas throught to be continuous, but this left many nature phenomena unexplained. While working out the mathematic to the blackbody radiation he discovered the energy quantum <cite>h</cite> (wirkungquantum) in the year 1900. These where later verified by other scientist and it where the basis of an entirely new field of modern physics, known as Quantum Mechanics, which could explain the atomic structure of matter in all atoms and molecules. The constant <cite>h</cite> takes the energy pro Js of one revolution or frequency Hz, and itīs the smallest unbreakable energy of light quanta. M. Planckīs conclusion gives us the quantum hypothesis, which stated a discontinuities and precision with the all nature processes. This conclusion has developed through Nils Bohr (1885-1962) modern quantum theory, which includes also the old classical mechanics and old principles of electrodynamics. M. Planck was honorary member of the science academy (1922). Today Max Planck honors the institute of Modern Physics in Berlin. The speed of light and the behavior of the electron is the central dogma in atomic theory and the description of nature. This essay will take up modern theoretical studies of the Hydrogen atom through this understand the difference when the electron has relativistic action at first orbital and when itīs on rest or donīt do any work at Hydrogen surface. The design and development of photonspeed at Hydrogen surface is the only true lightspeed for hightech and the scientific. Download Modern Quantum Mechanics, Hydrogen 2024.</p>

                    </div>

                </div>      

            </div>

          </section>          

      </article>

   

        <nav id="mainNav"></nav>

        <!-- /* ---------New Layout Section2---------- */ -->

   

    <!-- /* ---------New Layout Section3---------- */ -->

    <footer id="pageFooter">

    <div class="footer">&copy;<span id="year">2025</span><span> Squaremagie Space. All rights reserved.</span></div>

    </footer>

    <!-- /* ---------New Layout Section3---------- */ -->

   

  </body>

</html>