Skip to content

Instantly share code, notes, and snippets.

@mshahin364

mshahin364/Flex box Login Page.markdown

Created June 12, 2016 16:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mshahin364/54601127af6dec9adfb7682a4488f640 to your computer and use it in GitHub Desktop.
Save mshahin364/54601127af6dec9adfb7682a4488f640 to your computer and use it in GitHub Desktop.
Download ZIP
Flex box Login Page
Raw
Flex box Login Page.markdown
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox layout</title>
</head>
<body>
<div class="login-flex-container">
<div class="login-main-content">
<form class="login-form">login form ...</form>
</div>
<div class="login-footer">
footer...
</div>
</div>
</body>
</html>
Raw
style.scss
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
html,body{
height: 100%;
}
.login-flex-container{
border:1px solid red;
display: flex;
flex-direction: column;
height: 100%;
.login-main-content{
background:green;
flex:1;
display: flex;
align-items:center;
justify-content:center;
.login-form{
width:250px;
height: 200px;
border:1px solid red;
}
}
.login-footer{
background:#555759;
flex-basis: 50px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment