form Archives - csshint - A designer hub https://csshint.com/category/form/ Sat, 22 Apr 2023 09:15:37 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Bootstrap 4 drag and drop file upload with choose option https://csshint.com/bootstrap-4-drag-and-drop-file-upload-with-choose-option/ Sat, 22 Apr 2023 09:15:37 +0000 https://csshint.com/?p=8330 Bootstrap drag and drop file upload : with choose option snippets by bbbootstrap. HTML <div class="container d-flex justify-content-center mt-100"> <div class="row"> <div class="col-md-12"> <div class="file-drop-area"> <span class="choose-file-button">Choose files</span> <span class="file-message">or drag and drop files here</span> <input class="file-input" type="file" multiple> </div> </div> </div> </div> CSS body { display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: […]

The post Bootstrap 4 drag and drop file upload with choose option appeared first on csshint - A designer hub.

]]> Bootstrap drag and drop file upload : with choose option snippets by bbbootstrap.

drag and drop file upload

HTML

<div class="container d-flex justify-content-center mt-100">
    <div class="row">
        <div class="col-md-12">

<div class="file-drop-area">
  <span class="choose-file-button">Choose files</span>
  <span class="file-message">or drag and drop files here</span>
  <input class="file-input" type="file" multiple>
</div>
            
        </div>
        
    </div>
</div>

CSS

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, #8E24AA, #b06ab3);
  color: #D7D7EF;
  font-family: 'Lato', sans-serif;
}

h2 {
  margin: 50px 0;
}
.file-drop-area {
  position: relative;
  display: flex;
  align-items: center;
  width: 450px;
  max-width: 100%;
  padding: 25px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  transition: 0.2s;
 
}

.choose-file-button {
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.file-message {
  font-size: small;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  
}

.mt-100{
    margin-top:100px;
}

JAVASCRIPT

$(document).on('change', '.file-input', function() {
        

  var filesCount = $(this)[0].files.length;
  
  var textbox = $(this).prev();

  if (filesCount === 1) {
    var fileName = $(this).val().split('\\').pop();
    textbox.text(fileName);
  } else {
    textbox.text(filesCount + ' files selected');
  }
});

RESOURCES

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

 

The post Bootstrap 4 drag and drop file upload with choose option appeared first on csshint - A designer hub.

]]> Bootstrap 5 validation login form using vue.js https://csshint.com/bootstrap-5-validation-login-form-using-vue-js/ Thu, 20 Apr 2023 16:49:17 +0000 https://csshint.com/?p=8325 Bootstrap 5 validation login form using vue.js : snippets by bbbootstrap. HTML <div class="container mt-5"> <div class="row d-flex justify-content-center"> <div class="col-md-6"> <div class="card px-5 py-5" id="form1"> <div class="form-data" v-if="!submitted"> <div class="forms-inputs mb-4"> <span>Email or username</span> <input autocomplete="off" type="text" v-model="email" v-bind:class="{'form-control':true, 'is-invalid' : !validEmail(email) && emailBlured}" v-on:blur="emailBlured = true"> <div class="invalid-feedback">A valid email is required!</div> </div> […]

The post Bootstrap 5 validation login form using vue.js appeared first on csshint - A designer hub.

]]> Bootstrap 5 validation login form using vue.js : snippets by bbbootstrap.

Bootstrap 5 validation login form using vue.js

HTML

