Deprecated: htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in /home/goodsunday/public_html/libraries/src/Document/Renderer/Feed/AtomRenderer.php on line 89
https://goodsundayproduction.com/services 2025-12-11T11:46:42+00:00 GOOD SUNDAY FILMS MYOB 2023-10-17T02:21:25+00:00 2023-10-17T02:21:25+00:00 https://goodsundayproduction.com/services/error-page admin

<div class="well" style="margin-bottom: 36px;"><center>Each <strong>JA Joomla Template</strong> has its own matching 404 page. Below is the screenshot of <strong>404 page style</strong>.</center></div> <p style="text-align: center;"><img style="display: inline-block; width: auto;" src="https://goodsundayproduction.com/images/joomlart/others/404.jpg" alt="" /></p>

<div class="well" style="margin-bottom: 36px;"><center>Each <strong>JA Joomla Template</strong> has its own matching 404 page. Below is the screenshot of <strong>404 page style</strong>.</center></div> <p style="text-align: center;"><img style="display: inline-block; width: auto;" src="https://goodsundayproduction.com/images/joomlart/others/404.jpg" alt="" /></p> 2023-10-17T02:20:43+00:00 2023-10-17T02:20:43+00:00 https://goodsundayproduction.com/services/offline-pages admin

<div class="well" style="margin-bottom: 36px;"><center>Each <strong>JA Joomla Template</strong> has its own matching Offline page. Below is the screenshot of <strong>Offline page style</strong>.</center><center></center></div> <p style="text-align: center;"><img style="display: inline-block; width: auto;" src="https://goodsundayproduction.com/images/joomlart/others/offline.jpg" alt="" /></p>

<div class="well" style="margin-bottom: 36px;"><center>Each <strong>JA Joomla Template</strong> has its own matching Offline page. Below is the screenshot of <strong>Offline page style</strong>.</center><center></center></div> <p style="text-align: center;"><img style="display: inline-block; width: auto;" src="https://goodsundayproduction.com/images/joomlart/others/offline.jpg" alt="" /></p> 2023-10-05T07:04:20+00:00 2023-10-05T07:04:20+00:00 https://goodsundayproduction.com/services/typography admin

