<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Mobile-test</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<header class="navbar-fixed-top">
<nav class="navbar navbar-inverse main-navigation" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="triangle-contain">
<a class="navbar-brand top-logo" href="#">
Sebenza
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="text-right" href="#">Home</a></li>
<li><a class="text-right" href="#">About</a></li>
<li><a class="text-right" href="#">Contact</a></li>
<li><a class="text-right special-nav" href="#">Get The App</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="row login-content">
<div class="col-xs-12 login-head">
<div class="text-wrap">
<h1>Login</h1>
<h2>Welcome back</h2>
</div>
</div>
<div class="top-inputs">
<h1 class="email-title">Email</h1>
<input type="text">
<h1>Password</h1>
<input type="password">
<input type="button" value="Forgot Password?" class="forgot-pass">
<input type="button" value="Login With Facebook" class="facebook-log">
</div>
<div class="bottom-inputs">
<input type="button" value="Login" class="login-submit">
</div>
</div>
<div class="row about-section">
<div class="about-content"></div>
</div>
<div class="row footer-section">
<div class="footer-content"></div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-Infamous/mobile-test-YrEQMB */
@media screen and (max-width: 767px) {
h1, h2 {
margin: 0;
color: #FFFFFF;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 18px;
}
.main-navigation {
background-color: #1581ba;
border: none;
border-radius: 0px;
outline: none;
}
.login-content {
height: calc(100vh - 50px);
margin-top: 50px;
background-color: #FFFFFF;
}
.login-head {
height: 80px;
background-color: #1581ba;
margin-bottom: 50px;
}
.top-inputs {
width: 90%;
margin: 0 auto;
}
.top-inputs h1 {
font-size: 20px;
color: #6a6a6a;
margin-top: 0px;
}
input[type="text"],
input[type="password"] {
border: none;
border-bottom: 1px solid #979797;
width: 100%;
}
input {
outline: none;
}
input[type="text"] {
margin-bottom: 30px;
}
.forgot-pass,
.facebook-log,
.login-submit {
border: none;
}
.forgot-pass {
background-color: transparent;
display: block;
width: 100%;
text-align: right;
margin-bottom: 30px;
}
.facebook-log {
width: 300px;
background-color: #3b5998;
background-image: url(http://clipart-library.com/img/1789650.jpg);
background-repeat: no-repeat;
background-position: 25px center;
background-size: auto 100%;
border-radius: 5px;
color: #FFFFFF;
height: 50px;
display: block;
margin: 0 auto;
}
.login-submit {
width: 100%;
height: 70px;
background-color: #1581BA;
color: #FFFFFF;
bottom: 0px;
left: 0px;
position: absolute;
}
.about-section {
height: 100vh;
background-color: blue;
border: none;
border-top: 1px solid white;
display: flex;
align-items: center;
justify-content: center;
}
.about-content {
width: 90%;
height: 90%;
background-color: #FFFFFF;
}
.footer-section {
height: 30vh;
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
}
.footer-content {
width: 90%;
height: 90%;
background-color: #FFFFFF;
}
}