Click here to Skip to main content
15,797,721 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I'm following a tutorial on Animated Login Form Using HTML & CSS - YouTube[^]

at timestamp 5:55, I've noticed that "h2" and ".inputbox label", my code doesn't look like what's happening in the video.



<!DOCTYPE html>
<html lang="en">
    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin>
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    @import url('');

        font-family: 'Marcellus', serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        width: 100%;
        background: #00ff00;  
        position: relative;
        width: 400px;
        height: 450px;
        background: #3E2C51;
        display: flex;
        justify-content: center;
        align-items: center;      
        font-size: 2em;
        color: #FCFBFC;
        text-align: center;
        position: relative;
        border-bottom: 2px solid #FCFBFC;        
    .inputbox label {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        color: #FCFBFC;
        pointer-events: none; 

             <div class="form-box">
                <div class="form-value">
                    <div id="box"> 
                    <form method="post"> 
                        <div class="inputbox">
                            <ion-icon name="person-outline"></ion-icon>
                            <input id="text" type="text" name="lastname" required>
                            <label for="">Last Name:</label>
                        <div class="inputbox">
                            <ion-icon name="person"></ion-icon> 
                            <input id="text" type="text" name="firstname" required>
                            <label for="">First Name:</label>
                        <div class="inputbox">
                            <ion-icon name="mail-outline"></ion-icon>                      
                            <input type="email" id="email" name="email" required>
                            <label for="email">Email:</label>
                        <div class="inputbox">
                            <ion-icon name="lock-closed-outline"></ion-icon>  
                            <input id="password" type="password" name="password" required>
                            <label for="">Password:</label>
                        <div class="inputbox">
                            <ion-icon name="transgender-outline"></ion-icon>          
                                <select id="gender" name="gender" required>
                                    <option value="">Select Gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                    <option value="other">Other</option>
                            <label for="gender">Gender:</label>
                        <div class="inputbox">
                            <ion-icon name="call-outline"></ion-icon>
                            <input id="contact" type="number" id="contact" name="contact" required>
                            <label for="">Contact Number:</label>
                        <div class="inputbox">
                            <ion-icon name="home-outline"></ion-icon>   
                            <input d="address" type="text" id="address" name="address" required>
                            <label for="address">Address:</label>
                        <div class="inputbox">
                            <ion-icon name="paper-plane-outline"></ion-icon>
                                <select id="country" name="country" required>
                                    <option value ="country"> Select Country</option>
                                    <option value ="country"> Philippines</option>
                                    <option value ="country"> Japan</option>
                                    <option value ="country"> Korea</option>
                                    <option value ="country"> China</option>
                                    <option value ="country"> Malaysia</option>
                                    <option value ="country"> Singapore</option>
                            <label for="">Country:</label>
                        <div class="register">
                            <a href="signup.php">Create account</a>
                        <input id="button" type="submit" value="Sign in">
<script type="module" src=""></script>
<script nomodule src=""></script>

What I have tried:

I've tried rechecking but I can't find any mistakes. I'm still a beginner and I don't know how to get it work.
Andre Oosthuizen 17-Jun-23 7:07am    
You need to be specific in what you want your css to do, nobody is going to open unknown youtube videos and spend the time to see what someone else were trying to create. I ahve aslo noted that you reference your 'index'css' file but you also have your style code in your html document, these will clash witth each other and is probably the reason why yours is different. You then also need to go back in the video and compare your code as it seems that you made a mistake somewhere.
LukaN81 20-Jun-23 10:31am    
can you make screenshot of that what you expect (from video)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900