<div class="t4-typo-example"> <div class="row mb-4"> <div class="col-12 col-lg-3"> <h2 id="headings">Typography</h2> <p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="row row-cols-1 row-cols-md-2"> <div class="col"> <h1>h1. Heading 1</h1> <h2>h2. Heading 2</h2> <h3>h3. Heading 3</h3> <h4>h4. Heading 4</h4> <h5>h5. Heading 5</h5> <h6>h6. Heading 6</h6> </div> <div class="col"> <p class="display-1">Display 1</p> <p class="display-2">Display 2</p> <p class="display-3">Display 3</p> <p class="display-4">Display 4</p> <p class="display-5">Display 5</p> <p class="display-6">Display 6</p> </div> </div> </div> </div> <div class="row"> <div class="col-12 col-lg-9 offset-lg-3 ps-lg-5"> <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p> <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined.</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Alerts</h2> <p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="alert alert-primary alert-dismissible fade show">A simple primary alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-secondary alert-dismissible fade show">A simple secondary alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-success alert-dismissible fade show">A simple success alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-danger alert-dismissible fade show">A simple danger alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-warning alert-dismissible fade show">A simple warning alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-info alert-dismissible fade show">A simple info alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-light alert-dismissible fade show">A simple light alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-dark alert-dismissible fade show">A simple dark alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Badge</h2> <p>Documentation and examples for badges, our small count and labeling component.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="bd-example mb-5"> <p class="h1">Example heading <span class="badge bg-primary">New</span></p> <p class="h2">Example heading <span class="badge bg-secondary">New</span></p> <p class="h3">Example heading <span class="badge bg-success">New</span></p> <p class="h4">Example heading <span class="badge bg-danger">New</span></p> <p class="h5">Example heading <span class="badge bg-warning text-dark">New</span></p> <p class="h6">Example heading <span class="badge bg-info text-dark">New</span></p> <p class="h6">Example heading <span class="badge bg-dark">New</span></p> </div> <div class="bd-example"><span class="badge rounded-pill bg-primary">Primary</span> <span class="badge rounded-pill bg-secondary">Secondary</span> <span class="badge rounded-pill bg-success">Success</span> <span class="badge rounded-pill bg-danger">Danger</span> <span class="badge rounded-pill bg-warning text-dark">Warning</span> <span class="badge rounded-pill bg-info text-dark">Info</span> <span class="badge rounded-pill bg-light">Light</span> <span class="badge rounded-pill bg-dark">Dark</span></div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Buttons</h2> <p>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="bd-example mb-5"><button class="btn btn-primary mb-2" type="button">Primary</button> <button class="btn btn-secondary mb-2" type="button">Secondary</button> <button class="btn btn-success mb-2" type="button">Success</button> <button class="btn btn-danger mb-2" type="button">Danger</button> <button class="btn btn-warning mb-2" type="button">Warning</button> <button class="btn btn-info mb-2" type="button">Info</button> <button class="btn btn-light mb-2" type="button">Light</button> <button class="btn btn-dark mb-2" type="button">Dark</button> <button class="btn btn-link mb-2" type="button">Link</button></div> <div class="bd-example mb-5"><button class="btn btn-outline-primary mb-2" type="button">Primary</button> <button class="btn btn-outline-secondary mb-2" type="button">Secondary</button> <button class="btn btn-outline-success mb-2" type="button">Success</button> <button class="btn btn-outline-danger mb-2" type="button">Danger</button> <button class="btn btn-outline-warning mb-2" type="button">Warning</button> <button class="btn btn-outline-info mb-2" type="button">Info</button> <button class="btn btn-outline-light mb-2" type="button">Light</button> <button class="btn btn-outline-dark mb-2" type="button">Dark</button></div> <div class="bd-example"><button class="btn btn-primary btn-sm mb-2" type="button">Small button</button> <button class="btn btn-primary mb-2" type="button">Standard button</button> <button class="btn btn-primary btn-lg mb-2" type="button">Large button</button></div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Card</h2> <p>Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="row row-cols-1 row-cols-lg-2"> <div class="col mb-4 mb-lg-0"> <div class="card"><span class="text-normal">Image cap</span> <div class="card-body text-default"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary" href="https://goodsundayproduction.com/#">Go somewhere</a></div> </div> </div> <div class="col"> <div class="card"> <div class="row g-0"> <div class="col-md-5 text-normal">Image</div> <div class="col-md-7"> <div class="card-body text-default"> <h5 class="card-title">Card title</h5> <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> <p class="card-text"><small class="">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Card styles</h2> <p>Cards include various options for customizing their backgrounds, borders, and color.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"> <div class="col"> <div class="card bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Secondary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-success mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Success card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Danger card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card text-dark bg-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card text-dark bg-info mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Info card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-light mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-dark mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Dark card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Progress</h2> <p>Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.</p> </div> <div class="col-12 col-lg-9 ps-lg-5 m-auto"> <div class="bd-example"> <div class="progress mb-3"> <div class="progress-bar">0%</div> </div> <div class="progress mb-3"> <div class="progress-bar bg-success w-25">25%</div> </div> <div class="progress mb-3"> <div class="progress-bar bg-info text-dark w-50">50%</div> </div> <div class="progress mb-3"> <div class="progress-bar bg-warning text-dark w-75">75%</div> </div> <div class="progress"> <div class="progress-bar bg-danger w-100">100%</div> </div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Spinners</h2> <p>Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.</p> </div> <div class="col-12 col-lg-9 ps-lg-5 m-auto"> <div class="bd-example mb-5"> <div class="spinner-border text-primary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-secondary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-success"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-danger"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-warning"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-info"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-light"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-dark"><span class="visually-hidden">Loading...</span></div> </div> <div class="bd-example"> <div class="spinner-grow text-primary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-secondary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-success"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-danger"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-warning"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-info"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-light"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-dark"><span class="visually-hidden">Loading...</span></div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Pagination</h2> <p>Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p> </div> <div class="col-12 col-lg-9 ps-lg-5 m-auto"> <div class="bd-example mb-4"><nav> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">1</a></li> <li class="page-item active"><a class="page-link" href="https://goodsundayproduction.com/#">2</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">3</a></li> </ul> </nav></div> <div class="bd-example mb-4"><nav> <ul class="pagination"> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#"> « </a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">1</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">2</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">3</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#"> » </a></li> </ul> </nav></div> <div class="bd-example"><nav> <ul class="pagination pagination-lg flex-wrap"> <li class="page-item disabled"><a class="page-link" tabindex="-1" href="https://goodsundayproduction.com/#">Previous</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">1</a></li> <li class="page-item active"><a class="page-link" href="https://goodsundayproduction.com/#">2</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">3</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">Next</a></li> </ul> </nav></div> </div> </div> </div> <!-- End: Typo block -->

