HTML+CSS登陆界面实例：Instagram 登录页面（一个拿来就能用的炫酷登录页面）

效果：

在线预览：

Instagram 登录页面 (codepen.io)https://codepen.io/atulcodex/pen/VoWRVP

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>User Login</title><meta name="description" content="User login"><meta name="keywords" content="login,user,musayazlik"><meta name="author" content="Musa Yazlık"><link rel="stylesheet" href="css/style.css"><!-- Google Fonts --><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"rel="stylesheet"><style>/*importing Google font*/
@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');/*Html rakup styling*/
*,
*::before,
*::after{margin: 0;padding: 0;box-sizing: inherit;
}html
{font-size: 10px;box-sizing: border-box;
}/*Smartphone image*/
img
{width: 100%;height: 100%;max-width: 100%;
}/*link styling*/
a
{text-decoration: none;
}/*Logo styling*/
h1
{font-family: 'Pacifico', cursive;font-size: 40px;
}/*body background color*/
body
{background-color: #fafafa;
}/*Wrapper is like a container of body*/
#wrapper
{width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: space-between;padding-top: 2rem;
}.container
{width: 100%;max-width: 93.5rem;margin: 3rem auto 0;
}#wrapper > .container
{display: flex;padding: 0 8rem;
}/*smartphone image*/
.phone-app-demo
{height: 61.8rem;background: url('https://uditsolutions.in/babamachine/wp-content/uploads/2019/08/phone.png') center no-repeat;flex: 1;
}/*form styling*/
.form-data
{width: 100%;max-width: 35rem;margin-top: 3rem;
}.form-data form
{background-color: #fff;border: 2px solid #eee;display: flex;flex-direction: column;padding: 2rem 4rem;text-align: center;
}/*logo again styling*/
.logo h1
{/*width: 17.5rem;*/margin-bottom: 2.5rem;
}/*form input styling*/
.form-data form input
{padding: .8rem;margin-bottom: .5rem;border: 2px solid #eee;border-radius: .4rem;
}.form-btn
{margin: 1rem 0 1.5rem;height: 3rem;background-color: #3897f0;font-size: 1.4rem;color: #fff;font-weight: bold;border: none;border-radius: .4rem;cursor: pointer;
}/*OR font styling*/
.has-separator
{font-size: 1.3rem;color: #999999;text-transform: uppercase;position: relative;margin-bottom: 2.5rem;
}.has-separator::before,
.has-separator::after{content: '';position: absolute;background-color: #eee;width: 40%;height: 1.5px;top: 50%;transform: translateY(-50%);
}.has-separator::before
{left: 0;
}.has-separator::after
{right: 0;
}/*FACEBOOK ligin text styling*/
.facebook-login
{font-size: 1.4rem;font-weight: bold;color: #385185;margin-bottom: 2.5rem;
}.facebook-login
{font-size: 1.4rem;font-weight: bold;color: #385185;margin-bottom: 2.5rem;
}.facebook-login i
{font-size: 2rem;margin-right: .7rem;
}/*password reset styling*/
.password-reset
{font-size: 1.2rem;color: #003569;
}/*signup text styling*/
.sign-up
{text-align: center;font-size: 1.4rem;color: #262626;padding: 2rem 0;background-color: #fff;border: 2px solid #eee;margin: 1rem 0;
}.sign-up
{text-align: center;font-size: 1.4rem;color: #262626;padding: 2rem 0;background-color: #fff;border: 2px solid #eee;margin: 1rem 0;
}.sign-up a
{color: #3897f0;font-weight: bold;
}/*Play stor and App store image styling*/
.get-the-app
{font-size: 1.4rem;text-align: center;
}.get-the-app span
{display: block;margin: 2rem 0;color: #262626;
}.badge
{width: 100%;display: flex;justify-content: center;
}.badge img
{max-width: 14rem;cursor: pointer;
}.badge img:first-child
{margin-right: 1rem;
}/*Footer link styling*/
footer
{padding: 5rem 0;
}footer .container
{display: flex;justify-content: space-between;font-weight: bold;text-transform: uppercase;font-size: 1.3rem;flex-wrap: wrap;margin-top: 0;
}.footer-nav ul
{display: flex;flex-wrap: wrap;list-style: none;
}.footer-nav ul li
{margin-right: 1.6rem;
}.footer-nav ul li a
{color: #003569;
}.copyright-notice
{color: #999999;
}/*responsive styling*/
@media (max-width: 900px)
{.phone-app-demo{display: none;}.form-data{margin: 0 auto;}#wrapper > .container{padding: 0;}footer .container{padding: 0 2rem;justify-content: center;}.footer-nav ul{justify-content: center;}.footer-nav ul li{margin-bottom: 1rem;}
}@media (max-width: 450px)
{#wrapper{padding-top: 0;}.form-data form{background-color: transparent;border: none;padding: 0 2rem;}.sign-up{background-color: transparent;border: none;margin: 4rem 0;}footer{padding-bottom: 2rem;}
}</style>
</head>
<body><div id="wrapper"><div class="container"><div class="phone-app-demo"></div><div class="form-data"><form action=""><div class="logo"><h1>Instagram.</h1></div><input type="text" placeholder="Phone number, username, or email"><input type="text" placeholder="Password"><button class="form-btn" type="submit">Log in</button><span class="has-separator">Or</span><a href="#" class="facebook-login"><i class="fab fa-facebook"></i> Log in with Facebook</a><a class="password-reset" href="#">Forgot password?</a></form><div class="sign-up">Don't an account? <a href="#">Sign up</a></div><div class="get-the-app"><span>Get the app</span><div class="badge"><img src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png" alt="android App"><img src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png" alt="ios app"></div></div></div></div><footer><div class="container"><nav class="footer-nav"><ul><li><a href="#">About Us</a></li><li><a href="#">Support</a></li><li><a href="#">Jobs</a></li><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Profiles</a></li><li><a href="#">Languages</a></li></ul></nav><div class="copyright-notice">&copy; 2019 Complaints</div></div></footer></div>
</body>
</html>

