Un site Web avec connexion et inscription

Maxou83
Les bases HTML/CSS
Javascript

Bonjour je suis encore début dans le code et je suis en train de suivre une vidéo tutoriel où fait un site Web avec connexion et inscription (le lien de la vidéo:https://www.youtube.com/watch?v=p1GmFCGuVjw&t=905s&ab_channel=Codehal), donc je suis exactement ce que fait le mec mais je rencontre un problème, mon problème c'est que les transitions ne marchent pas (à 14:02 dans la vidéo) donc je voudrais bien comprendre pourquoi, pourtant j'ai bien tout vérifié mais je ne vois aucune faute apparente (je là/les vois peut-être pas) je vous montre mon code html:

<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h2 class="logo">Logo</h2>
<nav class="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<button class="btnLogin-popup">Login</button>
</nav>
</header>

<div class="wrapper">
    <span class="icon-close">
        <ion-icon name="close"></ion-icon>
    </span>

    <div class="form-box login">
        <h2>Login</h2>
        <form action="#">
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="mail"></ion-icon>
                </span>
                <input type="email" required>
                <label>Email</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="lock-closed"></ion-icon>
                </span>
                <input type="password" required>
                <label>Password</label>
            </div>
            <div class="remember-forgot">
                <label><input type="checkbox">
                    Remember me</label>
                <a href="#">Forgot Password</a>
            </div>
            <button type="submit" class="btn">Login</button>
            <div class="login-register">
                <p>Don't have an account ?<a href="#" class="register-link">Register</a></p>
            </div>
        </form>
    </div>

    <div class="form-box register">
        <h2>Registration</h2>
        <form action="#">
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="person"></ion-icon>
                </span>
                <input type="text" required>
                <label>Username</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="mail"></ion-icon>
                </span>
                <input type="email" required>
                <label>Email</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="lock-closed"></ion-icon>
                </span>
                <input type="password" required>
                <label>Password</label>
            </div>
            <div class="remember-forgot">
                <label><input type="checkbox">
                    I agree to the terms & conditions</label>
            </div>
            <button type="submit" class="btn">Register</button>
            <div class="login-register">
                <p>Already have an account ?<a href="#" class="login-link">Register</a></p>
            </div>
        </form>
    </div>
</div>

<script src="script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

</body>
</html>

et mon css:

" * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url(gris.png) no-repeat;
background-size: cover;
background-position: center;
}

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
}

.logo {
font-size: 2em;
color: #fff;
user-select: none;
}

.navigation a {
position: relative;
font-size: 1.1em;
color: #fff;
text-decoration: none;
font-weight: 500;
margin-left: 40px;
}

.navigation a::after {
contain: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 3px;
background: #fff;
border-radius: 5px;
transform-origin: right;
transform: scaleX(0);
transition: .5s;
}

.navigation a:hover::after {
transform: scaleX(1);
}

.navigation .btnLogin-popup {
width: 130px;
height: 50px;
background: transparent;
border: 2px solid #fff;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: #fff;
font-weight: 500;
margin-left: 40px;
}

.navigation .btnLogin-popup:hover {
background: #fff;
color: #162938;
}

.wrapper {
position: relative;
width: 400px;
height: 440px;
background: transparent;
border: 2px solid rgba(255, 255, 255, .5);
border-radius: 20px;
backdrop-filter: blur(20px);
box-shadow: 0 0 30px rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
/overflow: hidden;/
}

.wrapper .form-box {
width: 100%;
padding: 40px;
}

.wrapper .form-box.login {
display: none;
}

.wrapper .icon-close {
position: absolute;
top: 0;
right: 0;
width: 45px;
background: #162938;
font-size: 2em;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-bottom-left-radius: 20px;
cursor: pointer;
z-index: 1;
}

.form-box h2 {
font-size: 2em;
color: #162938;
text-align: center;
}

.input-box {
position: relative;
width: 100%;
height: 50px;
border-bottom: 2px solid #162938;
margin: 30px 0;
}

.input-box label {
position: absolute;
top: 50%;
left: 5px;
transform: translate(-50%);
font-size: 1em;
color: #162938;
font-weight: 500;
pointer-events: none;
transition: .5s;
}

.input-box label:focus~label,
.input-box label:valid~label {
top: -5px;
}

.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 1em;
color: #162938;
font-weight: 600;
padding: 0 35px 0 5px;
}

.input-box .icon {
position: absolute;
right: 8px;
font-size: 1.2em;
color: #162938;
line-height: 57px;
}

.remember-forgot {
font-size: .9em;
color: #162938;
font-weight: 500;
margin: -15px 0 15px;
display: flex;
justify-content: space-between;
}

.remember-forgot label input {
accent-color: #162938;
margin-right: 3px;
}

.remember-forgot a {
color: #162938;
text-decoration: none;
}

.remember-forgot a:hover {
text-decoration: underline;
}

.btn {
width: 100%;
height: 45px;
background: #162938;
border: none;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1em;
color: #fff;
font-weight: 500;
}

.login-register {
font-size: .9em;
color: #162938;
text-align: center;
font-weight: 500;
margin: 25px 0 10px;
}

.login-register p a {
color: #162938;
text-decoration: none;
font-weight: 600;
}

.login-register p a:hover {
text-decoration: underline;
}"

J'ai donc continué de faire le tutoriel malgré les transitions qui ne marchent pas,
Merci d'avance pour votre aide.

Aucune réponse