Publicly available code that's used in the course https://learnjsthehardway.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

75 lines
1.8 KiB

<script>
import randomColor from 'randomcolor';
import { product } from 'config';
let hero_bg_color = randomColor({luminosity: 'dark', hue: 'blue'});
let hero_color = randomColor({luminosity: 'dark', hue: 'blue'});
let hero_text = '#fff';
const change_color = () => {
hero_bg_color = randomColor({luminosity: 'dark', hue: 'blue'});
hero_color = randomColor({luminosity: 'dark', hue: 'blue'});
hero_text = randomColor({lumiinosity: 'light', hue: 'yellow'});
}
</script>
<svelte:head>
<script src="/js/ztext.min.js"></script>
<style>
.z-layer:not(:first-child) {
color: #7b263a;
}
</style>
</svelte:head>
<style lang="scss">
@import 'sass/_variables';
#hero-columns {
margin-bottom: 1em;
}
.hero-body {
margin: 0px auto;
text-align: center !important;
}
.title {
font-size: 4em;
color: $light-color;
}
.hero-body .subtitle {
font-family: $mono-font-family;
font-size: 2em;
text-shadow: 0 0px $red, 0 2px $black, 3px 0 $black, 0 3px $black !important;
color: $light-color;
}
#hero-column {
min-width: 400px;
}
</style>
<div id="hero-columns" class="columns col-gapless">
<div id="hero-column" class="column">
<span on:click={ change_color }>
<div class="hero pattern-triangles-lg" style="background-color: { hero_bg_color }; color: { hero_color }">
<div class="hero-body">
<h1 class="title" style="color: { hero_text }">
<span data-z="true" data-z-layers="10" data-z-depth="0.5em" data-z-event="pointer">
Learn JavaScript
<br/>
The Hard Way
</span>
</h1>
<p class="subtitle">The only course that teaches you to build <em>real</em> websites<br/> that make <em>real money</em>...and bitcoin.</p>
</div>
</div>
</span>
</div>
</div>