HTML – die neusten Beiträge

Verwandte Themen
Gojosatoru383
03.09.2022, 16:40
Mit Bildern

wie ist mein HTML Projekt?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

</style>

<body>

<H1>Willkommen auf meiner ersten Seite</H1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, minima rem maiores molestiae possimus sunt aperiam blanditiis. Veritatis impedit rerum, corrupti debitis veniam maxime deleniti, atque earum, aspernatur iure voluptate. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam tenetur ratione mollitia velit, quasi blanditiis ipsa amet magnam doloremque quam quod porro voluptatibus. Voluptate ipsa ratione maxime labore quo veniam?</p>

<input type="text" value=""> <input type="text" value="">

<button>login</button>

<h1>Was erwartet sie hier auf der seite?</h1>

<p>Auf dieser seite erhalten sie hilfe von unseren Fachleuten aus der pychologie <hr>wir arbeiten seit 30 Jahren mit unseren team und haben menschen aus der

Krise geholfen

</p>

<img src="/Users/alexander/Downloads/pexels-cottonbro-4101143.jpg" alt="pexels-cottonbro-4101143.jpg">

<p>in unserer 1 stunden Therapie versuchen wir auf den grund ihre schweren <br>depression zu finden</p>

<footer>

<hr>

<a class="mylink" href="#">Impressum</a>

<a class="mylink" href="#">Kontakt</a>

<a class="mylink" href="#">Datenschutz</a>

<a class="mylink" href="#">Über uns</a>

</footer>

</body>

</html>

Bild zum Beitrag
Computer, HTML
3 Antworten
JuliMax158
10.08.2022, 14:50

Login verbessern mit AJAX/PHP?

Ich habe ein Login gebaut. Jenen sollen wir nun ausschließlich mit AJAX verbessern. (Wir dürfen dabei nicht sowas wie JQUERY verwenden. Das wissen fehlt uns aber dafür an meisten. Vielleicht kann jemand mir dabei helfen mein Login umzubauen und zu verstehen was ich mache.

Mein Login-Quelltext:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=phptest', 'root', '');

if(isset($_GET['login'])) {
  $email = $_POST['Email'];
  $passwort = $_POST['Passwort'];

  $statement = $pdo->prepare("SELECT * FROM login WHERE Email = :Email");
  $result = $statement->execute(array('Email' => $email));
  $user = $statement->fetch();

  //Überprüfung des Passworts
  if ($user !== false && password_verify($passwort, $user['Passwort'])) {
    $_SESSION['userid'] = $user['ID'];
    die('Login erfolgreich. Weiter zu <a href="index.php?site=Startseite">internen Bereich</a>');
  } else {
    $errorMessage = "E-Mail oder Passwort war ungültig<br>";
  }

}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>

<?php
if(isset($errorMessage)) {
  echo $errorMessage;
}
?>

<form action="Loginseite.php?login=1" method="post">
  E-Mail:<br>
  <input type="email" size="40" maxlength="250" name="Email" required><br><br>

  Dein Passwort:<br>
  <input type="password" size="40" maxlength="250" name="Passwort" required><br>

  <input type="submit" value="Login">
</form>
</body>
</html>
Computer, HTML, programmieren, JavaScript, AJAX, PHP, Webdesign
3 Antworten
Master643
08.08.2022, 10:06

CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht: 

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so: 

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

PC, Computer, HTML, CSS, Webentwicklung, Keyframes
1 Antwort
HomosexualGod
19.07.2022, 13:41

HTML Buttons alignment?

Moin, hier eine kleine Seite die Nur 3 Knöpfe ausgibt. Habe jetzt leider das Problem, dass die Knöpfe nicht auf gleicher höhe sind, trotz des "vertical-align:top" bin noch sehr neu in html, hoffe ihr könnt helfen. LG

Nachtrag: Habe es mit Padding gelöst, vielleicht geht es trotzdem besser anders?

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <body>
        <style>
          .subscribe-button
          {
            background-color: rgb(204, 0, 0);
            color:white;
            border:none;
            border-radius:2px;
            cursor:pointer;
            margin-right:12px;
            transition:opacity 0.2s;
            padding-top:10px;
            padding-bottom:10px;
            padding-left:16px;
            padding-right:16px;
            vertical-align:top;
          }
          .subscribe-button:hover
          {
            opacity: 0.7;
          }
          .subscribe-button:active
          {
            opacity: 0.4;
          }
          .join-button:hover
          {
            background-color:
            rgb(37, 25, 207);
            color: white;
          }
          .join-button:active
          {
            opacity:0.7;
          }
          .join-button
          {
            background-color:white;
            color:rgb(37, 25, 207);
            border-color:rgb(37, 25, 207);
            border-style:solid;
            border-width:1px;
            border-radius:2px;
            cursor:pointer;
            margin-right:8px;
            transition:background-color 0.2s, color 0.2s, opacity 0.2s;
            padding-left:5px;
            padding-right:5px;
            padding-top:4px;
            padding-bottom:4px;
            vertical-align:top;
          }
          .tweet-button
          {
            color:white;
            background-color:rgb(67, 145, 235);
            height:36px;
            width:75px;
            border:none;
            border-radius:20px;
            font-weight:bold;
            font-size:15px;
            cursor:pointer;
            transition:box-shadow 0.15s;
            transition:opacity 0.2s;
            vertical-align:top;
          }
          .tweet-button:hover
          {
            box-shadow: 0px 5px 5px rgba(0,0,0,0.15);
          }
          .tweet-button:active
          {
            opacity:0.6;
          }
        </style>
        <button class="subscribe-button">
          SUBSCRIBE
        </button>
        <button class="join-button">
          JOIN my channel
        </button>
        <button class="tweet-button">
          Tweet
        </button>
        <btton
      </body>
  </head>
</html>
HTML, programmieren, HTML5
1 Antwort

Meistgelesene Beiträge zum Thema HTML
Mehr meistgelesene Fragen zu HTML