✨ Site > Add all content CSS
This commit is contained in:
brunosimon
+75
-53
@@ -13,10 +13,10 @@
|
||||
<div class="background"></div>
|
||||
|
||||
<header class="navigation js-navigation">
|
||||
<a class="item features js-navigation-item" href="#features">Features</a>
|
||||
<a class="item get-started js-navigation-item" href="#get-started">Get started</a>
|
||||
<a class="item whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a>
|
||||
<a class="item github" href="https://github.com/brunosimon/keppler" target="_blank"></a>
|
||||
<a class="item underline features js-navigation-item" href="#features">Features</a>
|
||||
<a class="item underline get-started js-navigation-item" href="#get-started">Get started</a>
|
||||
<a class="item underline whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a>
|
||||
<a class="item underline github" href="https://github.com/brunosimon/keppler" target="_blank"></a>
|
||||
</header>
|
||||
|
||||
<h1 class="title">
|
||||
@@ -55,29 +55,29 @@
|
||||
|
||||
<div class="intro">
|
||||
<h4 class="title">Your audience will thank you</h4>
|
||||
<p class="paragraphe">Let your audience browse the code of any file in your project or catch up with your most recent changes during your code presentation. With Keppler, your audience will now aloway be up-to-date with what you’re doing, and have the bigger picture in mind.</p>
|
||||
<p class="paragraph">Let your audience browse the code of any file in your project or catch up with your most recent changes during your code presentation. With Keppler, your audience will now aloway be up-to-date with what you’re doing, and have the bigger picture in mind.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="text">
|
||||
<h4 class="title">No setup for your audience</h4>
|
||||
<p class="paragraphe">It all happens on their web browser! All they have to do is visit a URL.</p>
|
||||
<p class="paragraph">It all happens on their web browser! All they have to do is visit a URL.</p>
|
||||
</div>
|
||||
<div class="illustration"></div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info right">
|
||||
<div class="illustration"></div>
|
||||
<div class="text">
|
||||
<h4 class="title">Transparent for you</h4>
|
||||
<p class="paragraphe">Once Keppler is launched, you can forget about it. Just code as you would normally do,and your changes will automatically be pushed to your audience, on LAN.</p>
|
||||
<p class="paragraph">Once Keppler is launched, you can forget about it. Just code as you would normally do,and your changes will automatically be pushed to your audience, on LAN.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="text">
|
||||
<h4 class="title">Resource sharing made easy</h4>
|
||||
<p class="paragraphe">Your audience can download the resources used in the project directly on Keppler. No need to host your files anywhere!</p>
|
||||
<p class="paragraph">Your audience can download the resources used in the project directly on Keppler. No need to host your files anywhere!</p>
|
||||
</div>
|
||||
<div class="illustration"></div>
|
||||
</div>
|
||||
@@ -86,39 +86,55 @@
|
||||
|
||||
<!-- Get started -->
|
||||
<section class="section get-started" id="get-started">
|
||||
<h3 class="main-title">Get started</h3>
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">1.</div>
|
||||
<p class="paragraphe title">Install Keppler globally</p>
|
||||
<p class="paragraphe">You must have <a href="https://nodejs.org/en/" target="_blank">node</a> and <a href="https://www.npmjs.com" target="_blank">npm</a> already installed.</p>
|
||||
<p class="paragraphe">In your console, run:</p>
|
||||
<pre><code>npm install -g keppler</code></pre>
|
||||
<p class="paragraphe small">Didn’t work? <a href="https://github.com/brunosimon/keppler/issues" target="_blank">Report a bug</a>.</p>
|
||||
<div class="content">
|
||||
<h3 class="main-title">Get started</h3>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">1.</div>
|
||||
<p class="paragraph title">Install Keppler globally</p>
|
||||
<p class="paragraph">You must have <a href="https://nodejs.org/en/" target="_blank">node</a> and <a href="https://www.npmjs.com" target="_blank">npm</a> already installed.</p>
|
||||
<p class="paragraph">In your console, run:</p>
|
||||
<pre class="code"><code>npm install -g keppler</code></pre>
|
||||
<p class="paragraph small">Didn’t work? <a href="https://github.com/brunosimon/keppler/issues" target="_blank">Report a bug</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">2.</div>
|
||||
<p class="paragraph title">Launch Keppler inside your project folder</p>
|
||||
<p class="paragraph">Navigate to your project folder.</p>
|
||||
<p class="paragraph">In your console, run:</p>
|
||||
<pre class="code"><code>keppler "My awesome project"</code></pre>
|
||||
<p class="paragraph">This will launch Keppler and automatically open your browser at the URL for viewing your code.</p>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">3.</div>
|
||||
<p class="paragraph title">Share the URL with your audience!</p>
|
||||
<p class="paragraph">Make sure you’re on the same local network.</p>
|
||||
<p class="paragraph">Your audience will now be able to see the contents of the files in project folder, updated in real-time.</p>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">4.</div>
|
||||
<p class="paragraph title">Get coding</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">2.</div>
|
||||
<p class="paragraphe title">Launch Keppler inside your project folder</p>
|
||||
<p class="paragraphe">Navigate to your project folder.</p>
|
||||
<p class="paragraphe">In your console, run:</p>
|
||||
<pre><code>keppler "My awesome project"</code></pre>
|
||||
<p class="paragraphe">This will launch Keppler and automatically open your browser at the URL for viewing your code.</p>
|
||||
<div class="illustration">
|
||||
<div class="center">
|
||||
<div class="circle index-1"></div>
|
||||
<div class="circle index-2"></div>
|
||||
<div class="circle index-3"></div>
|
||||
<div class="circle index-4"></div>
|
||||
<div class="circle index-5"></div>
|
||||
<div class="disc index-1"><div class="inner"></div></div>
|
||||
<div class="disc index-2"><div class="inner"></div></div>
|
||||
<div class="disc index-3"><div class="inner"></div></div>
|
||||
<div class="disc index-4"><div class="inner"></div></div>
|
||||
<div class="disc index-5"><div class="inner"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">3.</div>
|
||||
<p class="paragraphe title">Share the URL with your audience!</p>
|
||||
<p class="paragraphe">Make sure you’re on the same local network.</p>
|
||||
<p class="paragraphe">Your audience will now be able to see the contents of the files in project folder, updated in real-time.</p>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="number">4.</div>
|
||||
<p class="paragraphe title">Get coding</p>
|
||||
</div>
|
||||
|
||||
<div class="illustration"></div>
|
||||
</section>
|
||||
|
||||
<!-- Who's using it -->
|
||||
@@ -126,7 +142,7 @@
|
||||
<h3 class="main-title">Who’s using Keppler?</h3>
|
||||
|
||||
<div class="text">
|
||||
<p>Keppler is already being used with hundreds of students learning web development.</p>
|
||||
<p class="paragraph">Keppler is already being used with hundreds of students learning web development.</p>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
@@ -137,22 +153,28 @@
|
||||
<!-- Footer -->
|
||||
<footer class="section footer">
|
||||
|
||||
<ul class="list">
|
||||
<li class="title">Keppler</li>
|
||||
<li class="item"><a class="features js-navigation-item" href="#features">Features</a></li>
|
||||
<li class="item"><a class="get-started js-navigation-item" href="#get-started">Get started</a></li>
|
||||
<li class="item"><a class="whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a></li>
|
||||
</ul>
|
||||
<span class="background"></span>
|
||||
<span class="background-2"></span>
|
||||
|
||||
<ul class="list">
|
||||
<li class="title">Development</li>
|
||||
<li class="item"><a href="https://github.com/brunosimon/keppler" target="_blank">Github</a></li>
|
||||
<li class="item"><a href="https://github.com/brunosimon/keppler/issues" target="_blank">Report an issue</a></li>
|
||||
<li class="item"><a href="mailto:contact@bruno-simon.com">Contact us</a></li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
<div class="lists">
|
||||
<ul class="list">
|
||||
<li class="title">Keppler</li>
|
||||
<li class="item"><a class="underline features js-navigation-item" href="#features">Features</a></li>
|
||||
<li class="item"><a class="underline get-started js-navigation-item" href="#get-started">Get started</a></li>
|
||||
<li class="item"><a class="underline whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a></li>
|
||||
</ul>
|
||||
|
||||
<p class="text">Keppler is an open-source project made by <a href="https://bruno-simon.com" target="_blank">Bruno Simon</a> and released under the MIT license.</p>
|
||||
<ul class="list">
|
||||
<li class="title">Development</li>
|
||||
<li class="item"><a class="underline" href="https://github.com/brunosimon/keppler" target="_blank">Github</a></li>
|
||||
<li class="item"><a class="underline" href="https://github.com/brunosimon/keppler/issues" target="_blank">Report an issue</a></li>
|
||||
<li class="item"><a class="underline" href="mailto:contact@bruno-simon.com">Contact us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="text">Keppler is an open-source project made by <a href="https://bruno-simon.com" target="_blank">Bruno Simon</a> and released under the MIT license.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user