index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <title>Prueba!</title> 
    <style>
        .border{
            border: 2px;
            border-style: ridge;
        }

        ul li{
            border-right: solid;
            padding: 1px;
            border-left: none;
            border-top: none;
            border-bottom: none;
        }
    </style>   
</head>
<body class="container">    
            
    <header class="row border">
        <div class="col-lg-8">
            <h1>LOGOTIPO</h1>            
        </div>

        <div class="col-lg-4 text-right">
            Buscar <input class="text">
        </div>        
    </header>

    <div class="row col-lg-12 border">
        <a href="#">LoremIpsumDolorSitAmet</a>
    </div>

        
    <div class="row">
        <div class="col-lg-3 border">
            <h3><a href="#">Noticias</a></h3>
            <span>dd/mm/aaaa <a href="#">Lorem ipsum dolor sit amet</a></span><br>
            <span>dd/mm/aaaa <a href="#">Consectetuer adipiscing elit</a></span><br>
            <span>dd/mm/aaaa <a href="#">Donec molestie nunc eu sapien</a></span><br>
            <span>dd/mm/aaaa <a href="#">Maecenas aliquam dolor eget metus</a></span><br>
            <span>dd/mm/aaaa <a href="#">Fusce tristique lorem id metus</a></span><br>
            <h3><a href="#">Enlaces Relacionados</a></h3><br>
            <a href="#">Enlaces Relacionados</a><br>
            <a href="#">Proin placerat</a><br>
            <a href="#">Nulla in felis</a><br>
            <a href="#">Nam luctus</a><br>
            <h3><a href="#">Publicidad</a></h3><br>
            <span>
                Etiam fermentum, nisl tincidunt blandit interdum, 
                massa velit posuere dolor, sed euismod sem odio at mi. 
                Duis porta placerat arcu. Nullam felis pede, commodo vel, 
                suscipit a, molestie vel, felis. Maecenas mattis est vel est.
            </span><br>
            <a href="#">Seguir leyendo...</a>
        </div>


        <div class="col-lg-9 border">
            <div class="col-lg-9 border">            
                <div>
                    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>

                    <p>
                        <img src="recursos/imagen.png" alt="imagen" class="pull-left">
                        <span>
                            Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus.
                            Vivamus vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus
                            fringilla dui, vel aliquet pede diam tempor tortor.
                            Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique senectus
                            et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui imperdiet 
                            laoreet. Quisquee eget ipsum. Donec commodo, turpis vel venenatis sollicitudin, quam 
                            ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget 
                            est. <br>
                            <a href="#">Seguir leyendo...</a>
                        </span>
                    </p>
                </div>

                <div>
                    <h2>Vivamus lobortis turpis ac ante fringilla faucibus</h2>
                    <p>
                        <img src="recursos/imagen.png" alt="imagen" class="pull-left">
                        <span>
                            Quisquee eget ipsum. Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis 
                            justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est. Cum sociis natoque 
                            penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dictum hendrerit neque. 
                            Mauris id ligula non elit mattis semper. Fusce arcu ipsum, tempus eget, tincidunt at, imperdiet in, mi. 
                            <br> Sed fermentum cursus dolor. Aenean a diam. Phasellus feugiat. Donec tempor dignissim sem. <br>
                            <a href="#">Seguir leyendo...</a>
                        </span>
                    </p>
                </div>
            </div>
            <span class="col-lg-3 text-right">
            <div class="border text-left">
                <div>
                    <h2> Phasellus blandit </h2>
                    <p>
                        Praesent sodales imperdiet augue. Mauris lorem felis, semper eu, tincidunt eu, sollicitudin eget, sem. 
                        Nulla facilisi. Morbi ut enim ut enim ultricies dapibus. <br>
                        <a href="#">Seguir leyendo...</a>
                    </p>
                </div>

                <div>
                    <h2> Nullam vel turpis </h2>
                    <p>
                        Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus 
                        quis sapien. Ut consequat libero eget est. <br>
                        <a href="#">Seguir leyendo...</a>
                    </p>
                </div>
            </div>
            </span>
        </div>
    </div>

    <footer class="border row">
        <div class="col-lg-9">
            <ul class="list-inline">
                <li><a href="#">Nulla</a></li>
                <li><a href="#">Pharetra</a></li>
                <li><a href="#">Luctus</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Proin</a></li>
                <li><a href="#">Placerat</a></li>                
            </ul>
        </div>
        <div class="col-lg-3 text-right">
                &copy; Copyright Lorem ipsum
        </div>

    </footer>


</body>
</html>