Browse Source

Fix up the landing page by just using SVG.

uiredesign
Zed A. Shaw 3 weeks ago
parent
commit
a3cb00c37f
9 changed files with 14 additions and 77 deletions
  1. BIN
      designs/diagband-pricing.afdesign
  2. BIN
      designs/diagband-what-you-get.afdesign
  3. BIN
      designs/diagband.afdesign
  4. +11
    -54
      src/routes/index.svelte
  5. +0
    -11
      static/images/diagband-blue.svg
  6. +1
    -0
      static/images/diagband-pricing.svg
  7. +0
    -11
      static/images/diagband-red.svg
  8. +1
    -0
      static/images/diagband-what-you-get.svg
  9. +1
    -1
      static/images/hero-holder.svg

BIN
designs/diagband-pricing.afdesign View File


BIN
designs/diagband-what-you-get.afdesign View File


BIN
designs/diagband.afdesign View File


+ 11
- 54
src/routes/index.svelte View File

@@ -19,12 +19,6 @@

<style lang="scss">
@import 'sass/_variables';
$band-size: 600px;

@font-face {
font-family: 'lobster';
src: url('/fonts/Lobster_1.3.otf');
}

#hero-columns {
margin-bottom: 1em;
@@ -44,47 +38,13 @@
}

.hero-body .title {
font-size: 3.5rem;
font-size: 3rem;
color: $light-color;
font-family: 'lobster' !important;
text-shadow: 0 0px $red, 0 5px $red, 5px 0 $red, 0 0px $red !important;
}

#hero-column {
min-width: 600px;
}

.diagband {
margin-left: -10px;
margin-right: -10px;
margin-bottom: -100px;
margin-top: -70px;
max-width: $size-2x + 37px;
min-height: 463px;
height: 463px;
}

.diagband-title {
position: relative;
top: ($band-size / 3.6) * -1;
color: $light-color;
text-align: center;
}

.diagband-title h1 {
font-size: 4em;
padding: 0px;
font-family: 'lobster';
text-shadow: 0 0px $black, 0 8px $black, 8px 0 $black, 0 0px $black;
}

.pricing-title {
font-size: 1.5em;
margin-top: -1em;
}

.pricing {
margin-top: -3rem;
min-width: 400px;
}

.price-card {
@@ -94,6 +54,10 @@
.price-card .btn {
width: 100%;
}

#what-you-get {
margin-top: -2rem;
}
</style>

<svelte:head>
@@ -124,11 +88,7 @@ div(class="container grid-lg")
div(class="container full-width")
div(class="columns col-gapless")
div(class="column col-12")
img(src="/images/diagband-red.svg" class="diagband" alt="blue diagonal")
div(class="container diagband-title")
div(class="columns")
div(class="column")
h1 What You Get
img(src="/images/diagband-what-you-get.svg" alt="What You Get" id="what-you-get")

div(class="container grid-lg")
div(class="columns")
@@ -145,16 +105,13 @@ div(class="container grid-lg")
div(class="container full-width")
div(class="columns col-gapless")
div(class="column col-12")
img(src="/images/diagband-blue.svg" class="diagband" alt="blue diagonal")
div(class="container diagband-title pricing-title")
div(class="columns")
div(class="column")
h1 Pricing
img(src="/images/diagband-pricing.svg" alt="Pricing")

div(class="container grid-lg pricing")
div(class="columns")
div(class="column col-mx-auto text-center text-lg")
p For a simple flat monthly fee you get all of this.
div(class="column col-mx-auto text-center h1")
p For a simple flat monthly fee...
p fee you get all of this.

div(class="columns")
div(class="column")

+ 0
- 11
static/images/diagband-blue.svg View File

@@ -1,11 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1920 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1.32444,-0.22453,0.315109,1.85874,-110.411,46.0954)">
<g id="Layer1">
<rect x="0" y="157" width="1505" height="141" style="fill:rgb(123,179,182);stroke:rgb(107,18,24);stroke-width:2.44px;"/>
</g>
</g>
<g id="Layer2">
</g>
</svg>

+ 1
- 0
static/images/diagband-pricing.svg
File diff suppressed because it is too large
View File


+ 0
- 11
static/images/diagband-red.svg View File

@@ -1,11 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1920 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1.32444,-0.22453,0.315109,1.85874,-110.411,46.0954)">
<g id="Layer1">
<rect x="0" y="157" width="1505" height="141" style="fill:rgb(107,18,24);stroke:rgb(67,152,161);stroke-width:2.44px;"/>
</g>
</g>
<g id="Layer2">
</g>
</svg>

+ 1
- 0
static/images/diagband-what-you-get.svg
File diff suppressed because it is too large
View File


+ 1
- 1
static/images/hero-holder.svg
File diff suppressed because it is too large
View File


Loading…
Cancel
Save