वीडियो बैकग्राउंड वाला फॉर्म

अनुशंसित

14 October 2024

सोशल लॉगिन सुविधा के साथ HTML लॉगिन फॉर्म टेम्पलेट

index.html

styles.css

@import url(https://fonts.googleapis.com/css?family=Inter:300);
body{
  padding:0;
  margin:0;
  font-family: 'Inter';
}
.vid-container{
  position:relative;
  height:100vh;
  overflow:hidden;
}
.bgvid.back {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
}
.inner {
  position: absolute;
}
.inner-container{
  width:400px;
  height:400px;
  position:absolute;
  top:calc(50vh - 200px);
  left:calc(50vw - 200px);
  overflow:hidden;
  border-radius: 7px;
}
.box{
  position:absolute;
  height:100%;
  width:100%;
  font-family:'Inter';
  color:#fff;
  background:rgba(0, 0, 0, 28%);
  padding:30px 0px;
  border-radius: 7px;
}
.box h1{
  text-align:center;
  margin:30px 0;
  font-size:30px;
}
.box input{
  display:block;
  width:300px;
  margin:20px auto;
  padding:15px;
  background:rgba(0,0,0,0.2);
  color:#fff;
  border-radius: 7px;
  border:0;
}
input::placeholder {
  color: rgb(182, 171, 163);
}
.signup{
  color: rgb(182, 171, 163)!important;
}
.box input:focus,.box input:active,.box button:focus,.box button:active{
  outline:none;
}
.box button{
  background:#2d2f36;
  border:0;
  color:#fff;
  padding:10px;
  font-size:20px;
  width:330px;
  margin:20px auto;
  display:block;
  cursor:pointer;
  border-radius: 7px;
}
.box button:active{
  background:#000000;
}
.box p{
  font-size:14px;
  text-align:center;
}
.box p span{
  cursor:pointer;
  color:#666;
}

@media screen and (max-width: 986px) {
  .bgvid{
height: 100px!important;
  }
}

@media screen and (min-width: 986px) {
  .bgvid.back {
width: 100%;
  }
}

वीडियो बैकग्राउंड वाला फॉर्म

अनुशंसित

साइन अप फॉर्म

HTML CSS लॉगिन फॉर्म कोड

सोशल लॉगिन सुविधा के साथ HTML लॉगिन फॉर्म टेम्पलेट

index.html

styles.css

main.js

अनुशंसित

साइन अप फॉर्म

HTML CSS लॉगिन फॉर्म कोड

सोशल लॉगिन सुविधा के साथ HTML लॉगिन फॉर्म टेम्पलेट

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js