Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

HTML to create Transparent Login Form

Posted on November 29, 2021November 29, 2021 By christo No Comments on HTML to create Transparent Login Form

Here is the complete source code to create Transparent Login Form

Table of Contents

  • index.html
  • styles.css

index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand:100,300,500">
  <link rel="stylesheet" href="styles.css">
  <title>Transparent Login Form</title>
</head>

<body>
  <div class="full-screen-container">
    <div class="login-container">
      <h3 class="login-title">Welcome</h3>
      <form>
        <div class="input-group">
          <label>Email</label>
          <input type="email">
        </div>
        <div class="input-group">
          <label>Password</label>
          <input type="password">
        </div>
        <button type="submit" class="login-button">Sign In</button>
      </form>
    </div>
  </div>
</body>

</html>

styles.css

* {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

html, body {
    margin: 0;
}

.full-screen-container {
    background-image: url("background_image.jpg");
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


.login-container {
    background-color: hsla(201, 100%, 6%, 0.6);
    padding: 50px 30px;
    min-width: 400px;
    width: 50%;
    max-width: 600px;
}

.login-title {
    color: white;
    text-align: center;
    margin: 0;
    margin-bottom: 40px;
    font-size: 2.5em;
    font-weight: normal;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.input-group label {
    color: white;
    font-weight: lighter;
    font-size: 1.5em;
    margin-bottom: 7px;
}

.input-group input {
    font-size: 1.5em;
    padding: .1em .25em;
    background-color: hsla(201, 100%, 91%, 0.3);
    border: 1px solid hsl(201, 100%, 6%);
    outline: none;
    border-radius: 5px;
    color: white;
    font-weight: lighter;
}

.input-group input:focus {
    border: 1px solid hsl(201, 100%, 50%)
}

.login-button {
    padding: 10px 30px;
    width: 100%;
    border-radius: 5px; 
    background-color: hsla(201, 100%, 50%, 0.1);
    border: 1px solid hsl(201, 100%, 50%);
    outline: none;
    font-size: 1.5em;
    color: white;
    font-weight: lighter;
    margin-top: 20px;
    cursor: pointer;
}

.login-button:hover {
    background-color: hsla(201, 100%, 50%, 0.3)
}

.login-button:focus {
    background-color: hsla(201, 100%, 50%, 0.5)
}
html Tags:html, login form, Transparent Login Form

Post navigation

Previous Post: Responsive Video Background in html
Next Post: Level Order Traversal of Binary Tree in java

Related Posts

Animated Text Reveal in HTML html
Custom Checkbox Tutorial in HTML html
3D Flip Button in HTML html
Responsive Video Background in html html
Animated Loading Spinner in html html

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech