Auf Thema antworten

Beitrag

[QUOTE="basti1012, post: 12796, member: 1688"]
Eigentlich h brauch man die Farbe da nur zu reinkopieren.
In deinen Fall muss man aber noch h paar Kleinigkeiten ändern.
Dann kann man noch einige Elemente löschen, die brauch man nicht.
Meistens ist weniger mehr.
Je mehr Elemente man hat, um so mehr hat der Browser zu arbeiten. Auch das Googel Ranking kann darunter leiden.

Dann solltest du auch den Inline style löschen , du hast ja schon die CSS die du nutzt.
Wenn ich das alles beachte würde ich es so machen.
[CODE=html]<html>
  <head>
    <style>
      @media only screen and (max-width: 2000px) {
  body {
    background: #58A7C6;
  }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    height: 100%;
    width: 100vw;
    display: flex;
    text-align: center;
    flex-direction: column;
    background: #58A7C6;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}
#box{
  display:flex;
  overflow:hidden;
  flex-direction:column;
  width:260px;
  height:440px;
  border:2px solid black;
  border-radius:8%;
}
#navbar{
  padding:10px 0 10px 0;
}
a{
  text-decoration:none;
  color:lightgrey;
}
#welcome-section{
  margin-top:10px;
  font-size:35px;
  color:black;
}
h2{
  color:#0D387;
}
#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;
}
#top{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  line-height:0;
}
#myphone{
   display:flex;
   justify-content:center;
  margin-bottom:20px;
  font-family:Myriad;
  color:white;
  font-size: 16px;
  text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
 
 
 
 
}

#bottom-text{
 color: #FDFAD5;
}

#home{
  border:0;
  cursor: pointer;
  width:50px;

}

#home-button{
  background: linear-gradient(70deg, black, white);
}
    </style>
</head>
<body>
<div id="box">
    <a id="navbar" href=#Link >MyPhone©</a>
    <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">
     <a href="https://www.schach.coach" target="_blank">Schach.Coach:<br> Dies war meine erste Website.</a>
     <a href="https://codepen.io/Blvcksquid/pen/GRybRxZ">Website mit Audio Player </a>
     <a href=https://www.freecodecamp.org/fccc002a8f6-bf02-4564-b77a-30d26c11b713 target="_blank">Mein FCC Profil<a>
  </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>
</body>
</html>[/CODE]
Man könnte es sicherlich noch besser machen .
Dann könnte man noch die hr Elemente herauswerfen, dafür kann man auch border-top nutzen
[/QUOTE]

Authentifizierung