<div class="container mt-5">
    <div class="row d-flex justify-content-center">
        <div class="col-md-6">
            <div class="card px-5 py-5" id="form1">
                <div class="form-data" v-if="!submitted">
                    <div class="forms-inputs mb-4"> <span>Email or username</span> <input autocomplete="off" type="text" v-model="email" v-bind:class="{'form-control':true, 'is-invalid' : !validEmail(email) && emailBlured}" v-on:blur="emailBlured = true">
                        <div class="invalid-feedback">A valid email is required!</div>
                    </div>
                    <div class="forms-inputs mb-4"> <span>Password</span> <input autocomplete="off" type="password" v-model="password" v-bind:class="{'form-control':true, 'is-invalid' : !validPassword(password) && passwordBlured}" v-on:blur="passwordBlured = true">
                        <div class="invalid-feedback">Password must be 8 character!</div>
                    </div>
                    <div class="mb-3"> <button v-on:click.stop.prevent="submit" class="btn btn-dark w-100">Login</button> </div>
                </div>
                <div class="success-data" v-else>
                    <div class="text-center d-flex flex-column"> <i class='bx bxs-badge-check'></i> <span class="text-center fs-1">You have been logged in <br> Successfully</span> </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body{background: #000}.card{border: none;height: 320px}.forms-inputs{position: relative}.forms-inputs span{position: absolute;top:-18px;left: 10px;background-color: #fff;padding: 5px 10px;font-size: 15px}.forms-inputs input{height: 50px;border: 2px solid #eee}.forms-inputs input:focus{box-shadow: none;outline: none;border: 2px solid #000}.btn{height: 50px}.success-data{display: flex;flex-direction: column}.bxs-badge-check{font-size: 90px}

JAVASCRIPT

var app = new Vue({
  el: '#form1',
  data: function () {
    return {
    email : "",
    emailBlured : false,
    valid : false,
    submitted : false,
    password:"",
    passwordBlured:false
    }
  },

  methods:{

    validate : function(){
this.emailBlured = true;
this.passwordBlured = true;
if( this.validEmail(this.email) && this.validPassword(this.password)){
this.valid = true;
}
},

validEmail : function(email) {
   
var re = /(.+)@(.+){2,}\.(.+){2,}/;
if(re.test(email.toLowerCase())){
  return true;
}

},

validPassword : function(password) {
   if (password.length > 7) {
    return true;
   }
},

submit : function(){
this.validate();
if(this.valid){
this.submitted = true;
}
}
  }
});

RESOURCES

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js
https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js
https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css

 

The post Bootstrap 5 validation login form using vue.js appeared first on csshint - A designer hub.

]]> Bootstrap 5 Simple Multi-Step Form https://csshint.com/bootstrap-5-simple-multi-step-form/ Thu, 20 Apr 2023 15:27:11 +0000 https://csshint.com/?p=8312 Bootstrap 5 Simple Multi-Step Form : snippets by gerardo-camorlinga a bbbootstrap user. HTML <div class="container mt-5"> <div class="row d-flex justify-content-center align-items-center"> <div class="col-md-6"> <form id="regForm"> <h1 id="register">Donate</h1> <div class="all-steps" id="all-steps"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> <div class="tab"> <h3>Donation Type:</h3> <label class="container">One time <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="container">Recurring […]

The post Bootstrap 5 Simple Multi-Step Form appeared first on csshint - A designer hub.

]]> Bootstrap 5 Simple Multi-Step Form : snippets by gerardo-camorlinga a bbbootstrap user.

Bootstrap 5 Simple Multi-Step Form

HTML

<div class="container mt-5">
    <div class="row d-flex justify-content-center align-items-center">
        <div class="col-md-6">
            <form id="regForm">
                <h1 id="register">Donate</h1>
                <div class="all-steps" id="all-steps"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div>
                <div class="tab">
                    <h3>Donation Type:</h3>
                    <label class="container">One time
                            <input type="radio" checked="checked" name="radio">
                            <span class="checkmark"></span>
                    </label>
                    <label class="container">Recurring
                            <input type="radio" name="radio">
                            <span class="checkmark"></span>
                    </label>
                    <p><input type="text" placeholder="Amount" oninput="this.className = ''" name="amount"></p>

                </div>
                <div class="tab">
                    <p><input placeholder="First Name" oninput="this.className = ''" name="first"></p>
                    <p><input placeholder="Last Name" oninput="this.className = ''" name="last"></p>
                    <p><input placeholder="Email" oninput="this.className = ''" name="email"></p>
                    <p><input placeholder="Phone" oninput="this.className = ''" name="phone"></p>
                    <p><input placeholder="Street Address" oninput="this.className = ''" name="address"></p>
                    <p><input placeholder="City" oninput="this.className = ''" name="city"></p>
                    <p><input placeholder="State" oninput="this.className = ''" name="state"></p>
                    <p><input placeholder="Country" oninput="this.className = ''" name="country"></p>

                </div>
                <div class="tab">
                    <p><input placeholder="Credit Card #" oninput="this.className = ''" name="email"></p>
                    <p>Exp Month
                        <select id="month">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">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></p>
                    <p>Exp Year
                        <select id="year">
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
</select></p>

                    <p><input placeholder="CVV" oninput="this.className = ''" name="phone"></p>
                </div>

                <div class="thanks-message text-center" id="text-message"> <img src="https://i.imgur.com/O18mJ1K.png" width="100" class="mb-4">
                    <h3>Thanks for your Donation!</h3> <span>Your donation has been entered! We will contact you shortly!</span>
                </div>
                <div style="overflow:auto;" id="nextprevious">
                    <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> </div>
                </div>
            </form>
        </div>
    </div>
