From e749ad93c6787752eced17ced9ef99ab0ce28ef9 Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Sun, 23 Mar 2025 20:08:57 +0100 Subject: [PATCH 01/10] Add HTML structure --- index.html | 185 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..ae6387ab --- /dev/null +++ b/index.html @@ -0,0 +1,185 @@ + + + + + + + + + + + Web project + + +
+
+ + +
+
+
+

Beautiful Free Nova Template

+

A top notch premium quality template for your next web project.

+ +
+
+ +
+
+
+
+
+

Features

+
+
+
+
+
+

Fully responsive

+

+ Looks amazing on any device: smartphone, tablet, laptop and + desktop. +

+
+
+
+
+ +
+
+

Customizable

+

+ Change the colors, pictures or any of the sections to suit your + needs. +

+
+
+
+
+
+

Slick and beautiful design

+

Trendy and fresh design, fits any website.

+
+
+
+
+
+
+ +
+
+
+
+
+

Simple and beautiful

+

+ Use Nova theme for your next web project. It is completely + customizable so you can change any of the sections to fit your needs. + Nova Theme is Free for any kind of use, personal and commercial. Have + fun and good luck! +

+
+
+
+
+

Choose your pricing plan

+

Pick any of our super affordable pricing plans

+
+
+
+
+

Basic

+
$15
+
per month
+
+
+

Up to 7 projects

+

2 additional developers

+
+ +
+
+
+

Basic

+
$15
+
per month
+
+
+

Up to 7 projects

+

2 additional developers

+
+ +
+
+
+

Basic

+
$15
+
per month
+
+
+

Up to 7 projects

+

2 additional developers

+
+ +
+
+
+
+
+

The team

+
+
+
+ +
+ CTO +

Johnny B Good

+

The brains behind the whole operation

+ +
+
+
+ +
+ CEO +

Roll Over Beethoven

+

The one that puts it all together

+ +
+
+
+ +
+ CFO +

Chuck Berry

+

The guy with his hand on the wallet

