Notificatiob
Notificatiob
Caption
Find job vacancies
icon inside input field css

icon inside input field css

 html code:

<!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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="search">
            <i class="fa-solid fa-search"></i>
            <input type="text" class="input">
        </div>
    </div>
</body>
</html>


css code:

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

body {
    background-color: rgb(171, 103, 235);
    display: flex;
    justify-content: center;
}

.input {
    width: 60vh;
    height: 8vh;
    border-radius: 10vh;
    padding-left: 7vh;
    font-size: 3.5vh;
    border: none;
    outline: none;
}

.search {
    margin-top: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa-search {
    position: relative;
    left: 6vh;
}

css typewriter animation

css typewriter animation

 html code:

<!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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="type-writter">
        <h1>Hello World. Im <span class="clr">LAZCODER</span> .....</h1>
    </div>
</body>
</html>



css code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

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

body {
    background-color: black;
    display: flex;
    justify-content: center;
}

.type-writter {
    overflow: hidden;
    border-right: 8px solid #f60;
    white-space: nowrap;
    color: white;
    letter-spacing: 1.2vh;
    animation: type 6s steps(40, end), blink-t 0.5s step-end infinite;
    animation-iteration-count: infinite;
    margin-top: 30vh;
    font-family: 'Poppins', sans-serif;
}

@keyframes type {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-t {
    0% {
        border-color: transparent;
    }
    50% {
        border-color: #f60;
    }
    100% {
        border-color: transparent;
    }
}

.clr {
    color: #f60;
}

change backround color using jquery

change backround color using jquery

 html code:
<!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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="div1">
            Enter your hash:
        </div>
        <div class="div2">
            <input type="text" id="clr" class="input">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

css code:

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

body{
    background-color: black;
    display: flex;
    justify-content: center;
}

.div1{
    margin-top: 10px;
}
.container{
    color: white;
    border: 2px solid white;
    width: 50%;
    height: 30vh;
    display: grid;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20vh;
}
.input{
    height: 10vh;
    font-size: 4vh;
    border-radius: 10px;
}

jquery code:

$(document).ready(function() {
    $('#clr').keyup(function() {
        $('body').css("background-color", this.value);
    });
});

javascript digital clock project

javascript digital clock project

 html code:

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="box" id="hour">00</div>
        <div class="box" id="min">00</div>
        <div class="box" id="sec">00</div>
    </div>
    <script src="script.js"></script>
</body>
</html>


css code:

body {
    background-color: black;
    display: flex;
    justify-content: center;
}

.container {
    width: 80%;
    height: 25vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 8px solid yellowgreen;
    margin-top: 20vh;
}

.box {
    width: 20vh;
    height: 20vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12vh;
}


javascript code :


var sec=document.getElementById("sec");
var min=document.getElementById("min");
var hour=document.getElementById("hour");


var myfunc= setInterval(function(){
    timer1();
},1000);

function timer1(){
    var d=new Date();
    sec.innerHTML=d.getSeconds();
    min.innerHTML=d.getMinutes();
    hour.innerHTML=d.getHours();
}

css battery charging animation

css battery charging animation

html code: 

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="top-head"></div>
        <div class="battery">
            <i class="fa-solid fa-bolt-lightning fa-5x"></i>
            <div class="batt-back">
                
            </div>
        </div>
    </div>
</body>
</html>


css code:

*,*::after,*::before{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    background-color: black;
}

.battery{
    border: 5px solid gray;
    width: 20vh;
    height: 40vh;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    overflow: hidden;
}

.top-head{
    width: 7vh;
    height: 4vh;
    border: 5px solid gray;
    border-radius: 10px 10px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;   
}

.container{
    display: grid;
    justify-content: center;
    margin-top: 20vh;
}

.batt-back{
    background-color: green;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    animation: duck 4s linear infinite;
}

.fa-bolt-lightning{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    position: absolute;
}

@keyframes duck{
    0%{
        transform: translateY(150px);
        background-color: red;
    }
    25%{
        background-color: orange;
    }
    50%{
        background-color: yellow;
    }
    75%{
        background-color: yellowgreen;
    }
    100%{
        background-color: rgb(11, 212, 11);
    }
}

Link copied to clipboard