serset
/
Sers


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!doctype html>
<html lang="en">
	<head>
        <title>Home</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        <!-- Main CSS --> 
        <link rel="stylesheet" href="css/style.css">

        <!-- Font Awesome -->
        <link href="css/font-awesome.min.css" rel="stylesheet">
    </head>
  
    <body>

        <!-- Header -->
        <div class="container">
            <div class="header-wrap d-none d-md-block">
                <div class="row">
                    
                    <!-- Left header box -->
                    <header class="col-6 text-left">
                        <h1><span>website</span>name</h1>
                    </header>
                    
                    <!-- Right header box -->
                    <div class="col-6 text-right">               
                        <p class="header-social-icons social-icons">
                            <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                            <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                            <a href="#"><i class="fa fa-youtube fa-2x"></i></a>
                            <a href="#"><i class="fa fa-instagram fa-2x"></i></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        
        <!-- Main navigation -->
        <div class="container navbar-container">
            <nav class="navbar navbar-expand-md navbar-light">
                 
                <!-- Company name shown on mobile -->
                <a class="navbar-brand d-md-none d-lg-none d-xl-none" href="#"><span>website</span>name</a>

                <!-- Mobile menu toggle -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Main navigation items -->
                <div class="collapse navbar-collapse" id="mainNavbar">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                                <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                        </li>

                        <li class="nav-item dropdown active">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Examples &amp; Pages</a>
                                    <div class="dropdown-menu navbar-dark bg-primary">
                                          <a class="dropdown-item" href="examples.html">Style Examples</a>
                                          <a class="dropdown-item" href="three-column.html">Three Column</a>
                                          <a class="dropdown-item active" href="one-column.html">One column / no sidebar</a>
                                          <a class="dropdown-item"  href="text.html">Text / left sidebar</a>
                                    </div>
                        </li>


                        <li class="nav-item">
                                <a class="nav-link" href="#">Services</a>
                        </li>

                        <li class="nav-item">
                                <a class="nav-link" href="#">Products</a>
                        </li>

                        <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    
                    <form class="form-inline header-search-form my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" size="10"  placeholder="Search" aria-label="Search">
                        <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </div>

        <!-- Jumbtron / Slider -->
        <div class="jumbotron-wrap">
            <div class="container">
                <div class="jumbotron static-slider">
                    <h1 class="text-center">One column layout</h1>
                    <p class="lead text-center">With a static slider.</p>
                </div>
            </div>
        </div>

        <!-- Main content area -->
        <main class="container">
            <div class="row">
                
                <!-- Main content -->
                <div class="col">
                    <article>
                        <h2 class="article-title">Introduction to portal</h2>

                        <p class="article-meta">Posted on <time datetime="2017-05-14">14 May</time> by <a href="#" rel="author">Joe Bloggs</a></p>

                        <p>Welcome to portal, a free CSS3 &amp; HTML5 responsive web template from <a href="#" title="ZyPOP">ZyPOP</a>. This template is completely <strong>free</strong> to use permitting a link remains back to  <a href="#" title="ZyPOP">ZyPOP</a>.</p>

                        <p> Should you wish to use this template unbranded you can buy a template license from our website for 8.00 GBP, this will allow you remove all branding related to our site, for more information about this see below.</p>	

                        <p>This template has been tested in:</p>

                        <ul>
                            <li>Firefox</li>
                            <li>IE / Edge</li>
                            <li>Chrome</li>
                            <li>Safari</li>
                            <li>iOS / Android</li>
                        </ul>


                        <a href="#" class="btn btn-primary">Read more</a>
                        <a href="#" class="btn btn-secondary">Comments</a>

                    </article>

                    <article>

                        <h2 class="article-title">Buy unbranded</h2>
                        <p class="article-meta">Posted on <time datetime="2017-05-14">14 May</time> by <a href="#" rel="author">Joe Bloggs</a></p>

                        <p>Purchasing a template license for 8.00 GBP (at time of writing around 10 USD) gives you the right to remove any branding including links, logos and source tags relating to ZyPOP. As well as waiving the attribution requirement, your payment will also help us provide continued support for users as well as creating new web templates. Find out more about how to buy at the licensing page on our website which can be accessed at <a href="#licensing" title="template license">#licensing</a></p>

                        <h3>Lorem lipsum</h3>

                        <p>Morbi fermentum condimentum felis, commodo vestibulum sem mattis sed. Aliquam magna ante, mollis vitae tincidunt in, malesuada vitae turpis. Sed aliquam libero ut velit bibendum consectetur. Quisque sagittis, est in laoreet semper, enim dui consequat felis, faucibus ornare urna velit nec leo. Maecenas condimentum velit vitae est lobortis fermentum. In tristique sem vitae metus ornare luctus tempus nisl volutpat. Integer et est id nisi tempus pharetra sagittis et libero.</p>

                        <a href="#" class="btn btn-primary">Read more</a>
                        <a href="#" class="btn btn-secondary">Comments</a>
                    </article>


                    <!-- Example pagination Bootstrap component -->
                    <nav>
                        <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                        </ul>
                    </nav>
                </div>        
            </div> 
        </main>


        <!-- Footer -->
        <div class="container footer-container">
            <footer class="footer">
                <div class="footer-lists">
                    <div class="row">
                        <div class="col-sm">
                            <ul>
                                <li><h4>Proin accumsan</h4></li>
                                <li><a href="#">Rutrum nulla a ultrices</a></li>
                                <li><a href="#">Blandit elementum</a></li>
                                <li><a href="#">Proin placerat accumsan</a></li>
                                <li><a href="#">Morbi hendrerit libero </a></li>
                                <li><a href="#">Curabitur sit amet tellus</a></li>
                            </ul>
                        </div>
                        <div class="col-sm">
                            <ul>
                                <li><h4>Condimentum</h4></li>
                                <li><a href="#">Curabitur sit amet tellus</a></li>
                                <li><a href="#">Morbi hendrerit libero </a></li>
                                <li><a href="#">Proin placerat accumsan</a></li>
                                <li><a href="#">Rutrum nulla a ultrices</a></li>
                                <li><a href="#">Cras dictum</a></li>
                            </ul>
                        </div>   
                        <div class="col-sm">
                            <ul>
                                <li><h4>Suspendisse</h4></li>
                                <li><a href="#">Morbi hendrerit libero </a></li>
                                <li><a href="#">Proin placerat accumsan</a></li>
                                <li><a href="#">Rutrum nulla a ultrices</a></li>
                                <li><a href="#">Curabitur sit amet tellus</a></li>
                                <li><a href="#">Donec in ligula nisl.</a></li>
                            </ul>
                        </div>
                        <div class="col-sm">
                            <h4>Suspendisse</h4>
                            <p>Integer mattis blandit turpis, quis rutrum est. Maecenas quis arcu vel felis lobortis iaculis fringilla at ligula. Nunc dignissim porttitor dolor eget porta.</p>

                            <p class="social-icons">
                                <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                                <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                                <a href="#"><i class="fa fa-youtube fa-2x"></i></a>
                                <a href="#"><i class="fa fa-instagram fa-2x"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            
                <div class="footer-bottom">
                        <p class="text-center">Copyright &copy; 2019.Company name All rights reserved.</p>
                        <p class="text-center"><a href="#">Back to top</a></p>
                </div>

            </footer>
        </div>


        <!-- Bootcamp JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="js/jquery-3.2.1.slim.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

    </body>
</html>