"contact page"
Bootstrap 4.0.0 Snippet by prabuanan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="css/style1.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <title>About</title> </head> <body> <!-- contact start --> <section> <div class="contact"> <div class="container"> <div class="row"> <div class="col-sm-8 offset-sm-2"> <div class="search_days"> <label class="checkbox"> <input type="checkbox"> <p>Monday Monday Monday teste test</p> </label> <label class="checkbox"> <input type="checkbox"> <p>Tuesday</p> </label> <label class="checkbox"> <input type="checkbox"> <p>Wenesday</p> </label> <label class="checkbox"> <input type="checkbox"> <p> Thursday</p> </label> <label class="checkbox"> <input type="checkbox"> <p> Friday</p> </label> <label class="checkbox"> <input type="checkbox"> <p> Saturday</p> </label> <label class="checkbox"> <input type="checkbox"> <p> Sunday</p> </label> </div> </div> <div class="col-sm-6 offset-sm-4"> <form action="" class="contact_form"> <div class="form-group"> <label for="email">Email address:</label> <div class="input-group mb-3"> <div class="input-group-prepend"> </div> <input type="text" class="form-control border-top-0 border-right-0 border-left-0 rounded-0 input100" placeholder="Username"> <span class="focus-input100"></span> </div> </div> <div class="form-group"> <label for="email">Email address:</label> <div class="input-group mb-3"> <div class="input-group-prepend"> </div> <input type="text" class="form-control border-top-0 border-right-0 border-left-0 rounded-0 input100" placeholder="Username"> <span class="focus-input100"></span> </div> </div> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control border-top-0 border-right-0 border-left-0 rounded-0" id="email"> <span class="separator"> </span> </div> <div class="form-group"> <label for="email">Mobile:</label> <input type="text" class="form-control border-top-0 border-right-0 border-left-0 rounded-0" id="email"> <span class="separator"> </span> </div> <div class="form-group"> <label for="email">Name:</label> <input type="text" class="form-control border-top-0 border-right-0 border-left-0 rounded-0" id="email"> <span class="separator"> </span> </div> <div class="form-group form-check"> <label for="email">My Goals:</label> <label class="checkbox_animations"> <div class="checkbox"> <label> <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Food </label> </div> </label> <label class="checkbox_animations"> <div class="checkbox"> <label> <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Rice </label> </div> </label> <label class="checkbox_animations"> <div class="checkbox"> <label> <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Juice </label> </div> </label> </div> <!-- radio box start --> <div class="form-group form-check"> <label for="email">Gender:</label> <!-- <label class="checkbox_animations"> <div class="checkbox"> <label> <input type="radio"><span class="checkbox-material"><span class="check"></span></span> Food </label> </div> </label> --> <div class="md-radio md-radio-inline"> <input id="3" type="radio" name="g2" checked> <label for="3">Option 3</label> </div> <div class="md-radio md-radio-inline"> <input id="4" type="radio" name="g2"> <label for="4">Option 4</label> </div> </div> <!-- radio box end --> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </section> <!-- contact end --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script src="../../assets/js/vendor/popper.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> --> </body> </html>
/* custom radio start */ .search_days .checkbox:hover { color: #fff; text-align: center; } .search_days .checkbox{ cursor: pointer; display: inline-block; line-height: 9px; position: relative; /* width: 85px; */ z-index: 1; color: #fff; text-align: center; /* background-color: red; */ } .search_days .checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; width: 100%; height: 35px; background: #80194f; top: 0px; left: 0px; border-radius: 21px; animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1); } @keyframes shrink-bounce { 0% { transform: scale(1); } 33% { transform: scale(0.85); } 100% { transform: scale(1); } } .search_days .checkbox input[type="checkbox"] { line-height: 2.1ex; } .search_days .checkbox input[type="checkbox"] { position: absolute; left: 0; width: 100%; height: 35px; top: 0px; z-index: -111; } .search_days .checkbox input[type="checkbox"] { overflow: hidden; cursor: pointer; background-color: red; } .search_days .checkbox input[type="checkbox"]::before { content: ""; display: inline-block; vertical-align: -25%; height: 35px; width: 100%; background-color: #868282; border: 1px solid rgb(166, 166, 166); border-radius: 0; box-shadow: none; margin-right: 0; border-radius: 22px; } .checkbox p { margin-bottom: 0px; line-height: 32px; padding: 1px 10px; font-size: 14px; } .search_days { margin-top: 3em; width: 100%; margin-bottom: 3em; } /* custom checkbox end */ /* contact_from start */ .contact_form .form-group .form-control { border-bottom: 1px solid red; background-color: transparent; } /* input border animations */ input[type="text"] { border-bottom: 1px solid #999; } input[type="text"]:focus + .separator, input[type="email"]:focus + .separator, input[type="password"]:focus + .separator { -webkit-transform: scaleX(1) translateY(-2px); transform: scaleX(1) translateY(-2px); opacity: 1; } input[type="text"]:focus { border-bottom:1px solid #4D90FE !important; } .separator { height: 3px; width: 100%; background: #68B3FF; display: block; -webkit-transform: scaleX(0) translateY(-2px); transform: scaleX(0) translateY(-2px); -webkit-transform-origin: 50%; transform-origin: 50%; opacity: 0; transition: all 0.15s linear; } * :focus { outline-color: transparent; outline-style: none; } .form-control:focus { box-shadow: none; } /* input border animations */ /* checkbox animations start */ .checkbox_animations .checkbox { display: inline-block; padding: 10px 20px; -webkit-transform: translateZ(0); transform: translateZ(0); } .checkbox_animations .checkbox label { cursor: pointer; padding-left: 0; } .checkbox_animations .checkbox input[type=checkbox] { opacity: 0; position: absolute; margin: 0; z-index: -1; width: 0; height: 0; overflow: hidden; left: 0; pointer-events: none; } .checkbox_animations .checkbox .checkbox-material { vertical-align: middle; position: relative; top: 3px; } .checkbox_animations .checkbox .checkbox-material:before { position: absolute; left: 8px; top: 2px; content: ""; background-color: rgba(0, 0, 0, 0.5); height: 4px; width: 4px; border-radius: 100%; z-index: 1; opacity: 0; margin: 0; } .checkbox_animations .checkbox .checkbox-material .check { position: relative; display: inline-block; width: 20px; height: 20px; border: 2px solid; border-radius: 2px; overflow: hidden; z-index: 1; } .checkbox_animations .checkbox .checkbox-material .check:before { position: absolute; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: block; margin-top: -4px; margin-left: 6px; width: 0; height: 0; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset; -webkit-animation: checkbox-off 0.3s forwards ease-out; animation: checkbox-off 0.3s forwards ease-out; } .checkbox_animations .checkbox input[type=checkbox]:focus + .checkbox-material .check:after { opacity: 0.2; } .checkbox_animations .checkbox input[type=checkbox]:checked + .checkbox-material .check:before { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; -webkit-animation: checkbox-on 0.3s forwards ease-out; animation: checkbox-on 0.3s forwards ease-out; } .checkbox_animations .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before { -webkit-animation: rippleOff 700ms forwards ease-out; animation: rippleOff 700ms forwards ease-out; } .checkbox_animations .checkbox input[type=checkbox]:checked + .checkbox-material:before { -webkit-animation: rippleOn 700ms forwards ease-out; animation: rippleOn 700ms forwards ease-out; } .checkbox_animations .checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after { -webkit-animation: rippleOff 700ms forwards ease-out; animation: rippleOff 700ms forwards ease-out; } .checkbox_animations .checkbox input[type=checkbox]:checked + .checkbox-material .check:after { -webkit-animation: rippleOn 700ms forwards ease-out; animation: rippleOn 700ms forwards ease-out; } .checkbox_animations .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, .checkbox input[type=checkbox][disabled] + .circle { opacity: 0.5; } .checkbox_animations .checkbox input[type=checkbox][disabled] + .checkbox-material .check:after { background-color: rgba(0, 0, 0, 0.84); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .coloured .checkbox-material .check { color: #2FAEF8; } .coloured .checkbox-material:before { background-color: #2FAEF8; } .coloured input[type=checkbox]:checked + .checkbox-material .check { color: #2FAEF8; } @-webkit-keyframes checkbox-on { 0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; } 50% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px; } 100% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; } } @keyframes checkbox-on { 0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; } 50% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px; } 100% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; } } @-webkit-keyframes checkbox-off { 0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; } 25% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; } 50% { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; margin-left: 6px; width: 0px; height: 0px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset; } 51% { -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0px 0px 0 10px inset; } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0px 0px 0 0px inset; } } @keyframes checkbox-off { 0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; } 25% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; } 50% { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; margin-left: 6px; width: 0px; height: 0px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset; } 51% { -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0px 0px 0 10px inset; } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0px 0px 0 0px inset; } } @-webkit-keyframes rippleOn { 0% { opacity: 0.5; } 100% { opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13); } } @keyframes rippleOn { 0% { opacity: 0.5; } 100% { opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13); } } @-webkit-keyframes rippleOff { 0% { opacity: 0.5; } 100% { opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13); } } @keyframes rippleOff { 0% { opacity: 0.5; } 100% { opacity: 0; -webkit-transform: scale(13, 13); transform: scale(13, 13); } } /* checkbox animations end */ /* radiobox animations start */ .focus-input100:before { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #7f7f7f; -webkit-transition: all .4s; transition: all .4s; } .focus-input100.text:after, .focus-input100:after { font-family: FontAwesome; color: #adadad; font-size: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; height: calc(64% - -20px); bottom: 0; left: 0; padding-left: 13px; padding-top: 3px; } .focus-input100:after { content: "\F007"; } .input100 { font-size: 12px; color: #333; line-height: 1.2; display: block; width: 100%; height: 30px; background: transparent; padding: 0 7px 0 43px; } @keyframes ripple { 0% { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0); } 50% { box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1); } 100% { box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0); } } .md-radio { margin: 16px 25px; } .md-radio.md-radio-inline { display: inline-block; } .md-radio input[type="radio"] { display: none; } .md-radio input[type="radio"]:checked + label:before { border-color: #000; animation: ripple 0.2s linear forwards; } .md-radio input[type="radio"]:checked + label:after { transform: scale(1); } .md-radio label { display: inline-block; height: 20px; position: relative; padding: 0 30px; margin-bottom: 0; cursor: pointer; vertical-align: bottom; } .md-radio label:before, .md-radio label:after { position: absolute; content: ''; border-radius: 50%; transition: all .3s ease; transition-property: transform, border-color; } .md-radio label:before { left: 0; top: 0; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.54); } .md-radio label:after { top: 5px; left: 5px; width: 10px; height: 10px; transform: scale(0); background: #000; } /* radiobox animations end */ /* select box start */ /*the container must be positioned relative:*/ .custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element:*/ } .select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; user-select: none; } /*style items (options):*/ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } /* select box end */ /* contact_from end */

Related: See More


Questions / Comments: