HTML SOURCE CODE
<div class="master">
<h1>WARNING-::::::::: This design is designed for the phone. You can open it in your phone editor</h1></div>
<body>
<div class="phone"></div>
<div class="main">
<h3 id="logo"><a href="https://www.instagram.com/beingharry06">Instagram</a></h3>
<a href="https://www.instagram.com/beingharry06/"><h4 id="btn">GET</h4></a>
</div>
<p id="play">Find it for free on Google Play.</p>
<div class="submain">
<h3 class="dot">...</h3>
<h4 class="lang">ENGLISH <span> ⌄ </span></h4>
</div>
<div class="instalogo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/800px-Instagram_logo.svg.png">
</div>
<div class="facebook">
<div class="con">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7LG7b6d4Ahd_cCVz42IUIw_IO6_IxzO05ZizunBcSibryN7dtEgsuSqurlg1O3aoohDCmBiLKAQuWXrML6tALh3SbYkorc-PNNXgVIucOYTLpuxCINq3TWzo6l3ih_Z4fDOWsNGX-IYQ/s1600/PicsArt_01-07-03.53.33.png">
<h4><a href="https://www.facebook.com/cyberwarriors06/">Continue with Facebook</a></h4>
</div>
</div>
<div class="op">
<div class="line1"></div>
<p class="or">OR</p>
<div class="line1"></div>
</div>
<div class="inputmain">
<input type="text" id="email" name="Mobile number or email address" placeholder="Mobile number or email address" class="inputs">
</div>
<div class="inputmain">
<input type="password" id="password" name="password" placeholder="Password" class="inputs">
</div>
<div class="inputmain">
<p class="p"><a href="https://www.cyberwarriors.cf">Forgot password?</a></p>
</div>
<div class="inputmain">
<div class="con" id="con2">
<p class="login"><a href="https://www.facebook.com/cyberwarriors06/">Log in</a></p>
</div>
</div>
<div class="inputmain">
<p class="dont">Don't have an account? </p>
<p class="signup"> <a href="https://www.cyberwarriors.cf">Sign up</a></p><div>
</div>
<h1>WARNING-::::::::: This design is designed for the phone. You can open it in your phone editor</h1></div>
<body>
<div class="phone"></div>
<div class="main">
<h3 id="logo"><a href="https://www.instagram.com/beingharry06">Instagram</a></h3>
<a href="https://www.instagram.com/beingharry06/"><h4 id="btn">GET</h4></a>
</div>
<p id="play">Find it for free on Google Play.</p>
<div class="submain">
<h3 class="dot">...</h3>
<h4 class="lang">ENGLISH <span> ⌄ </span></h4>
</div>
<div class="instalogo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/800px-Instagram_logo.svg.png">
</div>
<div class="facebook">
<div class="con">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7LG7b6d4Ahd_cCVz42IUIw_IO6_IxzO05ZizunBcSibryN7dtEgsuSqurlg1O3aoohDCmBiLKAQuWXrML6tALh3SbYkorc-PNNXgVIucOYTLpuxCINq3TWzo6l3ih_Z4fDOWsNGX-IYQ/s1600/PicsArt_01-07-03.53.33.png">
<h4><a href="https://www.facebook.com/cyberwarriors06/">Continue with Facebook</a></h4>
</div>
</div>
<div class="op">
<div class="line1"></div>
<p class="or">OR</p>
<div class="line1"></div>
</div>
<div class="inputmain">
<input type="text" id="email" name="Mobile number or email address" placeholder="Mobile number or email address" class="inputs">
</div>
<div class="inputmain">
<input type="password" id="password" name="password" placeholder="Password" class="inputs">
</div>
<div class="inputmain">
<p class="p"><a href="https://www.cyberwarriors.cf">Forgot password?</a></p>
</div>
<div class="inputmain">
<div class="con" id="con2">
<p class="login"><a href="https://www.facebook.com/cyberwarriors06/">Log in</a></p>
</div>
</div>
<div class="inputmain">
<p class="dont">Don't have an account? </p>
<p class="signup"> <a href="https://www.cyberwarriors.cf">Sign up</a></p><div>
</div>
CSS SOURCE CODE
@media(max-width:800px)
{
.phone{
display:none;
}
.master{
display:block;
font-size:30px;
color: red;
}
}
@media(max-width:480px){
.phone{
display: block;
}
.master{
display:none;
}
body {
margin:0px;
padding:0px;
}
.main{
display:flex;
width:100%;
align-items:center;
height:50px;
background: linear-gradient(to right, #C71585 0%, #FF6347 100%)
}
#logo{
color:white;
padding:5px 10px;
margin-left:7px;
margin-top:3px;
font-size:17px;
}
#logo a{
color:white;
}
#btn{
padding:6px 11px;
border:1px solid white;
border-radius:4px;
color:white;
margin-left:190px;
font-size:16px;
}
#btn a{
color:white;
}
#play{
font-size:13px;
margin-left:17px;
color:white;
margin-top:-22px;
font-weight:500;
}
.submain{
display:flex;
margin-top:-10px;
}
.dot{
margin-left:15px;
font-size:20px;
margin:tol
}
.lang{
margin-left:110px;
margin-top:29px;
font-size:14px;
color:#191970;
margin-bottom:30px;
}
.lang span{
color:grey;
font-size:16px;
}
.instalogo{
display:flex;
justify-content:center;
}
img{
width:190px;
margin-bottom:30px;
}
.facebook{
display:flex;
justify-content: center;
}
.con{
background:#1E90FF;
width:285px;
height:33px;
border-radius:4px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:25px;
}
.con img{
width:16px;
height:16px;
margin-top:30px;
}
.con h4{
color:white;
margin-left:10px;
}
.con h4 a{
color:white;
}
.op{
display:flex;
justify-content:center;
}
.line1{
height:1px;
width:32%;
background:lightgray;
}
.or{
margin-top:-6px;
margin-right:15px;
margin-left:15px;
color:gray;
font-size:14px;
font-weight:bold;
}
.inputmain{
display:flex;
justify-content: center;
}
.inputs{
width:263px;
padding: 10px 10px;
border: 1px solid #DCDCDC;
border-radius: 4px;
font-size:13px;
margin-bottom:7px;
background: #F8F8FF;
}
.inputmain .p{
color:#1E90FF;
text-align: center;
margin-left:48%;
}
.inputmain .dont{
text-align:center;
font-size:15.3px;
display: inline;
color:#A9A9A9;
font-family:Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;"
}
.signup{
font-weight:bold;
color:#1E90FF;
margin-left:3px;
}
#con2{
background:#87CEFA;
}
#con2 a{
color:white}
.login{
color:white;
font-weight:bold;
text-align:center;
}
a{
text-decoration :none;
color:#1E90FF;
}
}
{
.phone{
display:none;
}
.master{
display:block;
font-size:30px;
color: red;
}
}
@media(max-width:480px){
.phone{
display: block;
}
.master{
display:none;
}
body {
margin:0px;
padding:0px;
}
.main{
display:flex;
width:100%;
align-items:center;
height:50px;
background: linear-gradient(to right, #C71585 0%, #FF6347 100%)
}
#logo{
color:white;
padding:5px 10px;
margin-left:7px;
margin-top:3px;
font-size:17px;
}
#logo a{
color:white;
}
#btn{
padding:6px 11px;
border:1px solid white;
border-radius:4px;
color:white;
margin-left:190px;
font-size:16px;
}
#btn a{
color:white;
}
#play{
font-size:13px;
margin-left:17px;
color:white;
margin-top:-22px;
font-weight:500;
}
.submain{
display:flex;
margin-top:-10px;
}
.dot{
margin-left:15px;
font-size:20px;
margin:tol
}
.lang{
margin-left:110px;
margin-top:29px;
font-size:14px;
color:#191970;
margin-bottom:30px;
}
.lang span{
color:grey;
font-size:16px;
}
.instalogo{
display:flex;
justify-content:center;
}
img{
width:190px;
margin-bottom:30px;
}
.facebook{
display:flex;
justify-content: center;
}
.con{
background:#1E90FF;
width:285px;
height:33px;
border-radius:4px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:25px;
}
.con img{
width:16px;
height:16px;
margin-top:30px;
}
.con h4{
color:white;
margin-left:10px;
}
.con h4 a{
color:white;
}
.op{
display:flex;
justify-content:center;
}
.line1{
height:1px;
width:32%;
background:lightgray;
}
.or{
margin-top:-6px;
margin-right:15px;
margin-left:15px;
color:gray;
font-size:14px;
font-weight:bold;
}
.inputmain{
display:flex;
justify-content: center;
}
.inputs{
width:263px;
padding: 10px 10px;
border: 1px solid #DCDCDC;
border-radius: 4px;
font-size:13px;
margin-bottom:7px;
background: #F8F8FF;
}
.inputmain .p{
color:#1E90FF;
text-align: center;
margin-left:48%;
}
.inputmain .dont{
text-align:center;
font-size:15.3px;
display: inline;
color:#A9A9A9;
font-family:Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;"
}
.signup{
font-weight:bold;
color:#1E90FF;
margin-left:3px;
}
#con2{
background:#87CEFA;
}
#con2 a{
color:white}
.login{
color:white;
font-weight:bold;
text-align:center;
}
a{
text-decoration :none;
color:#1E90FF;
}
}
