Notificatiob
Notificatiob
Caption
Find job vacancies
input file using html css | file input html css | file input for website | input type file | file input | file input animation css

input file using html css | file input html css | file input for website | input type file | file input | file input animation css

 input file type using css




HTML

<!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="index.css">   
</head>

<body>
    <div class="container">
        <input type="file" class="file-name">
    </div>
</body>

</html>

CSS


.container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.file-name {
    background-color: aquamarine;
    width: 400px;
    height: 35px;
    border-radius: 5px;
}

.file-name::file-selector-button {
    height: 35px;
    border-radius: 5px;
    border: 0.1px solid gray;
    transition: 0.4s;
}

.file-name::file-selector-button:hover {
    background-color: rgb(5, 90, 90);
    color: white;
}
html css dropdown | hover drop down | css animation | css dropdown | Hoverable Dropdown | Create A Hoverable Dropdown

html css dropdown | hover drop down | css animation | css dropdown | Hoverable Dropdown | Create A Hoverable Dropdown

Create A Hoverable Dropdown  


website : here

HTML

<!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="index.css">
</head>

<body>
    <div class="dropdown">
        <div class="dropbtn">DropDown</div>
        <div class="drop-content">
            <a href="#">link1</a>
            <a href="#">link2</a>
            <a href="#">link3</a>
            <a href="#">link4</a>
            <a href="#">link5</a>
        </div>
    </div>
</body>

</html>

CSS


.dropbtn {
    background-color: aqua;
    padding: 10px;
    width: 200px;
    text-align: center;
    border-radius: 5px;
}

.drop-content {
    display: none;
    position: absolute;
    min-width: 200px;
    background-color: lightblue;
    border-radius: 5px;
    box-shadow: 1px 1px 8px rgba(1, 1, 1, 0.5);
    z-index: 1;
}

.drop-content a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 10px;
    border-radius: 5px;
}

.drop-content a:hover {
    background-color: aqua;
}

.dropdown:hover .drop-content {
    display: block;
}
facebook login page clone using html css | face book clone with source code | clone website | facebook clone

facebook login page clone using html css | face book clone with source code | clone website | facebook clone

 facebook clone



website:here

html

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <nav class="navbar">
        <div class="logo">facebook</div>
        <div class="login-form">
            <div class="login-input-div">
                <div class="label">Email or phone</div>
                <input type="text" class="login-input"><br>
                <input type="checkbox" class="keep-me-logged-in">
                <label class="light-blue">Keep me logged in</label>
            </div>
            <div class="login-input-div">
                <div class="label">Password</div>
                <input type="password" class="login-input"><br>
                <label class="light-blue"><a href="#" class="forgot-p">
Forgot your password?</a></label>
            </div>
            <div class="login-btn">
                <button>Login</button>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="content-body">
            <h1> Connect with friends and the <br>
world around you on Facebook</h1>
            <img src="https://i.postimg.cc/Wb7QX00n/OBa-Vg52wt-TZ.png"
class="fb-content-img">
        </div>
        <div class="signup-body">
            <h1 class="sign-up-h1">Sign Up</h1>
            <div class="gray">
                <p>It's free and always will be</p>
            </div>
            <div class="user-names">
                <input type="text" class="input-name"
placeholder="First name">
                <input type="text" class="input-name"
placeholder="Last name">
            </div>
            <div class="signup-email">
                <input type="text" class="input-email"
placeholder="Email or mobile number">
            </div>
            <div class="signup-email">
                <input type="text" class="input-email"
placeholder="Re-enter Email or mobile number">
            </div>
            <div class="signup-password">
                <input type="password" class="input-password"
placeholder="New password">
            </div>
            <h3 class="birth-day-h3">Birthday</h3>
            <div class="birth-day">
                <div class="input-day">
                    <select name="days" id="days">
                        <option value="">day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>
                </div>
                <div class="year">
                    <select name="years" id="years">
                        <option value="" selected>year</option>
                        <option value="2022">2022</option>
                        <option value="2021">2021</option>
                        <option value="2019">2019</option>
                        <option value="2018">2018</option>
                        <option value="2017">2017</option>
                        <option value="2016">2016</option>
                        <option value="2015">2015</option>
                        <option value="2014">2014</option>
                        <option value="2013">2013</option>
                        <option value="2012">2012</option>
                        <option value="2011">2011</option>
                        <option value="2010">2010</option>
                        <option value="2009">2009</option>
                        <option value="2008">2008</option>
                        <option value="2007">2007</option>
                        <option value="2006">2006</option>
                        <option value="2005">2005</option>
                        <option value="2004">2004</option>
                        <option value="2003">2003</option>
                        <option value="2002">2002</option>
                        <option value="2001">2001</option>
                        <option value="2000">2000</option>
                        <option value="1999">1999</option>
                        <option value="1998">1998</option>
                        <option value="1997">1997</option>
                        <option value="1996">1996</option>
                        <option value="1995">1995</option>
                        <option value="1994">1994</option>
                        <option value="1993">1993</option>
                        <option value="1992">1992</option>
                        <option value="1991">1991</option>
                        <option value="1980">1980</option>
                        <option value="1979">1979</option>
                        <option value="1978">1978</option>
                        <option value="1977">1977</option>
                        <option value="1976">1976</option>
                        <option value="1975">1975</option>
                        <option value="1974">1974</option>
                        <option value="1973">1973</option>
                        <option value="1972">1972</option>
                        <option value="1971">1971</option>
                        <option value="1970">1970</option>
                    </select>
                </div>
                <div class="month">
                    <select name="months" id="months">
                        <option value="" selected>month</option>
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="1">April</option>
                        <option value="5">May</option>
                        <option value="6">June </option>
                        <option value="7">July</option>
                        <option value="8">August </option>
                        <option value="9">September </option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                </div>
                <div class="why-need-bd">
                    <p>Why do I need to provide my <br> birthday
                    </p>
                </div>
            </div>
            <div class="gender">
                <input type="radio" name="female" id="female">
