First commit

AxaFrance · Oct 31, 2019 · 54f7d62 · 54f7d62
commit 54f7d62
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 0 deletions.
diff --git a/icons.woff b/icons.woff
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <title>Skizzle - Toutes vos PR dans une app.</title>
+    <link rel="stylesheet" href="styles.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <img class="logo" src="logo-skizzle.svg" alt="Skizzle" />
+    <section class="hero">
+      <h1 class="title">Toutes vos pull requests dans une app.</h1>
+      <img class="screenshot" src="screenshot.jpg" alt="Skizzle regroupe vos PR.">
+      <div class="download">
+        <a download href="./skizzle-windows.exe">Télécharger Skizzle pour <strong>Windows</strong></a>
+        <a download href="./skizzle-macos.dmg">Télécharger Skizzle pour <strong>macOS</strong></a>
+      </div>
+    </section>
+    <section class="secondary secondary--favorites">
+      <div class="content">
+        <h2>Abonnez-vous aux projets qui vous interessent</h2>
+        <p>Skizzle récupère les repositories des projets auxquels vous avez accès. Abonnez-vous à ceux qui vous intéressent, Skizzle vous liste les pulls requests en temps réel.</p>
+      </div>
+    </section>
+    <section class="secondary secondary--notifications">
+      <div class="content">
+        <h2>Recevez des notifications</h2>
+        <p>À chaque nouvelle pull requests, vous recevez une notification.</p>
+      </div>
+    </section>
+    <section class="secondary secondary--teams">
+      <div class="content">
+        <h2>Multi équipes</h2>
+        <p>Surveillez les pull requests de plusieurs projets sur différentes équipes.</p>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/logo-skizzle.svg b/logo-skizzle.svg
diff --git a/screenshot.jpg b/screenshot.jpg
diff --git a/styles.css b/styles.css
@@ -0,0 +1,103 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  padding-bottom: 3rem;
+  font-family: sans-serif;
+  color: #333;
+  background-color: #f5f5f5;
+}
+
+@font-face {
+  font-family: 'Icons';
+  src: url('./icons.woff');
+}
+
+.logo {
+  display: block;
+  width: 100%;
+  max-width: 200px;
+  height: auto;
+  margin: 0 auto;
+}
+
+.title {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+p {
+  font-weight: 100;
+}
+
+.download {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -0.5rem;
+  text-align: center;
+}
+
+.download a {
+  flex: 1 1 auto;
+  display: inline-block;
+  margin: 0 0.5rem 1rem;
+  padding: 1rem 1.2rem;
+  color: #fff;
+  font-weight: 100;
+  font-size: 1rem;
+  text-decoration: none;
+  border-radius: 4px;
+  background-color: #00008f;
+  transition: background-color linear 0.2s;
+}
+
+.download a:hover {
+  background-color: #3032c1;
+}
+
+section:not(:last-child) {
+  margin-bottom: 4rem;
+}
+
+section {
+  width: calc(100% - 2rem);
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+.screenshot {
+  width: 100%;
+  margin-bottom: 2rem;
+  border-radius: 4px;
+  box-shadow: 0 0 15px #ccc;
+}
+
+.content h2 {
+  margin-bottom: 1rem;
+}
+
+.secondary {
+  display: flex;
+  position: relative;
+}
+
+.secondary:before {
+  flex: 0 0 auto;
+  width: 4rem;
+  height: 4rem;
+  margin-right: 1rem;
+  text-align: center;
+  line-height: 4rem;
+  font-family: 'Icons';
+  font-size: 2rem;
+  color: #fff;
+  border-radius: 50%;
+  background-color: #00008f;
+}
+
+.secondary--favorites:before { content: '\EB00'; }
+.secondary--notifications:before { content: '\EA32'; }
+.secondary--teams:before { content: '\EB1B'; }