HTML

SOURCE CODE

HTML:

<!DOCTYPE html>
<html lang="en">

<title>Instagram Login</title>

<link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>

<body>

<header class="header-select">
    <select data-placeholder="Choose a Language...">
      <option value="EN">English (UK)</option>
      <option value="AF">Afrikaans</option>
      <option value="SQ">Albanian</option>
      <option value="AR">Arabic</option>
      <option value="HY">Armenian</option>
      <option value="EU">Basque</option>
      <option value="BN">Bengali</option>
      <option value="BG">Bulgarian</option>
      <option value="CA">Catalan</option>
      <option value="KM">Cambodian</option>
      <option value="ZH">Chinese (Mandarin)</option>
      <option value="HR">Croatian</option>
      <option value="CS">Czech</option>
      <option value="DA">Danish</option>
      <option value="NL">Dutch</option>
      <option value="EN">English</option>
      <option value="ET">Estonian</option>
      <option value="FJ">Fiji</option>
      <option value="FI">Finnish</option>
      <option value="FR">French</option>
      <option value="KA">Georgian</option>
      <option value="DE">German</option>
      <option value="EL">Greek</option>
      <option value="GU">Gujarati</option>
      <option value="HE">Hebrew</option>
      <option value="HI">Hindi</option>
      <option value="HU">Hungarian</option>
      <option value="IS">Icelandic</option>
      <option value="ID">Indonesian</option>
      <option value="GA">Irish</option>
      <option value="IT">Italian</option>
      <option value="JA">Japanese</option>
      <option value="JW">Javanese</option>
      <option value="KO">Korean</option>
      <option value="LA">Latin</option>
      <option value="LV">Latvian</option>
      <option value="LT">Lithuanian</option>
      <option value="MK">Macedonian</option>
      <option value="MS">Malay</option>
      <option value="ML">Malayalam</option>
      <option value="MT">Maltese</option>
      <option value="MI">Maori</option>
      <option value="MR">Marathi</option>
      <option value="MN">Mongolian</option>
      <option value="NE">Nepali</option>
      <option value="NO">Norwegian</option>
      <option value="FA">Persian</option>
      <option value="PL">Polish</option>
      <option value="PT">Portuguese</option>
      <option value="PA">Punjabi</option>
      <option value="QU">Quechua</option>
      <option value="RO">Romanian</option>
      <option value="RU">Russian</option>
      <option value="SM">Samoan</option>
      <option value="SR">Serbian</option>
      <option value="SK">Slovak</option>
      <option value="SL">Slovenian</option>
      <option value="ES">Spanish</option>
      <option value="SW">Swahili</option>
      <option value="SV">Swedish </option>
      <option value="TA">Tamil</option>
      <option value="TT">Tatar</option>
      <option value="TE">Telugu</option>
      <option value="TH">Thai</option>
      <option value="BO">Tibetan</option>
      <option value="TO">Tonga</option>
      <option value="TR">Turkish</option>
      <option value="UK">Ukrainian</option>
      <option value="UR">Urdu</option>
      <option value="UZ">Uzbek</option>
      <option value="VI">Vietnamese</option>
      <option value="CY">Welsh</option>
      <option value="XH">Xhosa</option>
    </select>
  </header>

<section class="sect-img">
    <a class="container" href="">
      <i class="fab fa-facebook-f"></i>
      <p class="para">Continue Using Facebook</p>
    </a>
  </section>

<section class="input-field">
      <label id="phone" for="">Phone number, username or email address</label>
      <input type="email" name="Username : " placeholder="" required><br />
      <label id="email" for="">Email address</label>
      <input name="Email : " type="email" placeholder=""><br />
      <label id="pass" for="">Password</label>
      <input id="pass_main" type="password" name="Password : " required placeholder=""><br />
      <section class="forgot-section">
        <a class="forgot-href" href="https://www.instagram.com/accounts/password/reset/">Forgotten your password?</a>

</section>
      <button class="login-href" type="submit">Log In</button>
    </section>

</section>

<section class="sect-sign">
      <p class="para-sign">Don't have an account? <a class="sign-href" href="https://www.instagram.com/accounts/signup/phone"><b>Sign up</b></a></p>
    </section>
      </form>

<section class="sect-footer">
      <p class="foot-para">Meta</p>
             <p class="foot-para"> About</p>
            <p class="foot-para">  Blog</p>
              <p class="foot-para">Jobs</p>
            <p class="foot-para">  Help</p>
              <p class="foot-para">API</p>
              <p class="foot-para">Privacy</p>
              <p class="foot-para">Terms</p>
               <p class="foot-para"> Top accounts</p>
             
             
             
             
             <section class="sect-foot-w">
              <p class="foot-para-w">Hashtags</p>
            <p class="foot-para-w">Locations</p>
              <p class="foot-para-w">Instagram Lite</p>
              <p class="foot-para-w">Dance</p>
             <p class="foot-para-w"> Food & drink</p>
             <p class="foot-para-w"> Home & garden</p>
              <p class="foot-para-w">Music</p>
              <p class="foot-para-w">Visual arts</p>
              <section>
              
    </section>

<script src="main.js"></script>
</body>

</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

