landing page with browser-sync

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;
+	}
+
+}