Heim > Artikel > Web-Frontend > Tageswebsites für Tage

Tageswebsites für Tage

WBOYOriginal: 2024-08-08 09:53:32876Durchsuche

Day Websites for Days

Nach 5 Tagen progressivem HTML-Lernen bin ich sehr froh, dass wir uns in der letzten Phase des Ganzen befinden, dem projektbasierten Teil dieses Kurses, in dem ich nur Websites erstelle und mich selbst herausfordern...

Eine einfache Benutzer-Anmelde- und Anmeldeseite

Link zur Projektbenutzerseite

HTML für die Anmeldeseite-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Signup Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h2>User Login Page</h2>
    </header>
    <section>
      <main style="text-align: center;">
      <br/>
      <br/>
      <b> <h3> Enter Login Details </h3> <br/>
      </main>
      <article  class="container">
      <br/>
      <form>
      <b> <label for="email"> Email </label> <b> <br/>
      <input type="email" id="email" name="email"> <br/>
      <br/>
      <b> <label for="password"> Password </label> </b> <br/>
      <input type="password" id="password" name="password"> <br/>
      <br/>
      <button>Submit</button> <br/>
      </form> 
      <br/>
      <p>
      Don't Have An Account? <a href="signup.html">Sign Up</a>
      </p>
      </article>
    </section>
    <section>

    </section>
  </body>
</html>

HTML für die Anmeldeseite-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Signup Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h2>User Signup Page</h2>
    </header>
    <section>
      <main style="text-align: center;">
      <br/>
      <br/>
      <b> <h3> Enter Signup Details </h3> <br/>
      </main>
      <article  class="container">
      <br/>
      <form>
      <b> <label for="fname"> First Name </label><br/> 
      <input type="text" id="fname" name="fname"><br/>  
      <br/> 
      <b> <label for="lname"> Last Name </label> <br/>   
      <input type="text" id="lname" name="lname"> <br/>
      <br/> 
      <b> <label for="email"> Email </label> <b> <br/>
      <input type="email" id="email" name="email"> <br/>
      <br/>
      <b> <label for="password"> Password </label> </b> <br/>
      <input type="password" id="password" name="password"> <br/>
      <br/>
      <button>Submit</button> <br/>
      </form> 
      <br/>
      <p>
      Already Have An Account? <a href="index.html">Sign In</a>
      </p>
      </article>
    </section>
    <section>

    </section>
  </body>
</html>

CSS-Stile-

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Body styles */
body {
  background-color: antiquewhite;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  flex-direction: column;
}

/* Header styles */
header {
  text-align: center;
  margin-bottom: 20px; /* Add some space between the header and the content */
}

/* Article styles */
article {
  border: 1px solid black;
  padding: 20px; /* Add some padding inside the border */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Tahoma, sans-serif;
  background-color: antiquewhite; /* Add background color for better visibility */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow for better look */
}

/* h3 styles */
h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
}

Einfache interaktive Website zur Benutzeranmeldung und -registrierung...

Das obige ist der detaillierte Inhalt vonTageswebsites für Tage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html for this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zähmen Sie Ihre asynchrone Welt mit RxJSNächster Artikel：Zähmen Sie Ihre asynchrone Welt mit RxJS

In Verbindung stehende Artikel

Mehr sehen