Changeset 2d8c0e7 for src/main/resources/templates/index.html
- Timestamp:
- 12/20/21 12:01:06 (3 years ago)
- Branches:
- master
- Children:
- 881a233
- Parents:
- b8a8d06
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
src/main/resources/templates/index.html
rb8a8d06 r2d8c0e7 13 13 <header th:replace="common/navbar :: navbar"></header> 14 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 featurettes69 ================================================== -->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 15 <!-- START THE FEATURETTES --> 101 16 … … 104 19 <div class="row featurette"> 105 20 <div class="col-md-7"> 106 <h 2 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>21 <h1 class="featurette-heading">Make an impact</h1> 22 <p class="lead">For a happy society donate today</p> 108 23 </div> 109 24 <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>25 <img th:src="@{/image/happypeople.jpg}" width="700px" height="500px"> 111 26 112 27 </div> … … 117 32 <div class="row featurette"> 118 33 <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>34 <h2 class="featurette-heading">How do you know that your money goes to the right place?</h2> 35 <p class="lead">We have a team of moderators working day and night to make sure that help is received where help is needed</p> 121 36 </div> 122 37 <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 38 <img th:src="@{/image/moderators.jpg}" width="700px" height="500px"> 125 39 </div> 126 40 </div> … … 130 44 <div class="row featurette"> 131 45 <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>46 <h2 class="featurette-heading">Donate today</h2> 47 <a th:href="@{/album?page=1&sort=id&order=desc&groupBy=all}" class="btn btn-warning">Go to posts now</a> 134 48 </div> 135 49 <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 50 <img th:src="@{/image/donatenow.jpg}" width="700px" height="500px"> 138 51 </div> 139 52 </div>
Note:
See TracChangeset
for help on using the changeset viewer.