+ +
+
+
+
+ + + From 380ffdd465a02d43deec1b2417859589eb3c68c0 Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Sun, 23 Mar 2025 20:09:08 +0100 Subject: [PATCH 02/10] Add css reset --- src/reset.css | 312 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 312 insertions(+) create mode 100644 src/reset.css diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 00000000..57c883da --- /dev/null +++ b/src/reset.css @@ -0,0 +1,312 @@ +/* + HTML5 Reset :: style.css + ---------------------------------------------------------- + We have learned much from/been inspired by/taken code where offered from: + + Eric Meyer :: http://meyerweb.com + HTML5 Doctor :: http://html5doctor.com + and the HTML5 Boilerplate :: http://html5boilerplate.com + +-------------------------------------------------------------------------------*/ + +/* Let's default this puppy out +-------------------------------------------------------------------------------*/ + +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +/* Handle box-sizing while better addressing child elements: + http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ + +/* Responsive images and other embedded objects */ +/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ +img, +object, +embed { + max-width: 100%; +} + +/* + Note: keeping IMG here will cause problems if you're using foreground images as sprites. + In fact, it *will* cause problems with Google Maps' controls at small size. + If this is the case for you, try uncommenting the following: + +#map img { + max-width: none; +} +*/ + +/* force a vertical scrollbar to prevent a jumpy page */ +html { + overflow-y: scroll; +} + +/* we use a lot of ULs that aren't bulleted. + you'll have to restore the bullets within content, + which is fine because they're probably customized anyway */ +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +/* tables still need cellspacing="0" in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre; /* CSS2 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ + word-wrap: break-word; /* IE */ +} + +input[type="radio"] { + vertical-align: text-bottom; +} +input[type="checkbox"] { + vertical-align: bottom; +} +.ie7 input[type="checkbox"] { + vertical-align: baseline; +} +.ie6 input { + vertical-align: text-bottom; +} + +select, +input, +textarea { + font: 99% sans-serif; +} + +table { + font-size: inherit; + font: 100%; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +td, +td img { + vertical-align: top; +} + +/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +/* standardize any monospaced elements */ +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +/* hand cursor on clickable elements */ +.clickable, +label, +input[type="button"], +input[type="submit"], +input[type="file"], +button { + cursor: pointer; +} + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, +input, +select, +textarea { + margin: 0; +} + +/* make buttons play nice in IE */ +button, +input[type="button"] { + width: auto; + overflow: visible; +} + +/* scale images in IE7 more attractively */ +.ie7 img { + -ms-interpolation-mode: bicubic; +} + +/* prevent BG image flicker upon hover + (commented out as usage is rare, and the filter syntax messes with some pre-processors) +.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} +*/ + +/* let's clear some floats */ +.clearfix:after { + content: " "; + display: block; + clear: both; +} From 3e7bfc79a3b80e128b756027c89fb2aa4bc2d013 Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Sun, 23 Mar 2025 20:09:29 +0100 Subject: [PATCH 03/10] Start adding styling --- src/style.css | 200 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 src/style.css diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..551d9a18 --- /dev/null +++ b/src/style.css @@ -0,0 +1,200 @@ +:root { + --gradient: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + --color-primary: #06bceb; + --color-secondary: #23f18b; + --color-light: #ffffff; + --color-medium-light: #f8f9f9; + --color-medium-dark: #464646; + --color-dark: #000000; +} + +body { + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + font-style: normal; +} +h1, +h2, +h3, +p { + font-weight: 300; +} +h1 { + font-size: 36px; + font-weight: 700; +} +h2 { + font-size: 30px; + text-transform: uppercase; +} +h3 { + font-size: 14px; +} +button { + padding: 15px 20px; + border-radius: 6px; + border: 0; + color: var( + --color-medium-dark + ); /* I decided to change the text color to fulfill WCAG criteria */ +} +.button--primary { + background-color: var(--color-primary); +} +.button--secondary { + background-color: var(--color-secondary); + width: 60%; +} + +.container { + max-width: 1150px; + margin: 0 auto; +} +.content__container { + margin-top: 44px; + display: flex; + flex-direction: column; + gap: 25px; +} +.cards__container { + display: flex; + gap: 10px; + justify-content: center; + padding: 40px 0 80px; +} +.cards__container .card { + width: 300px; + text-align: center; + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; +} +.cards__container .card h3 { + text-transform: uppercase; + font-weight: 700; + margin-bottom: 14px; +} +.card-img { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-light); + padding: 10px; + border-radius: 100%; + width: 80px; + height: 80px; + object-fit: contain; +} +.card-img img { + width: 30px; + height: 30px; +} +.nav__container { + display: flex; + gap: 24px; +} +.nav__container a { + color: var(--color-light); + text-decoration: none; + transition: all 150ms ease-in-out; +} +.nav__container a:hover { + border-bottom: 1px solid var(--color-light); +} +header { + background: var(--gradient); +} +.header__container { + padding: 40px 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.hero__container { + display: flex; + align-items: flex-start; + padding: 50px 0 100px; + gap: 90px; + color: var(--color-light); +} +.logos__container { + display: flex; + justify-content: center; + padding: 20px 0; + background-color: var(--color-medium-light); +} +.media__container { + background-color: var(--color-light); + padding: 17px; + transform: rotate(-5deg); + border-radius: 20px; + /* margin: 40px 0 0 92px; */ +} +.media-text { + display: flex; + justify-content: center; + gap: 80px; + padding: 40px; + line-height: 2; + color: var(--color-medium-dark); +} +.media { + width: 40%; +} +.text { + width: 30%; +} +.text h2 { + text-transform: uppercase; +} +.pricing__container { + padding: 40px 0; + background-color: var(--color-medium-light); +} +.pricing__container--cards .card { + padding: 40px; + display: flex; + flex-direction: column; + gap: 30px; + text-align: center; +} +.card--featured { + background: var(--color-light); + border-radius: 6px; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; +} + +.plan-price h3 { + text-transform: uppercase; +} +.plan-price .price { + font-size: 32px; + font-weight: 700; + margin: 12px 0; +} +.pricing__container--text, +.team__container--title { + text-align: center; +} +.pricing__container--cards, +.team__container--cards { + display: flex; + gap: 10px; + justify-content: center; +} + +footer { + background-color: var(--color-medium-dark); +} +section:has(.cards__container) { + background-color: var(--color-dark); + color: var(--color-light); +} +section:has(.logos__container) { + background-color: var(--color-medium-light); +} +.title__container { + padding: 40px 0; + text-align: center; +} From c4811dff1b33d5790fd752daa3dd6a9a71d9065c Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Sun, 23 Mar 2025 22:26:01 +0100 Subject: [PATCH 04/10] Refactor the code --- index.html | 37 +++++++++++++++++++------------------ src/style.css | 39 ++++++++++++++++++++++++++++++--------- 2 files changed, 49 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index ae6387ab..592ea7f4 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,7 @@

Beautiful Free Nova Template

Features

-
+
@@ -90,11 +90,11 @@

Simple and beautiful

-
+

Choose your pricing plan

Pick any of our super affordable pricing plans

-
+

Basic

@@ -134,17 +134,17 @@

Basic

-
+

The team

-
+
- CTO -

Johnny B Good

-

The brains behind the whole operation

-
-

A free template by

+

A free template by

+
diff --git a/src/style.css b/src/style.css index 551d9a18..2ccd9462 100644 --- a/src/style.css +++ b/src/style.css @@ -70,6 +70,14 @@ button { gap: 20px; align-items: center; } +.team-title { + display: inline-block; +} +.team-title, +.team-name, +.team-info { + margin-bottom: 12px; +} .cards__container .card h3 { text-transform: uppercase; font-weight: 700; @@ -148,11 +156,11 @@ header { .text h2 { text-transform: uppercase; } -.pricing__container { +section:has(.cards__container--pricing) { padding: 40px 0; background-color: var(--color-medium-light); } -.pricing__container--cards .card { +.cards__container--pricing .card { padding: 40px; display: flex; flex-direction: column; @@ -173,21 +181,34 @@ header { font-weight: 700; margin: 12px 0; } +.cards__container--team .card { + width: 300px; + text-align: center; + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; +} .pricing__container--text, .team__container--title { text-align: center; } -.pricing__container--cards, -.team__container--cards { - display: flex; - gap: 10px; - justify-content: center; -} footer { background-color: var(--color-medium-dark); + color: var(--color-light); + text-align: center; + /* padding: 10px 0; */ + font-size: 14px; +} +.footer__container { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + padding: 20px 0; } -section:has(.cards__container) { +section:has(.cards__container--features) { background-color: var(--color-dark); color: var(--color-light); } From fa462a21d748243a460424724d8a3ea8eb681e52 Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Sun, 23 Mar 2025 22:36:05 +0100 Subject: [PATCH 05/10] Add styling for small screens --- src/style.css | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index 2ccd9462..8d095d8b 100644 --- a/src/style.css +++ b/src/style.css @@ -61,6 +61,14 @@ button { gap: 10px; justify-content: center; padding: 40px 0 80px; + flex-wrap: wrap; +} +@media (max-width: 425px) { + .cards__container { + flex-direction: column; + align-content: center; + gap: 50px; + } } .cards__container .card { width: 300px; @@ -119,6 +127,13 @@ header { justify-content: space-between; align-items: center; } +@media (max-width: 425px) { + .header__container { + padding: 20px; + flex-direction: column; + gap: 20px; + } +} .hero__container { display: flex; align-items: flex-start; @@ -126,10 +141,17 @@ header { gap: 90px; color: var(--color-light); } +@media (max-width: 425px) { + .hero__container { + flex-direction: column; + align-items: center; + padding: 0 20px; + } +} .logos__container { display: flex; justify-content: center; - padding: 20px 0; + padding: 20px; background-color: var(--color-medium-light); } .media__container { @@ -156,6 +178,15 @@ header { .text h2 { text-transform: uppercase; } +@media (max-width: 425px) { + .media-text { + flex-direction: column; + } + .text { + width: 100%; + } +} + section:has(.cards__container--pricing) { padding: 40px 0; background-color: var(--color-medium-light); From 5c5ca98dfd4e4163965b015db25c782c58574f55 Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Tue, 1 Apr 2025 21:00:13 +0200 Subject: [PATCH 06/10] Refactor the code --- index.html | 70 +++++++++++++++++---------------- src/style.css | 105 ++++++++++++++++++-------------------------------- 2 files changed, 75 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index 592ea7f4..7d095492 100644 --- a/index.html +++ b/index.html @@ -15,34 +15,38 @@
-
- -
-
-
+
+

Features

-
+
-
+
+ +

Fully responsive

@@ -52,7 +56,7 @@

Fully responsive

-
+
@@ -64,7 +68,7 @@

Customizable

-
+

Slick and beautiful design

Trendy and fresh design, fits any website.

@@ -72,8 +76,8 @@

Slick and beautiful design

-
-
+
+
@@ -89,12 +93,12 @@

Simple and beautiful

-
-
+
+

Choose your pricing plan

Pick any of our super affordable pricing plans

-
+

Basic

@@ -134,10 +138,10 @@

Basic

-
+

The team

-
+
@@ -145,8 +149,8 @@

The team

Johnny B Good

The brains behind the whole operation

@@ -157,8 +161,8 @@

Johnny B Good

Roll Over Beethoven

The one that puts it all together

@@ -169,8 +173,8 @@

Roll Over Beethoven

Chuck Berry

The guy with his hand on the wallet

diff --git a/src/style.css b/src/style.css index 8d095d8b..7713a219 100644 --- a/src/style.css +++ b/src/style.css @@ -17,6 +17,7 @@ h1, h2, h3, p { + font-family: inherit; font-weight: 300; } h1 { @@ -24,6 +25,7 @@ h1 { font-weight: 700; } h2 { + margin-bottom: 16px; font-size: 30px; text-transform: uppercase; } @@ -34,9 +36,12 @@ button { padding: 15px 20px; border-radius: 6px; border: 0; - color: var( - --color-medium-dark - ); /* I decided to change the text color to fulfill WCAG criteria */ + color: var(--color-medium-dark); + font-family: inherit; + transition: 150ms ease-in-out; +} +button:hover { + scale: 1.1; } .button--primary { background-color: var(--color-primary); @@ -50,27 +55,20 @@ button { max-width: 1150px; margin: 0 auto; } -.content__container { +.content { margin-top: 44px; display: flex; flex-direction: column; gap: 25px; } -.cards__container { +.container--cards { display: flex; gap: 10px; justify-content: center; padding: 40px 0 80px; flex-wrap: wrap; } -@media (max-width: 425px) { - .cards__container { - flex-direction: column; - align-content: center; - gap: 50px; - } -} -.cards__container .card { +.card { width: 300px; text-align: center; display: flex; @@ -86,12 +84,11 @@ button { .team-info { margin-bottom: 12px; } -.cards__container .card h3 { - text-transform: uppercase; +.container--cards .card h3 { font-weight: 700; margin-bottom: 14px; } -.card-img { +.card-image { display: flex; align-items: center; justify-content: center; @@ -102,64 +99,45 @@ button { height: 80px; object-fit: contain; } -.card-img img { - width: 30px; - height: 30px; -} -.nav__container { +.nav__list { display: flex; gap: 24px; } -.nav__container a { +.nav__list a { color: var(--color-light); text-decoration: none; transition: all 150ms ease-in-out; } -.nav__container a:hover { +.nav__list a:hover { border-bottom: 1px solid var(--color-light); } header { background: var(--gradient); } -.header__container { +.container--header { padding: 40px 0; display: flex; justify-content: space-between; align-items: center; } -@media (max-width: 425px) { - .header__container { - padding: 20px; - flex-direction: column; - gap: 20px; - } -} -.hero__container { +.container--hero { display: flex; align-items: flex-start; padding: 50px 0 100px; gap: 90px; color: var(--color-light); } -@media (max-width: 425px) { - .hero__container { - flex-direction: column; - align-items: center; - padding: 0 20px; - } -} -.logos__container { +.container--logos { display: flex; justify-content: center; padding: 20px; background-color: var(--color-medium-light); } -.media__container { +.container--hero .media { background-color: var(--color-light); padding: 17px; transform: rotate(-5deg); border-radius: 20px; - /* margin: 40px 0 0 92px; */ } .media-text { display: flex; @@ -169,29 +147,20 @@ header { line-height: 2; color: var(--color-medium-dark); } -.media { +.media-text .media { width: 40%; } -.text { +.media-text .text { + margin-top: 16px; width: 30%; } -.text h2 { +.media-text .text h2 { text-transform: uppercase; } -@media (max-width: 425px) { - .media-text { - flex-direction: column; - } - .text { - width: 100%; - } -} - -section:has(.cards__container--pricing) { - padding: 40px 0; +.pricing { background-color: var(--color-medium-light); } -.cards__container--pricing .card { +.pricing .card { padding: 40px; display: flex; flex-direction: column; @@ -204,7 +173,8 @@ section:has(.cards__container--pricing) { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } -.plan-price h3 { +.plan-price h3, +.card-content h3 { text-transform: uppercase; } .plan-price .price { @@ -212,16 +182,18 @@ section:has(.cards__container--pricing) { font-weight: 700; margin: 12px 0; } -.cards__container--team .card { - width: 300px; +.plan-details { + margin-bottom: 30px; +} +.team .card { + width: 30%; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; } -.pricing__container--text, -.team__container--title { +.team { text-align: center; } @@ -229,7 +201,6 @@ footer { background-color: var(--color-medium-dark); color: var(--color-light); text-align: center; - /* padding: 10px 0; */ font-size: 14px; } .footer__container { @@ -239,14 +210,14 @@ footer { gap: 10px; padding: 20px 0; } -section:has(.cards__container--features) { +.features { background-color: var(--color-dark); color: var(--color-light); } -section:has(.logos__container) { +.logos { background-color: var(--color-medium-light); } -.title__container { - padding: 40px 0; +.container--title { + padding: 60px 0 26px; text-align: center; } From ef8a27138bb456249d6d8c9f128c4f9996b32791 Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Tue, 1 Apr 2025 21:10:01 +0200 Subject: [PATCH 07/10] Remove unnecessary spaces --- src/style.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/style.css b/src/style.css index 7713a219..df280c1c 100644 --- a/src/style.css +++ b/src/style.css @@ -50,7 +50,6 @@ button:hover { background-color: var(--color-secondary); width: 60%; } - .container { max-width: 1150px; margin: 0 auto; @@ -172,7 +171,6 @@ header { border-radius: 6px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } - .plan-price h3, .card-content h3 { text-transform: uppercase; @@ -196,7 +194,6 @@ header { .team { text-align: center; } - footer { background-color: var(--color-medium-dark); color: var(--color-light); From 3556b5f4df9703c7614ea6a71b02f1f12779fbeb Mon Sep 17 00:00:00 2001 From: Natalia Kur Date: Thu, 3 Apr 2025 21:20:46 +0200 Subject: [PATCH 08/10] Improve BEM classes --- index.html | 134 ++++++++++++++++++++++++++++------------------------- 1 file changed, 72 insertions(+), 62 deletions(-) diff --git a/index.html b/index.html index 7d095492..19feef3c 100644 --- a/index.html +++ b/index.html @@ -14,67 +14,75 @@ Web project -
+
-
+

Beautiful Free Nova Template

A top notch premium quality template for your next web project.

-
+
-
+
-
+

Features

-
-
-
-
+
+
    +
  • +
    -
+
-

Fully responsive

+

Fully responsive

Looks amazing on any device: smartphone, tablet, laptop and desktop.

-
-
-
+ +
  • +
    -
    • +
    -

    Customizable

    +

    Customizable

    Change the colors, pictures or any of the sections to suit your needs.

    -
    -
    + +
  • -

    Slick and beautiful design

    +

    + Slick and beautiful design +

    Trendy and fresh design, fits any website.

    -
    • -
    + +
    @@ -82,10 +90,10 @@

    Slick and beautiful design

    -
    +
    -

    Simple and beautiful

    -

    +

    Simple and beautiful

    +

    Use Nova theme for your next web project. It is completely customizable so you can change any of the sections to fit your needs. Nova Theme is Free for any kind of use, personal and commercial. Have @@ -94,14 +102,16 @@

    Simple and beautiful

    -
    -

    Choose your pricing plan

    -

    Pick any of our super affordable pricing plans

    -
    -
    -
    +
    +

    Choose your pricing plan

    +

    + Pick any of our super affordable pricing plans +

    +
    +
      +
    • -

      Basic

      +

      Basic

      $15
      per month
      @@ -110,10 +120,10 @@

      Basic

      2 additional developers

    -
    -
    + +
  • -

    Basic

    +

    Basic

    $15
    per month
    @@ -122,10 +132,10 @@

    Basic

    2 additional developers

    • -
    -
    + +
  • -

    Basic

    +

    Basic

    $15
    per month
    @@ -134,51 +144,51 @@

    Basic

    2 additional developers

    • - - + +

    The team

    -
    -
    +
      +
    • -
      - CTO -

      Johnny B Good

      -

      The brains behind the whole operation

      +
      + CTO +

      Johnny B Good

      +

      The brains behind the whole operation

      -
      -
      +
      • +
    • -
      - CEO -

      Roll Over Beethoven

      -

      The one that puts it all together

      +
      + CEO +

      Roll Over Beethoven

      +

      The one that puts it all together

      -
      -
      +
      • +
    • -
      - CFO -

      Chuck Berry

      -

      The guy with his hand on the wallet

      +
      + CFO +

      Chuck Berry

      +

      The guy with his hand on the wallet

      -
      -
    + +