<div class="t4-typo-example"> <div class="row mb-4"> <div class="col-12 col-lg-3"> <h2 id="headings">Typography</h2> <p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="row row-cols-1 row-cols-md-2"> <div class="col"> <h1>h1. Heading 1</h1> <h2>h2. Heading 2</h2> <h3>h3. Heading 3</h3> <h4>h4. Heading 4</h4> <h5>h5. Heading 5</h5> <h6>h6. Heading 6</h6> </div> <div class="col"> <p class="display-1">Display 1</p> <p class="display-2">Display 2</p> <p class="display-3">Display 3</p> <p class="display-4">Display 4</p> <p class="display-5">Display 5</p> <p class="display-6">Display 6</p> </div> </div> </div> </div> <div class="row"> <div class="col-12 col-lg-9 offset-lg-3 ps-lg-5"> <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p> <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined.</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Alerts</h2> <p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="alert alert-primary alert-dismissible fade show">A simple primary alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-secondary alert-dismissible fade show">A simple secondary alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-success alert-dismissible fade show">A simple success alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-danger alert-dismissible fade show">A simple danger alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-warning alert-dismissible fade show">A simple warning alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-info alert-dismissible fade show">A simple info alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-light alert-dismissible fade show">A simple light alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> <div class="alert alert-dark alert-dismissible fade show">A simple dark alert with <a class="alert-link" href="https://goodsundayproduction.com/#">an example link</a>. Give it a click if you like. <button class="btn-close" type="button" data-bs-dismiss="alert"></button></div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Badge</h2> <p>Documentation and examples for badges, our small count and labeling component.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="bd-example mb-5"> <p class="h1">Example heading <span class="badge bg-primary">New</span></p> <p class="h2">Example heading <span class="badge bg-secondary">New</span></p> <p class="h3">Example heading <span class="badge bg-success">New</span></p> <p class="h4">Example heading <span class="badge bg-danger">New</span></p> <p class="h5">Example heading <span class="badge bg-warning text-dark">New</span></p> <p class="h6">Example heading <span class="badge bg-info text-dark">New</span></p> <p class="h6">Example heading <span class="badge bg-dark">New</span></p> </div> <div class="bd-example"><span class="badge rounded-pill bg-primary">Primary</span> <span class="badge rounded-pill bg-secondary">Secondary</span> <span class="badge rounded-pill bg-success">Success</span> <span class="badge rounded-pill bg-danger">Danger</span> <span class="badge rounded-pill bg-warning text-dark">Warning</span> <span class="badge rounded-pill bg-info text-dark">Info</span> <span class="badge rounded-pill bg-light">Light</span> <span class="badge rounded-pill bg-dark">Dark</span></div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Buttons</h2> <p>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="bd-example mb-5"><button class="btn btn-primary mb-2" type="button">Primary</button> <button class="btn btn-secondary mb-2" type="button">Secondary</button> <button class="btn btn-success mb-2" type="button">Success</button> <button class="btn btn-danger mb-2" type="button">Danger</button> <button class="btn btn-warning mb-2" type="button">Warning</button> <button class="btn btn-info mb-2" type="button">Info</button> <button class="btn btn-light mb-2" type="button">Light</button> <button class="btn btn-dark mb-2" type="button">Dark</button> <button class="btn btn-link mb-2" type="button">Link</button></div> <div class="bd-example mb-5"><button class="btn btn-outline-primary mb-2" type="button">Primary</button> <button class="btn btn-outline-secondary mb-2" type="button">Secondary</button> <button class="btn btn-outline-success mb-2" type="button">Success</button> <button class="btn btn-outline-danger mb-2" type="button">Danger</button> <button class="btn btn-outline-warning mb-2" type="button">Warning</button> <button class="btn btn-outline-info mb-2" type="button">Info</button> <button class="btn btn-outline-light mb-2" type="button">Light</button> <button class="btn btn-outline-dark mb-2" type="button">Dark</button></div> <div class="bd-example"><button class="btn btn-primary btn-sm mb-2" type="button">Small button</button> <button class="btn btn-primary mb-2" type="button">Standard button</button> <button class="btn btn-primary btn-lg mb-2" type="button">Large button</button></div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Card</h2> <p>Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="row row-cols-1 row-cols-lg-2"> <div class="col mb-4 mb-lg-0"> <div class="card"><span class="text-normal">Image cap</span> <div class="card-body text-default"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary" href="https://goodsundayproduction.com/#">Go somewhere</a></div> </div> </div> <div class="col"> <div class="card"> <div class="row g-0"> <div class="col-md-5 text-normal">Image</div> <div class="col-md-7"> <div class="card-body text-default"> <h5 class="card-title">Card title</h5> <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> <p class="card-text"><small class="">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Card styles</h2> <p>Cards include various options for customizing their backgrounds, borders, and color.</p> </div> <div class="col-12 col-lg-9 ps-lg-5"> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"> <div class="col"> <div class="card bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Secondary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-success mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Success card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Danger card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card text-dark bg-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card text-dark bg-info mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-light"> <h5 class="card-title">Info card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-light mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card bg-dark mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Dark card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Progress</h2> <p>Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.</p> </div> <div class="col-12 col-lg-9 ps-lg-5 m-auto"> <div class="bd-example"> <div class="progress mb-3"> <div class="progress-bar">0%</div> </div> <div class="progress mb-3"> <div class="progress-bar bg-success w-25">25%</div> </div> <div class="progress mb-3"> <div class="progress-bar bg-info text-dark w-50">50%</div> </div> <div class="progress mb-3"> <div class="progress-bar bg-warning text-dark w-75">75%</div> </div> <div class="progress"> <div class="progress-bar bg-danger w-100">100%</div> </div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Spinners</h2> <p>Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.</p> </div> <div class="col-12 col-lg-9 ps-lg-5 m-auto"> <div class="bd-example mb-5"> <div class="spinner-border text-primary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-secondary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-success"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-danger"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-warning"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-info"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-light"><span class="visually-hidden">Loading...</span></div> <div class="spinner-border text-dark"><span class="visually-hidden">Loading...</span></div> </div> <div class="bd-example"> <div class="spinner-grow text-primary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-secondary"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-success"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-danger"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-warning"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-info"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-light"><span class="visually-hidden">Loading...</span></div> <div class="spinner-grow text-dark"><span class="visually-hidden">Loading...</span></div> </div> </div> </div> </div> <!-- End: Typo block --> <div class="t4-typo-example"> <div class="row"> <div class="col-12 col-lg-3"> <h2>Pagination</h2> <p>Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p> </div> <div class="col-12 col-lg-9 ps-lg-5 m-auto"> <div class="bd-example mb-4"><nav> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">1</a></li> <li class="page-item active"><a class="page-link" href="https://goodsundayproduction.com/#">2</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">3</a></li> </ul> </nav></div> <div class="bd-example mb-4"><nav> <ul class="pagination"> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#"> « </a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">1</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">2</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">3</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#"> » </a></li> </ul> </nav></div> <div class="bd-example"><nav> <ul class="pagination pagination-lg flex-wrap"> <li class="page-item disabled"><a class="page-link" tabindex="-1" href="https://goodsundayproduction.com/#">Previous</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">1</a></li> <li class="page-item active"><a class="page-link" href="https://goodsundayproduction.com/#">2</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">3</a></li> <li class="page-item"><a class="page-link" href="https://goodsundayproduction.com/#">Next</a></li> </ul> </nav></div> </div> </div> </div> <!-- End: Typo block -->