</div>

 

CSS

/* your CSS goes here*/
 body {
    background: #eee
}

#regForm {
    background-color: #ffffff;
    margin: 0px auto;
    font-family: Raleway;
    padding: 40px;
    border-radius: 10px
}

h1 {
    text-align: center
}

input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa
}

input.invalid {
    background-color: #ffdddd
}

.tab {
    display: none
}

button {
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer
}

button:hover {
    opacity: 0.8
}

#prevBtn {
    background-color: #bbbbbb
}

.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5
}

.step.active {
    opacity: 1
}

.step.finish {
    background-color: #4CAF50
}

.all-steps {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px
}

.thanks-message {
    display: none
}

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default radio button */

.container input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
    background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.container input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the indicator (dot/circle) when checked */

.container input:checked~.checkmark:after {
    display: block;
}


/* Style the indicator (dot/circle) */

.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

 

Javascript

//your javascript goes here
var currentTab = 0;
document.addEventListener("DOMContentLoaded", function(event) {


    showTab(currentTab);

});

function showTab(n) {
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
    fixStepIndicator(n)
}

function nextPrev(n) {
    var x = document.getElementsByClassName("tab");
    if (n == 1 && !validateForm()) return false;
    x[currentTab].style.display = "none";
    currentTab = currentTab + n;
    if (currentTab >= x.length) {
        // document.getElementById("regForm").submit();
        // return false;
        //alert("sdf");
        document.getElementById("nextprevious").style.display = "none";
        document.getElementById("all-steps").style.display = "none";
        document.getElementById("register").style.display = "none";
        document.getElementById("text-message").style.display = "block";




    }
    showTab(currentTab);
}

function validateForm() {
    var x, y, i, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    for (i = 0; i < y.length; i++) {
        if (y[i].value == "") {
            y[i].className += " invalid";
            valid = false;
        }
    }
    if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; }
    return valid;
}

function fixStepIndicator(n) {
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); }
    x[n].className += " active";
}

 

RESOURCES

https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css

 

The post Bootstrap 5 Simple Multi-Step Form appeared first on csshint - A designer hub.

]]> Bootstrap 5 search bar input with icons inside https://csshint.com/bootstrap-5-search-bar-input-with-icons-inside/ Mon, 10 Apr 2023 15:57:49 +0000 https://csshint.com/?p=8304 Bootstrap 5 search bar input with icons inside : snippets by bbbootstrap. RESOURCES Bootstrap 4 CSS : https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css Bootstrap 4 JS : https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js Jquery : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js Fontawesome : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

The post Bootstrap 5 search bar input with icons inside appeared first on csshint - A designer hub.

]]> Bootstrap 5 search bar input with icons inside : snippets by bbbootstrap.

Bootstrap 5 search bar

RESOURCES

Bootstrap 4 CSS : https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css
Bootstrap 4 JS  : https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js
Jquery          : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
Fontawesome     : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

The post Bootstrap 5 search bar input with icons inside appeared first on csshint - A designer hub.

]]> 25+ Bootstrap Login pages https://csshint.com/bootstrap-login-pages/ Wed, 23 Feb 2022 05:47:31 +0000 http://csshint.com/?p=7154 Latest Collection of 100% free Bootstrap login Page template: bootstrap login page code examples from Codepen. Bootstrap 5 Login form using neomorphism Author Anand Vunnam Made with HTML / CSS Demo / Code Get Hosting Login Form V14 Author rokr Made with HTML / CSS Demo / Code Get Hosting Login Form V15 Author rokr […]

The post 25+ Bootstrap Login pages appeared first on csshint - A designer hub.

]]> Latest Collection of 100% free Bootstrap login Page template: bootstrap login page code examples from Codepen.

Bootstrap 5 Login form

Bootstrap 5 Login form


Bootstrap 5 Login form using neomorphism

Author

  • Anand Vunnam

Made with

  • HTML / CSS

Demo / Code Get Hosting

how to create login page using bootstrap

