Skip to content

C
css-e003
Switch branch/tag
Find file
Normal viewHistoryPermalink
Resultado.html 8.85 KB
Newer Older
Ejercicio 1 con Bootstrap
afb154f3
 
roshka committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 
<!DOCTYPE html>
<html lang="es">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container-fluid">
            <!--Parte 1-->
            <div class='row justify-content-start'>
                <div class = 'col-4'>
                    <h1>Logotipo</h1>
                </div>
                <div class='col-5'></div>
                <div class='col-3'>
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon1">Buscar</button>
                        </div>
                        <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
                    </div>
                </div>
            </div>
            <!--Parte 2--> 
            <div class='row justify-content-start'>
                <div class='col-4'>
                    <a href="www.google.com">Loremipsumdolorsitamet</a>
                </div>
            </div>
            <!--Parte 3-->
            <div class='row'>
                <!--Esto es la columna 1-->
                <div class='col-3'>
                    <b><a href="www.ultimahora.com">Noticias</a></b><br>
                    dd/mm/aaaa
                    <a href="www.google.com">Lorem ip  aptent taciti sociosqu ad ante velit scelerisque diam</a><br>
                    dd/mm/aaaa
                    <a href="www.google.com">consectetur adipiscing elit condimentum pharetra nisl ac</a><br>
                    dd/mm/aaaa
                    <a href="www.google.com">Nullam eu molestie felis vestibulum volutpat purus</a><br>
                    dd/mm/aaaa
                    <a href="www.google.com">magna urna, suscipit ac ante magna mauris pulvinar dolor</a><br>
                    dd/mm/aaaa
                    <a href="www.google.com">magna convallis finibuss celerisque sit amet lacus eget</a><br>
                    <!--La parte de enlaces patrocinados-->
                    <b><a href="www.ultimahora.com">Enlaces relacionados</a></b><br>
                    <a href="www.google.com">accumsan sollicitudin dapib</a><br>
                    <a href="www.yahoo.com">aliquam non nibh</a><br>
                    <a href="www.bing.com">roin sapien justo,</a><br>
                    <b><a href="www.ultimahora.com">Publicidad</a></b><br>
                    In ut leo cursus ante finibus efficitur. Proin euismod sed risus ut convallis. 
                        Duis quam nisl, sollicitudin a nulla a,sum, ut efficitur am mattis et quam vel sollicitudin. 
                        Aliquam sodales sagittis facilisis. Mauris
                         vestibulum gravida turpis.Donec in mauris nec metus hendrerit dignissim et eu lorem. 
                         Aliquam pharetra, libero eget commodo facilisis, sem augue molestie neque, nec tincidunt 
                         ante velit scelerisque diam. Sed mollis ultrices turpis, eu venenatis dui aliquet sit amet. 
                         Pellentesque euismod libero sit amet porta egestas.
                    <br>
                    <a href="www.jagua.com">Seguir leyendo ... </a>
                </div>
                <!--Ahora nos vamos a la columna 2-->
                <div class='col-7'>
                    <h2>Mauris a aliquet leo. Cras quis ante ac purus cursus consequat.</h2>
                    <img align='left' src="imagen.png" alt="id gravida nisl tristique" class="img-thumbnail">
                    In ut leo cursus ante finibus efficitur. Proin euismod sed risus ut convallis. Duis quam nisl, 
                    sollicitudin a nulla a, blandit ullamcorper eros. Suspendisse potenti. 
                    Nam fermentum justo nec eleifend congue. Mauris hendrerit semper ipsum, 
                    ut efficitur elit ultricies eu. Praesent a laoreet justo, vitae efficitur turpis. 
                    In sed lectus ac lorem ultricies posuere eu ac diam. Etiam ac lobortis orci. Praesent a porta justo. 
                    Curabitur vitae odio efficitur, facilisis eros in, vehicula nisl. Cras quis ante ac purus cursus 
                    consequat. Duis mollis, nunc sit amet aliquam rhoncus, quam eros cursus lorem, id dapibus urna nulla 
                    ac neque. Mauris dui ligula, pellentesque id lorem a, sollicitudin pulvinar lacus. Cras ultricies orci 
                    et est venenatis tincidunt. Pellentesque placerat fringilla imperdiet <br>
                    <a href="www.jagua.com">Seguir leyendo ... </a>
                    <h2>Nam fermentum justo nec eleifend congue</h2>
                    <img align='left' src="imagen.png" alt="id gravida nisl tristique" class="img-thumbnail">
                    Sed nibh lacus, feugiat ac laoreet vel, dictum non velit. Fusce tempor tristique tortor sed tempus. 
                    Aliquam vitae gravida velit, gravida imperdiet arcu. Etiam est mauris, scelerisque sit amet lacus 
                    eget, auctor efficitur mauris. Duis venenatis, purus nec hendrerit rhoncus, ante diam mollis massa, 
                    at tincidunt mi ligula eu turpis. Fusce laoreet erat eu ex dignissim congue. Maecenas cursus pretium 
                    accumsan. Fusce malesuada nunc lorem, sollicitudin condimentum diam cursus nec. Praesent pretium feugiat
                    sapien, nec pellentesque justo mattis et. Cras facilisis iaculis erat sit amet feugiat. Curabitur ante orci, 
                    sagittis non dui porttitor, volutpat tincidunt lacus. Fusce porttitor rutrum rutrum.
                    Pellentesque pharetra congue tristique.<br>
                    <a href="www.jagua.com">Seguir leyendo ... </a>
                </div>
                <!--Ahora la ultima columna-->
                <div class='col-2'>
                    <h2>Donec porta tristique</h2>
                    Donec in mauris nec metus hendrerit dignissim et eu lorem. Aliquam pharetra, libero eget commodo facilisis, 
                    sem augue molestie neque, nec tincidunt ante velit scelerisque diam. Sed mollis ultrices turpis, 
                    eu venenatis dui aliquet sit amet.<br>
                    <a href="www.jagua.com">Seguir leyendo ... </a>
                    <h2>Curabitur ante orci</h2>
                    Pellentesque lacinia suscipit commodo. Praesent orci nibh, posuere eget eros et, ornare iaculis velit.
                    Proin eget lorem pharetra, bibendum augue id, venenatis diam. <br>
                    <a href="www.jagua.com">Seguir leyendo ... </a>
                </div>
            </div>
            <!--Agregamos la tercera fila-->
            <div class='row justify-content-start'>
                <div class='col-5'>
                    <!--La parte de navegacion-->
                    <ul class="nav">
                            <li class="nav-item">
                              <a class="nav-link" href="www.youtube.com">pulvinar</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="www.youtube.com">finibus</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="www.youtube.com">dignissim</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="www.youtube.com">euismod</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="www.youtube.com">vitae</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="www.youtube.com">mauris</a>
                            </li>
                    </ul>
                </div>
                <!--Esto es para agregar espacio-->
                <div class='col-4'>
                    
                </div>
                <!--La ultima parte-->
                <div class='col-3'>
                    <p align='right'>@ Copyright pulvinar </p>
                </div>
            </div>
        </div>

        <!--Estos son el javascript de bootstrap-->
        <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    </body>
    
</html>