Item: Mobile-test
Rating: 3.4
Author: -Infamous

2 Downloads
77 Views
Tweet
Download Now View Demo

HTML
CSS

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

Comments

More from -Infamous

Mobile-test

In this example below you will see how to do a Mobile-test with some HTML / CSS and Javascript

Technologies

Comments

More from -Infamous

A Pen by Greg J Bales

A Pen by Greg J Bales

A Pen by Greg J Bales

get a string after a specific character js

You Might Also Like

A Pen by Gilas Software Team

SVG Draw

AussieTheatre Logo

A Pen by Igor Shabat

CSS/SVG Lines App Concept

Multiple Planning Guide - External Courses

First Web Page

CSS mobile-first vs desktop-first (1)