Pruebas

1 year ago · 2c9701a22a
--- a/src/main/resources/static/css/inicio.css
+++ b/src/main/resources/static/css/inicio.css
@ -0,0 +1,33 @@
 .wrapper {
    margin-top: 1%;
    margin-left: 15%;
    margin-right: 20%;
    display: flex;
    flex-direction: column;
 }

 .box {
    width: 100%;
    padding: 10px;
    text-align: center;
    border: 1px solid black;
 }

 .image {
    display: inline-block;
    background: black;
    color: white;
    padding: 10px;
 }

@media (min-width: 600px) {
    .wrapper {
        flex-direction: row;
    }

    .box {
        width: auto;
        flex-grow: 1;
    }

 }
--- a/src/main/resources/templates/inicio/inicio.html
+++ b/src/main/resources/templates/inicio/inicio.html
@ -2,12 +2,43 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/css/inicio.css}">
 </head>
 <body>
 <nav th:fragment="inicio">

 <nav th:fragment="inicio">
 <div class="wrapper">
    <div class="box">
        <div class="image">Image</div>
        <h1>Title Text</h1>
        <div>detailed text that explains what the title means</div>
    </div>
 </div>
    <div class="wrapper">
        <div class="box">
            <div class="image">Image</div>
            <h1>Que el el HTML</h1>
            <div>detailed text that explains what the title means </div>
            <div>Responder</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="box">
            <div class="image">Image</div>
            <h1>Title Text</h1>
            <div>detailed text that explains what the title means</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="box">
            <div class="image">Image</div>
            <h1>Title Text</h1>
            <div>detailed text that explains what the title means</div>
        </div>
    </div>
 </nav>
 </body>
 </html>