HTML Como fazer um "campo flutuante" em um site

[Mateus Pozzebon]

Olá! Eu estou iniciando agora na programação web e gostaria de saber como faço para criar, não sei como dizer, um "campo" que fica no meio da tela, igual esse campo da imagem que fixei abaixo, que tem as informações para login (não limitado só no centro, mas que eu possa pôr em qualquer lugar da tela).

 

 

[Lord_Dracon]

Se você está iniciando você devia começar do básico, como um curso/apostila de HTML com CSS.

 

Essa tela aí envolve algumas tecnologias como o Boostrap que seria bom você ter algum conhecimento prévio de HTML/CSS e até de Javascript para saber o que está fazendo.

[DiF]

@Mateus Pozzebon Bom para isso, você pode pesquisar sobre como transformar um elemento em draggable.

 

Basicamente você vai usar o javascript para determinar a posição em relação a tela do navegador...

É um pouco complicado se você não entender um pouco de javascript.

 

Vou deixar um exemplo para você estudar.  Não copie. Apenas use para estudar, assim você aprende.

HTML:

 <div id="draggable">
   <div class="login-form">
        <h2 class="poppins-bold">LOGIN CUSTOMIZADO</h2>
        <form action="#">
            <div class="input-group">
                <i class="fa fa-user"></i>
                <input type="text" placeholder="Email ID" required>
            </div>
            <div class="input-group">
                <i class="fa fa-lock"></i>
                <input type="password" placeholder="Senha" required>
            </div>
            <div class="remember-forgot">
                <label>
                    <input type="checkbox"> Lembrar de mim
                </label>
                <a href="#">Esqueci a senha</a>
            </div>
            <button type="submit">LOGIN</button>
        </form>
    </div>
 </div>

 

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body{
  background: url(https://static.vecteezy.com/system/resources/previews/002/650/288/non_2x/blue-gradient-geometrical-abstract-free-vector.jpg);
  
} 
 
 #draggable {
            width: 400px;
            
           
            position: absolute;
            top: 50px;
            left: 50px;
            cursor: move;
        }
        
        .login-form {
            background: rgba(209, 224, 240, 0.61);
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: 400px;
            
        }

        .login-form h2 {
            margin-bottom: 20px;
            text-align: center;
            line-height: 100px;
            background-color: rgba(31, 219, 53, 0.61);
            height: 100px;
            position: relative;
            top:-40px;
            left: -20px;
            width: 110%;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            user-select: none;
        }

        .input-group {
            position: relative;
            margin-bottom: 15px;
        }

        .input-group input {
            width: 90%;
            padding: 10px 10px 10px 30px;
            /*border-bottom: 1px solid #ccc;*/
            border: 0;
            outline: 0;
            border-bottom: 2px solid #000;
            border-radius: 4px;
            background: transparent;
            color: #000;
        }
        
        .input-group input::placeholder {
          color: #000;
          opacity: 1; /* Firefox */
        }

        .input-group .fa {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #000;
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .remember-forgot label {
            display: flex;
            align-items: center;
        }

        .remember-forgot input {
            margin-right: 5px;
        }

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

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

        .login-form button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background: #007bff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .login-form button:hover {
            background: #0056b3;
        }

 

Javascript:

const draggable = document.getElementById('draggable');

        let isDragging = false;
        let offsetX, offsetY;

        draggable.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - draggable.getBoundingClientRect().left;
            offsetY = e.clientY - draggable.getBoundingClientRect().top;
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                let newLeft = e.clientX - offsetX;
                let newTop = e.clientY - offsetY;

                // Ensure the draggable element stays within the bounds of the window
                const minLeft = 0;
                const minTop = 0;
                const maxLeft = window.innerWidth - draggable.offsetWidth;
                const maxTop = window.innerHeight - draggable.offsetHeight;

                if (newLeft < minLeft) newLeft = minLeft;
                if (newTop < minTop) newTop = minTop;
                if (newLeft > maxLeft) newLeft = maxLeft;
                if (newTop > maxTop) newTop = maxTop;

                draggable.style.left = newLeft + 'px';
                draggable.style.top = newTop + 'px';
            }
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

 

Exemplo online: https://jsfiddle.net/dife/dgrpomz5/2/

 

Lembrando, este é apenas um mero exemplo. Não copie. Apenas para fins de estudo.