landing page with browser-sync

.gitignore

@@ -0,0 +1 @@
+node_modules/

Landing Page/landing-page-mobile.css

@@ -0,0 +1,154 @@
+@media only screen and (max-width: 600px) {
+	h2{
+		font-size: 22px; 
+	}
+	h3{
+		font-size: 22px;
+	}
+	p{
+		font-size: 16px;
+		line-height: 24pt;
+	}
+
+
+	.wrapper {
+		grid-template-rows: repeat(6,auto) 1fr auto;
+		grid-gap: 100px;
+	}
+	/* TOP */
+	.top {
+		grid-gap: 10px;
+	}
+	.top > h1{
+	    font-size: 30px;
+	}
+	.private-cell{
+    	display: none;
+    }
+
+    .private-cell-mobile{
+    	display: block !important;
+    	width: 100%;
+   	}
+
+   	.desktop{
+   		display: none;
+   	}
+   	.mobile{
+   		display: grid;
+   	}
+   	/* create-as-many */
+	.create-as-many-mobile{
+		grid-template-rows: auto 1fr au;
+		grid-template-areas:
+		"title"
+		"paragraph"
+		"image";
+		border-bottom: 1px var(--grey) solid;
+	}
+	.create-as-many-mobile > img {
+		grid-area: image;
+		margin-bottom: 50px;
+	}
+
+	.create-as-many-mobile > p {
+		grid-area: paragraph;
+		text-align: left;
+	}
+	.create-as-many-mobile > h2 {
+		grid-area: title;
+		text-align: left;
+		padding-top: 50px;
+	}
+
+	/* share */
+	.share-mobile > div > * {
+		text-align: left;
+	}
+
+	/* collaborate */
+	.collaborate-mobile {
+		background: var(--green);
+	}
+	.collaborate-mobile > img {
+		padding-bottom: 50px;
+	}
+	.collaborate-mobile > div > * {
+		text-align: left;
+		color: var(--white);
+		padding-top: 30px;
+		padding-bottom: 20px;
+	}
+
+	/* backup */
+	.back-up-mobile{
+		border-bottom: 1px var(--grey) solid;
+	}
+	.back-up-mobile > div > * {
+		text-align: left;
+	}
+	.back-up-mobile > img {
+		padding-bottom: 50px;
+	}
+
+	/* import-export */
+	.import-export-mobile{
+		display: grid;
+		grid-gap: 50px;
+		grid-template-rows: auto auto 1fr;
+		grid-template-areas:
+	        "title"
+	        "paragraph"
+	        "image";
+	}
+	.import-export-mobile > div {
+		grid-area: title;
+	}
+	.import-export-mobile > div > * {
+		text-align: left;
+	}
+	.import-export-mobile > div > h2{
+		margin-bottom: 0px;
+	}
+	.import-export-mobile > img {
+		grid-area: image;
+	}
+	.import-export-mobile > p {
+		grid-area: paragraph;
+		text-align: left;
+	}
+
+	/* comparison */
+	.comparison-mobile {
+		background: var(--grey);
+		margin-bottom: 0px;
+	}
+	.comparison-mobile > table {
+		width: 50%;
+		margin-bottom: 50px;
+		box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.50);
+		border: 1px solid black;
+	}
+	.comparison-mobile > h3 {
+		text-align: left;
+		padding-top: 100px;
+		padding-bottom: 50px;
+	}
+	.private-cell-table {
+		border: 5px solid var(--green) !important;
+	}
+	th{
+		font-size: 18px; 
+    	vertical-align: middle !important;
+    	text-align: center !important;
+	}
+	td{
+		font-size: 14px;
+    	vertical-align: middle !important;
+    	padding-left: 5%;
+	}
+	.bottom{
+		margin-top: -100px;
+	}
+
+} 

Landing Page/landing-page.css

