✨ 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>
|
||||
|
||||
@@ -6,4 +6,25 @@ body
|
||||
-moz-osx-font-smoothing grayscale
|
||||
|
||||
a
|
||||
text-decoration none
|
||||
text-decoration none
|
||||
|
||||
.underline
|
||||
position relative
|
||||
|
||||
&::after
|
||||
content ''
|
||||
position absolute
|
||||
display block
|
||||
right 0
|
||||
bottom 0
|
||||
left 0
|
||||
height 1px
|
||||
background #ffffff
|
||||
transform scaleX(0)
|
||||
transform-origin 0 0
|
||||
transition transform 0.3s cubic-bezier(0.75, 0, 0.58, 1)
|
||||
will-change transform
|
||||
|
||||
&:hover
|
||||
&::after
|
||||
transform scaleX(1)
|
||||
@@ -0,0 +1,39 @@
|
||||
section.features
|
||||
padding-top 120px
|
||||
text-align center
|
||||
|
||||
.paragraph
|
||||
font-weight 300
|
||||
font-size 17px
|
||||
line-height 22px
|
||||
|
||||
.main-title
|
||||
margin-bottom 80px
|
||||
font-size 45px
|
||||
|
||||
.intro
|
||||
width 520px
|
||||
margin 0 auto
|
||||
|
||||
.title
|
||||
margin-bottom 30px
|
||||
font-size 25px
|
||||
|
||||
.info
|
||||
display flex
|
||||
align-items center
|
||||
width 1024px
|
||||
height 550px
|
||||
margin-left auto
|
||||
margin-right auto
|
||||
text-align left
|
||||
|
||||
.text
|
||||
width 450px
|
||||
|
||||
.title
|
||||
margin-bottom 28px
|
||||
font-size 35px
|
||||
|
||||
&.right
|
||||
justify-content flex-end
|
||||
@@ -0,0 +1,56 @@
|
||||
footer.footer
|
||||
position relative
|
||||
padding-top 90px
|
||||
padding-bottom 60px
|
||||
color: #ffffff
|
||||
font-size 14px
|
||||
|
||||
.background
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 60%
|
||||
background linear-gradient(to right, #330867 0%,#31a7bb 100%)
|
||||
transform skewY(-5deg)
|
||||
box-shadow 0px 0px 50px rgba(60, 117, 162, 0.4)
|
||||
|
||||
.background-2
|
||||
position absolute
|
||||
top 30%
|
||||
left 0
|
||||
width 100%
|
||||
height 70%
|
||||
background linear-gradient(to right, #330867 0%,#31a7bb 100%)
|
||||
|
||||
.content
|
||||
position relative
|
||||
|
||||
.lists
|
||||
display flex
|
||||
justify-content center
|
||||
align-items flex-start
|
||||
padding-bottom 50px
|
||||
|
||||
.list
|
||||
padding-right 60px
|
||||
padding-left 60px
|
||||
|
||||
.title
|
||||
padding-bottom 23px
|
||||
|
||||
.item
|
||||
padding-top 7px
|
||||
padding-bottom 7px
|
||||
font-weight 300
|
||||
|
||||
&.underline
|
||||
&::after
|
||||
bottom 4px
|
||||
|
||||
.text
|
||||
text-align center
|
||||
font-weight 300
|
||||
|
||||
a
|
||||
text-decoration underline
|
||||
@@ -0,0 +1,186 @@
|
||||
section.get-started
|
||||
position relative
|
||||
padding-top 120px
|
||||
padding-bottom 60px
|
||||
color: #ffffff
|
||||
font-size 17px
|
||||
|
||||
.background
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
background linear-gradient(135deg, #330867 0%,#31a7bb 100%)
|
||||
transform skewY(-5deg)
|
||||
box-shadow 0px 0px 50px rgba(60, 117, 162, 0.4)
|
||||
|
||||
.content
|
||||
position relative
|
||||
width 600px
|
||||
margin-left auto
|
||||
margin-right auto
|
||||
|
||||
.main-title
|
||||
margin-bottom 80px
|
||||
font-size 45px
|
||||
text-align center
|
||||
|
||||
.step
|
||||
position relative
|
||||
margin-bottom 70px
|
||||
font-size 17px
|
||||
font-weight 300
|
||||
|
||||
.number
|
||||
position absolute
|
||||
top -28px
|
||||
right calc(100% + 45px)
|
||||
font-weight 500
|
||||
font-size 60px
|
||||
|
||||
.paragraph
|
||||
line-height 1.5em
|
||||
padding-left 50px
|
||||
|
||||
&.title
|
||||
font-size 20px
|
||||
margin-bottom 20px
|
||||
padding-left 0
|
||||
|
||||
&.small
|
||||
font-size 13px
|
||||
|
||||
a
|
||||
text-decoration underline
|
||||
text-decoration-skip ink
|
||||
|
||||
.code
|
||||
width 340px
|
||||
margin-top 6px
|
||||
margin-bottom 6px
|
||||
padding-top 12px
|
||||
padding-right 12px
|
||||
padding-bottom 12px
|
||||
padding-left 24px
|
||||
background: rgba(10, 10, 10, 0.8)
|
||||
border-left: 4px solid #D8D8D8
|
||||
|
||||
.illustration
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
width 100%
|
||||
overflow hidden
|
||||
|
||||
.center
|
||||
position absolute
|
||||
top 50%
|
||||
right 0
|
||||
|
||||
.circle
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
border-radius 999px
|
||||
border 1px solid #fff
|
||||
|
||||
&.index-1
|
||||
width 250px
|
||||
height 250px
|
||||
margin-top -125px
|
||||
margin-left -125px
|
||||
|
||||
&.index-2
|
||||
width 400px
|
||||
height 400px
|
||||
margin-top -200px
|
||||
margin-left -200px
|
||||
|
||||
&.index-3
|
||||
width 550px
|
||||
height 550px
|
||||
margin-top -275px
|
||||
margin-left -275px
|
||||
|
||||
&.index-4
|
||||
width 700px
|
||||
height 700px
|
||||
margin-top -350px
|
||||
margin-left -350px
|
||||
|
||||
&.index-5
|
||||
width 850px
|
||||
height 850px
|
||||
margin-top -425px
|
||||
margin-left -425px
|
||||
|
||||
.disc
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
animation get-started-disc-rotation 2s infinite linear
|
||||
will-change transform
|
||||
|
||||
.inner
|
||||
position absolute
|
||||
top 0
|
||||
border-radius 999px
|
||||
background #ffffff
|
||||
|
||||
&.index-1
|
||||
animation-duration 6.1s
|
||||
|
||||
.inner
|
||||
top -125px
|
||||
width 10px
|
||||
height 10px
|
||||
margin-top -5px
|
||||
margin-left -5px
|
||||
|
||||
&.index-2
|
||||
animation-duration 11.2s
|
||||
|
||||
.inner
|
||||
top -200px
|
||||
width 20px
|
||||
height 20px
|
||||
margin-top -10px
|
||||
margin-left -10px
|
||||
|
||||
&.index-3
|
||||
animation-duration 16.3s
|
||||
|
||||
.inner
|
||||
top -275px
|
||||
width 30px
|
||||
height 30px
|
||||
margin-top -15px
|
||||
margin-left -15px
|
||||
|
||||
&.index-4
|
||||
animation-duration 21.4s
|
||||
|
||||
.inner
|
||||
top -350px
|
||||
width 40px
|
||||
height 40px
|
||||
margin-top -20px
|
||||
margin-left -20px
|
||||
|
||||
&.index-5
|
||||
animation-duration 26.5s
|
||||
|
||||
.inner
|
||||
top -425px
|
||||
width 50px
|
||||
height 50px
|
||||
margin-top -25px
|
||||
margin-left -25px
|
||||
|
||||
@keyframes get-started-disc-rotation
|
||||
0%
|
||||
transform rotate(140deg)
|
||||
100%
|
||||
transform rotate(380deg)
|
||||
@@ -34,23 +34,11 @@ section.header
|
||||
width 40px
|
||||
height 40px
|
||||
|
||||
&::after
|
||||
content ''
|
||||
position absolute
|
||||
display block
|
||||
right 10px
|
||||
bottom 2px
|
||||
left 10px
|
||||
height 1px
|
||||
background #ffffff
|
||||
transform scaleX(0)
|
||||
transform-origin 0 0
|
||||
transition transform 0.3s cubic-bezier(0.75, 0, 0.58, 1)
|
||||
will-change transform
|
||||
|
||||
&:hover
|
||||
&.underline
|
||||
&::after
|
||||
transform scaleX(1)
|
||||
right 10px
|
||||
bottom 2px
|
||||
left 10px
|
||||
|
||||
.title
|
||||
position absolute
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
@import 'reset.styl'
|
||||
@import 'fonts.styl'
|
||||
@import 'base.styl'
|
||||
@import 'header.styl'
|
||||
@import 'header.styl'
|
||||
@import 'features.styl'
|
||||
@import 'whos-using-it.styl'
|
||||
@import 'get-started.styl'
|
||||
@import 'footer.styl'
|
||||
@@ -0,0 +1,29 @@
|
||||
section.whos-using-it
|
||||
padding-top 120px
|
||||
padding-bottom 90px
|
||||
text-align center
|
||||
|
||||
.main-title
|
||||
margin-bottom 60px
|
||||
font-size 45px
|
||||
|
||||
.text
|
||||
margin-bottom 40px
|
||||
|
||||
.paragraph
|
||||
font-weight 300
|
||||
font-size 17px
|
||||
line-height 22px
|
||||
|
||||
.items
|
||||
width 50%
|
||||
margin-right auto
|
||||
margin-left auto
|
||||
|
||||
.item
|
||||
display inline-block
|
||||
|
||||
&.hetic
|
||||
width 100px
|
||||
height 120px
|
||||
background-image url(../../static/svg/whos-using-hetic.svg)
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 49 KiB |
Reference in New Issue
Block a user