Auf Thema antworten

Beitrag

[QUOTE="basti1012, post: 12811, member: 1688"]
Du meinst top und Home Button sollen stehen bleiben?
Erstmal muss dafür ein Element erstellt werden, das den Bereich in der Mitte darstellt.
Dann wieder etwas css, js ändern und fertig
[CODE]<html>
  <head>
    <title>MyPhone</title>
    <style>
           @media only screen and (max-width: 2000px) {
  body {
    
  }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    height: 100%;
    width: 100vw;
    display: flex;
    text-align: center;
    flex-direction: column;
    background: #58A7C6;
    align-items: center;
}
#box{
  margin-top:20px;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  width:240px;
  height:450px;
  border:6px solid black;
  border-radius:8%;
  background-image:url("https://bilderupload.org/image/b8af50776-132-1322441-succulent-pla.jpg");
}
#top{
  display:flex;
  padding:10px 0 5px 0;
  background: linear-gradient(70deg, black, white);
  text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
  align-items:center;
}
#navbar {
    flex: 6;
    color: #79CDCD;
    display: flex;
    justify-content: center;
}
#camera{
   width:14px;
   margin-right:10px;
}
a{
   text-decoration:none;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
}
#welcome-section{
   margin-top:10px;
   font-size:35px;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
}
h2{
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;

}
#pic{
   border-radius:50%;
   width:30%;
   margin:auto;
}
hr{
   color:#3f3f3f;
}
.line{
    display: flex;
    flex-direction: column;
    height: 120px;
    flex-wrap: nowrap;
    justify-content: space-around;
}
#myphone{
   display:flex;
   justify-content:center;
   margin-bottom:20px;
   font-family:Myriad;
}
#bottom-text{
   color: #FDFAD5;
}
.hiddenButton{
   font-size:12px;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
   border:none;
   background:none;
   cursor:pointer;
}
      #mitte{
        display:flex;
        flex-direction:column;
        height:100%;
      }
#home{
   border:0;
   cursor: pointer;
   width:50px;
}
#home-button{
    background: linear-gradient(70deg, black, white);
}
iframe.box2 {
    height: 100%;
    width: 100%;
    border: 1px solid black;
}
    </style>
  </head>
<body>

<div id="box">
    <div id="top"><a id="navbar" href=#Link > MyPhone© </a><img id="camera" src="https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Travel-and-Suitcases.PNG/Lens_Decorative_PNG_Transparent_Image.png?m=1522321507"></div>
  <div id="mitte">
    <hr>
    <h1 id="welcome-section">Willkommen!</h1>
   <img id="pic" src="https://i.ibb.co/Gx9YHM5/bild3.jpg" alt="Bild des Autors">
   <h2 id="project-title">Meine Projekte:</h2>
  <div class="line">
     <button class="hiddenButton" id="button">Schach.Coach:<br> Dies war meine erste Website.</button>
     <button class="hiddenButton">Website mit Audio Player </button>
     <button class="hiddenButton">Mein FCC Profil</button>
  </div>
  </div>
  <hr>
  <div id="home-button">
        <img id="home" src="https://i.ibb.co/D9cPQCb/iphone-4-home-button.png" alt="home-button"></div></div>
  <script>
document.getElementById('button').addEventListener('click',function(){
   document.getElementById("mitte").innerHTML ='<iframe  class="box2" src="https://schach.coach" allowfullscreen></iframe>';
})
  </script>
</body>
</html>[/CODE]
[/QUOTE]

Authentifizierung