how to create login page using bootstrap


Login Form V14

Author

  • rokr

Made with

  • HTML / CSS

Demo / Code Get Hosting

bootstrap login page template free download

bootstrap login page template free download


Bootstrap 5 Glowing login form

Author

  • Amrit-Raj Sharma

Made with

  • HTML / CSS

Demo / Code Get Hosting

login page bootstrap 4

login page bootstrap 4


Bootstrap 5 Glowing login form

Author

  • rokr

Made with

  • HTML / CSS

Demo / Code Get Hosting

login with overlay image

login with overlay image


login with overlay image

Author

  • Bootdey

Made with

  • HTML / CSS

Demo / Code Get Hosting

Log In / Sign Up – pure css

Log In / Sign Up – pure css


Log In / Sign Up – pure css – #12

Author

  • Ivan Grozdic

Made with

  • HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 login form with footer

Bootstrap 4 login form with footer


Bootstrap 4 login form with footer and social media icons

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

login form in card with social login buttons

login form in card with social login buttons


login form in card with social login buttons

Author

  • Bootstraptor

Made with

  • HTML / CSS

Demo / Code Get Hosting

Bootstrap 4 login form with information text

Bootstrap 4 login form with information text


Bootstrap 4 login form with information text

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

login page template bootstrap

login page template bootstrap


login page template bootstrap

Author

  • Ondrej

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

Free Bootstrap 4 Login Form

Free Bootstrap 4 Login Form


Free Bootstrap 4 Login Form

Author

  • Bootstrap Dash

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

bootstrap login page design

bootstrap login page design


bootstrap login page design

Author

  • Bootstrap Dash

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

Bootstrap Sign In Form Layout

Bootstrap Sign In Form Layout


Bootstrap Sign In Form Layout

Author

  • StartBootstrap

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

Bootstrap login split-page

Bootstrap login split-page


Bootstrap login split-page

Author

  • Ondrej

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

Login Form 17 by Colorlib

Login Form 17 by Colorlib


Login Form 17 by Colorlib

Author

  • Aigars

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

Login Form 18 by Colorlib

Login Form 18 by Colorlib


Login Form 18 by Colorlib

Author

  • Aigars

Made with

  • HTML / CSS / JS

Demo / Code Get Hosting

login page using bootstrap

login page using bootstrap


Responsive Signup/Login form

Author

  • Mohamed Hasan

Made with

  • HTML / CSS (Sass) / JS

Demo / Code Get Hosting

The post 25+ Bootstrap Login pages appeared first on csshint - A designer hub.

]]> Input Field Label Wave Animation On Click https://csshint.com/input-field-label-wave-animation-on-click/ Sat, 15 Aug 2020 12:49:17 +0000 http://csshint.com/?p=3311 Check out this Amazing Input Field Label Wave Animation On Click using css and js. Designed by Florin Pop. HTML [code language=”html”] <h1>Fun Waving Animation</h1> <div class="form-control"> <input type="text" required /> <label>Email</label> </div> <div class="form-control"> <input type="text" required /> <label>Password</label> </div> <!– SOCIAL PANEL HTML –> <div class="social-panel-container"> <div class="social-panel"> <p>Created with <i class="fa fa-heart"></i> […]

The post Input Field Label Wave Animation On Click appeared first on csshint - A designer hub.

]]> Check out this Amazing Input Field Label Wave Animation On Click using css and js. Designed by Florin Pop.

Input Field Label Wave Animation

Input Field Label Wave Animation


HTML

[code language=”html”]
<h1>Fun Waving Animation</h1>
<div class="form-control">
<input type="text" required />
<label>Email</label>
</div>

<div class="form-control">
<input type="text" required />
<label>Password</label>
</div>

<!– SOCIAL PANEL HTML –>
<div class="social-panel-container">
<div class="social-panel">
<p>Created with <i class="fa fa-heart"></i> by
<a target="_blank" href="https://florin-pop.com">Florin Pop</a></p>
<button class="close-btn"><i class="fas fa-times"></i></button>
<h4>Get in touch on</h4>
<ul>
<li>
<a href="https://twitter.com/florinpop1705" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://linkedin.com/in/florinpop17" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://facebook.com/florinpop17" target="_blank">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="https://instagram.com/florinpop17" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<button class="floating-btn">
Get in Touch
</button>
[/code]

CSS

