new bootstrap site update

new/css/bootstrap-reboot.css

@@ -0,0 +1,459 @@
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+figcaption,
+figure,
+main {
+  display: block;
+}
+
+figure {
+  margin: 1em 40px;
+}
+
+hr {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+}
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+dfn {
+  font-style: italic;
+}
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+img {
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details,
+menu {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+canvas {
+  display: inline-block;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+html {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+html {
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  color: #292b2c;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  cursor: help;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+a {
+  color: #0275d8;
+  text-decoration: none;
+}
+
+a:focus, a:hover {
+  color: #014c8c;
+  text-decoration: underline;
+}
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus {
+  outline: 0;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+}
+
+[role="button"] {
+  cursor: pointer;
+}
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+}
+
+table {
+  border-collapse: collapse;
+  background-color: transparent;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #636c72;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: left;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: .5rem;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+textarea {
+  line-height: inherit;
+}
+
+input[type="radio"]:disabled,
+input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+}
+
+input[type="search"] {
+  -webkit-appearance: none;
+}
+
+output {
+  display: inline-block;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */

new/css/style.css

@@ -0,0 +1,143 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+
+top15 {
+    margin-top: 15px
+}
+top25 {
+    margin-top: 25px
+}
+top30 {
+    margin-top: 30px
+}
+a.navbar-brand {
+    float: left;
+    height: 50px;
+    padding: 15px 15px;
+    font-size: 18px;
+    line-height: 20px;
+    text-decoration: none;
+    color: orangered;
+    font-family: cursive;
+    font-weight: 700;
+
+}
+
+nav.main-navigation {
+    position: relative;
+}
+
+nav.main-navigation ul.nav-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: relative;
+    text-align: right;
+}
+
+.nav-list li.nav-list-item {
+    display: inline-block;
+    line-height: 40px;
+    margin-left: 30px;
+    margin-top: 15px;
+}
+
+a.nav-link {
+    text-decoration: none;
+    font-size: 18px;
+    font-family: sans-serif;
+    font-weight: 500;
+    cursor: pointer;
+    position: relative;
+    color: #404040;
+}
+
+@keyframes FadeIn {
+    0% {
+        opacity: 0;
+        -webkit-transition-duration: 0.8s;
+        transition-duration: 0.8s;
+        -webkit-transform: translateY(-10px);
+        -ms-transform: translateY(-10px);
+        transform: translateY(-10px);
+    }
+
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        -ms-transform: translateY(0);
+        transform: translateY(0);
+        pointer-events: auto;
+        transition: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+}
+
+.nav-list li {
+    animation: FadeIn 1s cubic-bezier(0.65, 0.05, 0.36, 1);
+    animation-fill-mode: both;
+}
+
+.nav-list li:nth-child(1) {
+    animation-delay: .3s;
+}
+
+.nav-list li:nth-child(2) {
+    animation-delay: .6s;
+}
+
+.nav-list li:nth-child(3) {
+    animation-delay: .9s;
+}
+
+.nav-list li:nth-child(4) {
+    animation-delay: 1.2s;
+}
+
+.nav-list li:nth-child(5) {
+    animation-delay: 1.5s;
+}
+
+/* Animation */
+
+@keyframes fadeInUp {
+    from {
+        transform: translate3d(0, 40px, 0)
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes fadeInUp {
+    from {
+        transform: translate3d(0, 40px, 0)
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+        opacity: 1
+    }
+}
+
+.animated {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: both
+}
+
+.animatedFadeInUp {
+    opacity: 0
+}
+
+.fadeInUp {
+    opacity: 0;
+    animation-name: fadeInUp;
+    -webkit-animation-name: fadeInUp;
+}

new/index.html

@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Bootstrap 4, from LayoutIt!</title>
+
+    <meta name="description" content="Source code generated using layoutit.com">
+    <meta name="author" content="LayoutIt!">
+
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+
+  </head>
+  <body>
+
+    <div class="container-fluid">
+	<div class="row top15">
+		<div class="col-md-12">
+			<nav class="main-navigation">
+		         <div class="navbar-header animated fadeInUp">
+		             <a class="navbar-brand" href="#">Stackvee</a>
+		         </div>
+		         <ul class="nav-list">
+		             <li class="nav-list-item">
+		                 <a href="https://app.stackvee.com" class="nav-link">Users login</a>
+		             </li>
+		         </ul>
+
+		     </nav>
+		</div>
+	</div>
+
+	<div class="row top30">
+		<div class="col-md-12">
+	<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1 class="display-4">Stackvee, Smart your tech stack</h1>
+    <p class="lead">We are helping startups to choose and use the best technical stack for their needs.<br>
+			Our team test in real life situations different technical stacks so we can recommend the best one for you<br>
+			We belive in open source and use open source tools to give you the best experiance and to keep your private data private<br>
+			When you choose commercial solutions that you cannot control your data is out there to scan, analyze, sell and use<br>
+			We give you the stack, and the data is 100% yours. <br>
+			We are fully GDPR compliance.<br>
+			<b>For a limited time we give 30% lifetime discount</b><br>
+			You can start as low as 50$ per month for a startup up to 15 employees<br>
+			<b>With each plan you will get a consulting meeting to help you to choose the correct stack for you</b><br>
+			And 72 hours response time, consulting by email without limitation
+		</p>
+  </div>
+</div>
+</div>
+</div>
+<div class="row top30">
+
+		<div class="col-md-12">
+      <!-- Acordion -->
+      <!--Accordion wrapper-->
+<div class="accordion md-accordion accordion-1" id="accordionEx23" role="tablist">
+  <div class="card">
+    <div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
+			<div class="row">
+				<div class="col-md-8 col-sm-6 col-xs-6">
+						<a class="white-text font-weight-bold white-text" data-toggle="collapse" href="#starter_pack" aria-expanded="true" aria-controls="starter_pack">
+		      <h5 class="text-uppercase">
+					<i class="fas fa-chevron-circle-down"></i>
+		          starter pack
+		      </h5>
+					</a>
+				</div>
+
+			<div class="col-md-2 col-sm-2 col-xs-2 price float-right">
+				<h3 style="margin:5px auto;">$<span class="price">50</span> <small>+ .com domain</small></h3>
+
+			</div>
+
+			<div class="col-md-2 col-sm-4 col-xs-4">
+				<a href="#" class="btn btn-success btn-product btn-block float-right"><i class="fas fa-cart-plus"></i> Add 2 Cart</a>
+			</div>
+		</div>
+    </div>
+    <div id="starter_pack" class="collapse" role="tabpanel" aria-labelledby="heading96" data-parent="#accordionEx23">
+      <div class="card-body">
+        <div class="row my-4">
+
+					<!-- starter_pack description - web server -->
+
+							<div class="col-md-2 col-sm-6 col-xs-6 justify-content-center">
+									<i class="fab fa-wordpress-simple fa-9x"></i>
+							</div>
+							<div class="col-md-4 col-sm-6 col-xs-6">
+									<h4>Website, technical blog, and app server</h4>
+									<h4 class="subheading">On your private fully managed servers</h4>
+							<p class="text-muted">Your wordpress blog, web site, and app server<br>
+								Update the website buy just pushing the code to the site repository<br>
+								Deploy your app with CI/CD (Require deploy server pack).<br>
+							</p>
+							</div>
+
+					<!-- # starter_pack description -->
+
+					<!-- comparison table -->
+					<div class="col-md-6 col-sm-12 col-xs-12">
+					<div class="container mb-8 mt-2">
+					    <div class="pricing card-deck flex-column flex-md-row mb-6">
+					        <div class="card card-pricing text-center px-3 mb-5">
+					            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Stackvee - hosting service</span>
+					            <div class="bg-transparent card-header pt-4 border-0">
+					                <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="50">$<span class="price">50</span><span class="h6 text-muted ml-2">/ starter pack</span></h1>
+					            </div>
+					            <div class="card-body pt-0">
+					                <ul class="list-unstyled mb-4">
+														  <li>Auto deploy from repo to Website</li>
+					                    <li>Auto deploy from repo to Website</li>
+					                    <li>1TB Bandwidth </li>
+					                    <li>20GB Storage</li>
+					                    <li><b>No ads</b></li>
+					                    <li>Free cancelation</li>
+					                </ul>
+					                <button type="button" class="btn btn-success mb-3">Add 2 Cart</button>
+					            </div>
+					        </div>
+					        <div class="card card-pricing popular shadow text-center px-3 mb-4">
+					            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Wix</span>
+					            <div class="bg-transparent card-header pt-4 border-0">
+					                <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">€<span class="price">25</span><span class="h6 text-muted ml-2">/ per month</span></h1>
+					            </div>
+					            <div class="card-body pt-0">
+					                <ul class="list-unstyled mb-4">
+					                    <li>35GB Storage</li>
+					                    <li>Google Analytics</li>
+					                    <li>Vendor lock</li>
+					                    <li>yearly subscriptions, paid in full at the time of purchase</li>
+					                </ul>
+					                <a href="https://www.wix.com/upgrade/website" target="_blank" class="btn btn-outline-secondary mb-3">Go to Wix</a>
+					            </div>
+					        </div>
+					        <div class="card card-pricing text-center px-3 mb-4">
+					            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">WordPress.com</span>
+					            <div class="bg-transparent card-header pt-4 border-0">
+					                <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">€<span class="price">25</span><span class="h6 text-muted ml-2">/ per month</span></h1>
+					            </div>
+					            <div class="card-body pt-0">
+					                <ul class="list-unstyled mb-4">
+					                    <li>annual commitment - billed yearly</li>
+					                    <li>WordPress.com Branding</li>
+					                    <li>Google Analytics Integration</li>
+					                </ul>
+					                <a href="https://wordpress.com/pricing/" target="_blank" class="btn btn-outline-secondary mb-3">Go to Microsoft</a>
+					            </div>
+					        </div>
+					    </div>
+					</div>
+				</div>
+
+				<!-- # comparison table -->
+			</div>
+			<hr class="my-4">
+<div class="row my-4 top15">
+<!-- # web server -->
+						<!-- starter_pack description - Git server-->
+
+								<div class="col-md-2 col-sm-6 col-xs-6">
+										<i class="fab fa-git-square fa-9x"></i>
+								</div>
+								<div class="col-md-4 col-sm-6 col-xs-6">
+										<h4>Your repositories, Your code</h4>
+										<h4 class="subheading">On your private fully managed servers</h4>
+								<p class="text-muted">
+									Git management server.<br>
+								</p>
+								</div>
+
+						<!-- # starter_pack description -->
+
+						<!-- comparison table -->
+						<div class="col-md-6 col-sm-12 col-xs-12">
+						<div class="container mb-8 mt-2">
+						    <div class="pricing card-deck flex-column flex-md-row mb-6">
+						        <div class="card card-pricing text-center px-3 mb-5">
+						            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Stackvee - git service</span>
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="50">$<span class="price">50</span><span class="h6 text-muted ml-2">/ starter pack</span></h1>
+						            <div class="bg-transparent card-header pt-4 border-0">
+						            </div>
+						            <div class="card-body pt-0">
+						                <ul class="list-unstyled mb-4">
+															  <li>Unlimited public repositories</li>
+						                    <li>Unlimited private repositories</li>
+						                    <li>Team access controls</li>
+						                    <li>Issues and bug tracking</li>
+						                    <li>Free cancelation</li>
+						                </ul>
+						                <button type="button" class="btn btn-success mb-3">Add 2 Cart</button>
+						            </div>
+						        </div>
+						        <div class="card card-pricing popular shadow text-center px-3 mb-4">
+						            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Github</span>
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">9</span><span class="h6 text-muted ml-2">/ per user</span></h1>
+						            <div class="bg-transparent card-header pt-4 border-0">
+						            </div>
+						            <div class="card-body pt-0">
+						                <ul class="list-unstyled mb-4">
+						                    <li>Minimum 5 users</li>
+						                    <li>No webhooks</li>
+						                    <li>Team access controls</li>
+						                    <li>Issues and bug tracking</li>
+						                    <li>Backed by Microsoft</li>
+						                </ul>
+						                <a href="https://github.com/pricing" target="_blank" class="btn btn-outline-secondary mb-3">Go to Github</a>
+						            </div>
+						        </div>
+						        <div class="card card-pricing text-center px-3 mb-4">
+						            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Bitbucket</span>
+						            <div class="bg-transparent card-header pt-4 border-0">
+						                <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">5</span><span class="h6 text-muted ml-2">/ per user</span></h1>
+						            </div>
+						            <div class="card-body pt-0">
+						                <ul class="list-unstyled mb-4">
+						                    <li>Minimum 5 users</li>
+						                    <li>10GB Storage</li>
+						                    <li>Team access controls</li>
+						                    <li>Issues and bug tracking</li>
+						                </ul>
+						                <a href="https://products.office.com/en-us/business/small-business-solutions#office-ContentAreaHeadingTemplate-1cuvapm" target="_blank" class="btn btn-outline-secondary mb-3">Go to Microsoft</a>
+						            </div>
+						        </div>
+						    </div>
+						</div>
+					</div>
+						<!-- # comparison table -->
+<!-- # Git server -->
+</div>
+<hr class="my-4">
+<div class="row my-4 top15">
+					<!-- starter_pack description - email -->
+
+							<div class="col-md-2 col-sm-6 col-xs-6">
+									<i class="fas fa-mail-bulk fa-9x"></i>
+							</div>
+							<div class="col-md-4 col-sm-6 col-xs-6">
+									<h4>Our self hosted email service</h4>
+									<h4 class="subheading">On your private fully managed servers</h4>
+							<p class="text-muted">Our server includes: spam filtering, greylisting, backups, and free TLS (SSL) certificates. <br>
+								We implements modern mail protocols (SPF, DKIM, and DMARC) and the latest security best practices,<br>
+								including opportunistic TLS, strong ciphers, and HSTS. <br>
+								The highest level of protection against active attacks. <br>
+								Exchange ActiveSync is also available for beta testers.</p>
+							</div>
+
+					<!-- # starter_pack description -->
+
+					<!-- comparison table -->
+					<div class="col-md-6 col-sm-12 col-xs-12">
+					<div class="container mb-8 mt-2">
+					    <div class="pricing card-deck flex-column flex-md-row mb-6">
+					        <div class="card card-pricing text-center px-3 mb-5">
+					            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Stackvee - email service</span>
+					            <div class="bg-transparent card-header pt-4 border-0">
+					                <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="50">$<span class="price">50</span><span class="h6 text-muted ml-2">/ starter pack</span></h1>
+					            </div>
+					            <div class="card-body pt-0">
+					                <ul class="list-unstyled mb-4">
+														  <li>up to 15 users</li>
+					                    <li>Your data / Your servers</li>
+					                    <li>Not extra cost</li>
+					                    <li>Monthly updates</li>
+					                    <li><b>No ad-tracking in you emails</b></li>
+					                    <li>Free cancelation</li>
+					                </ul>
+					                <button type="button" class="btn btn-success mb-3">Add 2 Cart</button>
+					            </div>
+					        </div>
+					        <div class="card card-pricing popular shadow text-center px-3 mb-4">
+					            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Gmail</span>
+					            <div class="bg-transparent card-header pt-4 border-0">
+					                <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">12</span><span class="h6 text-muted ml-2">/ per user</span></h1>
+					            </div>
+					            <div class="card-body pt-0">
+					                <ul class="list-unstyled mb-4">
+					                    <li>Minimum 5 users</li>
+					                    <li>2-week free trial of G Suite</li>
+					                    <li>Vendor lock</li>
+					                    <li>Integrated ad-tracking</li>
+					                </ul>
+					                <a href="https://suitebriar.com/blog/gmail-for-business-pricing" target="_blank" class="btn btn-outline-secondary mb-3">Go to Gmail</a>
+					            </div>
+					        </div>
+					        <div class="card card-pricing text-center px-3 mb-4">
+					            <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Microsoft</span>
+					            <div class="bg-transparent card-header pt-4 border-0">
+					                <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">12.50</span><span class="h6 text-muted ml-2">/ per user</span></h1>
+					            </div>
+					            <div class="card-body pt-0">
+					                <ul class="list-unstyled mb-4">
+					                    <li>annual commitment</li>
+					                    <li>Free descktop Office apps</li>
+					                    <li>Exchange Online Protection</li>
+					                    <li>Backed by Microsoft</li>
+					                </ul>
+					                <a href="https://products.office.com/en-us/business/small-business-solutions#office-ContentAreaHeadingTemplate-1cuvapm" target="_blank" class="btn btn-outline-secondary mb-3">Go to Microsoft</a>
+					            </div>
+					        </div>
+					    </div>
+					</div>
+				</div>
+					<!-- # comparison table -->
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+<!-- ======================  communication pack -->
+
+<div class="card">
+	<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
+		<div class="row">
+			<div class="col-md-8 col-sm-6 col-xs-6">
+					<a class="white-text font-weight-bold white-text" data-toggle="collapse" href="#communication_pack" aria-expanded="true" aria-controls="communication_pack">
+				<h5 class="text-uppercase">
+				<i class="fas fa-chevron-circle-down"></i>
+						communication pack
+				</h5>
+				</a>
+			</div>
+
+		<div class="col-md-2 col-sm-2 col-xs-2 price float-right">
+			<h3 style="margin:5px auto;">$<span class="price">25</span></h3>
+
+		</div>
+
+		<div class="col-md-2 col-sm-4 col-xs-4">
+			<a href="#" class="btn btn-success btn-product btn-block float-right"><i class="fas fa-cart-plus"></i> Add 2 Cart</a>
+		</div>
+	</div>
+	</div>
+	<div id="communication_pack" class="collapse" role="tabpanel" aria-labelledby="heading96" data-parent="#accordionEx23">
+		<div class="card-body">
+			<div class="row my-4">
+
+				<!-- communication_pack description - web server -->
+
+						<div class="col-md-2 col-sm-6 col-xs-6 justify-content-center">
+							<i class="far fa-comments fa-9x"></i>
+						</div>
+						<div class="col-md-4 col-sm-6 col-xs-6">
+								<h4>Communicate efficently with your team</h4>
+								<h4 class="subheading">On your private fully managed servers</h4>
+						<p class="text-muted">Your wordpress blog, web site, and app server<br>
+							Update the website buy just pushing the code to the site repository<br>
+							Deploy your app with CI/CD (Require deploy server pack).<br>
+						</p>
+						</div>
+
+				<!-- # communication_pack description -->
+
+				<!-- comparison table -->
+				<div class="col-md-6 col-sm-12 col-xs-12">
+				<div class="container mb-8 mt-2">
+						<div class="pricing card-deck flex-column flex-md-row mb-6">
+								<div class="card card-pricing text-center px-3 mb-5">
+										<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Stackvee - Communication service</span>
+										<div class="bg-transparent card-header pt-4 border-0">
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="50">$<span class="price">25</span><span class="h6 text-muted ml-2">/ starter pack</span></h1>
+										</div>
+										<div class="card-body pt-0">
+												<ul class="list-unstyled mb-4">
+														<li>Organized conversations in teams and channels</li>
+														<li>Fully searchable message history</li>
+														<li>1-on-1 and group messaging</li>
+														<li>Voice, video, and screen sharing</li>
+														<li>File, image, and link sharing</li>
+														<li>Emoji and rich Markdown formatting</li>
+														<li>Multi-language support </li></li>
+														<li>Custom desktop, email, and mobile notifications</li>
+														<li>Keyword mention alerts</li>
+														<li>Free cancelation</li>
+												</ul>
+												<button type="button" class="btn btn-success mb-3">Add 2 Cart</button>
+										</div>
+								</div>
+								<div class="card card-pricing popular shadow text-center px-3 mb-4">
+										<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Slack</span>
+										<div class="bg-transparent card-header pt-4 border-0">
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">€<span class="price">11.75</span><span class="h6 text-muted ml-2">/ per month</span></h1>
+										</div>
+										<div class="card-body pt-0">
+												<ul class="list-unstyled mb-4">
+														<li>annual commitment - billed yearly</li>
+														<li>Vendor lock</li>
+														<li>Unlimited workspaces</li>
+												</ul>
+												<a href="https://zvwxrp.slack.com/plans" target="_blank" class="btn btn-outline-secondary mb-3">Go to Slack</a>
+										</div>
+								</div>
+								<div class="card card-pricing text-center px-3 mb-4">
+										<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Teams</span>
+										<div class="bg-transparent card-header pt-4 border-0">
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">12.50</span><span class="h6 text-muted ml-2">/ per month</span></h1>
+										</div>
+										<div class="card-body pt-0">
+												<ul class="list-unstyled mb-4">
+														<li>annual commitment - billed yearly</li>
+														<li>Integrate with Microsoft products</li>
+														<li>Backed by Microsoft</li>
+												</ul>
+												<a href="https://wordpress.com/pricing/" target="_blank" class="btn btn-outline-secondary mb-3">Go to Microsoft</a>
+										</div>
+								</div>
+						</div>
+				</div>
+			</div>
+
+			<!-- # comparison table -->
+		</div>
+
+		</div>
+	</div>
+</div>
+
+
+
+<!-- ======================  Agile pack -->
+
+<div class="card">
+	<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
+		<div class="row">
+			<div class="col-md-8 col-sm-6 col-xs-6">
+					<a class="white-text font-weight-bold white-text" data-toggle="collapse" href="#agail_pack" aria-expanded="true" aria-controls="agail_pack">
+				<h5 class="text-uppercase">
+				<i class="fas fa-chevron-circle-down"></i>
+						agail pack
+				</h5>
+				</a>
+			</div>
+
+		<div class="col-md-2 col-sm-2 col-xs-2 price float-right">
+			<h3 style="margin:5px auto;">$<span class="price">25</span></h3>
+
+		</div>
+
+		<div class="col-md-2 col-sm-4 col-xs-4">
+			<a href="#" class="btn btn-success btn-product btn-block float-right"><i class="fas fa-cart-plus"></i> Add 2 Cart</a>
+		</div>
+	</div>
+	</div>
+	<div id="agail_pack" class="collapse" role="tabpanel" aria-labelledby="heading96" data-parent="#accordionEx23">
+		<div class="card-body">
+			<div class="row my-4">
+
+				<!-- agail_pack description - web server -->
+
+						<div class="col-md-2 col-sm-6 col-xs-6 justify-content-center">
+							<i class="fas fa-chalkboard-teacher fa-9x"></i>
+						</div>
+						<div class="col-md-4 col-sm-6 col-xs-6">
+								<h4>Manage your projects smartly</h4>
+								<h4 class="subheading">On your private fully managed servers</h4>
+						<p class="text-muted">flexible project management application.<br>
+							That can fit in to any company and projects
+						</p>
+						</div>
+
+				<!-- # agail_pack description -->
+
+				<!-- comparison table -->
+				<div class="col-md-6 col-sm-12 col-xs-12">
+				<div class="container mb-8 mt-2">
+						<div class="pricing card-deck flex-column flex-md-row mb-6">
+								<div class="card card-pricing text-center px-3 mb-5">
+										<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Stackvee - agail service</span>
+										<div class="bg-transparent card-header pt-4 border-0">
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="50">$<span class="price">25</span><span class="h6 text-muted ml-2">/ starter pack</span></h1>
+										</div>
+										<div class="card-body pt-0">
+												<ul class="list-unstyled mb-4">
+														<li>Kanban and Scrum boards</li>
+														<li>Multiple projects support</li>
+														<li>Flexible role based access control</li>
+														<li>Flexible issue tracking system</li>
+														<li>Gantt chart and calendar</li>
+														<li>News, documents & files management</li>
+														<li>Feeds & email notifications</li>
+														<li>Per project wiki</li>
+														<li>Per project forums</li>
+														<li>Time tracking</li>
+														<li>SCM integration (SVN, CVS, Git, Mercurial and Bazaar)</li>
+														<li>Issue creation via email</li>
+														<li>Free cancelation</li>
+												</ul>
+												<button type="button" class="btn btn-success mb-3">Add 2 Cart</button>
+										</div>
+								</div>
+								<div class="card card-pricing popular shadow text-center px-3 mb-4">
+										<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Jira</span>
+										<div class="bg-transparent card-header pt-4 border-0">
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">7</span><span class="h6 text-muted ml-2">/ per user</span></h1>
+										</div>
+										<div class="card-body pt-0">
+												<ul class="list-unstyled mb-4">
+														<li>First 10 users for 10$</li>
+														<li>7 days free trial</li>
+														<li>Kanban and Scrum boards</li>
+												</ul>
+												<a href="https://www.atlassian.com/software/jira/pricing#pricing-calculator" target="_blank" class="btn btn-outline-secondary mb-3">Go to Jira</a>
+										</div>
+								</div>
+								<div class="card card-pricing text-center px-3 mb-4">
+										<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Trello</span>
+										<div class="bg-transparent card-header pt-4 border-0">
+												<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">9.99</span><span class="h6 text-muted ml-2">/ per user</span></h1>
+										</div>
+										<div class="card-body pt-0">
+												<ul class="list-unstyled mb-4">
+														<li>annual commitment - billed yearly</li>
+														<li>Kanban and Scrum boards</li>
+														<li>No git integration</li>
+												</ul>
+												<a href="https://trello.com/en/pricing" target="_blank" class="btn btn-outline-secondary mb-3">Go to Trello</a>
+										</div>
+								</div>
+						</div>
+				</div>
+			</div>
+
+			<!-- # comparison table -->
+
+		</div>
+
+		</div>
+	</div>
+</div>
+<!--  CARD template >
+	<div class="card">
+    <div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading97">
+      <h5 class="text-uppercase mb-0 py-1">
+        <a class="collapsed font-weight-bold white-text" data-toggle="collapse" href="#collapse97"
+          aria-expanded="false" aria-controls="collapse97">
+          I am the second title of accordion
+        </a>
+      </h5>
+    </div>
+    <div id="collapse97" class="collapse" role="tabpanel" aria-labelledby="heading97"
+      data-parent="#accordionEx23">
+      <div class="card-body">
+        <div class="row my-4">
+          <div class="col-md-8">
+            <h2 class="font-weight-bold mb-3 black-text">Hi! I am the second one.</h2>
+            <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+              ullamco laboris</p>
+            <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+              fugiat nulla pariatur.</p>
+          </div>
+          <div class="col-md-4 mt-3 pt-2">
+            <div class="view z-depth-1">
+              <img src="https://mdbootstrap.com/img/Photos/Others/nature.jpeg" alt="" class="img-fluid">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+-->
+
+</div>
+<!--Accordion wrapper-->
+
+		</div>
+	</div>
+</div>
+
+    <script src="js/jquery.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/scripts.js"></script>
+		<script src="https://kit.fontawesome.com/25ece1fdd4.js"></script>
+  </body>
+</html>

new/js/scripts.js

@@ -0,0 +1 @@
+// Empty JS for your own code to be here