CSS Farbgestaltung in Flexbox 1

Hallo, habe mich ein bisschen in CSS Flexbox rein gewurstelt und bin nun bei folgendem Design: MyPhone 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. LG Matthias

Der hier verwendete Code

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

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!