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

Thumbnail
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 Codepen.io
Copyright r4c3r44 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <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>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">home</a>
            </div>

            <!-- 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">
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

<section class="header"><section>
<header>
        <div class="header-content">
            <div class="header-content-inner">
                <h1 id="homeHeading">Put the site tittle here!</h1>
                <hr>
                <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>
            </div>
        </div>
    </header>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/r4c3r44/one-page-site-model-bqNwJa */
#mainNav{
  
}
.navbar navbar-default navbar-fixed-top{
  
}
.container-fluid{
  
  
}
.navbar-toggle collapsed{
  
}
.sr-only{
  
}
.navbar-brand page-scroll{
  
}
.collapse navbar-collapse{
  
}
#bs-example-navbar-collapse-1{
  
}
.bs-example-navbar-collapse-1{
  
}
.page-scroll{
  
}
.header{
  
}
.header-content-inner{
  
}

Comments