Miatack
3/5/2019 - 12:52 PM
article.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<title>Tech-Monitor</title>
</head>
<body>
<!----------------------------NAVBAR------------------------>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Tech-Monitor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Do It Yourself !</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
</form>
</div>x
</div>
</nav>
<!--------------------- ARTICLE ------------------------->
<div id="article">
<h2>
Complete article
</h2>
<div id="content">
<h3>
subtitle
</h3>
<img src="https://via.placeholder.com/150" alt="article illustraion">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam recusandae vero nobis, minima possimus labore? Earum quas ullam sed ipsa nisi, asperiores, dignissimos necessitatibus itaque fugiat autem amet! Dolore, eveniet? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis non necessitatibus amet sed praesentium, corrupti ut exercitationem, id reiciendis in distinctio corporis ducimus, vero impedit inventore. Accusamus obcaecati consequuntur dolor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quo ratione debitis ipsum voluptas laborum maxime dicta veniam vitae eaque quaerat amet, velit, hic eum eveniet eos magni temporibus labore? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut laudantium deserunt accusamus repellat alias! Architecto blanditiis animi nulla voluptate ipsam, asperiores, est omnis excepturi veniam accusantium, necessitatibus ut cum totam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae nisi in incidunt perferendis sit, quis, est debitis aut sed recusandae temporibus pariatur totam. Dolores qui pariatur corporis explicabo eveniet accusamus.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit illo porro ex iure laborum. Sit unde repellat perferendis, quam, tenetur deleniti vitae explicabo cumque perspiciatis nam recusandae, illo debitis inventore? Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, aliquam? Nisi nostrum eligendi soluta vero, neque reiciendis corrupti iure nobis illum quasi hic, laboriosam quae impedit ea quod nemo accusantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum ipsam nulla debitis at autem unde tenetur vel mollitia nisi in? Aperiam facilis quaerat voluptas animi libero optio nam quisquam veritatis. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt expedita laudantium tempore debitis modi sit, exercitationem et esse iusto temporibus? Sapiente expedita deleniti commodi, eos consectetur hic asperiores nostrum? Ratione! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, laboriosam vitae expedita doloribus atque eligendi accusantium aliquid voluptates fugit odio tempora rem ullam consequuntur quam sapiente dolores culpa voluptate saepe!</p>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
<footer>
<footer>
<div class="p-3 mb-2 bg-dark text-white">
<div class="container">
<div class="row">
<div class="col-4">
<P>About us</P>
<P>Fellows</P>
<P>Join our army</P>
</div>
<div class="col-4">
<P>Faq</P>
<P>Reward conditions</P>
<P>Legal mentions</P>
</div>
<div class="col-4">
<p>Tech-monitor.com</p>
<p>Follow him also on Twitter</p>
</div>
</div>
</div>
</div>
</footer>
</footer>
</html>