*{
  font-family: 'Roboto', sans-serif;
  margin:0;
  padding:0;
  box-sizing: border-box;
}

.header-select{
  display:flex;
  justify-content: center;
  align-items: center;
}

select{
  margin-top:1rem;
  outline:none;
  border:none;
  background: #fff;
  appearance: none;
  color:#A1A3A4;
  cursor: pointer;
}

.sect-img{
  display:flex;
  justify-content: center;
  align-items: center;
}

.drop-img{
  width:1.5rem;
  height:1.5rem;
  margin-left:13%;
  margin-top: -1.2rem;
  cursor:pointer;
}

.ig-img{
  width:13rem;
  margin-top: 4rem;
  height:5rem;
}

.container{
  margin-top: 3rem;
  width:75%;
  height:2rem;
  background:#2fa1ff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#fff;
  font-weight: 700;
  border-radius: 0.2rem;
}

.fab{
  width:1.3rem;
  height:1.3rem;
  background-color: #fff;
  color:#2fa1ff;
  margin: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  margin-right: 1%;
}

.strainght-line{
  position:relative;
}

.strainght-line::before{
  content: "";
  position: absolute;
  left:1.5rem;
  top:2rem;
  width: 7em;
  height: 0.1rem;
  background:#dfdfdf;
}
.strainght-line::after{
  content: "";
  position: absolute;
  margin-left: 15rem;
  left:0;
  top:2rem;
  width:7em;
  height:0.1rem;
  background: #dfdfdf;
}

.sect-or{
  display: flex;
  justify-content: center;
  align-items:center;
}

.or-text{
  font-size:1.1rem;
  margin-top: 1.4rem;
  margin-right: 1rem;
  color:#D3D3D3;
  font-weight: 700;
}

.input-field{
  margin-top: 1rem;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input{
  width:80%;
  height:2.5rem;
  background: #fff;
  outline:none;
  border:0.1px solid rgba(0,0,0,0.5);
  border-radius: 0.2rem;
}

input:hover{
  border:0.1px solid #000;
  margin-top: -1.1em;
  transition: all 0.2s;
}

:placeholder-shown{
  margin-top:1rem;
}

label{
  font-size: 0.8rem;
  margin-left: -60%;
}
#phone{
  margin-left: -18%;
}
#pass{
  margin-right:6%;
}
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
}
#btne{
  background: #fff;
  border:none;
  outline:none;
  color:#000;
  font-weight: 700;
  margin-top: -45%;
  margin-left: 60%;
  opacity: none;
  position: absolute;
}
input:focus + label,input:not(:placeholder-shown) + label{
    opacity:1;
    transform: scale(.9) translateY(-100%) translateX(-10px);
    color:#000;
}

label, input{
  transition: all 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity:0.5;
}

.forgot-section{
  display:flex;
  justify-content: center;
  align-items:center;
}

.forgot-href{
  margin-top: -1rem;
  margin-left: 10rem;
  background-color:#fff;
  font-size:0.9rem;
  text-decoration: none;
  color:#2fa1ff;
}

.login-href{
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background:#2fa1ff;
  color:rgba(253, 253, 253, 1);
  width:75%;
  height: 2rem;
  margin-top: 1rem;
  border:none;
  border-radius: 0.2rem;
  font-weight:900;
  font-size: 1rem;
}

.sect-sign{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:1rem;
}

.para-sign{
  color:gray;
  margin-left: 6%;
}

.sign-href{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top: -1.15rem;
  margin-left: 10.5rem;
  background-color:#fff;
  font-size:0.9rem;
  color:#2fa1ff;
  text-decoration: none;
}

.from-txt{
  color:gray;
  font-size: 0.8rem;
  margin-top: 25%;
  margin-left: 45%;
}

.meta-img{
  width:4rem;
  height:4rem;
  margin-left: 42%;
  margin-top: -4%;
}

.sect-footer{
  display: flex;
  font-size: 0.5rem;
  font-weight: 600;
  background: #dfdfdf;
  gap:1rem;
  width:50em;
  height:6rem;
}

.para-foot{
  display: flex;
  justify-content: space-between;
  color:gray;
  gap:0.5rem;
}

.para-foot-w{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 6rem;
}

.sect-foot-w{
  display: flex;
  gap:0.3rem;
  justify-content: center;
  align-items: center;
  margin-left:-90%;
  margin-top: -9%;
  font-size:0.5rem;
}

Instagram Login Page HTML and CSS

SOURCE CODE

HTML:

CSS:

JAVASCRIPT:

MYFILES-DOWNUP

Mini Militia V4.3.3 All Guns Death Sprayer Mod By Gamer Abhishek

Picsart 22.6 Latest Version Mod Apk By Abhishek Kansari

Mini Militia V4.3.3 Death Mod-V2 By Gamer Abhishek

Class 11th Notes Physics Chemistry And Maths By G.A Productions

Class 11th Notes Physics Chemistry And Maths By G.A Productions

Instagram Login Page HTML and CSS

Instagram Login Page Using HTML and CSS Only

ScreenShot:

SOURCE CODE

HTML:

CSS:

JAVASCRIPT:

MYFILES-DOWNUP

You might like