desktop app with text

static/index.html

@@ -33,9 +33,7 @@
           <code class="link">
             https://cloud.sondell.org/
           </code>
-          <button
+          <button class="url" _="on click
-            class="url"
-            _="on click
               writeText(my previousElementSibling's innerText) into navigator's clipboard
               put 'copied!' into me
               wait 1s
@@ -45,8 +43,8 @@
         </p>
         <span>
 
-          <a class="app-link" href="https://nextcloud.com/install/#card-clients-btns">
+          <a class="app-link desktop" href="https://www.onlyoffice.com/download-desktop.aspx#desktop">
-            <img src="./desktop.svg" height="40">
+            <p>Desktop App</p>
           </a>
 
           <a class="app-link" href="https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">
@@ -62,7 +60,7 @@
               data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
               style="max-width: 100%;">
           </a>
-          <a class="app-link" href="https://itunes.apple.com/us/app/nextcloud/id1125420102" rel="nofollow">
+          <a class="app-link" href="https://cloud.sondell.org" rel="nofollow">
             <img src="./pwa-badge.png" alt="Demo of the Nextcloud iOS files app" height="40"
               data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
               style="max-width: 100%;">
@@ -72,35 +70,36 @@
       </div>
     </div>
 
-    <div class="card trunc" _="on click toggle .trunc on me">
+    <div id="onlyoffice" class="card" _="on click toggle .trunc on me">
-      <img class="icon" src="nextcloud_icon_14.png">
+      <img class="icon" src="./onlyoffice.png">
-      <h3>Nextcloud</h3>
+      <h3>Onlyoffice</h3>
       <p class="text">
-        Nextcloud is a suite of client-server software for creating and using file
+        OnlyOffice is a free software
-        hosting services. Our nextcloud server is integrated with OnlyOffice and can provide functionality similar to
+        office suite and ecosystem of collaborative applications. It features online
-        Dropbox, Office 365 or Google Drive.
+        editors for text documents, spreadsheets, presentations, forms and PDFs, and the
+        room-based collaborative platform. Our onlyoffice server is integreated with our nextcloud.
       </p>
       <div class="footer" _="on click halt the event's bubbling">
         <h4>Get started</h4>
         <p>
-          Download the app for your device and login with the server adress:
+          Download the app for your device and connect to our cloud with the server adress:
           <code class="link">
             https://cloud.sondell.org/
           </code>
-          <button
+          <button class="url" _="on click
-            style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em"
-            _="on click
               writeText(my previousElementSibling's innerText) into navigator's clipboard
               put 'copied!' into me
               wait 1s
-              put 'copy' into me">
+              put 'copy url' into me
-            copy
+              ">
+            copy url
           </button>
         </p>
         <span>
 
-          <a class="app-link" href="https://nextcloud.com/install/#card-clients-btns">
+          <a class="app-link desktop" href="https://www.onlyoffice.com/download-desktop.aspx#desktop">
-            <img src="./desktop.svg" height="40">
+            <!- img src="./desktop.svg" height="40" ->
+            <p>Desktop App</p>
           </a>
 
           <a class="app-link" href="https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">

static/style.css

@@ -1,5 +1,8 @@
 body {
 	padding-left: 2%;
+	padding-right: 2%;
+	padding-bottom: 4em;
+
 }
 
 .icon {
@@ -35,6 +38,25 @@ button.url {
 	}
 }
 
+.app-link.desktop {
+	color: white;
+	background-color: black;
+	display: inline-block;
+	text-align: center;
+	height: 40px;
+	width: 120px;
+	border-radius: 5px;
+	overflow: hidden;
+
+	p {
+		display: inline;
+		line-height: 40px;
+		vertical-align: middle;
+		font-family: sans;
+		font-weight: 500;
+	}
+}
+
 .list {
 	/* display: flex; */
 	flex-direction: column;
@@ -42,14 +64,15 @@ button.url {
 }
 
 .card {
-	border: 1px solid #1948e3;
+	/* border: 2px solid #1948e3; */
+	border: 2px solid darkblue;
 	border-radius: 25px;
 	margin: 0 0 0 0;
 	padding: 1em;
-	max-width: 40em;
+	max-width: 400em;
 
 	&:hover {
-		background-color: lightyellow;
+		background-color: lightgoldenrodyellow;
 	}
 
 	&:not(:last-of-type) {