Skip to content

Commit

Permalink
Update desktop version
Browse files Browse the repository at this point in the history
  • Loading branch information
@sallar
sallar committed Jan 30, 2018
1 parent 270bdc5 commit c8683d1
Show file tree
Hide file tree
Showing 7 changed files with 149 additions and 174 deletions.
Binary file modified src/images/kap-app.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/images/kap-app@2x.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/images/kap-app@3x.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 24 additions & 1 deletion src/images/logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 18 additions & 39 deletions src/index.html
View file
Expand Up @@ -49,73 +49,52 @@
<link rel="stylesheet" href="styles/main.css">
</head>
<body>

<div class="wrapper">
<!-- Kap Site Header -->
<header class="header">
<div class="header-animation"></div>
<div class="site-header container">
<a href="./" class="logo">
<img src="./images/logo.svg" alt="Kap" draggable="false">
</a>

<a href="https://github.com/wulkano/kap/releases/latest" target="_blank" class="status">
<span class="status__tag">NEW</span>
<span>View changelog</span>
</a>
<div class="nav-links">
<a href="#">Changelog</a>
<a href="#" class="button button--small">Download</a>
</div>
</div>

<section class="hero container">
</header>
<section class="hero container">
<section class="col-50 hero__content">
<h1>Capture your screen</h1>
<h2>An open-source screen recorder built with web technology</h2>
<a href="https://getkap.co/download" class="button hero__button">
<img src="./images/download.svg" draggable="false" alt="Download Kap">
Get App
</a>
<div class="footer__marketing-details">
<a href="https://github.com/wulkano/kap" class="footer__marketing-download link--light is-bold">View and contribute on GitHub</a>
<span> macOS 10.12 or above required</span>
</div>
</section>

<picture class="hero__image">
<section class="col-50 hero__image">
<picture>
<img src="./images/kap-app.png" alt="Kap Application" srcset="./images/kap-app.png 1x, ./images/kap-app@2x.png 2x, ./images/kap-app@3x.png 3x" draggable="false">
</picture>
</section>
</header>
</section>

<footer class="footer">
<section class="footer__marketing container">
<h3>The ease of use and speed you've been looking for - the functionality and extensibility you didn't know you needed.</h3>
<ul class="footer__marketing-features">
<li>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</li>
<li>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M11.5 9H13v6h-1.5zM9 9H6c-.6 0-1 .5-1 1v4c0 .5.4 1 1 1h3c.6 0 1-.5 1-1v-2H8.5v1.5h-2v-3H10V10c0-.5-.4-1-1-1zm10 1.5V9h-4.5v6H16v-2h2v-1.5h-2v-1z"/></svg>
</li>
<li>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</li>
<li>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>
</li>
</ul>
<div class="footer__marketing-details">
<a href="https://github.com/wulkano/kap" class="footer__marketing-download link--light is-bold">View and contribute on GitHub</a>
<span> macOS 10.10 or above required</span>
</div>
</section>

<section class="footer__brand container">
<a href="https://wulkano.com" class="footer__brand-logo"><img src="./images/wulkano.svg" draggable="false" alt="Made by Wulkano and friends"></a>
<p>
<a href="https://twitter.com/matheusfrndes">@matheusfrndes</a>,
<a href="https://twitter.com/codetheory">@codetheory</a>,
<a href="https://twitter.com/skllcrn">@skllcrn</a>,
<a href="https://twitter.com/doot0">@doot0</a>,
<a href="https://twitter.com/sindresorhus">@sindresorhus</a>,
<a href="https://twitter.com/charliehield">@charliehield</a>,
&amp; friends.
</p>
<a href="http://eepurl.com/ch90_1">Sign up for early updates.</a>
<a href="http://eepurl.com/ch90_1">Sign up for updates.</a>
</section>
</footer>

