Difference between revisions of "Album"

From Freephile Wiki
Jump to navigation Jump to search
VisualWikitext
(Created page with "<html> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <...")
 
(remove links)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{#css:
 +
.jumbotron {
 +
  padding-top: 3rem;
 +
  padding-bottom: 3rem;
 +
  margin-bottom: 0;
 +
  background-color: #fff;
 +
}
 +
@media (min-width: 768px) {
 +
  .jumbotron {
 +
    padding-top: 6rem;
 +
    padding-bottom: 6rem;
 +
  }
 +
}
 +
 +
.jumbotron p:last-child {
 +
  margin-bottom: 0;
 +
}
 +
 +
.jumbotron h1 {
 +
  font-weight: 300;
 +
}
 +
 +
.jumbotron .container {
 +
  max-width: 40rem;
 +
}
 +
 +
footer {
 +
  padding-top: 3rem;
 +
  padding-bottom: 3rem;
 +
}
 +
 +
footer p {
 +
  margin-bottom: .25rem;
 +
}
 +
 +
}}
 
<html>
 
<html>
 
<header>
 
<header>
Line 11: Line 47:
 
           <h4 class="text-white">Contact</h4>
 
           <h4 class="text-white">Contact</h4>
 
           <ul class="list-unstyled">
 
           <ul class="list-unstyled">
−
             <li><a href="https://getbootstrap.com/docs/4.4/examples/album/#" class="text-white">Follow on Twitter</a></li>
+
             <li><a href="#" class="text-white">Follow on Twitter</a></li>
−
             <li><a href="https://getbootstrap.com/docs/4.4/examples/album/#" class="text-white">Like on Facebook</a></li>
+
             <li><a href="#" class="text-white">Like on Facebook</a></li>
−
             <li><a href="https://getbootstrap.com/docs/4.4/examples/album/#" class="text-white">Email me</a></li>
+
             <li><a href="#" class="text-white">Email me</a></li>
 
           </ul>
 
           </ul>
 
         </div>
 
         </div>
Line 21: Line 57:
 
   <div class="navbar navbar-dark bg-dark shadow-sm">
 
   <div class="navbar navbar-dark bg-dark shadow-sm">
 
     <div class="container d-flex justify-content-between">
 
     <div class="container d-flex justify-content-between">
−
       <a href="https://getbootstrap.com/docs/4.4/examples/album/#" class="navbar-brand d-flex align-items-center">
+
       <a href="#" class="navbar-brand d-flex align-items-center">
 
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
 
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
 
         <strong>Album</strong>
 
         <strong>Album</strong>
Line 39: Line 75:
 
       <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
 
       <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
 
       <p>
 
       <p>
−
         <a href="https://getbootstrap.com/docs/4.4/examples/album/#" class="btn btn-primary my-2">Main call to action</a>
+
         <a href="#" class="btn btn-primary my-2">Main call to action</a>
−
         <a href="https://getbootstrap.com/docs/4.4/examples/album/#" class="btn btn-secondary my-2">Secondary action</a>
+
         <a href="#" class="btn btn-secondary my-2">Secondary action</a>
 
       </p>
 
       </p>
 
     </div>
 
     </div>
 
   </section>
 
   </section>
  
 +
 +
  <div class="album py-5 bg-light">
 +
    <div class="container">
 +
 +
      <div class="row">
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
          <div class="card mb-4 shadow-sm">
 +
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
 +
            <div class="card-body">
 +
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 +
              <div class="d-flex justify-content-between align-items-center">
 +
                <div class="btn-group">
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
 +
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
 +
                </div>
 +
                <small class="text-muted">9 mins</small>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 +
</main>
 +
 +
<footer class="text-muted">
 +
  <div class="container">
 +
    <p class="float-right">
 +
      <a href="#">Back to top</a>
 +
    </p>
 +
    <p>Footer Paragraph 1</p>
 +
    <p>New to QualityBox? <a href="https://qualitybox.us/">Visit the homepage</a> or visit our <a href="https://demo.qualitybox.us">demo website</a>.</p>
 +
  </div>
 +
</footer>
 
</html>
 
</html>

Latest revision as of 22:57, 21 May 2020

Album

Album example

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

Main call to action Secondary action

PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderThumbnail

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

Retrieved from "https://wiki.freephile.org/wiki/index.php?title=Album&oldid=9989"

Navigation menu