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;
}

Tayyari Vibe

Header Ads Widget

Instagram Login Page HTML and CSS

SOURCE CODE

HTML:

CSS:

JAVASCRIPT:

Posted by: Tayyari Vibe

Post a Comment

0 Comments

Link List

Follow Us

Css Options (Boxed and Snippet)

Social Plugin

About Me

Featured Post

SSC CGL Maths Practice Book 2025 | 5000+ Questions PDF Download (New Pattern)

Popular Articles

Subscribe Us

Ad Space

Most Popular

Labels

Menu Footer Widget

Contact form

Tayyari Vibe

Header Ads Widget

Instagram Login Page HTML and CSS

Instagram Login Page Using HTML and CSS Only

ScreenShot:

SOURCE CODE

HTML:

CSS:

JAVASCRIPT:

Posted by: Tayyari Vibe

You may like these posts

Post a Comment

0 Comments

Link List

Follow Us

Css Options (Boxed and Snippet)

Social Plugin

About Me

Featured Post

SSC CGL Maths Practice Book 2025 | 5000+ Questions PDF Download (New Pattern)

Popular Articles

Social Plugin

Subscribe Us

Ad Space

Most Popular

Labels

Menu Footer Widget

Contact form