</div>
<script>
window.productHuntUpcoming = {
appId: 240,
Expand Down
149 changes: 89 additions & 60 deletions src/styles/main.css
View file
Expand Up @@ -37,6 +37,7 @@ $grey-lighter: #CCCCCC;
$neon-mint: #00CCA3;
$blue: #3F69C2;
$purple: #8F08FD;
$neon-purple: #7146FE;

body {
color: $grey-darker;
Expand Down Expand Up @@ -72,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
h1 {
font-size: 3.2rem;
line-height: 1.5em;
color: white;
margin-bottom: 0.5em;
}

h2 {
Expand All @@ -91,13 +92,13 @@ a {
transition: color .12s ease-in-out, text-decoration .12s ease-in-out;
}

a:hover { color: $neon-mint; }
a.link--light { color: $neon-mint; }
a:hover { color: $neon-purple; }
a.link--light { color: $neon-purple; }
a.link--light:hover { text-decoration: underline; }

a.button {
border-radius: .8rem;
background: $neon-mint;
background: $neon-purple;
height: 4.8rem;
padding: 0 1.7rem;
display: flex;
Expand All @@ -116,6 +117,11 @@ a.button {
a.button svg, a.button img { padding-right: 1.8rem; }
.is-bold { font-weight: 700; }

a.button--small {
padding: 0 1rem;
height: 3rem;
}

/*
Grid
Expand All @@ -133,53 +139,26 @@ a.button svg, a.button img { padding-right: 1.8rem; }
}

.col { flex: 1; }
.col-50 { width: 50%; }



.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}

/* Header/Footer */
.header, .footer {
height: 50vh;
height: 50vh;
min-height: 27rem;
flex: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.header { position: relative; }

.header-animation {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: -1;
}

.header-animation::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(farthest-corner at -10% 10% , #00CCA3 5%, #8F08FD 100%);
animation: bg 6s ease-in infinite alternate;
will-change: transform;
transform-style: preserve-3d;
}

@keyframes bg {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
.header {
position: relative;
}

/* HEADER */
Expand All @@ -191,6 +170,21 @@ a.button svg, a.button img { padding-right: 1.8rem; }

.logo { line-height: 0; }

.nav-links {
margin-left: auto;
display: flex;
align-items: center;
}

.nav-links a:first-child {
color: $neon-purple;
font-weight: 600;
}

.nav-links .button {
margin-left: 2rem;
}

.status {
margin-left: auto;
border-radius: 4px;
Expand Down Expand Up @@ -235,10 +229,13 @@ a.button svg, a.button img { padding-right: 1.8rem; }
margin-right: 350px;
}

.footer__marketing-details { display: flex; }
.footer__marketing-details {
display: flex;
margin-top: 2rem;
}

.footer__marketing-details a {
margin-right: 3.2rem;
margin-right: 2.5rem;
margin-bottom: 8px;
}

Expand Down Expand Up @@ -291,54 +288,86 @@ a.button svg, a.button img { padding-right: 1.8rem; }

/* Hero */
.hero {

}

.hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: -2.4rem;
padding-right: 350px;
justify-content: center;
}

.hero h2 {
margin-bottom: 3.4rem;
color: rgba(255, 255, 255, 0.65);
}

.hero__button {
position: relative;
z-index: 2;
transition: transform .12s ease-in-out, color .12s ease-in-out;
background: $neon-mint;
background: $neon-purple;
}

/* Explicitly state height for firefox */
.hero__button img { height: 1.7rem }

.hero__button:hover {
transform: scale(1.1);
background: #03BE98;
background: $neon-purple;
}

.hero__image {
position: relative;
}

.hero__image picture {
width: 384px;
height: 252px;
position: absolute;
right: 15px;
bottom: -236px;
border-radius: 5px;
max-width: 320px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}

.hero__image img {
position: relative;
}

.hero__image picture::before,
.hero__image::after,
.hero__image::before {
content: "";
position: absolute;
bottom: 5px;
left: 0;
content: '';
display: block;
width: 100%;
height: calc(100% - 5px);
border-radius: 5px;
box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
position: absolute;
border-radius: 50%;
}

.hero__image picture::before {
width: 32px;
height: 32px;
background-color: #FFD500;
top: -32px;
left: 50%;
margin-left: -16px;
}

.hero__image::before {
width: 160px;
height: 160px;
background-color: $neon-purple;
left: 0;
bottom: 0;
}

.hero__image::after {
width: 96px;
height: 96px;
background-color: #00FFBE;
right: 0;
top: 0;
}

/* Responsive */

Expand Down

0 comments on commit c8683d1

Please sign in to comment.