Scribd
Upload
3 views3 pages

Style

The document contains CSS styles for a web page layout, focusing on a centered container with a background image and a semi-transparent design. It includes styles for headings, form groups, input fields, and buttons, emphasizing a modern and clean aesthetic. The styles also incorporate hover effects and transitions for interactive elements.

Uploaded by

siddhupansari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views3 pages

Style

The document contains CSS styles for a web page layout, focusing on a centered container with a background image and a semi-transparent design. It includes styles for headings, form groups, input fields, and buttons, emphasizing a modern and clean aesthetic. The styles also incorporate hover effects and transitions for interactive elements.

Uploaded by

siddhupansari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

*{

margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}

body{
width: 100vw;
height: 100vh;
background: url(./bg.jpg)no-repeat;
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}

.container
{
width: 400px;
height: 500px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

border-radius: 20px;
border: 3px solid rgba(255, 255, 255, 0.5);
}

h2
{
color: #ffff;
font-size: 2em;
text-transform: uppercase;
padding: 20px 0;
}

.form-group
{
position: relative;
width: 330px;
margin: 30px 0;
border-bottom: 3px solid #ffff;
}

.form-group input
{
width: 100%;
height: 50px;
padding: 0 35px 0 10px;
font-size: 1.2em;
background-color: transparent;
border: none;
outline: none;
color: #fff;
}

.form-group label
{
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
font-size: 1.2em;
color: #fff;
transition: 0.5s;
}

input:focus ~ label,
input:valid ~ label
{
top: -5px;
}

.form-group i
{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #ffff;
font-size: 1.2em;
}

p
{
text-align: center;
color: #fff;
margin: 10px 0;
}

p>a
{
text-decoration: none;
color: #fff;
font-weight: 600;
}

p>a:hover
{
text-decoration: underline;
font-style: italic;
}

#btn
{
width: 100%;
height: 50px;
border-radius: 40px;
border: none;
font-size: 1.5em;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: all 0.5s;
}

#btn:hover
{
background: rgba(0, 0, 0, 0.3);
color: #fff;
}

You might also like