HTML code funktioniert nicht ganz?

Hallo, wir haben ein forum eröffnet und soweit klappt alles ganz gut. Unser html codes haben wir von der Firma der Webseite und anderen Forums dieser Firma. Leider funktioniert er nur so halb. Er sollte eig das online icon löschen und durch ein eigenes ersetzten, doch leider löscht es das eigentliche logo nicht sondern macht nur unseres noch dazu. Und wofür braucht man zwei logos? wir wollen das alte logo weg haben und unseres als neues hin machen. Was ist falsch an dem code oder was fehlt?

das ist der html code:

.memberDetails span a img[src="http://www.yooco-static.de/templates/core/images/ico_online.gif"] { display: none; }

.memberDetails span a[href="members.html?mode=online"]:before { content: urlhttp://URL DER GRAFIK); }

.memberDetails span a img { margin-top: 5px; }

.memberDetails a[title="Online!"] {

display: none;

}

1 Antwort

Franky12345678

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

29.11.2024, 05:19

Was du da gepostet hast, ist CSS, nicht HTML :)).

HTML = Inhalt in strukturierter Form

CSS = Wie dieses HTML grafisch dargestellt werden soll

Dein Codeschnipsel soll wohl zwei Dinge tun:

Das vorhandene Element unsichtbar machen
ein neues Pseudo-Element einfügen, das die gewünschte Grafik enthält

Warum das nicht funktioniert, ist ohne das dazugehörige HTML ein reines Ratespiel, weil es daran liegen wird, dass dein Codeschnipsel nicht 100%ig zum vorhandenen HTML und CSS passend ist oder du es an falscher Stelle einfügst.

Daher:

Füge den Code einfach mal ganz am Ende der CSS-Datei ein, in der das ursprüngliche Element gestaltet worden ist oder mache den Code in eine komplett neue CSS-Datei ein, die du so einbindest, dass sie als letztes geladen wird.

Oder du änderst einfach das HTML-Template an der entsprechenden Stelle, anstatt mit CSS kosmetisch rumzupflastern.

Wenn das alles nicht funktioniert: Bitte den Link zur Unterseite, wo du die Änderung haben möchtest. :)

Woher ich das weiß:Hobby – Ich beschäftige mich schon mehrere Jahre damit.

EinAlexander

29.11.2024, 06:56

CSS = Wie dieses HTML grafisch dargestellt werden soll

Eben nicht nur grafisch sondern auch akustisch.

Sternenstaub484

Beitragsersteller

29.11.2024, 05:36

hey danke für die Antwort. das von kayleeplaters hat schon funktioniert :)

Ähnliche Beiträge

Warum verschiebt <!Doctype html> meine img's?

Wenn ich meine HTML- Seite erstelle, dann passen die Bilder, doch wenn ich <!Doctype html> in meinen Code mit aufnehme, dann verschieben sich alle img-Tags um 5px nach oben.

...zum Beitrag

Mit Pfeil zu nächster Seite: Wie lautet der Code dafür?

Ich hab jetzt einen Pfeil in meiner HTML-Seite und möchte den jetzt gerne mit einer anderen HTML-Seite verbinden. Wie ist denn der Code dafür?

Mein HTML-Code:

<a class="pfeil" onclick="umschalten(1)"><span>&#10095;</span></a>

Mein CSS-Code dazu:

.pfeil {
  position: relative;
  top: 0;
  bottom: 0;
  font-size: 50px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2%;
  color: red (255, 255, 255, 0.5);
  user-select: none;
  cursor: pointer;
}

...zum Beitrag

Wie kann sich durch Javascript/HTML der Bereich A beim Aufklappen von Bereich B automatisch schließen, siehe CodeBSP?

Von Seitenanfang bis Head-Ende habe ich folgendes stehen, die spitzen klammern wurden im CodeBSP nicht angezeigt, stattdessen solch ein unverständlicher "& l t ;"-Quatschsinn:

html
    head
        title
            Meine Geichte-Bibliothek
        /title

        script type="text/javascript"
            function toggle(id){
                var e = document.getElementById(id);

                if (e.style.display == "none"){
                  e.style.display = "";
                } else {
                  e.style.display = "none";
                }
            }
        /script
    /head

Und folgendes CodeSP habe ich im BODY stehen:

a href="javascript:toggle('f0100')" I. Gedichte von Goethe /a  div id="f0100" style="display: none"

a href="javascript:toggle('f0101')" 01. Epirrhema /a  div id="f0101" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0102')" 02. Gefunden /a  div id="f0102" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0103')" 03. Erlkönig /a  div id="f0103" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0104')" 04. Das Göttliche /a  div id="f0104" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0105')" 05. Heydenröslein /a  div id="f0105" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0106')" 06. Osterspaziergang /a  div id="f0106" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0107')" 07. Prometheus /a  div id="f0107" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0108')" 08. Selige Sehnsucht /a  div id="f0108" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0109')" 09. Verschwiegenheit /a  div id="f0109" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0110')" 10. Willkommen und Abschied /a  div id="f0110" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0111')" 11. Zauberlehrling /a  div id="f0111" style="display: none" Text folgt /div  br

