<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="form"> <form> <label>Username</label> <input type="text" placeholder="username"> <label>Password</label> <input type="password" placeholder="password"> <label>E-mail</label> <input type="email" placeholder="E-mail"> <label>Send Msg</label> <textarea placeholder="write A msg....."></textarea> <input type="checkbox" checked> <label class="inline">Keep me signed in</label> <p>forget your password?</p> <button>SIGN IN</button> </form> </div> <div class="footer"> <div class="right"> <small>copyright &copy 2017 HARUN PEHLİVAN <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank">TEBİM/TEBİTAGEM FOUNDER,CEO BLOGGER</a></small><br><br> <a href="https://www.facebook.com/profile.php?id=100008152065270"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/Facebook-128.png"> </a> <a href=" https://twitter.com/HTERCUMANP"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/Twitter-128.png"> </a> <a href=" https://www.instagram.com/harunpehlivantebimtebitagem/"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/Instagram-128.png"> </a> <a href="https://www.youtube.com/user/harunpehlivan1"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/Youtube-128.png"> </a> <a href="http://plus.google.com/111320383727376607540/"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/googleplus-128.png"> </a> <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252/"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/Linckedin-128.png"> </a> <a href="https://github.com/harunpehlivan"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/Git-128.png"> </a> <a href="http://harunpehlivan.blogspot.com.tr"> <img src="https://cdn2.iconfinder.com/data/icons/free-social-icons-1/200/w-128.png"> </a> </div> </div>

input[type=text], [type=password], [type=email] { display: block; padding: 8px; margin: 10px; border-radius: 13px; background-color: #415D7D; border: 0px; margin-left: 60%; width: 200px; outline: none; color: gray } input:hover { background-color: #CCC } .form { background-color: #11355C; width: 100%; height: 500px; } form { padding: 25px } label { color: #CCC; font-family: arial; margin-left: 60%; display: block; } .right { font-family: "Harmattan", sans-serif; } p { color: #CCC; margin-left: 65%; font-family: "Harmattan", sans-serif; } button { width: 150px; background-color: #1565C0; color: #CCC; padding: 10px; border-radius: 13px; border: 0px; margin-left: 65%; transition: 0.5s } input[type="checkbox"] { display: inline; margin-left: 60% } label.inline { display: inline; margin-left: 0px } button:hover { background-color: #72A2D9; width: 180px } img { border-radius: 100%; width: 100px; height: 100px; margin: 0px } textarea { width: 215px; height: 100px; margin-left: 60%; background-color: #415D7D; border: 0px; border-radius: 10px; outline: none; color: gray; resize: none; } textarea:hover { background-color: #CCC } .footer { width: 100%; height: 100px; background-color: #0e3056; margin: ; text-align: center; color: #72A2D9 } .right { padding: 10px; } img { padding: 3px; width: 30px; height: 30px } img:hover { background-color: #72A2D9 } a { text-decoration: none; }