Design Transparent Login Form in HTML & CSS - Html Login Page Design

<div class="tr_bq"> Design Transparent Login Form in HTML & CSS - Html Login Page Design - Login form Design Source Code</div> In this tutorial we will learn how to create beautiful sign in form in html and css.<br /> we will need<br /> 1. A background image (.jpg, .png)<br /> 2. A user icon image<br /> 3. Any text editor<br /> 4. passion to learn and a cup of coffee :)<br /> So lets get to work<br /> 1. Create a folder and place the images mentioned at no 1 and 2.<br /> 2. Now open your favourite text editor (I am using Sublime text) and type following html code<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguhdndjj2ws2FJZiQf_8PjuQCyKNGtCBYwLjIM2ln5X3SfGNIAULoEU8IYUSA1XD4sdSYOyQ-etg1Y7rqNEgq_fUDQizzUUKSUdexEmg6BMzotUbN6EeJIz1nG7mijI3Q4fGWTvRUgwgNb/s1600/index.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="325" data-original-width="510" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguhdndjj2ws2FJZiQf_8PjuQCyKNGtCBYwLjIM2ln5X3SfGNIAULoEU8IYUSA1XD4sdSYOyQ-etg1Y7rqNEgq_fUDQizzUUKSUdexEmg6BMzotUbN6EeJIz1nG7mijI3Q4fGWTvRUgwgNb/s320/index.JPG" width="320" /></a></div> <br /> 3. save it at the folder of images you just created with <i>index.html</i><br /> 4. Now create a new file and type the css code and save it in same folder as <i>style.css</i><br /> <blockquote> <i>body {</i><i><span style="white-space: pre;"> </span>margin: 0;</i><i><span style="white-space: pre;"> </span>padding: 0;</i><i><span style="white-space: pre;"> </span>background: url(Nature.jpg);</i><i><span style="white-space: pre;"> </span>background-size: cover;</i><i><span style="white-space: pre;"> </span>font-family: sans-serif;</i><i>}</i><i><br /></i><i>.loginBox {</i><i><span style="white-space: pre;"> </span>position: absolute;</i><i><span style="white-space: pre;"> </span>top: 50%;</i><i><span style="white-space: pre;"> </span>left: 50%;</i><i><span style="white-space: pre;"> </span>transform: translate(-50%, -50%);</i><i><span style="white-space: pre;"> </span>width: 350px;</i><i><span style="white-space: pre;"> </span>height: 420px;</i><i><span style="white-space: pre;"> </span>padding: 80px 40px;</i><i><span style="white-space: pre;"> </span>box-sizing: border-box;</i><i><span style="white-space: pre;"> </span>background: rgba(0,0,0,.5); <span style="white-space: pre;"> </span></i><i>}</i><i>.user {</i><i><span style="white-space: pre;"> </span>width: 100px;</i><i><span style="white-space: pre;"> </span>height: 100px;</i><i><span style="white-space: pre;"> </span>border-radius: 50%;</i><i><span style="white-space: pre;"> </span>overflow: hidden;</i><i><span style="white-space: pre;"> </span>position: absolute;</i><i><span style="white-space: pre;"> </span>top: calc(-100px/2);</i><i><span style="white-space: pre;"> </span>left: calc(50% - 50px)</i><i><br /></i><i>}</i><i>h2 {</i><i><span style="white-space: pre;"> </span>margin: 0;</i><i><span style="white-space: pre;"> </span>padding: 0 0 20px;</i><i><span style="white-space: pre;"> </span>color: #efed40;</i><i><span style="white-space: pre;"> </span>text-align: center; </i><i>}</i><i>.loginBox p {</i><i><span style="white-space: pre;"> </span>margin: 0;</i><i><span style="white-space: pre;"> </span>padding: 0;</i><i><span style="white-space: pre;"> </span>font-weight: bold;</i><i><span style="white-space: pre;"> </span>color: #fff;</i><i>}</i><i>.loginBox input {</i><i><span style="white-space: pre;"> </span>width: 100%;</i><i><span style="white-space: pre;"> </span>margin-bottom: 20px; </i><i>}</i><i>.loginBox input[type="text"],</i><i>.loginBox input[type="password"]</i><i>{</i><i><span style="white-space: pre;"> </span>border: none;</i><i><span style="white-space: pre;"> </span>border-bottom: 1px;</i><i><span style="white-space: pre;"> </span>background: transparent;</i><i><span style="white-space: pre;"> </span>outline: none;</i><i><span style="white-space: pre;"> </span>height: 40px;</i><i><span style="white-space: pre;"> </span>color: #fff;</i><i><span style="white-space: pre;"> </span>font-size: 16px;</i><i>}</i><i>::placeholder {</i><i><span style="white-space: pre;"> </span>color: rgba(255, 255, 255, .5);</i><i>}</i><i>.loginBox input[type="submit"] </i><i>{</i><i><span style="white-space: pre;"> </span>border: none;</i><i><span style="white-space: pre;"> </span>outline: none;</i><i><span style="white-space: pre;"> </span>height: 40px;</i><i><span style="white-space: pre;"> </span>color: #fff;</i><i><span style="white-space: pre;"> </span>font-size: 16px;</i><i><span style="white-space: pre;"> </span>background: #ff26ff;</i><i><span style="white-space: pre;"> </span>cursor: pointer;</i><i><span style="white-space: pre;"> </span>border-radius: 25px;</i><i>}</i><i>.loginBox a {</i><i><span style="white-space: pre;"> </span>color: #fff;</i><i><span style="white-space: pre;"> </span>font-size: 14px;</i><i><span style="white-space: pre;"> </span>font-weight: bold;</i><i><span style="white-space: pre;"> </span>text-decoration: none;</i><i>}</i></blockquote> <i></i><br /> You are done. open the index.html file and wallla!!!<br /> See the video for how it looks<br /> <br /> Thanks for reading and watching.<br /> <br /> Like and subscribe to my YouTube Channel <a href="https://www.youtube.com/channel/UCkg5BQEcyR414Z2MJ4qsdPw">HomeTech</a> for more interesting videos<br /> <br /> <iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/Qnsew3G7gTI" width="480"></iframe>