/div

Viele aufklappbare Gedichte stehen unter einem aufklappbaren Titel, dem Namen des jeweiligen Verfassers, wie Goethe, Schiller, Lessing usw. Wie kann ich es bewerkstelligen, dass sich beim Öffnen von Schiller der Bereich Goethe automatisch schließt, ohne auf irendwelcherlei externe .js-Dateien verlinken zu müssen? Ich gestehe, dass ich gewissermaßen, zumindest was JS-Belange angeht, eher ein ScriptKiddie bin. Ich habe auch einiges über Hover, also Drübergleiten mit Maus gelesen, aber um euch gegenüber ehrlich zu sein nur Bahnhof und Bratkartoffeln verstanden :(

Das habe ich denn nun davon, dass unser Informatik-Lehrer damals nur immer über Ufos und Verschörungstheorien fabulierte, anstatt uns handfesten Unterrichtsstoff über Javascript, jQuery und PHP einzuprügeln .. :// .. sniff

Falls mir jemand leicht erklärlich / verständlich da bei diesem Code helfen könnte, würde mich das wirklich S E H R freuen.

Liebe Grüße und ein schönes Wochenende.

@-}-}--- Matthias :)

...zum Beitrag

Wie kann man den Code erst aktivieren, wenn er weiter unten steht?

Bei meiner Testseite habe ich Code im HTML & JS Format, der das Bild ab einem gewissen Scroll wert ändert, aber dieser Code befindet sich nicht am Anfang der Seite sondern weiter unten. Wenn ich bereits am Anfang der Seite scrolle, werden die Werte gezählt und wenn ich dann zum Code gelange, wird bereits das Endbild angezeigt. Wie kann ich sicherstellen, dass der Effekt erst eintritt wenn ich zum relevanten Abschnitt scrolle?

Html:

  <a href="#!" class="brand-logo">
    <img src="http://placekitten.com/200/200">
  </a>

Javascript:

$(document).ready(function() {
    $(window).on("scroll", function() {
      var scrollPos = $(this).scrollTop();
      if (scrollPos >= 1000) {
        // Bild - 1
        $(".brand-logo img").attr("src", "http://placekitten.com/300/300");
      } else if (scrollPos >= 500) {
        // Bild - 2
        $(".brand-logo img").attr("src", "http://placekitten.com/400/400");
      } else {
        // Standard - Bild
        $(".brand-logo img").attr("src", "http://placekitten.com/200/200");
      }
    });
  });

...zum Beitrag

Warum wirft htmlspecialchars einen Syntaxfehler in meinem PHP-Webshop-Code?

<?php
include 'db.php';

$query = "SELECT * FROM products";
$result = $conn->query($query);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Webshop</title>
    <style>
        /* Basic styling for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Styling for the main heading */
        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        /* Container for all products */
        .products-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        /* Individual product card */
        .product-card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 200px;
            text-align: center;
            padding: 15px;
            transition: transform 0.2s;
        }

        .product-card:hover {
            transform: scale(1.05);
        }

        /* Styling for the product image */
        .product-card img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: opacity 0.2s;
        }

        .product-card img:hover {
            opacity: 0.8;
        }

        /* Styling for product name */
        .product-card h2 {
            font-size: 1.2em;
            color: #333;
            margin: 10px 0;
        }

        /* Styling for product description and price */
        .product-card p {
            color: #666;
            font-size: 0.9em;
            margin: 5px 0;
        }

        .product-card .price {
            font-weight: bold;
            color: #2a9d8f;
        }

        /* Link styling */
        a {
            text-decoration: none;
            color: inherit;
        }
    </style>
</head>
<body>
    <h1>Products</h1>
    <div class="products-container">
        <?php while ($product = $result->fetch_assoc()): ?>
            <div class="product-card">
                <a href="product.php?id_product=<?= htmlspecialchars( $product['id_product']) ?>">
                    <h2><?= htmlspecialchars( $product['produktname']) ?></h2>
                    <!-- Make the image clickable to open the product details page -->
                    <img src="<?= htmlspecialchars($product['image_url']) ?>" alt="<?= htmlspecialchars($product['produktname']) ?>">
              
                <p><?= htmlspecialchars($product['produktbeschreibung']) ?></p>
                <p class="price">Price: €<?= htmlspecialchars($product['preis_pro_prod']) ?></p>
                  </a>
            </div>
        <?php endwhile; ?>
    </div>
</body>
</html>

...zum Beitrag

Slideshow programmieren HTML/CSS/JS?

Hallo zusammen,

ich hoffe hier mal auf schnelle Hilfe und zwar habe ich folgendes Problem,

