Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add the pricing header, pricing cards, and the footer component's HTML
- Loading branch information
1 parent
a8c0618
commit 622d6ab
Showing
4 changed files
with
92 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| <the-navigation></the-navigation> | ||
| <pricing-header></pricing-header> | ||
| <pricing-cards></pricing-cards> | ||
| <the-footer></the-footer> | ||
| <div class="container"> | ||
| <pricing-cards></pricing-cards> | ||
| <the-footer></the-footer> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,37 @@ | ||
| <div>footer works!</div> | ||
| <footer class="pt-4 my-md-5 pt-md-5 border-top"> | ||
| <div class="row"> | ||
| <div class="col-12 col-md"> | ||
| <img class="mb-2" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24"> | ||
| <small class="d-block mb-3 text-muted">© 2017-2019</small> | ||
| </div> | ||
| <div class="col-6 col-md"> | ||
| <h5>Features</h5> | ||
| <ul class="list-unstyled text-small"> | ||
| <li><a class="text-muted" href="#">Cool stuff</a></li> | ||
| <li><a class="text-muted" href="#">Random feature</a></li> | ||
| <li><a class="text-muted" href="#">Team feature</a></li> | ||
| <li><a class="text-muted" href="#">Stuff for developers</a></li> | ||
| <li><a class="text-muted" href="#">Another one</a></li> | ||
| <li><a class="text-muted" href="#">Last time</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-md"> | ||
| <h5>Resources</h5> | ||
| <ul class="list-unstyled text-small"> | ||
| <li><a class="text-muted" href="#">Resource</a></li> | ||
| <li><a class="text-muted" href="#">Resource name</a></li> | ||
| <li><a class="text-muted" href="#">Another resource</a></li> | ||
| <li><a class="text-muted" href="#">Final resource</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-md"> | ||
| <h5>About</h5> | ||
| <ul class="list-unstyled text-small"> | ||
| <li><a class="text-muted" href="#">Team</a></li> | ||
| <li><a class="text-muted" href="#">Locations</a></li> | ||
| <li><a class="text-muted" href="#">Privacy</a></li> | ||
| <li><a class="text-muted" href="#">Terms</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,47 @@ | ||
| <div>pricing-cards works!</div> | ||
| <div class="card-deck mb-3 text-center"> | ||
| <div class="card mb-4 shadow-sm"> | ||
| <div class="card-header"> | ||
| <h4 class="my-0 font-weight-normal">Free</h4> | ||
| </div> | ||
| <div class="card-body"> | ||
| <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1> | ||
| <ul class="list-unstyled mt-3 mb-4"> | ||
| <li>10 users included</li> | ||
| <li>2 GB of storage</li> | ||
| <li>Email support</li> | ||
| <li>Help center access</li> | ||
| </ul> | ||
| <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button> | ||
| </div> | ||
| </div> | ||
| <div class="card mb-4 shadow-sm"> | ||
| <div class="card-header"> | ||
| <h4 class="my-0 font-weight-normal">Pro</h4> | ||
| </div> | ||
| <div class="card-body"> | ||
| <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1> | ||
| <ul class="list-unstyled mt-3 mb-4"> | ||
| <li>20 users included</li> | ||
| <li>10 GB of storage</li> | ||
| <li>Priority email support</li> | ||
| <li>Help center access</li> | ||
| </ul> | ||
| <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button> | ||
| </div> | ||
| </div> | ||
| <div class="card mb-4 shadow-sm"> | ||
| <div class="card-header"> | ||
| <h4 class="my-0 font-weight-normal">Enterprise</h4> | ||
| </div> | ||
| <div class="card-body"> | ||
| <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1> | ||
| <ul class="list-unstyled mt-3 mb-4"> | ||
| <li>30 users included</li> | ||
| <li>15 GB of storage</li> | ||
| <li>Phone and email support</li> | ||
| <li>Help center access</li> | ||
| </ul> | ||
| <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,4 @@ | ||
| <div>pricing-header works!</div> | ||
| <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> | ||
| <h1 class="display-4">Pricing</h1> | ||
| <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> | ||
| </div> |