CSS Farbgestaltung in Flexbox letze lösung
Hallo, habe mich ein bisschen in CSS Flexbox reingewurstelt und bin nun bei folgendem Design:
https://codepen.io/Blvcksquid/pen/yLpdBoO
Jetzt möchte ich das "MyPhone" in drei Teilen einfärben: Der oberer und der untere Rand sollen das hier bekommen:
background: linear-gradient(70deg, black, white);
Und der Bildschirm eben einen neutralen Hintergund.
Wie stelle ich das an ohne mein ganzes Layout über einen Haufen zu werfen?
Bin noch nicht so lang bei CSS dabei, mag sein, dass das eine etwas naive Frage ist, aber ich bin hier um zu lernen.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete 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("/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;
}
.einblenden{
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;
}
.ausblenden{
display:none;
}
</style>
</head>
<body>
<div id="box">
<div id="top"><a id="navbar" href=#Link > MyPhone© </a><img id="camera" src="/image/Lens_Decorative_PNG_Transparent_Image.png?m=1522321507"></div>
<div class="ausblenden" id="mitte1"><iframe class="box2" src="https://schach.coach" allowfullscreen></iframe></div>
<div class="einblenden" id="mitte">
<hr>
<h1 id="welcome-section">Willkommen!</h1>
<img id="pic" src="/image/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="/image/iphone-4-home-button.png" alt="home-button"></div></div>
<script>
var mit1=document.getElementById("mitte1");
var mit=document.getElementById("mitte");
document.getElementById('button').addEventListener('click',function(){
mit1.classList.remove('ausblenden');
mit1.classList.add('einblenden');
mit.classList.add('ausblenden')
mit.classList.remove('einblenden')
})
document.getElementById('home').addEventListener('click',function(){
mit.classList.remove('ausblenden');
mit.classList.add('einblenden');
mit1.classList.add('ausblenden')
mit1.classList.remove('einblenden')
})
</script>
</body>
</html>