ich habe eine Slide-Show eingefügt, leider funktioniert sie nicht so ganz. Wenn ich auf die Webseite gehe, werden mir nur die Buttons angezeigt, ohne die Bilder - erst wenn ich auf das Button klicke, kommt die Slideshow bzw. die Bilder zustande.

Kann mir jemand sagen wo das Problem ist ? Chatgpt konnte dabei auch nicht helfen.

Ich schick euch mal den Abschnitt:

HTML:

<article id="ÜberschriftAnfang">
  <h1>Michael Jackson - The King of Pop</h1>
  
  <!-- Slideshow Container -->
  <div class="slideshow-container">


    <!-- Slide 1 -->
    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="Background picture.jpg" style="width:100%" alt="Background Image">
    </div>


    <!-- Slide 2 -->
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="papers.co.jpg" style="width:100%" alt="Image 2">
    </div>


    <!-- Slide 3 -->
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="5m6XCzF.jpg" style="width:100%" alt="Image 3">
    </div>


    <!-- Navigation Arrows -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>


  </div>


  <!-- Dots Navigation -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</article>

CSS: @font-face {
  font-family: myfirstfont;
  src: url("static/EduAUVICWANTPre-Regular.ttf");
}


/*html*/
html {
 scroll-behavior: smooth;
}


/*body*/


body { 
 
    max-width: 1200px; 
    margin: 0 auto;     
    background-color: #9b0000;
}


/*<header> <nav>*/


.a_href_button1, 
.a_href_button2 {
 
  background-color: grey;
  border: 2.5px solid black;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


/*Oberste Überschrift und Bilder*/


h1 { 
  
  /*Google Font noch einfügen*/
  font-family: myfirstfont;
  font-size: 75px;
  text-align: center;
}


/* hier beginnt es mit dem Slider Styling*/


/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


.active, .dot:hover {
  background-color: #717171;
}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}


@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/* Slideshow images default styling */
.mySlides {
  display: none; /* Bilder sind standardmäßig unsichtbar */
}


.mySlides.active {
  display: block; /* Nur das aktive Bild wird angezeigt */
}


/*html*/
html {
  scroll-behavior: smooth;
}


/*body*/


body { 
  max-width: 1200px; 
  margin: 0 auto;     
  background-color: #9b0000;
}


/*<header> <nav>*/


.a_href_button1, 
.a_href_button2 {
  background-color: grey;
  border: 2.5px solid black;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


/*Oberste Überschrift und Bilder*/


h1 { 
  font-family: myfirstfont;
  font-size: 75px;
  text-align: center;
}




#Hintergrundsbild img {
  object-fit: cover; /*Bild wird nicht verzehrt dargestellt*/  
  border-radius: 5px; /* Abgerundete Ecken für die Bilder */  
  display: block; 
  margin: 0;       
  padding: 0;      
}


/* Erste Slide */
#First_Slide {
  display: flex;
  justify-content: center;   
  align-items: center;        
  flex-wrap: wrap;            
  gap: 10px;                   
  margin: 20px;           
}

und JS schicke ich mal als Kommentar, da dies zu lang wäre

...zum Beitrag

HTML Code auf Webseite anzeigen?

Wie kann ich auf einer Website HTML-Code anzeigen lassen, so dass sich Besucher diesen kopieren können?
Also, z.B. einen Code für ein Banner.

Ich weiss dass man das mit dem Tag "code" machen kann. Den Code innerhalb des Tags muss man aber irgendwie anders formatieren, so in etwa

&lt;a href=&quot;http://www.beispiel.de&quot;

Gibt es einen Online-Generator oder so was in der Richtung? DANKE°!

...zum Beitrag

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zum Beitrag

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zum Beitrag

CSS Media query geht nicht richtig?

hallo,ich habe folgendes Problem: Wenn ich bei meiner Website mit CSS per Media query eine responsive Website machen möchte, geht das nicht richtig. Ich muss bei max- und min-width mindestens 1000px eintragen, damit es funktioniert. Kann mir bitte jemand helfen?

...zum Beitrag

css code für profilbilder?

weiss jemand was an diesem code falsch ist, da er nicht funktioniert! Er soll die Ränder vom Profilbild rund machen, wenn man mit der maus rüber fährt.

der code ist: /* Grundlegendes Styling für das Profilbild */

.profile-container {

display: inline-block;

overflow: hidden; /* Verhindert, dass das Bild über den Container hinausgeht */

}

.profile-img {

width: 100px; /* Standardgröße des Profilbildes */

height: 100px;

object-fit: cover; /* Bild so skalieren, dass es den gesamten Container ausfüllt */

border-radius: 10px; /* Anfangs leicht abgerundete Ecken */

transition: border-radius 0.3s ease, transform 0.3s ease; /* Weicher Übergang für den Hover-Effekt */

}

/* Effekt bei Hover */

.profile-img:hover {

border-radius: 50%; /* Vollständig runde Ecken beim Hover */

transform: scale(1.05); /* Leichtes Vergrößern des Bildes */

}

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen