| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8"/>
|
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|---|
| 6 | <title>Home</title>
|
|---|
| 7 | <!-- Bootstrap core CSS -->
|
|---|
| 8 | <link href="css/bootstrap.min.css" rel="stylesheet"/>
|
|---|
| 9 | <link href="css/carousel.css" rel="stylesheet"/>
|
|---|
| 10 | <meta name="theme-color" content="#7952b3"/>
|
|---|
| 11 | </head>
|
|---|
| 12 | <body class="text-center">
|
|---|
| 13 | <header th:replace="common/navbar :: navbar"></header>
|
|---|
| 14 | <main>
|
|---|
| 15 |
|
|---|
| 16 | <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
|
|---|
| 17 | <div class="carousel-indicators">
|
|---|
| 18 | <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
|---|
| 19 | <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
|---|
| 20 | <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|---|
| 21 | </div>
|
|---|
| 22 | <div class="carousel-inner">
|
|---|
| 23 | <div class="carousel-item active">
|
|---|
| 24 | <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|---|
| 25 |
|
|---|
| 26 | <div class="container">
|
|---|
| 27 | <div class="carousel-caption text-start">
|
|---|
| 28 | <h1>Example headline.</h1>
|
|---|
| 29 | <p>Some representative placeholder content for the first slide of the carousel.</p>
|
|---|
| 30 | <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
|
|---|
| 31 | </div>
|
|---|
| 32 | </div>
|
|---|
| 33 | </div>
|
|---|
| 34 | <div class="carousel-item">
|
|---|
| 35 | <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|---|
| 36 |
|
|---|
| 37 | <div class="container">
|
|---|
| 38 | <div class="carousel-caption">
|
|---|
| 39 | <h1>Another example headline.</h1>
|
|---|
| 40 | <p>Some representative placeholder content for the second slide of the carousel.</p>
|
|---|
| 41 | <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
|
|---|
| 42 | </div>
|
|---|
| 43 | </div>
|
|---|
| 44 | </div>
|
|---|
| 45 | <div class="carousel-item">
|
|---|
| 46 | <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|---|
| 47 |
|
|---|
| 48 | <div class="container">
|
|---|
| 49 | <div class="carousel-caption text-end">
|
|---|
| 50 | <h1>One more for good measure.</h1>
|
|---|
| 51 | <p>Some representative placeholder content for the third slide of this carousel.</p>
|
|---|
| 52 | <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
|
|---|
| 53 | </div>
|
|---|
| 54 | </div>
|
|---|
| 55 | </div>
|
|---|
| 56 | </div>
|
|---|
| 57 | <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
|
|---|
| 58 | <span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|---|
| 59 | <span class="visually-hidden">Previous</span>
|
|---|
| 60 | </button>
|
|---|
| 61 | <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
|---|
| 62 | <span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|---|
| 63 | <span class="visually-hidden">Next</span>
|
|---|
| 64 | </button>
|
|---|
| 65 | </div>
|
|---|
| 66 |
|
|---|
| 67 |
|
|---|
| 68 | <!-- Marketing messaging and featurettes
|
|---|
| 69 | ================================================== -->
|
|---|
| 70 | <!-- Wrap the rest of the page in another container to center all the content. -->
|
|---|
| 71 |
|
|---|
| 72 | <div class="container marketing">
|
|---|
| 73 |
|
|---|
| 74 | <!-- Three columns of text below the carousel -->
|
|---|
| 75 | <div class="row">
|
|---|
| 76 | <div class="col-lg-4">
|
|---|
| 77 | <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|---|
| 78 |
|
|---|
| 79 | <h2>Heading</h2>
|
|---|
| 80 | <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|---|
| 81 | <p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|---|
| 82 | </div><!-- /.col-lg-4 -->
|
|---|
| 83 | <div class="col-lg-4">
|
|---|
| 84 | <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|---|
| 85 |
|
|---|
| 86 | <h2>Heading</h2>
|
|---|
| 87 | <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
|
|---|
| 88 | <p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|---|
| 89 | </div><!-- /.col-lg-4 -->
|
|---|
| 90 | <div class="col-lg-4">
|
|---|
| 91 | <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|---|
| 92 |
|
|---|
| 93 | <h2>Heading</h2>
|
|---|
| 94 | <p>And lastly this, the third column of representative placeholder content.</p>
|
|---|
| 95 | <p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|---|
| 96 | </div><!-- /.col-lg-4 -->
|
|---|
| 97 | </div><!-- /.row -->
|
|---|
| 98 |
|
|---|
| 99 |
|
|---|
| 100 | <!-- START THE FEATURETTES -->
|
|---|
| 101 |
|
|---|
| 102 | <hr class="featurette-divider">
|
|---|
| 103 |
|
|---|
| 104 | <div class="row featurette">
|
|---|
| 105 | <div class="col-md-7">
|
|---|
| 106 | <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
|
|---|
| 107 | <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
|
|---|
| 108 | </div>
|
|---|
| 109 | <div class="col-md-5">
|
|---|
| 110 | <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|---|
| 111 |
|
|---|
| 112 | </div>
|
|---|
| 113 | </div>
|
|---|
| 114 |
|
|---|
| 115 | <hr class="featurette-divider">
|
|---|
| 116 |
|
|---|
| 117 | <div class="row featurette">
|
|---|
| 118 | <div class="col-md-7 order-md-2">
|
|---|
| 119 | <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
|
|---|
| 120 | <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
|
|---|
| 121 | </div>
|
|---|
| 122 | <div class="col-md-5 order-md-1">
|
|---|
| 123 | <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|---|
| 124 |
|
|---|
| 125 | </div>
|
|---|
| 126 | </div>
|
|---|
| 127 |
|
|---|
| 128 | <hr class="featurette-divider">
|
|---|
| 129 |
|
|---|
| 130 | <div class="row featurette">
|
|---|
| 131 | <div class="col-md-7">
|
|---|
| 132 | <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
|
|---|
| 133 | <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
|
|---|
| 134 | </div>
|
|---|
| 135 | <div class="col-md-5">
|
|---|
| 136 | <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|---|
| 137 |
|
|---|
| 138 | </div>
|
|---|
| 139 | </div>
|
|---|
| 140 |
|
|---|
| 141 | <hr class="featurette-divider">
|
|---|
| 142 |
|
|---|
| 143 | <!-- /END THE FEATURETTES -->
|
|---|
| 144 |
|
|---|
| 145 | </div><!-- /.container -->
|
|---|
| 146 |
|
|---|
| 147 |
|
|---|
| 148 | <!-- FOOTER -->
|
|---|
| 149 | <footer class="container">
|
|---|
| 150 |
|
|---|
| 151 | </footer>
|
|---|
| 152 | </main>
|
|---|
| 153 | <script src="/js/bootstrap.min.js"></script>
|
|---|
| 154 | </body>
|
|---|
| 155 | </html> |
|---|
