Selaa lähdekoodia

update the site

Eran 5 vuotta sitten
vanhempi
commit
9a85f84bfd

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 4
css/font-awesome.min.css


+ 143 - 1
css/style.css

@@ -1 +1,143 @@
-# Empty CSS file for your own CSS
+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;
+}

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 1
css/tether-theme-arrows-dark.min.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 1
css/tether-theme-arrows.min.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 1
css/tether-theme-basic.min.css


+ 0 - 1
css/tether.min.css

@@ -1 +0,0 @@
-.tether-element,.tether-element *,.tether-element :after,.tether-element :before,.tether-element:after,.tether-element:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}

BIN
fonts/FontAwesome.otf


BIN
fonts/fontawesome-webfont.eot


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 2671
fonts/fontawesome-webfont.svg


BIN
fonts/fontawesome-webfont.ttf


BIN
fonts/fontawesome-webfont.woff


BIN
fonts/fontawesome-webfont.woff2


+ 542 - 104
index.html

@@ -5,140 +5,578 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Stackvee - Your tech stack</title>
+    <title>Bootstrap 4, from LayoutIt!</title>
 
-    <meta name="description" content="The first tech stack as a service">
-    <meta name="author" content="Eran Goldman-Malka">
+    <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">
-    <link href="css/font-awesome.min.css" rel="stylesheet">
 
   </head>
   <body>
 
     <div class="container-fluid">
-	<div class="row">
+	<div class="row top15">
 		<div class="col-md-12">
-			<nav class="navbar navbar-expand-lg navbar-light bg-light">
-
-				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-					<span class="navbar-toggler-icon"></span>
-				</button> <a class="navbar-brand" href="#">Stackvee</a>
-				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-					<ul class="navbar-nav">
-						<li class="nav-item active">
-							 <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
-						</li>
-						<li class="nav-item">
-							 <a class="nav-link" href="#">Link</a>
-						</li>
-						<li class="nav-item dropdown">
-							 <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
-							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-								 <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
-								<div class="dropdown-divider">
-								</div> <a class="dropdown-item" href="#">Separated link</a>
+			<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>
-						</li>
-					</ul>
-					<ul class="navbar-nav ml-md-auto">
-						<li class="nav-item active">
-							 <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
-						</li>
-						<li class="nav-item dropdown">
-							 <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
-							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
-								 <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
-								<div class="dropdown-divider">
-								</div> <a class="dropdown-item" href="#">Separated link</a>
+							<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>
-						</li>
-					</ul>
+
+					<!-- # 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>
-			</nav>
-			<div class="jumbotron">
-				<h2>
-					Take control of your technical stack
-				</h2>
-				<p>
-					Your startup data is spread between many suppliers, Email, Calendar, Messaging, Repositories and many more.<br>
-          This mean that you don't control your servers, data, secrets and resources
-				</p>
-				<p>
-					<a class="btn btn-primary btn-large" href="#">Take control on your resources</a>
-				</p>
+
+				<!-- # comparison table -->
 			</div>
-		</div>
-	</div>
-	<div class="row">
-		<div class="col-md-1">
-      <a href="#" class="btn btn-success btn-product">
-        More data<br>
-        <i class="fa fa-chevron-circle-down fa-4x fa-align-center" aria-hidden="true"></i>
-      </a>
+			<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 class="col-md-8">
-      <h2>Basic pack</h2>
-      <p>Your own <b>Email server</b>, <b>Blog</b>, <b>Git server</b><br>
-        This pack is when you are just the first 2 or 3 founders
-      </p>
+  </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">
-      <h1>
-        $50<span class="subscript">/mo</span>
-      </h1>
+
+		<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 class="col-md-1">
-      <a href="#" class="btn btn-success btn-product"><i class="fa fa-shopping-cart fa-2x"></i> <br>Add 2 Cart</a>
+	</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 class="row d-none">
-		<div class="col-md-12">
+</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>
-  <hr>
-	<div class="row" >
-		<div class="col-md-4">
-			<h2>
-				Heading
-			</h2>
-			<p>
-				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
-			</p>
-			<p>
-				<a class="btn" href="#">View details »</a>
-			</p>
+	<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 class="col-md-4">
-			<h2>
-				Heading
-			</h2>
-			<p>
-				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
-			</p>
-			<p>
-				<a class="btn" href="#">View details »</a>
-			</p>
+
 		</div>
-		<div class="col-md-4">
-			<h2>
-				Heading
-			</h2>
-			<p>
-				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
-			</p>
-			<p>
-				<a class="btn" href="#">View details »</a>
-			</p>
+	</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/tether.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>

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 1
js/tether.min.js