[code language=”css”]
@import url(‘https://fonts.googleapis.com/css?family=Muli&display=swap’);

* {
box-sizing: border-box;
}

body {
font-family: ‘Muli’, sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}

.form-control {
position: relative;
margin: 20px 0;
width: 300px;
}

.form-control input {
border: 0;
border-bottom: 2px solid #333;
padding: 15px 0;
display: block;
font-size: 18px;
font-family: ‘Muli’, sans-serif;
width: 100%;
transition: 0.1s ease-in;
}

.form-control input:focus,
.form-control input:valid {
border-bottom-color: darksalmon;
outline: none;
}

.form-control input:focus + label span ,
.form-control input:valid + label span{
color: darksalmon;
transform: translateY(-30px);
}

.form-control label {
position: absolute;
top: 15px;
left: 0;
}

.form-control label span {
display: inline-block;
font-size: 18px;
min-width: 5px;
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* SOCIAL PANEL CSS */
.social-panel-container {
position: fixed;
right: 0;
bottom: 80px;
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
}

.social-panel-container.visible {
transform: translateX(-10px);
}

.social-panel {
background-color: #fff;
border-radius: 16px;
box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
border: 5px solid #001F61;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: ‘Muli’;
position: relative;
height: 169px;
width: 370px;
max-width: calc(100% – 10px);
}

.social-panel button.close-btn {
border: 0;
color: #97A5CE;
cursor: pointer;
font-size: 20px;
position: absolute;
top: 5px;
right: 5px;
}

.social-panel button.close-btn:focus {
outline: none;
}

.social-panel p {
background-color: #001F61;
border-radius: 0 0 10px 10px;
color: #fff;
font-size: 14px;
line-height: 18px;
padding: 2px 17px 6px;
position: absolute;
top: 0;
left: 50%;
margin: 0;
transform: translateX(-50%);
text-align: center;
width: 235px;
}

.social-panel p i {
margin: 0 5px;
}

.social-panel p a {
color: #FF7500;
text-decoration: none;
}

.social-panel h4 {
margin: 20px 0;
color: #97A5CE;
font-family: ‘Muli’;
font-size: 14px;
line-height: 18px;
text-transform: uppercase;
}

.social-panel ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}

.social-panel ul li {
margin: 0 10px;
}

.social-panel ul li a {
border: 1px solid #DCE1F2;
border-radius: 50%;
color: #001F61;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
text-decoration: none;
}

.social-panel ul li a:hover {
border-color: #FF6A00;
box-shadow: 0 9px 12px -9px #FF6A00;
}

.floating-btn {
border-radius: 26.5px;
background-color: #001F61;
border: 1px solid #001F61;
box-shadow: 0 16px 22px -17px #03153B;
color: #fff;
cursor: pointer;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}

.floating-btn:hover {
background-color: #ffffff;
color: #001F61;
}

.floating-btn:focus {
outline: none;
}

@media screen and (max-width: 480px) {

.social-panel-container.visible {
transform: translateX(0px);
}

.floating-btn {
right: 10px;
}
}
[/code]

JS

[code language=”js”]
const inputs = document.querySelectorAll(‘.form-control input’);
const labels = document.querySelectorAll(‘.form-control label’);

labels.forEach(label => {
label.innerHTML = label.innerText
.split(”)
.map((letter, idx) => `<span style="
transition-delay: ${idx * 50}ms
">${letter}</span>`)
.join(”);
});

// SOCIAL PANEL JS
const floating_btn = document.querySelector(‘.floating-btn’);
const close_btn = document.querySelector(‘.close-btn’);
const social_panel_container = document.querySelector(‘.social-panel-container’);

floating_btn.addEventListener(‘click’, () => {
social_panel_container.classList.toggle(‘visible’)
});

close_btn.addEventListener(‘click’, () => {
social_panel_container.classList.remove(‘visible’)
});
[/code]

Fun Waving Animation

The post Input Field Label Wave Animation On Click appeared first on csshint - A designer hub.

]]> How to create Log in / Sign up Form https://csshint.com/how-to-create-log-in-sign-up-form/ Sat, 08 Aug 2020 04:35:48 +0000 http://csshint.com/?p=3163 check out the nice Animated Log in / Sign up Form design using HTML, CSS and JS. Designed by @BrawadaCom. HTML / Slim [code language=”html”] .container .box .container-forms .container-info .info-item .table .table-cell p Have an account? .btn Log in .info-item .table .table-cell p Don’t have an account? .btn Sign up .container-form .form-item.log-in .table .table-cell input […]

