one page site model

In this example below you will see how to do a one page site model with some HTML / CSS and Javascript

This awesome code was written by r4c3r44, you can see more from this user in the personal repository.
You can find the original code on
Copyright r4c3r44 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>one page site model</title>
      <link rel="stylesheet" href="css/style.css">



  <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                <a class="navbar-brand page-scroll" href="#page-top">home</a>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                        <a class="page-scroll" href="#about">About</a>
                        <a class="page-scroll" href="#services">Services</a>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                        <a class="page-scroll" href="#contact">Contact</a>
            <!-- /.navbar-collapse -->
        <!-- /.container-fluid -->

<section class="header"><section>
        <div class="header-content">
            <div class="header-content-inner">
                <h1 id="homeHeading">Put the site tittle here!</h1>
                <p>this will be the welcome text area it should be roughtl one to two sentences in length.</p>
                <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>



/*Downloaded from */
.navbar navbar-default navbar-fixed-top{
.navbar-toggle collapsed{
.navbar-brand page-scroll{
.collapse navbar-collapse{