@@ -0,0 +1,275 @@
+:root {
+  --green: #006F62;
+  --grey: #F5F6F8;
+  --white: #FFFFFF;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+
+h2{
+	text-align: center;
+	font-family: "Lato Black"; 
+    font-size: 46px; 
+    color: #212121;
+    margin-bottom: 20px;
+}
+h3 {
+	font-family: "Lato Black"; 
+    font-size: 38px; 
+    color: #212121;
+    margin-top: 0;
+}
+p {
+	font-family: "Lato Regular"; 
+	font-size: 21px;
+	line-height: 36pt;
+	color: #212121;
+	text-align: center;
+}
+body{
+	margin: 0;
+}
+.item {
+	background-color: var(--white);
+	align-content: center;
+    justify-items: center;
+}
+
+.wrapper {
+	display: grid;
+	grid-gap: 50px;
+	grid-template-rows: repeat(8,auto);
+
+}
+
+.mobile{
+	display: none;
+}
+/* TOP */
+.top{
+	background-color: var(--green);
+	display: grid;
+	grid-gap: 50px;
+    grid-template-rows: 100px 200px 1fr;
+}
+
+
+.top > .logo{
+	padding-top: 50px;
+}
+
+.top > h1{
+	text-align: center;
+	font-family: "Lato Black"; 
+    font-size: 58px; 
+    color: var(--white);
+}
+
+.top > .private-cell{
+	width: 100%;
+}
+
+.top > .private-cell-mobile{
+	display: none;
+}
+
+
+/* Create as many spreadsheets*/
+
+
+.create-as-many-desktop{
+	display: grid;
+	grid-gap: 50px;
+    grid-template-rows: auto 50px auto;
+    grid-template-areas:
+    "image"
+    "title"
+    "paragraph";
+    border-bottom: 1px solid var(--grey);
+}
+
+.create-as-many-desktop > img {
+	grid-area: image;
+	padding-top: 100px;
+}
+
+.create-as-many-desktop > p {
+	grid-area: paragraph;
+	padding-top: 100px;
+	padding-bottom: 100px;
+}
+
+.create-as-many-desktop h2 {
+	grid-area: title;
+}
+/* Share */
+
+
+.share-desktop{
+	display: grid;
+	grid-gap: 50px;
+    grid-template-columns: repeat( auto-fit, minmax(500px, 1fr));
+}
+
+.share-desktop >  div > *{
+	text-align: left;
+}
+
+
+/* Collaborate */
+
+.collaborate-desktop{
+	display: grid;
+	grid-gap: 50px;
+	background-color: var(--green);
+    grid-template-columns: repeat( auto-fit, minmax(500px, 1fr));
+}
+.collaborate-desktop >  div > *{
+    color: var(--white);
+    text-align: left;
+}
+.collaborate-desktop > * {
+	padding: 100px 0;
+}
+
+
+/* back-up */
+
+.back-up-desktop{
+	display: grid;
+	grid-gap: 50px;
+    grid-template-columns: repeat( auto-fit, minmax(500px, 1fr));
+    border-bottom: 1px solid var(--grey);
+}
+
+.back-up-desktop >  div > *{
+	text-align: left;
+}
+
+/* import-export */
+
+.import-export-desktop{
+	display: grid;
+	grid-gap: 50px;
+	grid-template-rows: auto 1fr;
+	grid-template-areas:
+        "title title"
+        "image paragraph"
+}
+
+.import-export-desktop > div {
+	padding-top: 100px;
+	grid-area: title;
+}
+.import-export-desktop > div > *{
+	text-align: center;
+}
+.import-export-desktop > img {
+	align-self: center;
+	grid-area: image;
+}
+.import-export-desktop > p {
+	grid-area: paragraph;
+	align-self: center;
+	text-align: left;	
+}
+
+
+/* comparison */
+
+.comparison-desktop{
+	display: grid;
+	grid-gap: 50px;
+	background-color: var(--grey);
+	grid-template-rows: auto 1fr;
+}
+.comparison-desktop > h3 {
+	margin-top: 100px;
+}
+table {
+	width: 90%;
+	border-collapse: collapse;
+	margin-bottom: 50px;
+	box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.50);
+}
+th,td{
+	font-size: 18px;
+	font-family: "Lato Black"; 
+  	border-bottom: 1px solid #ddd;
+  	color: #212121;
+  	text-align: center;
+
+}
+.check:before{
+	content:'\2713';
+  	display:inline-block;
+  	color:var(--green);
+  	padding:0 6px 0 0;
+}
+.uncheck:before{
+	content: '\274c';
+	display:inline-block;
+  	color: gray;
+  	padding:0 3px 0 0;
+}
+tr > :first-child{
+	text-align: left;
+}
+tr:not(:first-child){
+	background-color: var(--white);
+}
+td:nth-child(2),th:nth-child(2){
+	border-left: 5px solid var(--green);
+	border-right: 5px solid var(--green);
+}
+th:nth-child(2){
+	border-top: 5px solid var(--green);
+}
+
+tr:last-child > :nth-child(2){
+	border-bottom: 5px solid var(--green);
+}
+
+/* bottom */
+
+
+.bottom{
+	display: grid;
+	grid-gap: 50px;
+	background-color: var(--green);
+	grid-gap: 10px;
+    grid-template-rows: repeat( 4, 1fr);
+    margin-top: -50px;
+}
+.bottom > img{
+	padding-top: 50px;
+}
+.bottom > p {
+	color: var(--white);
+}
+
+.bottom > button {
+	font-family: "Lato Black"; 
+	width: 200px;
+	height: 40px;
+	border-radius: 5px;
+	background-color: var(--white);
+}
+
+.bottom > .copyrights{
+	align-self: end;
+	font-size: 15px;
+	width: 100%;
+	background-color: var(--green);
+	margin-bottom: 0px;
+	filter: brightness(70%);
+}

