Um código por fastbug70

1739 fastbug70

Abrir no Editor Publique Seu Código

Recomendado

13 December 2024

Um código por creativefunction305

16 January 2025

Um código por mematixd3162

18 December 2025

Código HTML para incorporar o jogo Rooftop Snipers 2

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins&display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="wrapper">
  <div class="login_box">
    <div class="login-header">
      <span>Login</span>
    </div>

<div class="input_box">
      <input type="text" id="user" class="input-field" required>
      <label for="user" class="label">Username</label>
      <i class="bx bx-user icon"></i>
    </div>

<div class="input_box">
      <input type="password" id="pass" class="input-field" required>
      <label for="pass" class="label">Password</label>
      <i class="bx bx-lock-alt icon"></i>
    </div>

<div class="remember-forgot">
      <div class="remember-me">
        <input type="checkbox" id="remember">
        <label for="remember">Remember me</label>
      </div>

<div class="forgot">
        <a href="#">Forgot password?</a>
      </div>
    </div>

<div class="register">
      <span>Don't have an account? <a href="#">Register</a></span>
    </div>
  </div>
</div>
  
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --primary-color: #ffffff;
  --second-color: #d0d0d0;
  --black-color: #000000;
}

body {
  background-image: url("https://i.postimg.cc/qRk8Qk49/20008380-6221846.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a {
  text-decoration: none;
  color: var(--second-color);
}

a:hover {
  text-decoration: underline;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
}

.login_box {
  position: relative;
  width: 450px;
  backdrop-filter: blur(25px);
  border: 2px solid var(--primary-color);
  border-radius: 15px;
  padding: 7.5em 2.5em 4em 2.5em;
  color: var(--second-color);
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}

.login-header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  width: 140px;
  height: 70px;
  border-radius: 0 0 20px 20px;
}

.login-header span {
  font-size: 30px;
  color: var(--black-color);
}

.login-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  border-top-right-radius: 50%;
  background: transparent;
  box-shadow: 15px 0 0 0 var(--primary-color);
}

.login-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: -30px;
  width: 30px;
  height: 30px;
  border-top-left-radius: 50%;
  background: transparent;
  box-shadow: -15px 0 0 0 var(--primary-color); 
}

.input_box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.input-field {
  width: 100%;
  height: 55px;
  font-size: 16px;
  background: transparent;
  color: var(--second-color);
  padding-inline: 20px 50px;
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  outline: none;
}

#user {
  margin-bottom: 10px;
}

.label {
  position: absolute;
  top: 15px;
  left: 20px;
  transition: 0.2s;
}

.input-field:focus ~ .label,
.input-field:valid .label {

position: absolute;
  top: -10px;
  left: 20px;
  font-size: 14px;
  background-color: var(--primary-color);
  border-radius: 30px;
  color: var(--black-color);
  padding: 0 10px;
}

.icon {
  position: absolute;
  top: 18px;
  right: 25px;
  font-size: 20px;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

.input-submit {
  width: 100%;
  height: 50px;
  background: #ececec;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
}

.input-submit:hover {
  background: var(--second-color);
}

.register {
  text-align: center;
}

.register a {
  font-weight: 500;
}

@media only screen and (max-width: 564px) {
  .wrapper {
    padding: 20px;
  }

.login_box {
    padding: 7.5em 1.5em 4em 1.5em;
  }
}

Recomendado

Um código por creativefunction305

Um código por mematixd3162

Código HTML para incorporar o jogo Rooftop Snipers 2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS