Compare commits
No commits in common. "4470c37599daa0c2685318dc4c409cdcb8b34bde" and "ad7de195bfe00290fd884190554cc501b04b2c88" have entirely different histories.
4470c37599
...
ad7de195bf
@ -1,59 +0,0 @@
|
|||||||
-- screening table
|
|
||||||
|
|
||||||
create table `profile_checkcare` (
|
|
||||||
id varchar(60) not null primary key, -- ktp
|
|
||||||
name varchar(36) not null,
|
|
||||||
dob date not null, -- date of birth
|
|
||||||
sex varchar(6) default null
|
|
||||||
) engine=InnoDB default charset=utf8mb4;
|
|
||||||
|
|
||||||
create table `checkcare_bmi` ( -- indeks massa tubuh
|
|
||||||
id int(11) not null auto_increment primary key,
|
|
||||||
`profile` varchar(60) not null,
|
|
||||||
`weight` double not null,
|
|
||||||
`height` double not null,
|
|
||||||
`when` date not null,
|
|
||||||
key `idx_profile` (`profile`),
|
|
||||||
constraint `checkcare_bmi_fk_profile`
|
|
||||||
foreign key (`profile`) references `profile_checkcare` (`id`)
|
|
||||||
on update cascade
|
|
||||||
on delete cascade
|
|
||||||
) engine=InnoDB default charset=utf8mb4;
|
|
||||||
|
|
||||||
create table `checkcare_temp` (
|
|
||||||
id int(11) not null auto_increment primary key,
|
|
||||||
`profile` varchar(60) not null,
|
|
||||||
`temperature` double not null,
|
|
||||||
`scale` varchar(3) not null, -- C, F, or K
|
|
||||||
`when` datetime not null,
|
|
||||||
key `idx_profile` (`profile`),
|
|
||||||
constraint `checkcare_bmi_fk_profile`
|
|
||||||
foreign key (`profile`) references `profile_checkcare` (`id`)
|
|
||||||
on update cascade
|
|
||||||
on delete cascade
|
|
||||||
)
|
|
||||||
|
|
||||||
/*
|
|
||||||
profile output:
|
|
||||||
- id
|
|
||||||
- name
|
|
||||||
- dob
|
|
||||||
- age
|
|
||||||
- sex
|
|
||||||
- weight
|
|
||||||
- height
|
|
||||||
- fasting record
|
|
||||||
- clinical history
|
|
||||||
|
|
||||||
bmi output:
|
|
||||||
- weight
|
|
||||||
- height
|
|
||||||
- age
|
|
||||||
- sex
|
|
||||||
- result
|
|
||||||
- when
|
|
||||||
|
|
||||||
temp output:
|
|
||||||
- when
|
|
||||||
- temperature
|
|
||||||
*/
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 mt-5">
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<div class="col-lg-8 col-xl-6">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2 class="fw-bolder">From our blog</h2>
|
|
||||||
<p class="lead fw-normal text-muted mb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Blog post title</h5></a>
|
|
||||||
<p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Kelly Rowan</div>
|
|
||||||
<div class="text-muted">March 12, 2023 · 6 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/adb5bd/495057" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Media</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Another blog post title</h5></a>
|
|
||||||
<p class="card-text mb-0">This text is a bit longer to illustrate the adaptive height of each card. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Josiah Barclay</div>
|
|
||||||
<div class="text-muted">March 23, 2023 · 4 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/6c757d/343a40" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">The last blog post title is a little bit longer than the others</h5></a>
|
|
||||||
<p class="card-text mb-0">Some more quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Evelyn Martinez</div>
|
|
||||||
<div class="text-muted">April 2, 2023 · 10 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 mb-5">
|
|
||||||
<aside class="bg-primary bg-gradient rounded-3 p-4 p-sm-5">
|
|
||||||
<div class="d-flex align-items-center justify-content-between flex-column flex-xl-row text-center text-xl-start">
|
|
||||||
<div class="mb-4 mb-xl-0">
|
|
||||||
<div class="fs-3 fw-bold text-white">New products, delivered to you.</div>
|
|
||||||
<div class="text-white-50">Sign up for our newsletter for the latest updates.</div>
|
|
||||||
</div>
|
|
||||||
<div class="ms-xl-4">
|
|
||||||
<div class="input-group mb-2">
|
|
||||||
<input class="form-control" type="text" placeholder="Email address..." aria-label="Email address..." aria-describedby="button-newsletter" />
|
|
||||||
<button class="btn btn-outline-light" id="button-newsletter" type="button">Sign up</button>
|
|
||||||
</div>
|
|
||||||
<div class="small text-white-50">We care about privacy, and will never share your data.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<section class="py-5" id="features">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-lg-4 mb-5 mb-lg-0"><h2 class="fw-bolder mb-0">${title}</h2></div>
|
|
||||||
<div class="col-lg-8">
|
|
||||||
<div class="row gx-5 row-cols-1 row-cols-md-2">
|
|
||||||
% for item in features:
|
|
||||||
<div class="col mb-5 h-100">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="${item['icon']}"></i></div>
|
|
||||||
<h2 class="h5">${item['title']}</h2>
|
|
||||||
<p class="mb-0">${item['message']}</p>
|
|
||||||
</div>
|
|
||||||
% endfor
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
<header class="py-5 bg-image-full" style="background-image: url('https://source.unsplash.com/wfh8dDlNFOk/1600x900')">
|
|
||||||
<div class="text-center my-5">
|
|
||||||
<h1 class="text-white fs-3 fw-bolder">Full Width Pics</h1>
|
|
||||||
<p class="text-white-50 mb-0">Landing Page Template</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<header class="bg-dark py-5">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row gx-5 align-items-center justify-content-center">
|
|
||||||
<div class="col-lg-8 col-xl-7 col-xxl-6">
|
|
||||||
<div class="my-5 text-center text-xl-start">
|
|
||||||
<h1 class="display-5 fw-bolder text-white mb-2">${title}</h1>
|
|
||||||
<p class="lead fw-normal text-white-50 mb-4">${message}</p>
|
|
||||||
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
|
|
||||||
% if button['primary']:
|
|
||||||
<a class="btn btn-primary btn-lg px-4 me-sm-3" href="${button['primary']['link']}">${button['primary']['text']}</a>
|
|
||||||
% endif
|
|
||||||
% if button['secondary']:
|
|
||||||
<a class="btn btn-outline-light btn-lg px-4" href="${button['secondary']['link']}">${button['secondary']['text']}</a>
|
|
||||||
% endif
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center">
|
|
||||||
% if image:
|
|
||||||
<img class="img-fluid rounded-3 my-5" src="${image}" alt="" />
|
|
||||||
% endif
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<div class="py-5 bg-light">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<div class="col-lg-10 col-xl-7">
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="fs-4 mb-4 fst-italic">"Working with Start Bootstrap templates has saved me tons of development time when building new projects! Starting with a Bootstrap template just makes things easier!"</div>
|
|
||||||
<div class="d-flex align-items-center justify-content-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="fw-bold">
|
|
||||||
Tom Ato
|
|
||||||
<span class="fw-bold text-primary mx-1">/</span>
|
|
||||||
CEO, Pomodoro
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">${copyright}</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>${title}</title>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="/templates/SBModernBiz/css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column h-100">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
${navbar}
|
|
||||||
% for item in components['before']:
|
|
||||||
${item}
|
|
||||||
% endfor
|
|
||||||
${container}
|
|
||||||
% for item in components['after']:
|
|
||||||
${item}
|
|
||||||
% endfor
|
|
||||||
</main>
|
|
||||||
${footer}
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="${home}">${title}</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
% for item in menu:
|
|
||||||
% if any(role in item['roles'] for role in user_roles):
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link ${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
|
|
||||||
${item['name']}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
% endif
|
|
||||||
% endfor
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
from core import html
|
|
||||||
|
|
||||||
static = [
|
|
||||||
{
|
|
||||||
"route" : "/templates/SBModernBiz/css/<filepath:re:.*\.(css|sass|css.map)>",
|
|
||||||
"root" : "./templates/SBModernBiz/static/css"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
def main(dir, page):
|
|
||||||
html_template = html.main.get_html("templates/SBModernBiz/html")
|
|
||||||
html_components = html.main.get_html("templates/SBModernBiz/html/components")
|
|
||||||
html_page = html.main.get_html(dir)
|
|
||||||
return {
|
|
||||||
"index" : html_template [ "index.html" ],
|
|
||||||
"navbar" : html_template [ "navbar.html" ],
|
|
||||||
"footer" : html_template [ "footer.html" ],
|
|
||||||
"fullpic" : html_components [ "fullpic.html" ],
|
|
||||||
"header" : html_components [ "header.html" ],
|
|
||||||
"features" : html_components [ "features.html" ],
|
|
||||||
"testimonial" : html_components [ "testimonial.html" ],
|
|
||||||
"blog-preview" : html_components [ "blog-preview.html" ],
|
|
||||||
"cta" : html_components [ "cta.html" ],
|
|
||||||
"container" : html_page [f"{page}.html" ]
|
|
||||||
}
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Header-->
|
|
||||||
<header class="py-5">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-lg-8 col-xxl-6">
|
|
||||||
<div class="text-center my-5">
|
|
||||||
<h1 class="fw-bolder mb-3">Our mission is to make building websites easier for everyone.</h1>
|
|
||||||
<p class="lead fw-normal text-muted mb-4">Start Bootstrap was built on the idea that quality, functional website templates and themes should be available to everyone. Use our open source, free products, or support us by purchasing one of our premium products or services.</p>
|
|
||||||
<a class="btn btn-primary btn-lg" href="#scroll-target">Read our story</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- About section one-->
|
|
||||||
<section class="py-5 bg-light" id="scroll-target">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5 align-items-center">
|
|
||||||
<div class="col-lg-6"><img class="img-fluid rounded mb-5 mb-lg-0" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<h2 class="fw-bolder">Our founding</h2>
|
|
||||||
<p class="lead fw-normal text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est, ut esse a labore aliquam beatae expedita. Blanditiis impedit numquam libero molestiae et fugit cupiditate, quibusdam expedita, maiores eaque quisquam.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- About section two-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5 align-items-center">
|
|
||||||
<div class="col-lg-6 order-first order-lg-last"><img class="img-fluid rounded mb-5 mb-lg-0" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<h2 class="fw-bolder">Growth & beyond</h2>
|
|
||||||
<p class="lead fw-normal text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est, ut esse a labore aliquam beatae expedita. Blanditiis impedit numquam libero molestiae et fugit cupiditate, quibusdam expedita, maiores eaque quisquam.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Team members section-->
|
|
||||||
<section class="py-5 bg-light">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2 class="fw-bolder">Our team</h2>
|
|
||||||
<p class="lead fw-normal text-muted mb-5">Dedicated to quality and your success</p>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center">
|
|
||||||
<div class="col mb-5 mb-5 mb-xl-0">
|
|
||||||
<div class="text-center">
|
|
||||||
<img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
|
|
||||||
<h5 class="fw-bolder">Ibbie Eckart</h5>
|
|
||||||
<div class="fst-italic text-muted">Founder & CEO</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col mb-5 mb-5 mb-xl-0">
|
|
||||||
<div class="text-center">
|
|
||||||
<img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
|
|
||||||
<h5 class="fw-bolder">Arden Vasek</h5>
|
|
||||||
<div class="fst-italic text-muted">CFO</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col mb-5 mb-5 mb-sm-0">
|
|
||||||
<div class="text-center">
|
|
||||||
<img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
|
|
||||||
<h5 class="fw-bolder">Toribio Nerthus</h5>
|
|
||||||
<div class="fst-italic text-muted">Operations Manager</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col mb-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
|
|
||||||
<h5 class="fw-bolder">Malvina Cilla</h5>
|
|
||||||
<div class="fst-italic text-muted">CTO</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,221 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Page Content-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5">
|
|
||||||
<h1 class="fw-bolder fs-5 mb-4">Company Blog</h1>
|
|
||||||
<div class="card border-0 shadow rounded-3 overflow-hidden">
|
|
||||||
<div class="card-body p-0">
|
|
||||||
<div class="row gx-0">
|
|
||||||
<div class="col-lg-6 col-xl-5 py-lg-5">
|
|
||||||
<div class="p-4 p-md-5">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
|
|
||||||
<div class="h2 fw-bolder">Article heading goes here</div>
|
|
||||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique delectus ab doloremque, qui doloribus ea officiis...</p>
|
|
||||||
<a class="stretched-link text-decoration-none" href="#!">
|
|
||||||
Read more
|
|
||||||
<i class="bi bi-arrow-right"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 col-xl-7"><div class="bg-featured-blog" style="background-image: url('https://dummyimage.com/700x350/343a40/6c757d')"></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="py-5 bg-light">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-xl-8">
|
|
||||||
<h2 class="fw-bolder fs-5 mb-4">News</h2>
|
|
||||||
<!-- News item-->
|
|
||||||
<div class="mb-4">
|
|
||||||
<div class="small text-muted">May 12, 2023</div>
|
|
||||||
<a class="link-dark" href="#!"><h3>Start Bootstrap releases Bootstrap 5 updates for templates and themes</h3></a>
|
|
||||||
</div>
|
|
||||||
<!-- News item-->
|
|
||||||
<div class="mb-5">
|
|
||||||
<div class="small text-muted">May 5, 2023</div>
|
|
||||||
<a class="link-dark" href="#!"><h3>Bootstrap 5 has officially landed</h3></a>
|
|
||||||
</div>
|
|
||||||
<!-- News item-->
|
|
||||||
<div class="mb-5">
|
|
||||||
<div class="small text-muted">Apr 21, 2023</div>
|
|
||||||
<a class="link-dark" href="#!"><h3>This is another news article headline, but this one is a little bit longer</h3></a>
|
|
||||||
</div>
|
|
||||||
<div class="text-end mb-5 mb-xl-0">
|
|
||||||
<a class="text-decoration-none" href="#!">
|
|
||||||
More news
|
|
||||||
<i class="bi bi-arrow-right"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-4">
|
|
||||||
<div class="card border-0 h-100">
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="h6 fw-bolder">Contact</div>
|
|
||||||
<p class="text-muted mb-4">
|
|
||||||
For press inquiries, email us at
|
|
||||||
<br />
|
|
||||||
<a href="#!">press@domain.com</a>
|
|
||||||
</p>
|
|
||||||
<div class="h6 fw-bolder">Follow us</div>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-twitter"></i></a>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-facebook"></i></a>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-linkedin"></i></a>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-youtube"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Blog preview section-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5">
|
|
||||||
<h2 class="fw-bolder fs-5 mb-4">Featured Stories</h2>
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Blog post title</div></a>
|
|
||||||
<p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Kelly Rowan</div>
|
|
||||||
<div class="text-muted">March 12, 2023 · 6 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/adb5bd/495057" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Media</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Another blog post title</div></a>
|
|
||||||
<p class="card-text mb-0">This text is a bit longer to illustrate the adaptive height of each card. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Josiah Barclay</div>
|
|
||||||
<div class="text-muted">March 23, 2023 · 4 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/6c757d/343a40" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">The last blog post title is a little bit longer than the others</div></a>
|
|
||||||
<p class="card-text mb-0">Some more quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Evelyn Martinez</div>
|
|
||||||
<div class="text-muted">April 2, 2023 · 10 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-end mb-5 mb-xl-0">
|
|
||||||
<a class="text-decoration-none" href="#!">
|
|
||||||
More stories
|
|
||||||
<i class="bi bi-arrow-right"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,153 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Page Content-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-lg-3">
|
|
||||||
<div class="d-flex align-items-center mt-lg-5 mb-4">
|
|
||||||
<img class="img-fluid rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." />
|
|
||||||
<div class="ms-3">
|
|
||||||
<div class="fw-bold">Valerie Luna</div>
|
|
||||||
<div class="text-muted">News, Business</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-9">
|
|
||||||
<!-- Post content-->
|
|
||||||
<article>
|
|
||||||
<!-- Post header-->
|
|
||||||
<header class="mb-4">
|
|
||||||
<!-- Post title-->
|
|
||||||
<h1 class="fw-bolder mb-1">Welcome to Blog Post!</h1>
|
|
||||||
<!-- Post meta content-->
|
|
||||||
<div class="text-muted fst-italic mb-2">January 1, 2023</div>
|
|
||||||
<!-- Post categories-->
|
|
||||||
<a class="badge bg-secondary text-decoration-none link-light" href="#!">Web Design</a>
|
|
||||||
<a class="badge bg-secondary text-decoration-none link-light" href="#!">Freebies</a>
|
|
||||||
</header>
|
|
||||||
<!-- Preview image figure-->
|
|
||||||
<figure class="mb-4"><img class="img-fluid rounded" src="https://dummyimage.com/900x400/ced4da/6c757d.jpg" alt="..." /></figure>
|
|
||||||
<!-- Post content-->
|
|
||||||
<section class="mb-5">
|
|
||||||
<p class="fs-5 mb-4">Science is an enterprise that should be cherished as an activity of the free human mind. Because it transforms who we are, how we live, and it gives us an understanding of our place in the universe.</p>
|
|
||||||
<p class="fs-5 mb-4">The universe is large and old, and the ingredients for life as we know it are everywhere, so there's no reason to think that Earth would be unique in that regard. Whether of not the life became intelligent is a different question, and we'll see if we find that.</p>
|
|
||||||
<p class="fs-5 mb-4">If you get asteroids about a kilometer in size, those are large enough and carry enough energy into our system to disrupt transportation, communication, the food chains, and that can be a really bad day on Earth.</p>
|
|
||||||
<h2 class="fw-bolder mb-4 mt-5">I have odd cosmic thoughts every day</h2>
|
|
||||||
<p class="fs-5 mb-4">For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested.</p>
|
|
||||||
<p class="fs-5 mb-4">Venus has a runaway greenhouse effect. I kind of want to know what happened there because we're twirling knobs here on Earth without knowing the consequences of it. Mars once had running water. It's bone dry today. Something bad happened there as well.</p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
<!-- Comments section-->
|
|
||||||
<section>
|
|
||||||
<div class="card bg-light">
|
|
||||||
<div class="card-body">
|
|
||||||
<!-- Comment form-->
|
|
||||||
<form class="mb-4"><textarea class="form-control" rows="3" placeholder="Join the discussion and leave a comment!"></textarea></form>
|
|
||||||
<!-- Comment with nested comments-->
|
|
||||||
<div class="d-flex mb-4">
|
|
||||||
<!-- Parent comment-->
|
|
||||||
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
|
|
||||||
<div class="ms-3">
|
|
||||||
<div class="fw-bold">Commenter Name</div>
|
|
||||||
If you're going to lead a space frontier, it has to be government; it'll never be private enterprise. Because the space frontier is dangerous, and it's expensive, and it has unquantified risks.
|
|
||||||
<!-- Child comment 1-->
|
|
||||||
<div class="d-flex mt-4">
|
|
||||||
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
|
|
||||||
<div class="ms-3">
|
|
||||||
<div class="fw-bold">Commenter Name</div>
|
|
||||||
And under those conditions, you cannot establish a capital-market evaluation of that enterprise. You can't get investors.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Child comment 2-->
|
|
||||||
<div class="d-flex mt-4">
|
|
||||||
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
|
|
||||||
<div class="ms-3">
|
|
||||||
<div class="fw-bold">Commenter Name</div>
|
|
||||||
When you put money directly to a problem, it makes a good headline.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Single comment-->
|
|
||||||
<div class="d-flex">
|
|
||||||
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
|
|
||||||
<div class="ms-3">
|
|
||||||
<div class="fw-bold">Commenter Name</div>
|
|
||||||
When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content />
|
|
||||||
<meta name="author" content />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Page content-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5">
|
|
||||||
<!-- Contact form-->
|
|
||||||
<div class="bg-light rounded-3 py-5 px-4 px-md-5 mb-5">
|
|
||||||
<div class="text-center mb-5">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-envelope"></i></div>
|
|
||||||
<h1 class="fw-bolder">Get in touch</h1>
|
|
||||||
<p class="lead fw-normal text-muted mb-0">We'd love to hear from you</p>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<div class="col-lg-8 col-xl-6">
|
|
||||||
<!-- * * * * * * * * * * * * * * *-->
|
|
||||||
<!-- * * SB Forms Contact Form * *-->
|
|
||||||
<!-- * * * * * * * * * * * * * * *-->
|
|
||||||
<!-- This form is pre-integrated with SB Forms.-->
|
|
||||||
<!-- To make this form functional, sign up at-->
|
|
||||||
<!-- https://startbootstrap.com/solution/contact-forms-->
|
|
||||||
<!-- to get an API token!-->
|
|
||||||
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
|
|
||||||
<!-- Name input-->
|
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
|
|
||||||
<label for="name">Full name</label>
|
|
||||||
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
|
|
||||||
</div>
|
|
||||||
<!-- Email address input-->
|
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
|
|
||||||
<label for="email">Email address</label>
|
|
||||||
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
|
|
||||||
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
|
|
||||||
</div>
|
|
||||||
<!-- Phone number input-->
|
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
|
|
||||||
<label for="phone">Phone number</label>
|
|
||||||
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
|
|
||||||
</div>
|
|
||||||
<!-- Message input-->
|
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
|
|
||||||
<label for="message">Message</label>
|
|
||||||
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
|
|
||||||
</div>
|
|
||||||
<!-- Submit success message-->
|
|
||||||
<!---->
|
|
||||||
<!-- This is what your users will see when the form-->
|
|
||||||
<!-- has successfully submitted-->
|
|
||||||
<div class="d-none" id="submitSuccessMessage">
|
|
||||||
<div class="text-center mb-3">
|
|
||||||
<div class="fw-bolder">Form submission successful!</div>
|
|
||||||
To activate this form, sign up at
|
|
||||||
<br />
|
|
||||||
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Submit error message-->
|
|
||||||
<!---->
|
|
||||||
<!-- This is what your users will see when there is-->
|
|
||||||
<!-- an error submitting the form-->
|
|
||||||
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
|
|
||||||
<!-- Submit Button-->
|
|
||||||
<div class="d-grid"><button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button></div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Contact cards-->
|
|
||||||
<div class="row gx-5 row-cols-2 row-cols-lg-4 py-5">
|
|
||||||
<div class="col">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-chat-dots"></i></div>
|
|
||||||
<div class="h5 mb-2">Chat with us</div>
|
|
||||||
<p class="text-muted mb-0">Chat live with one of our support specialists.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-people"></i></div>
|
|
||||||
<div class="h5">Ask the community</div>
|
|
||||||
<p class="text-muted mb-0">Explore our community forums and communicate with other users.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-question-circle"></i></div>
|
|
||||||
<div class="h5">Support center</div>
|
|
||||||
<p class="text-muted mb-0">Browse FAQ's and support articles to find solutions.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-telephone"></i></div>
|
|
||||||
<div class="h5">Call us</div>
|
|
||||||
<p class="text-muted mb-0">Call us during normal business hours at (555) 892-9403.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
|
|
||||||
<!-- * * SB Forms JS * *-->
|
|
||||||
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
|
|
||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
|
|
||||||
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,177 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column h-100">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Page Content-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="text-center mb-5">
|
|
||||||
<h1 class="fw-bolder">Frequently Asked Questions</h1>
|
|
||||||
<p class="lead fw-normal text-muted mb-0">How can we help you?</p>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-xl-8">
|
|
||||||
<!-- FAQ Accordion 1-->
|
|
||||||
<h2 class="fw-bolder mb-3">Account & Billing</h2>
|
|
||||||
<div class="accordion mb-5" id="accordionExample">
|
|
||||||
<div class="accordion-item">
|
|
||||||
<h3 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button></h3>
|
|
||||||
<div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<strong>This is the first item's accordion body.</strong>
|
|
||||||
It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
|
|
||||||
<code>.accordion-body</code>
|
|
||||||
, though the transition does limit overflow.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion-item">
|
|
||||||
<h3 class="accordion-header" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button></h3>
|
|
||||||
<div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<strong>This is the second item's accordion body.</strong>
|
|
||||||
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
|
|
||||||
<code>.accordion-body</code>
|
|
||||||
, though the transition does limit overflow.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion-item">
|
|
||||||
<h3 class="accordion-header" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button></h3>
|
|
||||||
<div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<strong>This is the third item's accordion body.</strong>
|
|
||||||
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
|
|
||||||
<code>.accordion-body</code>
|
|
||||||
, though the transition does limit overflow.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- FAQ Accordion 2-->
|
|
||||||
<h2 class="fw-bolder mb-3">Website Issues</h2>
|
|
||||||
<div class="accordion mb-5 mb-xl-0" id="accordionExample2">
|
|
||||||
<div class="accordion-item">
|
|
||||||
<h3 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">Accordion Item #1</button></h3>
|
|
||||||
<div class="accordion-collapse collapse show" id="collapseOne2" aria-labelledby="headingOne" data-bs-parent="#accordionExample2">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<strong>This is the first item's accordion body.</strong>
|
|
||||||
It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
|
|
||||||
<code>.accordion-body</code>
|
|
||||||
, though the transition does limit overflow.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion-item">
|
|
||||||
<h3 class="accordion-header" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">Accordion Item #2</button></h3>
|
|
||||||
<div class="accordion-collapse collapse" id="collapseTwo2" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<strong>This is the second item's accordion body.</strong>
|
|
||||||
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
|
|
||||||
<code>.accordion-body</code>
|
|
||||||
, though the transition does limit overflow.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion-item">
|
|
||||||
<h3 class="accordion-header" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">Accordion Item #3</button></h3>
|
|
||||||
<div class="accordion-collapse collapse" id="collapseThree2" aria-labelledby="headingThree" data-bs-parent="#accordionExample2">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<strong>This is the third item's accordion body.</strong>
|
|
||||||
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
|
|
||||||
<code>.accordion-body</code>
|
|
||||||
, though the transition does limit overflow.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-4">
|
|
||||||
<div class="card border-0 bg-light mt-xl-5">
|
|
||||||
<div class="card-body p-4 py-lg-5">
|
|
||||||
<div class="d-flex align-items-center justify-content-center">
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="h6 fw-bolder">Have more questions?</div>
|
|
||||||
<p class="text-muted mb-4">
|
|
||||||
Contact us at
|
|
||||||
<br />
|
|
||||||
<a href="#!">support@domain.com</a>
|
|
||||||
</p>
|
|
||||||
<div class="h6 fw-bolder">Follow us</div>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-twitter"></i></a>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-facebook"></i></a>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-linkedin"></i></a>
|
|
||||||
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-youtube"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,233 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column h-100">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Header-->
|
|
||||||
<header class="bg-dark py-5">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row gx-5 align-items-center justify-content-center">
|
|
||||||
<div class="col-lg-8 col-xl-7 col-xxl-6">
|
|
||||||
<div class="my-5 text-center text-xl-start">
|
|
||||||
<h1 class="display-5 fw-bolder text-white mb-2">A Bootstrap 5 template for modern businesses</h1>
|
|
||||||
<p class="lead fw-normal text-white-50 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit!</p>
|
|
||||||
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
|
|
||||||
<a class="btn btn-primary btn-lg px-4 me-sm-3" href="#features">Get Started</a>
|
|
||||||
<a class="btn btn-outline-light btn-lg px-4" href="#!">Learn More</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Features section-->
|
|
||||||
<section class="py-5" id="features">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-lg-4 mb-5 mb-lg-0"><h2 class="fw-bolder mb-0">A better way to start building.</h2></div>
|
|
||||||
<div class="col-lg-8">
|
|
||||||
<div class="row gx-5 row-cols-1 row-cols-md-2">
|
|
||||||
<div class="col mb-5 h-100">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-collection"></i></div>
|
|
||||||
<h2 class="h5">Featured title</h2>
|
|
||||||
<p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col mb-5 h-100">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-building"></i></div>
|
|
||||||
<h2 class="h5">Featured title</h2>
|
|
||||||
<p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col mb-5 mb-md-0 h-100">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-toggles2"></i></div>
|
|
||||||
<h2 class="h5">Featured title</h2>
|
|
||||||
<p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col h-100">
|
|
||||||
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-toggles2"></i></div>
|
|
||||||
<h2 class="h5">Featured title</h2>
|
|
||||||
<p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Testimonial section-->
|
|
||||||
<div class="py-5 bg-light">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<div class="col-lg-10 col-xl-7">
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="fs-4 mb-4 fst-italic">"Working with Start Bootstrap templates has saved me tons of development time when building new projects! Starting with a Bootstrap template just makes things easier!"</div>
|
|
||||||
<div class="d-flex align-items-center justify-content-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="fw-bold">
|
|
||||||
Tom Ato
|
|
||||||
<span class="fw-bold text-primary mx-1">/</span>
|
|
||||||
CEO, Pomodoro
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Blog preview section-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<div class="col-lg-8 col-xl-6">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2 class="fw-bolder">From our blog</h2>
|
|
||||||
<p class="lead fw-normal text-muted mb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Blog post title</h5></a>
|
|
||||||
<p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Kelly Rowan</div>
|
|
||||||
<div class="text-muted">March 12, 2023 · 6 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/adb5bd/495057" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Media</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Another blog post title</h5></a>
|
|
||||||
<p class="card-text mb-0">This text is a bit longer to illustrate the adaptive height of each card. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Josiah Barclay</div>
|
|
||||||
<div class="text-muted">March 23, 2023 · 4 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 mb-5">
|
|
||||||
<div class="card h-100 shadow border-0">
|
|
||||||
<img class="card-img-top" src="https://dummyimage.com/600x350/6c757d/343a40" alt="..." />
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
|
|
||||||
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">The last blog post title is a little bit longer than the others</h5></a>
|
|
||||||
<p class="card-text mb-0">Some more quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
|
|
||||||
<div class="d-flex align-items-end justify-content-between">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
|
|
||||||
<div class="small">
|
|
||||||
<div class="fw-bold">Evelyn Martinez</div>
|
|
||||||
<div class="text-muted">April 2, 2023 · 10 min read</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Call to action-->
|
|
||||||
<aside class="bg-primary bg-gradient rounded-3 p-4 p-sm-5 mt-5">
|
|
||||||
<div class="d-flex align-items-center justify-content-between flex-column flex-xl-row text-center text-xl-start">
|
|
||||||
<div class="mb-4 mb-xl-0">
|
|
||||||
<div class="fs-3 fw-bold text-white">New products, delivered to you.</div>
|
|
||||||
<div class="text-white-50">Sign up for our newsletter for the latest updates.</div>
|
|
||||||
</div>
|
|
||||||
<div class="ms-xl-4">
|
|
||||||
<div class="input-group mb-2">
|
|
||||||
<input class="form-control" type="text" placeholder="Email address..." aria-label="Email address..." aria-describedby="button-newsletter" />
|
|
||||||
<button class="btn btn-outline-light" id="button-newsletter" type="button">Sign up</button>
|
|
||||||
</div>
|
|
||||||
<div class="small text-white-50">We care about privacy, and will never share your data.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column h-100">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Page Content-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="text-center mb-5">
|
|
||||||
<h1 class="fw-bolder">Project Title</h1>
|
|
||||||
<p class="lead fw-normal text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab similique, ducimus ut alias sit accusamus illum, asperiores deserunt dolorum quaerat qui! Ab, quisquam explicabo magni dolores unde beatae quam a.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-12"><img class="img-fluid rounded-3 mb-5" src="https://dummyimage.com/1300x700/343a40/6c757d" alt="..." /></div>
|
|
||||||
<div class="col-lg-6"><img class="img-fluid rounded-3 mb-5" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
|
|
||||||
<div class="col-lg-6"><img class="img-fluid rounded-3 mb-5" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="text-center mb-5">
|
|
||||||
<p class="lead fw-normal text-muted">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam deserunt architecto enim eos accusantium fugit recusandae illo iste dignissimos possimus facere ducimus odit voluptatibus exercitationem, ex laudantium illum voluptatum corporis.</p>
|
|
||||||
<a class="text-decoration-none" href="#!">
|
|
||||||
View project
|
|
||||||
<i class="bi-arrow-right"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column h-100">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Page Content-->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="text-center mb-5">
|
|
||||||
<h1 class="fw-bolder">Our Work</h1>
|
|
||||||
<p class="lead fw-normal text-muted mb-0">Company portfolio</p>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="position-relative mb-5">
|
|
||||||
<img class="img-fluid rounded-3 mb-3" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." />
|
|
||||||
<a class="h3 fw-bolder text-decoration-none link-dark stretched-link" href="#!">Project name</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="position-relative mb-5">
|
|
||||||
<img class="img-fluid rounded-3 mb-3" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." />
|
|
||||||
<a class="h3 fw-bolder text-decoration-none link-dark stretched-link" href="#!">Project name</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="position-relative mb-5 mb-lg-0">
|
|
||||||
<img class="img-fluid rounded-3 mb-3" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." />
|
|
||||||
<a class="h3 fw-bolder text-decoration-none link-dark stretched-link" href="#!">Project name</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="position-relative">
|
|
||||||
<img class="img-fluid rounded-3 mb-3" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." />
|
|
||||||
<a class="h3 fw-bolder text-decoration-none link-dark stretched-link" href="#!">Project name</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="py-5 bg-light">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<h2 class="display-4 fw-bolder mb-4">Let's build something together</h2>
|
|
||||||
<a class="btn btn-lg btn-primary" href="#!">Contact us</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,225 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="" />
|
|
||||||
<title>Modern Business - Start Bootstrap Template</title>
|
|
||||||
<!-- Favicon-->
|
|
||||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
||||||
<!-- Bootstrap icons-->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
|
||||||
<link href="css/styles.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column">
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<!-- Navigation-->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container px-5">
|
|
||||||
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
|
|
||||||
<li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
|
|
||||||
<li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
|
|
||||||
<li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Pricing section-->
|
|
||||||
<section class="bg-light py-5">
|
|
||||||
<div class="container px-5 my-5">
|
|
||||||
<div class="text-center mb-5">
|
|
||||||
<h1 class="fw-bolder">Pay as you grow</h1>
|
|
||||||
<p class="lead fw-normal text-muted mb-0">With our no hassle pricing plans</p>
|
|
||||||
</div>
|
|
||||||
<div class="row gx-5 justify-content-center">
|
|
||||||
<!-- Pricing card free-->
|
|
||||||
<div class="col-lg-6 col-xl-4">
|
|
||||||
<div class="card mb-5 mb-xl-0">
|
|
||||||
<div class="card-body p-5">
|
|
||||||
<div class="small text-uppercase fw-bold text-muted">Free</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<span class="display-4 fw-bold">$0</span>
|
|
||||||
<span class="text-muted">/ mo.</span>
|
|
||||||
</div>
|
|
||||||
<ul class="list-unstyled mb-4">
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
<strong>1 users</strong>
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
5GB storage
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Unlimited public projects
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Community access
|
|
||||||
</li>
|
|
||||||
<li class="mb-2 text-muted">
|
|
||||||
<i class="bi bi-x"></i>
|
|
||||||
Unlimited private projects
|
|
||||||
</li>
|
|
||||||
<li class="mb-2 text-muted">
|
|
||||||
<i class="bi bi-x"></i>
|
|
||||||
Dedicated support
|
|
||||||
</li>
|
|
||||||
<li class="mb-2 text-muted">
|
|
||||||
<i class="bi bi-x"></i>
|
|
||||||
Free linked domain
|
|
||||||
</li>
|
|
||||||
<li class="text-muted">
|
|
||||||
<i class="bi bi-x"></i>
|
|
||||||
Monthly status reports
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="d-grid"><a class="btn btn-outline-primary" href="#!">Choose plan</a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Pricing card pro-->
|
|
||||||
<div class="col-lg-6 col-xl-4">
|
|
||||||
<div class="card mb-5 mb-xl-0">
|
|
||||||
<div class="card-body p-5">
|
|
||||||
<div class="small text-uppercase fw-bold">
|
|
||||||
<i class="bi bi-star-fill text-warning"></i>
|
|
||||||
Pro
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<span class="display-4 fw-bold">$9</span>
|
|
||||||
<span class="text-muted">/ mo.</span>
|
|
||||||
</div>
|
|
||||||
<ul class="list-unstyled mb-4">
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
<strong>5 users</strong>
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
5GB storage
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Unlimited public projects
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Community access
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Unlimited private projects
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Dedicated support
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Free linked domain
|
|
||||||
</li>
|
|
||||||
<li class="text-muted">
|
|
||||||
<i class="bi bi-x"></i>
|
|
||||||
Monthly status reports
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="d-grid"><a class="btn btn-primary" href="#!">Choose plan</a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Pricing card enterprise-->
|
|
||||||
<div class="col-lg-6 col-xl-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body p-5">
|
|
||||||
<div class="small text-uppercase fw-bold text-muted">Enterprise</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<span class="display-4 fw-bold">$49</span>
|
|
||||||
<span class="text-muted">/ mo.</span>
|
|
||||||
</div>
|
|
||||||
<ul class="list-unstyled mb-4">
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
<strong>Unlimited users</strong>
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
5GB storage
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Unlimited public projects
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Community access
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Unlimited private projects
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Dedicated support
|
|
||||||
</li>
|
|
||||||
<li class="mb-2">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
<strong>Unlimited</strong>
|
|
||||||
linked domains
|
|
||||||
</li>
|
|
||||||
<li class="text-muted">
|
|
||||||
<i class="bi bi-check text-primary"></i>
|
|
||||||
Monthly status reports
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="d-grid"><a class="btn btn-outline-primary" href="#!">Choose plan</a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer-->
|
|
||||||
<footer class="bg-dark py-4 mt-auto">
|
|
||||||
<div class="container px-5">
|
|
||||||
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
|
|
||||||
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<a class="link-light small" href="#!">Privacy</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Terms</a>
|
|
||||||
<span class="text-white mx-1">·</span>
|
|
||||||
<a class="link-light small" href="#!">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- Bootstrap core JS-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Core theme JS-->
|
|
||||||
<script src="js/scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user