The post How to create Log in / Sign up Form appeared first on csshint - A designer hub.

]]> check out the nice Animated Log in / Sign up Form design using HTML, CSS and JS. Designed by @BrawadaCom.

Log in Sign up Form

Demo : Log in Sign up Form


HTML / Slim

[code language=”html”]
.container
.box
.container-forms
.container-info
.info-item
.table
.table-cell
p Have an account?
.btn Log in
.info-item
.table
.table-cell
p Don’t have an account?
.btn Sign up
.container-form
.form-item.log-in
.table
.table-cell
input type="text" name="Username" placeholder="Username"
input type="Password" name="Password" placeholder="Password"
.btn Log in
.form-item.sign-up
.table
.table-cell
input type="text" name="email" placeholder="Email"
input type="text" name="fullName" placeholder="Full Name"
input type="text" name="Username" placeholder="Username"
input type="Password" name="Password" placeholder="Password"
.btn Sign up
a.box-item href="https://codepen.io/Anna_Batura/" target="_blank"
svg class="rabbit" viewBox="0 0 600 600" version="1.2"
path id="rabbit" d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z"
[/code]

CSS / Sass

[code language=”css”]
@import "compass/css3"
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto)
$width: 600px
$height: 320px
$padding: 10px 15px
body
position: absolute
left: 0
top: 0
width: 100%
height: 100%
font-family: ‘Roboto’, sans-serif
background-color: #5356ad
overflow: hidden
.table
display: table
width: 100%
height: 100%
.table-cell
display: table-cell
vertical-align: middle
@include transition(all 0.5s)
.container
position: relative
width: $width
margin: 30px auto 0
height: $height
background-color: #999ede
top: 50%
margin-top: -160px
@include transition(all 0.5s)
.box
position: absolute
left: 0
top: 0
width: 100%
height: 100%
overflow: hidden
&:before, &:after
content: " "
position: absolute
left: 152px
top: 50px
background-color: #9297e0
transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg)
width: 300px
height: 285px
@include transition(all 0.5s)
&:after
background-color: #a5aae4
top: -10px
left: 80px
width: 320px
height: 180px
.container-forms
position: relative
.btn
cursor: pointer
text-align: center
margin: 0 auto
width: 60px
color: #fff
background-color: #ff73b3
opacity: 1
@include transition(all 0.5s)
&:hover
opacity: 0.7

.btn, input
padding: $padding
input
margin: 0 auto 15px
display: block
width: $width/2-80px
@include transition(all 0.3s)
.container-forms
.container-info
text-align: left
font-size: 0
.info-item
text-align: center
font-size: 16px
width: $width/2
height: $height
display: inline-block
vertical-align: top
color: #fff
opacity: 1
@include transition(all 0.3s)
p
font-size: 20px
margin: 20px
.btn
background-color: transparent
border: 1px solid #fff
.table-cell
padding-right: 35px
&:nth-child(2)
.table-cell
padding-left: 35px
padding-right: 0

.container-form
overflow: hidden
position: absolute
left: 30px
top: -30px
width: 305px
height: $height + 60px
background-color: #fff
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2)
@include transition(all 0.5s)
&:before
content: "✔"
position: absolute
left: 160px
top: -50px
color: #5356ad
font-size: 130px
opacity: 0
@include transition(all 0.5s)
.btn
position: relative
box-shadow: 0 0 10px 1px #ff73b3
margin-top: 30px
.form-item
position: absolute
left: 0
top: 0
width: 100%
height: 100%
opacity: 1
@include transition(all 0.5s)
&.sign-up
position: absolute
left: -100%
opacity: 0
&.log-in
.box
&:before
position: absolute
left: 180px
top: 62px
height: 265px
&:after
top: 22px
left: 192px
width: 324px
height: 220px
.container-form
left: 265px
.form-item
&.sign-up
left: 0
opacity: 1
&.log-in
left: -100%
opacity: 0
&.active
width: 260px
height: 140px
margin-top: -70px
.container-form
left: 30px
width: 200px
height: 200px
&:before
content: "✔"
position: absolute
left: 51px
top: 5px
color: #5356ad
font-size: 130px
opacity: 1
input, .btn, .info-item
display: none
opacity: 0
padding: 0px
margin: 0 auto
height: 0
.form-item
height: 100%
.container-forms
.container-info
.info-item
height: 0%
opacity: 0
.rabbit
width: 50px
height: 50px
position: absolute
bottom: 20px
right: 20px
z-index: 3
fill: #fff
[/code]

