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

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

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

Differentiation and Integration Formulae Class 10th-11th-12th NCERT Solving Formulas

Mini Militia V4.3.3 Sniper Sprayer Mod-V2 By Gamer Abhishek

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

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

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

Differentiation and Integration Formulae Class 10th-11th-12th NCERT Solving Formulas

Mini Militia V4.3.3 Sniper Sprayer Mod-V2 By Gamer Abhishek