serset
/
Sers


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
							<!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 active">
                                <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                        </li>

                        <li class="nav-item dropdown">
                                    <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" 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 my-2 my-sm-0 btn-primary" type="submit">Search</button>
                    </form>
                    
                </div>            
            </nav>
        </div>

        <!-- Jumbtron / Slider -->
        <div class="jumbotron-wrap">
            <div class="container">
                <div id="mainCarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="jumbotron">
                                <h1 class="text-center">Tristique sem vitae metus ornare </h1>
                                <p class="lead text-center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                                <p class="lead text-center">
                                        <a class="btn btn-primary btn-lg" href="#" role="button"><i class="fa fa-info"></i> &nbsp; Learn more</a>
                                    <a class="btn btn-secondary btn-lg" href="#" role="button"><i class="fa fa-gbp"></i> &nbsp; Buy now</a>
                                </p>
                            </div>

                        </div>

                        <div class="carousel-item">
                            <div class="jumbotron">
                                <h1 class="text-center">Cras sit amet nibh libero, in gravida nulla</h1>
                                <p class="lead text-center">Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
                                <p class="lead text-center">
                                        <a class="btn btn-outline-primary btn-lg" href="#" role="button"><i class="fa fa-info"></i> &nbsp; Learn more</a>
                                    <a class="btn btn-outline-secondary btn-lg" href="#" role="button"><i class="fa fa-gbp"></i> &nbsp; Buy now</a>
                                </p>
                            </div>

                        </div>
                    </div>

                    <a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Main content area -->
        <main class="container">
            <div class="row">
                
                <!-- Main content -->
                <div class="col-md-8">
                    <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="2013-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 12 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>

                
                <!-- Sidebar -->
                <aside class="col-md-4">
                    <div class="sidebar-box">
                        <h4>Categories</h4>
                        <div class="list-group list-group-root">
                            <a class="list-group-item active" href="index.html">Home Page</a>
                            <a class="list-group-item" href="examples.html">Style Examples</a>
                            <div class="list-group">
                                <a class="list-group-item" href="three-column.html">Three Column</a>
                                <a class="list-group-item" href="one-column.html">One column / no sidebar</a>
                                <a class="list-group-item" href="text.html">Text / left sidebar</a>	
                            </div>
                            <a class="list-group-item" href="three-column.html">Three column layout example</a>
                            <a class="list-group-item" href="#">Sed aliquam libero ut velit bibendum</a>
                            <a class="list-group-item" href="#">Maecenas condimentum velit vitae</a>
                        </div>
                    </div>

                    <div class="sidebar-box sidebar-box-bg">
                        <h4>About us</h4>
                        <p>Aenean nec massa a tortor auctor sodales sed a dolor. Duis vitae lorem sem. Proin at velit vel arcu pretium luctus. <a href="#" class="readmore">Read More &raquo;</a></p>    
                    </div>

                    <div class="sidebar-box">
                        <h4>Search site</h4>
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="text"  placeholder="Search" aria-label="Search">
                            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                        </form>
                    </div>

                    <div class="sidebar-box">
                        <h4>Helpful Links</h4>
                        <ul>
                            <li><a href="#" title="premium templates">Premium HTML web templates from $10</a></li>
                            <li><a href="#" title="web hosting">Cheap web hosting from Dreamhost</a></li>
                            <li><a href="#" title="Tux Themes">Premium WordPress themes</a></li>
                        </ul>
                    </div>
                </aside> 
                
                
            </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>