JS

[code language=”js”]
$(".info-item .btn").click(function(){
$(".container").toggleClass("log-in");
});
$(".container-form .btn").click(function(){
$(".container").addClass("active");
});
[/code]

Log in / Sign up Form

The post How to create Log in / Sign up Form appeared first on csshint - A designer hub.

]]> How to create a form in html https://csshint.com/how-to-create-a-form-in-html/ Sat, 08 Aug 2020 04:25:52 +0000 http://csshint.com/?p=3157 In this post we will learn How to create a Simple HTML/CSS Contact Form with minimal styling to be used on websites. This basic form Designed by Tania Rascia. HTML [code language=”html”] <div class="container"> <form> <label for="name">Name</label> <input type="text" id="name" placeholder="Name"> <label for="email">Email</label> <input type="email" id="email" placeholder="Email Address"> <label for="gender">Gender</label> <select id="gender"> <option value="male">Male</option> <option […]

The post How to create a form in html appeared first on csshint - A designer hub.

]]> In this post we will learn How to create a Simple HTML/CSS Contact Form with minimal styling to be used on websites. This basic form Designed by Tania Rascia.

HTML CSS Contact Form

Demo : HTML CSS Contact Form


HTML

[code language=”html”]
<div class="container">
<form>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Name">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email Address">
<label for="gender">Gender</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="message">Message</label>
<textarea id="message" cols="30" rows="10" placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form>
</div>
[/code]

CSS

[code language=”css”]
/* Forms */

[type=text],
[type=email],
[type=url],
select,
textarea {
display: block;
padding: .5rem;
background: transparent;
vertical-align: middle;
width: 100%;
max-width: 100%;
border: 1px solid #cdcdcd;
border-radius: 4px;
font-size: .95rem;
}

[type=text]:focus,
[type=email]:focus,
[type=url]:focus,
select:focus,
textarea:focus {
outline: none;
border: 1px solid #1E6BD6;
}

select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==) 100% no-repeat;
line-height: 1
}

label {
font-weight: 600;
font-size: .9rem;
display: block;
margin: .5rem 0;
}

/* Other */

* { box-sizing: border-box; }

html {
-webkit-font-smoothing: antialiased;
padding: 1rem;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 0 1rem;
}

/* Button */

[type=submit] {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
margin: .25rem 0;
padding: .5rem 1rem;
border: 1px solid #1E6BD6;
border-radius: 18px;
background: #1E6BD6;
color: white;
font-weight: 600;
text-decoration: none;
font-family: sans-serif;
font-size: .95rem;
}
[/code]

html forms

The post How to create a form in html appeared first on csshint - A designer hub.

]]> Bootstrap Popup Modal Login Form with Avatar https://csshint.com/bootstrap-popup-modal-login-form-with-avatar/ Fri, 07 Aug 2020 16:21:03 +0000 http://csshint.com/?p=3153 See the tutorial on Bootstrap Modals to learn How to create Bootstrap Popup Modal Login Form with Avatar. Designed by Pintire. HTML [code language=”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"> <title>Bootstrap Elegant Modal Login Modal Form with Avatar Icon</title> <link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" […]

The post Bootstrap Popup Modal Login Form with Avatar appeared first on csshint - A designer hub.

]]> See the tutorial on Bootstrap Modals to learn How to create Bootstrap Popup Modal Login Form with Avatar. Designed by Pintire.

Bootstrap Popup Modal Login Form

Bootstrap Popup Modal Login Form


HTML