<span class="gender-label">Female</span>
                <input type="radio" name="male" id="male">
<span class="gender-label">Male</span>
            </div>
            <div class="p-policy">
                <p>By clicking Sign Up, you agree to our
<span class="bold-dark">Terms</span> and that you have <br>
read our <span class="bold-dark">Data Use Policy</span>,
including our <span class="bold-dark">Cookie Use</span></p>
            </div>
            <div class="sign-up-button">
                <button class="sign-up-btn">Sign Up</button>
            </div>
            <br>
            <hr>
            <div class="create-p-c">
                <p><span class="bold-dark">Create a Page</span>
for a celebrity, brand or business</p>
            </div>
        </div>
    </div>
</body>

</html>



css

/*google font*/

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

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

.navbar {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #3b5998;
}

.logo {
    font-size: 45px;
    font-family: 'Poppins', sans-serif;
    color: white;
}

.login-form {
    display: flex;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}

.login-input-div {
    margin-left: 20px;
}

.label {
    color: white;
    margin-bottom: 3px;
}

.login-input {
    height: 25px;
    background-color: lightyellow;
    border: none;
    margin-bottom: 5px;
}

.light-blue {
    color: aliceblue;
}

.forgot-p {
    text-decoration: none;
    color: aliceblue;
}

.login-btn {
    margin-left: 20px;
    margin-top: 19px;
}

.login-btn button {
    width: 80px;
    background-color: #7099f0;
    height: 25px;
    border: none;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.container {
    display: flex;
}

.content-body {
    width: 50%;
    margin-left: 30px;
    margin-top: 60px;
}

.content-body h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 4.5vh;
}

.fb-content-img {
    width: 100%;
    margin-top: 50px;
}

.signup-body {
    margin-top: 40px;
    margin-left: 30px;
    margin-right: 10px;
}

.sign-up-h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 4vh;
}

.gray {
    color: gray;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    margin-top: 10px;
}

.user-names {
    width: 100%;
    display: flex;
    margin-top: 30px;
}

.input-name {
    margin: 5px;
    height: 40px;
    width: 250px;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    border: 0.5px solid gray;
    margin-left: 10px;
}

.signup-email {
    width: 100%;
    margin-top: 10px;
}

.input-email {
    width: 515px;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    border: 0.5px solid gray;
    margin-left: 10px;
}

.signup-password {
    width: 100%;
    margin-top: 10px;
}

.input-password {
    margin: 5px;
    height: 40px;
    width: 515px;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    border: 0.5px solid gray;
    margin-left: 10px;
}

.birth-day-h3 {
    font-family: 'Roboto', sans-serif;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.birth-day {
    display: flex;
    align-items: center;
    padding: 10px;
}

#days,
#years,
#months {
    height: 35px;
}

.why-need-bd {
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    color: darkblue;
    margin-left: 25px;
}

.gender {
    margin-top: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}

.gender input {
    margin: 10px;
}

.p-policy {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    margin-top: 10px;
}

.p-policy p {
    margin-left: 10px;
}

.bold-dark {
    color: darkblue;
    font-weight: 600;
}

.sign-up-btn {
    margin: 10px;
    width: 150px;
    height: 40px;
    font-size: 25px;
    font-weight: bold;
    background: linear-gradient(#67ae55, #578843);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

.create-p-c {
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.create-p-c p {
    margin: 10px;
}


custom checkbox using html css | custom toggle checkbox using html and css | css tutorial

custom checkbox using html css | custom toggle checkbox using html and css | css tutorial

 custom toggle checkbox using html and css



website: here

HTML


<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="div">
            <div class="text">WiFi</div>
            <div class="btn">
                <input type="checkbox" class="btn-check">
                <div class="switch"></div>
            </div>
        </div>
        <div class="div">
            <div class="text">VPN</div>
            <div class="btn">
                <input type="checkbox" class="btn-check">
                <div class="switch"></div>
            </div>
        </div>
        <div class="div">
            <div class="text">Bluetooth</div>
            <div class="btn">
                <input type="checkbox" class="btn-check">
                <div class="switch"></div>
            </div>
        </div>
        <div class="div">
            <div class="text">Hotspot</div>
            <div class="btn">
                <input type="checkbox" class="btn-check">
                <div class="switch"></div>
            </div>
        </div>
        <div class="div">
            <div class="text">Mobile data</div>
            <div class="btn">
                <input type="checkbox" class="btn-check">
                <div class="switch"></div>
            </div>
        </div>
    </div>
</body>

</html>


CSS 


@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
    display: flex;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 350px;
    height: 450px;
    margin-top: 50px;
    background-color: antiquewhite;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5),
2px 2px 1px rgba(0, 0, 0, 0.5),
3px 2px 1px rgba(0, 0, 0, 0.5),
20px 20px 25px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
}

.div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    width: 300px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.text {
    font-size: 35px;
}

.btn {
    background-color: white;
    width: 60px;
    height: 25px;
    margin-right: 10px;
    border-radius: 30px;
    padding: 2px;
}

.switch {
    background-color: lightgray;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: 3px;
    margin-left: 3px;
    transition: 0.5s;
}

.btn-check {
    position: absolute;
    width: 100%;
    height: 25px;
    z-index: 5;
}

input:checked~.switch {
    margin-left: 37px;
    background-color: black;
}
Link copied to clipboard