Featured Post

Ganesh Chaturthi Special: Ganesha Image with Rotating Chakra Structures | HTML & CSS Animation

-
Image
Ganesh Chaturthi Special: Ganesha Image with Rotating Chakra Structures | HTML & CSS Animation 🌟🕉️ In this project, we create a stunning web design that features a Ganesha image with a chakra-like structure as the background, using HTML and CSS. The chakra structures rotate both clockwise and counterclockwise, giving a mesmerizing effect, while shadow effects are applied to enhance the visual appeal. This design is perfect for celebrating Ganesh Chaturthi and showcasing beautiful animations with minimal effort.  VIDEO TUTORIAL   Key Features of This Design Ganesha Image with Indigo Background : The main focal point of the design is a beautiful image of Lord Ganesha set against an indigo-colored background. The indigo background provides a calming and divine feel, highlighting the spiritual significance of Lord Ganesha. Chakra-Like Rotating Structures : Behind the Ganesha image, we add three chakra-like structures, each rotating in opposite directions: clockwise and coun...
Post a Comment

Hacker Login Form Using HTML CSS

-

 

HACKER LOGIN FORM

Project Overview

In this project, you'll create a minimalist login form with a dark, matrix-like theme. The form will feature green, monospaced text on a black background, along with animated input fields and buttons to give it a futuristic, hacker vibe.

Tech Stack Used

  • HTML: To structure the login form, including input fields, labels, and buttons.
  • CSS: To style the form, creating the dark theme and adding animations to enhance the "hacker" effect.

How to Create the Hacker Login Form

  1. Set Up the HTML Structure:

    • Create a simple HTML form with input fields for the username and password.
    • Include a submit button labeled "Login" or something more hacker-themed, like "Access."

  2. Apply the Dark Theme with CSS:

    • Set the background color of the page to black.
    • Use a green color for the text, resembling the classic terminal look.
    • Choose a monospaced font, like "Courier New" or "Monaco," to enhance the terminal effect.

  3. Style the Input Fields:

    • Use CSS to make the input fields look like text boxes in a terminal.
    • Add subtle glowing effects to the borders of the input fields when they are focused.
    • Consider adding a blinking cursor effect inside the input fields.

  4. Style the Buttons:

    • Make the button look like a flat, terminal-style command button.
    • Add hover effects that change the button's color or add a glow, making it more interactive.

  5. Add Background Effects:

    • Use CSS animations to create a scrolling matrix-like background or a subtle flickering effect to give the page a more dynamic, hacker feel.

  6. Enhance with Animations:

    • Consider adding animations to the form's appearance, such as a fade-in effect when the page loads.
    • You can also animate the input fields and buttons when they are interacted with, making them feel more responsive.

SOURCE CODE

    HTML 

   <section>      
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span>
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span>
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span>
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span>
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span> <span></span> 
        <span></span> <span></span>

        <div class="signin">
            <div class="content">
                <h2>Signin</h2>
                <div class="form">

                    <!-- usename textbox -->
                    <div class="inputBox">
                        <input type="text" required> <i>Username</i>
                    </div>

                    <!-- password textbox -->
                    <div class="inputBox">
                        <input type="text" required>
                            <i>Password</i>
                    </div>

                    <!-- links -->
                    <div class="links">
                        <a href="">Forget Password</a>
                        <a href="">SignUp</a>
                    </div>

                    <!-- submit and login button -->
                    <div class="inputBox">
                        <input type="submit" value="Login">
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS 

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quciksand', sans-serif;
}

body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

section
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    overflow: hidden;
}

/* to make the bg color */
section::before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#000, #0f0, #000);
    animation: animate 5s linear infinite;
}

/* bg animtion */
@keyframes animate
{
    0%
    {
        transform: translateY(-100%);
    }

    100%
    {
        transform: translateY(100%);
    }
}

/* to create a black check bozx */
section span
{
    position: relative;
    display: block;
    width: calc(6.25vw - 2px);
    height: calc(6.25vw - 2px);
    background: #181818;
    z-index: 2;
    transition: 1.5s;
    border-radius: 20%;
}

section span:hover
{
    background: #0f0;
    transition: 0s;
}