Landing Page/landing-page.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="./landing-page.css">
+		<link rel="stylesheet" href="./landing-page-mobile.css">
+		<title>Landing Page!</title>
+	</head>
+	<body>
+		<div class="wrapper">
+			<div class="item top">
+				<img class="logo" src="images/desktop_images/logo_privatecell.svg" alt="logo">
+				<h1 class="mobile">Just like Google  <br/> Sheets but Safe and  <br/> Private</h1>
+				<h1 class="desktop">Just like Google Sheets <br/> but Safe and Private</h1>
+				<img class="private-cell" src="images/desktop_images/0-Privatecell.png" alt="private-cell">
+				<img class="private-cell-mobile" src="images/mobile_images/0-Privatecell_mobile.png" alt="private-cell-mobile">
+			</div>
+			<div class="create-as-many">
+				<div class="item create-as-many-desktop desktop">
+					<img class="create-as-many-image" src="images/desktop_images/1-create-as-many-as-you-like.png" alt="create-as-many-image">
+					<h2>Create as many spreadsheets as you <br/> like- on the ground and in cloud</h2>
+					<p>Privatecell lets you create and edit spreadsheets from your internet browser but they <br> never leave the computer unless you specifically ask them to. You can create as many <br> as you like.</p>
+				</div>
+				<div class="item  create-as-many-mobile mobile">
+					<img class="create-as-many-image-mobile" src="images/mobile_images/1-create-as-many-as-you-like_mobile.png" alt="create-as-many-image-mobile">
+					<h2>Create as many <br/> spreadsheets as you  like- on <br/> the ground and in cloud</h2>
+					<p>Privatecell lets you create and edit <br> spreadsheets from your internet <br> browser but they  never leave the <br> computer unless you specifically ask <br> them to. You can create as many  as you <br> like.</p>
+				</div>
+			</div>
+			<div class="share">
+				<div class="share-desktop item desktop">
+					<div>
+						<h2>Share it only with <br> trusted people</h2>
+						<p>When you share a spreadsheet - our system makes sure <br> that your data is encrypted on your computer, and <br>
+							decrypted on the computer of your recipient. Nobody <br> (not even us) can read the data in transport through <br> concept called end to end encryption. Read technical <br> details. Don't show your private parts to anyone but <br> selected few.
+						</p>
+					</div>
+					<img class="share-image" src="images/desktop_images/2-share.png" alt="share-image">
+				</div>
+				<div class="share-mobile item mobile">
+					<div>
+						<h2>Share it only with trusted <br> people</h2>
+						<p>When you share a spreadsheet - our <br> system makes sure that your data is <br>  encrypted on your computer, and <br> 
+							decrypted on the computer of your <br> recipient. Nobody  (not even us) can read <br> the data in transport through  concept <br> called end to end encryption. Read <br> technical details. Don't show your <br> private parts to anyone but selected few.
+						</p>
+					</div>
+					<img class="share-image-mobile" src="images/mobile_images/2-share_mobile.png" alt="share-image-mobile">
+				</div>	
+			</div>
+			<div class="collaborate">
+				<div class="collaborate-desktop item desktop">
+					<img class="colllaborate-image" src="images/desktop_images/3-collaborate.png" alt="colllaborate-image">
+					<div>
+						<h2>Collaborate in real time</h2>
+						<p>All the people you shared the spreadsheet with can <br> collaborate on it in real time. See changes just as your <br>
+							partners type them. Bad guys still can't read anything.
+						</p>
+					</div>
+				</div>
+				<div class="collaborate-mobile item mobile">
+					<div>
+						<h2>Collaborate in real time</h2>
+						<p>All the people you shared the <br> spreadsheet with can collaborate on it in <br> real time. See changes just as your		<br> partners type them. Bad guys still can't read <br> anything.
+						</p>
+					</div>
+					<img class="collaborate-image-mobile" src="images/mobile_images/3-collaborate_mobile.png" alt="colllaborate-image-mobile">
+				</div>
+			</div>
+			<div class="back-up">
+				<div class="back-up-desktop item desktop">
+					<div>
+						<h2>Back up your <br> spreadsheet safely</h2>
+						<p>If you lose your computer or phone - don't sweat it. All <br> our sheets will be encrypted and stored safely in our<br>
+							German based servers - safe from Uncle Sam's,Trump's <br> and our own eyes. Bring  the key to your new computer, <br> and BAM! Data is back there, shared with same <br> people.
+						</p>
+					</div>
+					<img class="back-up-image" src="images/desktop_images/4-back-up-safely.png" alt="back-up-image">
+				</div>
+				<div class="back-up-mobile item mobile">
+					<div>
+						<h2>Back up your spreadsheet <br> safely</h2>
+						<p>If you lose your computer or phone - <br> don't sweat it. All our sheets will be <br>  encrypted and stored safely in our <br> German based servers - safe from Uncle <br> Sam's,Trump's and our own eyes. Bring <br> the key to your new computer, and BAM! <br> Data is back there, shared with same <br> people.
+						</p>
+					</div>
+					<img class="back-up-image-mobile" src="images/mobile_images/4-back-up-safely_mobile.png" alt="back-up-image-mobile">
+				</div>
+			</div>
+			<div class="import-export">
+				<div class="import-export-desktop item desktop">
+					<div>
+						<h2>No Lock in!</h2>
+						<h3>Import from or export to Microsoft Excel</h3>
+					</div>
+					<img class="import-export-image" src="images/desktop_images/5-import-export.png" alt="import-export-image">
+					<p>Have existing spreadsheets? Our import from Excel <br> functionality will take them in one drop and make them <br>
+						safe instantly. Just don't forger to delete unsafe <br> copies. <br><br>
+						Want to set your data  free to the world? Export them to <br> Excel and spread away. We are not taking your data <br>
+						hostage, we are just babysitting them while you sleep <br> calmly.
+					</p>
+				</div>
+				<div class="import-export-mobile item mobile">
+					<div>
+						<h2>No Lock in!</h2>
+						<h3>Import from or export <br> to Microsoft Excel</h3>
+					</div>
+					<img class="import-export-image-mobile" src="images/mobile_images/5-import-export_mobile.png" alt="import-export-image-mobile">
+					<p>Have existing spreadsheets? Our import <br> from Excel  functionality will take them in <br> one drop and make them 
+						safe instantly. <br> Just don't forger to delete unsafe <br> copies. <br><br> 
+						Want to set your data  free to the world? <br> Export them to  Excel and spread away. <br> We are not taking your data 
+						hostage, we <br> are just babysitting them while you sleep <br> calmly.
+					</p>
+				</div>
+			</div>
+			<div class="comparison">
+				<div class="comparison-desktop item desktop">
+					<h3>Comparision with other popular spreadsheets.</h3>
+					<table>
+						<tr>
+							<th></th>
+							<th>Privatecell</th>
+							<th>MS Excel</th>
+							<th>Libre Office CALC</th>
+							<th>Google Sheets</th>
+							<th>Apple Numbers</th>
+						</tr>
+						<tr>
+							<td>Multiple Sheets</td>
+							<td class="check"></td>
+							<td class="check"></td>
+							<td class="check"></td>
+							<td class="check"></td>
+							<td class="check"></td>
+						</tr>
+						<tr>
+							<td>Cloud backup</td>
+							<td class="check"></td>
+							<td class="check"></td>
+							<td class="check"></td>
+							<td class="check"></td>
+							<td class="check"></td>
+						</tr>
+						<tr>
+							<td>Real time collaboration</td>
+							<td class="check"></td>
+							<td class="uncheck"></td>
+							<td class="uncheck"></td>
+							<td class="check"></td>
+							<td class="uncheck"></td>
+						</tr>
+						<tr>
+							<td>End-to-end Encryption</td>
+							<td class="check"></td>
+							<td class="uncheck"></td>
+							<td class="uncheck"></td>
+							<td class="uncheck"></td>
+							<td class="uncheck"></td>
+						</tr>
+					</table>
+				</div>
+				<div class="comparison-mobile item mobile">
+					<h3>Comparision with other <br> popular spreadsheets.</h3>
+					<table class="private-cell-table">
+						<tr>
+							<th>Privatecell</th>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Multiple sheets</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Cloud backup</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Realtime collaboration</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>End-to-end Encryption</td>
+						</tr>
+					</table>
+					<table>
+						<tr>
+							<th>MS Excel</th>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Multiple sheets</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Cloud backup</td>
+						</tr>
+						<tr>
+							<td><span class="uncheck"></span>Realtime collaboration</td>
+						</tr>
+						<tr>
+							<td><span class="uncheck"></span>End-to-end Encryption</td>
+						</tr>
+					</table>
+					<table>
+						<tr>
+							<th>Libre Office CALC</th>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Multiple sheets</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Cloud backup</td>
+						</tr>
+						<tr>
+							<td><span class="uncheck"></span>Realtime collaboration</td>
+						</tr>
+						<tr>
+							<td><span class="uncheck"></span>End-to-end Encryption</td>
+						</tr>
+					</table>
+					<table>
+						<tr>
+							<th>Google Sheets</th>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Multiple sheets</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Cloud backup</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Realtime collaboration</td>
+						</tr>
+						<tr>
+							<td><span class="uncheck"></span>End-to-end Encryption</td>
+						</tr>
+					</table>
+					<table>
+						<tr>
+							<th>Apple Numbers</th>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Multiple sheets</td>
+						</tr>
+						<tr>
+							<td><span class="check"></span>Cloud backup</td>
+						</tr>
+						<tr>
+							<td><span class="uncheck"></span>Realtime collaboration</td>
+						</tr>
+						<tr>
+							<td><span class="uncheck"></span>End-to-end Encryption</td>
+						</tr>
+					</table>
+				</div>
+			</div>
+			<div class="item bottom">
+				<img src="images/desktop_images/logo_privatecell.svg" alt="logo-image">
+				<p class="desktop">Just like Google Sheets but Safe and Private</p>
+				<p class="mobile">Just like Google Sheets but Safe and <br> Private</p>
+				<button>Request Early Access</button>
+				<p class="copyrights">&copy; Copyright 2018 Privatecell</p>
+			</div>
+		</div>
+	</body>
+</html>

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "landingpage",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "run-script-os",
+    "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
+    "//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition",
+    "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "browser-sync": "^2.26.3",
+    "run-script-os": "^1.0.3"
+  }
+}