SmallFront

Simple - Easy - Free

Starter Page

You can start SmallFront with a basic starter page. Copy/paste the below source code to your code editor.

Make sure you already have the css and js files inside of the proper folders.

<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.css" type="text/css">
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>

Open Sample Page >>

Desktop

Mobile

Starter Page - Source Code

<!doctype html>
  <html lang="en">
    <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="css/main.css" type="text/css">
          <link rel="stylesheet" href="css/font-awesome.css" type="text/css">
          <title>Site Title</title>
    </head>
    <body>
    <div class="wrapper">
    <header>
        <div class="row">
            <div class="col-6">
                <h1>Title</h1>
            </div>
        </div>
    </header>
   <nav>
   <div class="row">
     <div class="col-6">
         <div class="mobile-nav"><button class="nav"><i class="fa fa-reorder fa-3x"></i></button></div>
                <ul class="nav-down">
                        <li><a href="#" class="active">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                </ul>
     </div>
   </div>
   </nav>
   <main>
   <div class="row">
      <div class="content-box">
      <div class="col-4">
         <h2>Title Page</h2>
         <p>Lorem Ipsum</p>
         <p><a href="#" class="btn-primary" title="">Link</a></p>
      </div>
      </div>
      <div class="col-2">
         <div class="content-box">
         <img src="" class="img-square" alt="">
         </div>
      </div>
   </div>
   </main>
   <footer>
      <div class="row">
         <div class="col-6">
            <p>© smallfront.com 2018</p>
         </div>
      </div>
   </footer>
    </div>
          <script src="js/jquery.js"></script>
          <script src="js/main.js"></script>
    </body>
  </html>

SmallFront Grid >>