/* signin form */
section .signin
{

    position: absolute;
    width: 400px;
    background: #222;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,9);
}

/* content position */
section .signin .content
{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}


/* signin heading */
section .signin .content h2
{
    font-size: 2em;
    color: #0f0;
    text-transform: uppercase;
}

/* form  */
section .signin .content .form
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

section .signin .content .form .inputBox
{
    position: relative;
    width: 100%;
}
/* input box */
section .signin .content .form .inputBox input 
{
    position: relative;
    width: 100%;
    background: #333;
    border: none;
    outline: none;
    padding: 25px 10px 7.5px;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 1em;

}

/* input box title */
section .signin .content .form .inputBox i
{
    position: absolute;
    left: 0;
    padding: 15px 10px;
    font-style: normal;
    color: #aaa;
    transition: 0.5s;
    pointer-events: none;
}

/* input box name position */
.signin .content .form .inputBox input:focus ~ i,
.signin .content .form .inputBox input:valid ~ i
{
    transform: translateY(-7.5px);
    font-size: 0.8em;
    color: #fff;
}

/* links */
.signin .content .form .links
{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.signin .content .form .links a
{
    color: #fff;
    text-decoration: none;
}

/* links > signup */
.signin .content .form .links a:nth-child(2)
{
    color: #0f0;
    font-weight: 600;
}

/* login button */
.signin .content .form .inputBox input[type="submit"]
{
    padding: 10px;
    background: #0f0;
    color: #000;
    font-weight: 600;
    font-size: 1.35em;
    letter-spacing: 0.05em;
    cursor: pointer;
}

input[type="submit"]:active
{
    opacity: 0.6;
}

/* making it respinsive */
@media (max-width: 900px)
{
    section span
    {
        width: calc(10vw -2px);
        height: calc(10vw - 2px);
    }
}

@media (max-width: 600px)
{
    section span
    {
        width: calc(20vw - 2px);
        height: calc(20vw - 2px);
    }
}

Usage Ideas

  • Personal Projects: Add this form to your personal website or a demo project to showcase your creativity and CSS skills.
  • Learning Exercise: Use this project as a way to practice CSS animations, styling, and working with forms in HTML.
  • Themed Events: Customize the form for hacker-themed events, games, or escape room experiences online.

Conclusion

By the end of this project, you'll have a fully functional and stylish "hacker" login form that combines creative design with technical skill. This form is a fun way to demonstrate your ability to create themed user interfaces and can be a great addition to your portfolio.

Don't forget to experiment with different effects and styles to make the form uniquely yours. Happy coding!

Comments

Post a Comment

Popular Post

Introduction to RESTful API

-
Table of Contents                               1. Introduction to RESTful APIs What is an API? Understanding REST (Representational State Transfer) Why Use RESTful APIs?                               2. Core Concepts of REST Resources and URIs (Uniform Resource Identifiers) HTTP Methods (GET, POST, PUT, DELETE, PATCH) Statelessness in REST Representation of Resources (JSON, XML)                               3. Designing a RESTful API Best Practices for RESTful API Design Defining Endpoints and Methods Versioning Your API Handling Errors and Responses                               4. Setting Up the Environment Required Tools and Sof...
Read more

Krishna Janmasthami effect using HTML CSS

-
Image
  Krishna Janmasthami effect using HTML CSS In this special Krishna Janmashtami tutorial, we'll be creating a beautiful animation featuring Lord Krishna, a pot, and a delightful splash effect using just HTML and CSS. This tutorial is perfect for those who want to blend creativity with coding, especially during festive occasions like Krishna Janmashtami. What You'll Learn In this tutorial, you'll learn how to create a visually appealing animation that captures the essence of Krishna Janmashtami. We'll animate Krishna playing with a pot, and you'll also see how to create a splash effect that adds a dynamic touch to the scene. This project is designed to be both fun and educational, making it a great way to practice your HTML and CSS skills while celebrating the festival. Tech Stack Used HTML : We'll use HTML to structure our page, including the elements that make up Krishna, the pot, and the splash effect. You'll see how to create a well-organized HTML structu...
Read more