Ticker

6/recent/ticker-posts

MONKEY EXPRESSION FORM

Ai February 17, 2023
MONKEY EXPRESSION FORM
<!DOCTYPE html>
<!-- By Ali Aslan -->
<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">
    <title>Monkey Expression Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">

    <div class="emojis">
        <div class="normal emoji">🐵</div>
        <div class="closed emoji">🙈</div>
        <div class="open emoji">🙉</div>
        <div class="click emoji">🙊</div>
    </div>

    <div class="form">
        <label for="theEmail">Email </label>
        <input type="email" name="theEmail" id="email" placeholder="email@example.com" required>

        <label for="password">Password </label>
        <input type="password" name="password" id="password" placeholder="********" required>

        <button class="loginBtn" onmouseover="buttonHover()">Login</button>
    </div>

</div>

<script src="main.js"></script>
</body>
</html>
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #06c59c;
}

.wrapper {
    display: flex;
    flex-direction: column;
    background: azure;
    padding: 30px;
    border: 1px dotted #ccc;
    border-radius: 7px;
    width: 450px;
    box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);    
}


.emoji {
    font-size: 7rem;
    cursor: pointer;
    user-select: none;
}

.emojis {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.closed, .open, .normal, .click{
    display: none;
}


.active {
    display: block;
}

.deactive {
    display: none;
}


.wrapper .form{
    display: flex;
    flex-direction: column;
}


.form input{
    border: 1px dashed gray;
    border-radius: 5px;
    font-size: 16px;
    height: 40px;
    padding: 10px;
    margin-bottom: 10px;
    color: rgb(40, 40, 40);
    font-weight: 500;
    transition: all 0.4s;
}

  input:focus {
    background-color: #06c59c;
    color: #fff;
  }

  .form input::placeholder{
    color: #bfbfbf;
  }

  .form input:focus::placeholder{
    color: #06c59c;
  }

.form label{
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 10px;
}


.loginBtn {
    margin-top: 20px;
    width: 100%;
    height: 55px;
    border: none;
    outline: none;
    font-size: 18px;
    border-radius: 7px; 
    color: #fff;
    cursor: pointer;
    background: #06c59c;
    transition: 0.3s ease;
}

.loginBtn:hover{
    background: #1d9ffc;
  }
const normalFace = document.querySelector(".normal")
const closeFace = document.querySelector(".closed");
const openFace = document.querySelector(".open");
const clickFace = document.querySelector(".click");
const emailInput = document.querySelector("#email");
const passwordInput = document.querySelector("#password");
const loginButton = document.querySelector(".loginBtn")
const wrapper = document.querySelector(".wrapper");



window.addEventListener("load",() => {
    normalFace.classList.add("active");
})


emailInput.addEventListener("click", () => {
    openFace.classList.add("active");
    normalFace.classList.remove("active");
    closeFace.classList.remove("active");
    clickFace.classList.remove("active");
});


passwordInput.addEventListener("click", () => {
    closeFace.classList.add("active");
    normalFace.classList.remove("active");
    openFace.classList.remove("active");
    clickFace.classList.remove("active");


});


 function buttonHover(){
    clickFace.classList.add("active");
    normalFace.classList.remove("active");
    openFace.classList.remove("active");
    closeFace.classList.remove("active");
}
Ai

Posted by Ai

Post a Comment

0 Comments

Please do not enter any spam link in the comment box.