I need some help.
If I want to build a one pager for example which of the two would be correct and why.
My current approach:
This is the other approach I had, but makes less sense to me:
Please help me understand how to use these bad-boys correctly?
If I want to build a one pager for example which of the two would be correct and why.
My current approach:
HTML:
<nav class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li><a href="#">Home</a></li>
<li><a href="#about-section">About Us</a></li>
<li><a href="#gallery-section">Gallery</a></li>
<li><a href="#howto-section">How-To</a></li>
<li><a href="#contact-section">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav><!--/.navbar -->
<!-- Container -->
<div class="container">
<hr class="about">
<!-- About Us -->
<section id="about-section" class="about">
<div class="row">
<div class="col-lg-8">
<article class="primary-about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.rhoncus ut, imperdiet a, venenatis vitae.</p>
<p>Lorem ipsum dolor sit amet. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetuer</p>
</article>
</div>
<div class="col-lg-4">
<aside class="secondary-about">
<h2>lorim Title</h2>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</aside>
</div>
</div>
</section>
<hr class="gallery">
<!-- Gallery -->
<section id="gallery-section" class="gallery">
<h2>Our Gallery</h2>
<p>lorim</p>
<div class="row">
</div>
</section>
<hr class="howto">
<!-- How To -->
<section id="howto-section" class="howto">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</section>
<hr class="contact">
<!-- Contact Us -->
<section id="contact-section" class="contact">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</section>
<!-- End of Container -->
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="text-center">Lorim</p>
<hr>
<p class="text-justify">More Lorim</p>
</div>
</div>
</footer>This is the other approach I had, but makes less sense to me:
HTML:
<nav class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li><a href="#">Home</a></li>
<li><a href="#about-div">About Us</a></li>
<li><a href="#gallery-div">Gallery</a></li>
<li><a href="#howto-div">How-To</a></li>
<li><a href="#contact-div">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav><!--/.navbar -->
<!-- Container -->
<article>
<div class="container">
<hr class="about">
<!-- About Us -->
<div id="about-div" class="about">
<div class="row">
<div class="col-lg-8">
<div class="primary-about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</p>
</div>
</div>
<div class="col-lg-4">
<div class="secondary-about">
<h2>lorim Title</h2>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="gallery">
<!-- Gallery -->
<div id="gallery-div" class="gallery">
<h2>Our Gallery</h2>
<p>lorim</p>
<div class="row">
</div>
</div>
<hr class="howto">
<!-- How To -->
<div id="howto-div" class="howto">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
<hr class="contact">
<!-- Contact Us -->
<div id="contact-div" class="contact">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
<!-- End of Container -->
</div>
</article>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="text-center">Lorim</p>
<hr>
<p class="text-justify">More Lorim</p>
</div>
</div>
</footer>Please help me understand how to use these bad-boys correctly?