Positionieren einer Kopfzeile unter einem linearen Farbverlauf

Anonymous · Post by **Anonymous** » 19 Nov 2025, 07:10

Okay, ich lerne gerade HTML und CSS und bin heute Nachmittag auf ein kleines Problem gestoßen.
Ich habe über drei Stunden lang so hart versucht, diesen Code zu reparieren, und er liefert mir immer noch die gleiche Ausgabe. Nach dem letzten div-Schließtag im HTML-Dokument habe ich versucht, einen Header und ein neues h1-Element zu erstellen, aber das Problem besteht darin, dass es im violetten Hintergrund im Hintergrund mit Farbverlauf erscheint, was ich nicht möchte. Ich habe verschiedene Mittel und Wege ausprobiert, um das Problem zu beheben, aber am Ende erhalte ich immer noch das gleiche Ergebnis.

Code: Select all

`



HomePage

[*]




[list]
[url=#]Home[/url]
[*][url=#]Join Us[/url]
[*][url=#]Sign In[/url]
[*][url=#]Contact Us[/url]
[*][url=javascript:void(0)]&#9776;[/url]
[/list]





Hi Sofie
Join Our Newsletter



First Name

Email Address








https://www.youtube.com/embed/E6PTwrT5gFM






Lorem Ipsum



function dropdownMenu() {
var x = document.getElementById("dropdownClick");
/*#####Change up-nav to up.nav.respond#####*/
if (x.className === "up-nav") {
x.className += "  respond";
}
else {
x.className = "up-nav"
}
}



`

And this is the CSS for it
`/*############ Defaults ##############*/
nav, header, footer {
display: block;
}

body {
margin: 0;
line-height: 1;
}

.container {
width: 100%;
margin:auto;
padding-top: 5%;
padding-bottom: 5%;
}

#section-gradient {
background: linear-gradient(180deg,#7C4CCF 0%, #3F2B96 100%);
}

h1.big {
color: #fff;
font-size: 56px;
margin:0;
margin-left: 20px;
line-height: 75px;
}

input[type="text"] {
width: 200px;
min-width: 100px;
font-size: 25px;
padding: 5px;
margin-left: 20px;
border-radius: 7px;

}

input[type="email"] {
width: 400px;
font-size: 25px;
min-width: 200px;
padding: 5px;
margin-left: 20px;
border-radius: 7px;
}

form h2 {
color: #fff;
margin-left: 20px;
}

.row {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}

.row::after {
display: table;
clear: both;
content: "";
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/*############# Nav Bar Default ###############*/
nav {
width: 100%;
margin: 0;
}

/*############# Nav Bar Links Arrangement ##############*/
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}

/* Float this to the left*/
ul.up-nav li {
float: left;
}

/* Float this to the right*/
ul.up-nav li.up-nav-right {
float: right;
}

ul.up-nav li a {
display: block;
text-decoration: none;
min-height: 16px;
padding: 14px;
text-transform: uppercase;
text-align: center;
color: #666;
}

/*############## Hover Effect On Links In Top Nav#################*/
ul.up-nav li a:hover {
background-color: #7C4CCF;
color: #fff;
}

/*############ Making The Trigram Dissapear In Desktop Mode ###############*/
ul.up-nav li.dropdownIcon {
display: none;
}

/*########Making The Trigram Appear In Mobile Mode Using A Media Query#########*/
@media screen and (max-width:680px) {
ul.up-nav li:not(:nth-child(1)) {
display: none;
}
ul.up-nav li.dropdownIcon {
display: block;
float: right;
}
ul.up-nav.respond li.dropdownIcon {
position: absolute;
top: 0;
right: 0;
}
ul.up-nav.respond {
position: relative;
}
ul.up-nav.respond li {
display: inline;
float: none;
}
ul.up-nav.respond li a {
display: block;
text-align: left;
}

.col-6 {
margin: 30px;
}
input[type="text"] {
width: 350px;
}

input[type="text"] {
width: 400px;
}

.videoEmbed iframe {
position: relative;
width: 100%;
margin: 0;
overflow: hidden;
}
}`

Positionieren einer Kopfzeile unter einem linearen Farbverlauf

Positionieren einer Kopfzeile unter einem linearen Farbverlauf ⇐ CSS

Quick Reply