Design Transparent Login Form in HTML & CSS - Html Login Page Design

Design Transparent Login Form in HTML & CSS - Html Login Page Design - Login form Design Source Code In this tutorial we will learn ho...

Read more »

MikroTik - Two Hotspot on same RouterBoard with Different Login Pages

Today you will learn How to configure two hotspot on same MikroTik router with different login page design.<br /> <div> <br /></div> MikroTik routerOS is a versatile Operating System which has lots of features including firewall, VPN, load balancing, Hotspot, Radius server and many more all in one Box.<br /> <br /> I assume that you are familiar with basic MikroTik configuration and hotspot. You can learn from my previous posts and my YouTube channel (Link below) more about MikroTik and other Servers.<br /> <br /> Things require for this tutorial<br /> <br /> <ol> <li>MikroTik router or PC install version with at least 3 Ethernet adaptors</li> <li>Laptop or a PC</li> <li>Ethernet Cables</li> <li>Internet connection </li> <li>Access point (Optional) </li> <li>and Hotspot login pages</li> </ol> Lets start with the setup<br /> <br /> <ol> <li> Login to your MikroTik router via Winbox</li> <li>Configure two hotspot on two separate ethernet ports</li> <li>Copy the two hotspot login folders to MikroTik (Give both folder a different name like <b>hotspot1, hotspot2</b>)</li> <li>Now goto <i>IP -> Hotspot </i></li> <li>Click on the <i>Server profile </i>and open the hotspot (hsprof1 etc) whose directory you want to change</li> <li> On next window of hotspot (hsprof1 etc) change the HTML Directory (hotspot1, hotspot 2 or whatever you have name it)</li> <li>Click OK</li> <li>Repeat step 5 to 7 for the next hotspot</li> <li>Now test your hotspots by directly connecting your PC or Laptop to MikroTik router port or through Access point. You will now be redirected to hotspot login page.</li> <li>Repeat the Step 9 for other port and see the result</li> <li>You will see that both the Hotspot are now redirect you to entirely different Login page Template </li> <li>Thats all, see the video for details</li> </ol> <br /> Thanks for reading and watching.<br /> Visit my YouTube Channel <a href="https://www.youtube.com/channel/UCkg5BQEcyR414Z2MJ4qsdPw">HomeTech</a><br /> <br /> Please Support my YouTube Channel by liking and subscribing<br /> I spend more time on my YouTube Channel so all comments are replied 101% there<br /> Comments and suggestions are welcome to improve the tutorial and help other<br /> <br /> Share Happiness<br /> <div> <br /></div> See the video for more details<br /> <iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/xp8wGt7IPtA" width="459"></iframe>

MikroTik - Two Hotspot on same RouterBoard with Different Login Pages

Today you will learn How to configure two hotspot on same MikroTik router with different login page design. MikroTik routerOS is a versat...

Read more »