Scribd
Upload
3 views

Document (5) (3)

The document is an HTML template for a website called FormaTech, which offers IT training courses. It includes a welcome section with information about the courses and an authentication section for users to log in or register. The layout is styled with CSS for a clean and modern appearance, featuring a responsive design for various devices.

Uploaded by

mbeteadoumn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Document (5) (3)

The document is an HTML template for a website called FormaTech, which offers IT training courses. It includes a welcome section with information about the courses and an authentication section for users to log in or register. The layout is styled with CSS for a clean and modern appearance, featuring a responsive design for various devices.

Uploaded by

mbeteadoumn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

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


scale=1.0">

<title>FormaTech - Formations en Informatique</title>

<link href="https://fonts.googleapis.com/css?
family=Baskerville+Old+Face" rel="stylesheet">

<style>

body {

font-family: 'Baskerville Old Face', serif;

margin: 0;

padding: 0;

background-color: #f5f5f5;

color: #333;

.auth-container {

display: flex;

height: 100vh;

.welcome-section {

flex: 1;

background: linear-gradient(135deg, #1e3c72, #2a5298);

color: white;

display: flex;

flex-direction: column;

justify-content: center;
padding: 0 5%;

.auth-section {

flex: 1;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: white;

.auth-form {

width: 70%;

.form-title {

font-size: 2.5rem;

margin-bottom: 2rem;

color: #1e3c72;

.form-group {

margin-bottom: 1.5rem;

input {

width: 100%;

padding: 12px;
border: 1px solid #ddd;

border-radius: 4px;

font-family: 'Baskerville Old Face', serif;

font-size: 1rem;

button {

width: 100%;

padding: 12px;

background-color: #1e3c72;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

font-family: 'Baskerville Old Face', serif;

font-size: 1rem;

transition: background-color 0.3s;

button:hover {

background-color: #2a5298;

.auth-toggle {

margin-top: 1rem;

text-align: center;

.auth-toggle a {
color: #1e3c72;

text-decoration: none;

font-weight: bold;

</style>

</head>

<body>

<div class="auth-container">

<div class="welcome-section">

<h1 style="font-size: 3.5rem; margin-bottom:


1rem;">FormaTech</h1>

<h2 style="font-size: 2rem; margin-bottom: 2rem;">L'excellence


en formations informatiques</h2>

<p style="font-size: 1.2rem; line-height: 1.6;">

Maîtrisez les compétences les plus demandées en informatique


grâce à nos formations complètes et adaptées à tous les niveaux.

</p>

</div>

<div class="auth-section">

<div class="auth-form" id="login-form">

<h2 class="form-title">Connexion</h2>

<div class="form-group">

<input type="email" placeholder="Adresse email" required>

</div>

<div class="form-group">

<input type="password" placeholder="Mot de passe"


required>

</div>

<button type="submit">Se connecter</button>


<div class="auth-toggle">

<p>Pas encore inscrit? <a href="#"


onclick="showRegister()">Créer un compte</a></p>

</div>

</div>

<div class="auth-form" id="register-form" style="display: none;">

<h2 class="form-title">Inscription</h2>

<div class="form-group">

<input type="text" placeholder="Nom complet" required>

</div>

<div class="form-group">

<input type="email" placeholder="Adresse email" required>

</div>

<div class="form-group">

<input type="password" placeholder="Mot de passe"


required>

</div>

<div class="form-group">

<input type="password" placeholder="Confirmer le mot de


passe" required>

</div>

<button type="submit">S'inscrire</button>

<div class="auth-toggle">

<p>Déjà inscrit? <a href="#" onclick="showLogin()">Se


connecter</a></p>

</div>

</div>

</div>

</div>
<script>

function showRegister() {

document.getElementById('login-form').style.display = 'none';

document.getElementById('register-form').style.display = 'block';

function showLogin() {

document.getElementById('register-form').style.display = 'none';

document.getElementById('login-form').style.display = 'block';

</script>

</body>

</html>

You might also like