[code language=”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">
<title>Bootstrap Elegant Modal Login Modal Form with Avatar Icon</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<!– Button HTML (to Trigger Modal) –>
<a href="#myModal" class="trigger-btn" data-toggle="modal">Click to Open Login Modal</a>
</div>

<!– Modal HTML –>
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login">
<div class="modal-content">
<div class="modal-header">
<div class="avatar">
<img src="https://www.pintire.com/wp-content/uploads/2019/10/avatar.png" alt="Avatar">
</div>
<h4 class="modal-title">Member Login</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form action="/examples/actions/confirmation.php" method="post">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block login-btn">Login</button>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#">Forgot Password?</a>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

CSS

[code language=”css”]
body {
font-family: ‘Varela Round’, sans-serif;
}
.modal-login {
color: #636363;
width: 350px;
}
.modal-login .modal-content {
padding: 20px;
border-radius: 5px;
border: none;
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
}
.modal-login h4 {
text-align: center;
font-size: 26px;
margin: 30px 0 -15px;
}
.modal-login .form-control:focus {
border-color: #70c5c0;
}
.modal-login .form-control, .modal-login .btn {
min-height: 40px;
border-radius: 3px;
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px;
}
.modal-login .modal-footer {
background: #ecf0f1;
border-color: #dee4e7;
text-align: center;
justify-content: center;
margin: 0 -20px -20px;
border-radius: 5px;
font-size: 13px;
}
.modal-login .modal-footer a {
color: #999;
}
.modal-login .avatar {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: -70px;
width: 95px;
height: 95px;
border-radius: 50%;
z-index: 9;
background: #FE4321;
padding: 15px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.modal-login .avatar img {
width: 100%;
}
.modal-login.modal-dialog {
margin-top: 80px;
}
.modal-login .btn {
color: #fff;
border-radius: 4px;
background: #FE4321;
text-decoration: none;
transition: all 0.4s;
line-height: normal;
border: none;
}
.modal-login .btn:hover, .modal-login .btn:focus {
background: #FE4321;
outline: none;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
color:#FE4321;
font-size:30px;
}
[/code]

Bootstrap Popup Modal Login Form

The post Bootstrap Popup Modal Login Form with Avatar appeared first on csshint - A designer hub.

]]> 15+ Bootstrap Login Forms https://csshint.com/bootstrap-login-forms/ Sat, 13 Jun 2020 03:36:03 +0000 http://csshint.com/?p=2013 Latest Collection of free Hand picked Pure Html Bootstrap Login Forms Examples for you to use in your projects. Demo and Download the zip (*.zip). 1. Bootstrap Tumblr Login Author Ace Subido demo and code Get Hosting 2. Another Login Author Peeyush Gupta demo and code Get Hosting 3. Bootstrap login example See the Pen […]

The post 15+ Bootstrap Login Forms appeared first on csshint - A designer hub.

]]> Latest Collection of free Hand picked Pure Html Bootstrap Login Forms Examples for you to use in your projects. Demo and Download the zip (*.zip).

1. Bootstrap Tumblr Login

Bootstrap Tumblr Login

Author

  • Ace Subido

demo and code Get Hosting

2. Another Login

Bootstrap Login Forms

Author

  • Peeyush Gupta

demo and code Get Hosting

3. Bootstrap login example

Author

  • Subodh Ghulaxe

demo and code Get Hosting

4. Bootstrap Login

Author

  • iammrvilla

demo and code Get Hosting

5. Responsive Signup/Login form

Responsive Signup Login form

Responsive Signup Login form


Author

  • Mohamed Hasan

demo and code Get Hosting

6. bootstrap login and register material design

Author

  • Yousef Sami

demo and code Get Hosting

7. Bootstrap Login page

Author

  • Yinka Enoch Adedokun

demo and code Get Hosting

8. Bootstrap Login Page

Author

  • Emre Berber

demo and code Get Hosting

9. animated login and registeration page

animated login and registeration page

animated login and registeration page


Author

  • RAJKUMAR123

demo and code Get Hosting

10. Bootstrap Login Screen with Floating Labels

Bootstrap Login Screen with Floating Labels

Bootstrap Login Screen with Floating Labels


Author

  • startbootstrap

demo and code Get Hosting

11. Bootstrap 4 Login Form

Bootstrap 4 Login Form

Bootstrap 4 Login Form


Author

  • Bootstrap4

demo and code Get Hosting

12. Login Form

Login Form

Author

  • colorlib

demo and code Get Hosting

13. Bootstrap Snippet: Login Form

Author

  • Ace Subido

demo and code Get Hosting

14. Sign-Up/Login Form

Author

  • Eric

demo and code Get Hosting

15. login/signup form animation

Author

  • Shayan

demo and code Get Hosting

The post 15+ Bootstrap Login Forms appeared first on csshint - A designer hub.

]]>