Project

Login Page Project

Posted by author-avatar
0 comments

HTML + CSS Project

Project : Standalone Login Page

Project Thumbnail

Project Coding

login

📘 What is HTML?

HTML (HyperText Markup Language) is the standard language used to create the structure of web pages. It defines elements like headings, paragraphs, links, images, and more.

🧩 HTML Basics

  • Tag: Defines an element. Example: <p>Hello</p>

  • Element: The complete set of start tag, content, and end tag.

  • Attributes: Extra info inside a tag. Example: <img src="image.jpg" alt="photo">

  • Common Tags:

    • <h1> to <h6>: Headings

    • <p>: Paragraph

    • <a href="url">: Link

    • <img src="...">: Image

    • <ul>, <ol>, <li>: Lists

    • <table>: Table

✍️ Basic HTML Page Structure

 
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first HTML page.</p>
</body>
</html>

🎨 What is CSS?

CSS (Cascading Style Sheets) is used to style and design HTML pages. It controls colors, fonts, layouts, spacing, and more.

🧩 CSS Basics

  • Syntax:

     
    selector {
    property: value;
    }

  • Selectors: Target HTML elements.

    • p { color: blue; } → Makes all paragraphs blue.

    • #id { } → Targets a specific element by ID.

    • .class { } → Targets elements with a class name.

✍️ Ways to Add CSS

  1. Inline CSS – Inside an element.

     
    <p style="color:red;">This is red text</p>

  2. Internal CSS – Inside <style> in <head>.

     
    <style>
    body { background-color: lightyellow; }
    </style>

  3. External CSS – In a separate .css file.

     
    <link rel="stylesheet" href="style.css">

📌 Common CSS Properties

PurposeExampleDescription
Text Colorcolor: green;Changes text color
Backgroundbackground-color: lightblue;Sets background color
Font Sizefont-size: 20px;Adjusts text size
Text Aligntext-align: center;Centers text
Paddingpadding: 10px;Space inside an element
Marginmargin: 15px;Space outside an element
Borderborder: 1px solid black;Adds border

📊 Basic HTML + CSS Example

 
<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
<style>
body { background-color: #f0f8ff; font-family: Arial; }
h1 { color: darkblue; text-align: center; }
p { color: gray; font-size: 18px; }
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page is styled using CSS.</p>
</body>
</html>

🔍 Quick Tips

  • Always save HTML files with .html extension.

  • Always save CSS files with .css extension.

  • Use proper indentation for clean code.

  • Test your page in different browsers.

This project is a simple Login Page designed using HTML and CSS. It appears to be aimed at adding a clean, interactive login interface to a website, likely for use at your computer center’s website.

Breakdown of the Project

  1. HTML Structure:

    • The HTML file includes basic elements like a form for email and password input, a “Remember me” checkbox, and a login button.

    • There is a reference to an external CSS file (Login.CSS) to style the page, and Font Awesome is used to include icons for email and password fields.

  2. CSS Styling:

    • The CSS adds styling to the form, making it visually appealing with smooth rounded corners, colors, and hover effects.

    • Background: The background includes an image (from a local file or URL).

    • Buttons: The login button has a hover effect that changes its background color and text.

    • Fonts and Colors: The page uses custom fonts and colors for a professional look, like rgba(105, 105, 105, .74) for the button’s background color and bisque for the text color.

  3. Functionality and Interactivity:

    • The page is responsive, adjusting to screen size with the image (the background) scaling based on the width of the viewport.

    • The form’s hover effects give the user a nice interactive experience, including a change in color when they hover over buttons or links.

Specific Features in the Code:

  1. Login Form:

    • Email and password fields with icons for each.

    • A remember-me checkbox to keep the user signed in.

    • A login button that changes color when hovered over.

  2. CSS Hover Effects:

    • The .a1:hover and button:hover styles provide smooth transitions, changing the background color and text when hovered. These interactive effects enhance user experience.

  3. Image as Background:

    • The background image (possibly related to your computer center theme) is properly displayed, with the form elements centered on it, ensuring a neat look.

How to Add to Your Computer Center Website:

To integrate this login page into your website, simply follow these steps:

  1. HTML File:

    • Save the HTML code to a file (e.g., login.html).

    • Ensure you link the CSS file in the <head> section of your HTML file:
      <link rel="stylesheet" href="Login.CSS">.

  2. CSS File:

    • Save the CSS styling in a file named Login.CSS in the same directory as your HTML file.

  3. Background Image:

    • Ensure that the background image path is correct so that the image displays properly when the page is loaded.

Final Look:

  • The design is minimal and clean. It includes fields for the user to enter their email and password, a login button, and a nice background image to make the login page visually appealing.

Project by : ANISH GUIN

Qualification : Class X

Age : 16

Courses : E-Gyan(L2), E-Gyan(L-3)

Leave a Reply

Your email address will not be published. Required fields are marked *