HTML+CSS登陆界面实例：Instagram 登录页面（一个拿来就能用的炫酷登录页面）相关推荐

java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
一:源码获取这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面,这里我将源码资源分享给大家,大家可以直接免费下载使用哦,没有 vip 的小伙伴找我私聊发送"登录注册"即 ...
android打开小屏登录画面,Android炫酷登录界面
来看一波图片吧 CoverEyeLogin.gif 动画效果介绍 1.当用户输入用户名时,小猫头鹰的眼睛是没有被捂住的 2.当用户输入密码时,小猫头鹰会用手捂住眼睛 3.如果用户名和密码都已经输入完毕 ...
成品直播源码推荐，平台实现的炫酷背景页面
成品直播源码推荐,平台实现的炫酷背景页面 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte ...
android 登录注册动画,Android开发（14）——动画实战：炫酷登录
本节内容 1.第三方库实现虚化 2.添加输入框和按钮 3.按钮状态 4.键盘隐藏 5.监听焦点改变的事件 6.手臂旋转动画 7.手掌和手臂动画 Demo简介 1.做一个炫酷登录的界面. image.p ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
5个炫酷登录页面，拿去就能用（附源码）
登录页面,觉得显示效果很好,借鉴其他博主的,喜欢的可以收藏关注,不商用,只为学习传播目录 1.炫酷星空登录 2.动态云层登录 3.深海灯光水母登录 4.炫酷蛛网登录 5.彩色气泡登录 1.炫酷星空登 ...
python制作qq登录界面_用Python实现一个最新QQ办公版（TIM）的登录界面
最近,QQ的办公版本--TIM进行了一次更新升级.本次更新升级大幅修改了界面的样式,看起来更加的清爽.简洁和高效了. 这种界面州的先生还是比较喜欢的,没有QQ那么花里胡哨,也比微信那些残缺的功能更加丰 ...
java登陆界面中关于JDBC的一个问题
最近用java写了一个登陆的小界面,先把代码贴出来然后说说其中的问题. import java.awt.Container; import java.awt.Toolkit; import java. ...

HTML+CSS登陆界面实例：Instagram 登录页面（一个拿来就能用的炫酷登录页面）

效果：

在线预览：

代码：

HTML+CSS登陆界面实例：Instagram 登录页面（一个拿来就能用的炫酷登录页面）相关推荐

最新文章

热门文章