From afaf69d694a1924f3eeb7add0eb7adc1229f353e Mon Sep 17 00:00:00 2001 From: marrcelp Date: Mon, 23 Sep 2024 16:57:49 +0200 Subject: [PATCH 01/12] create first section - start (navbar and hero) with completed styles --- .DS_Store | Bin 0 -> 6148 bytes assets/index.html | 49 ++++++++++++++++++++ assets/style.css | 114 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 163 insertions(+) create mode 100644 .DS_Store create mode 100644 assets/index.html create mode 100644 assets/style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..f205d58c8842aed18d84b96fd423d96c63d13203 GIT binary patch literal 6148 zcmeHK%}T>S5ZM+=;txNH&(hwo+gv%+c^Rd7uWuUCq=%Br^E6NNu%icg zQkdS*CcK8%=r-3!qxSB8OKtA#jazEe_I;P#k%36t3bd`#jTq9lBd%Os;IOi2+l6$)hje$AZbFgf z?zp}(D(E$o ogz74blNLDUC`K(E#cNO_h%0h{fy2roA`t!~U}#{&4E!kr?^JwJEC2ui literal 0 HcmV?d00001 diff --git a/assets/index.html b/assets/index.html new file mode 100644 index 00000000..6d7d3adb --- /dev/null +++ b/assets/index.html @@ -0,0 +1,49 @@ + + + + + + NOVA + + + + +
+
+ +
+ +
+
+ +
+

Beautiful Free Nova template

+

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

+ +
+ +
+ screen +
+ +
+
+
+ + \ No newline at end of file diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 00000000..2b5423af --- /dev/null +++ b/assets/style.css @@ -0,0 +1,114 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --font-primary: "Montserrat", sans-serif; + --color-alpha: #fff; + --color-beta: #333; +} + +/* STYLES FOR FIRST SECTION - START (NAVBAR & HERO) */ + +.start { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + width: 100%; + height: 100vh; +} + +.navbar, .hero { + width: 100%; + font-family: var(--font-primary); + color: var(--color-alpha); +} + +.navbar__container, .hero__container { + max-width: 1150px; + display: flex; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar__container { + height: 80px; +} + +.navbar__list { + display: flex; + list-style: none; +} + +.navbar__link { + color: var(--color-alpha); + text-decoration: none; + margin-right: 30px; + padding: 20px 0; + font-weight: 600; + font-size: 18px; + cursor: pointer; +} + +.navbar__link:hover { + color: #F9A842; +} + +.navbar__element:last-child .navbar__link { + margin-right: 0; +} + +.logo { + width: 100px; + height: auto; +} + +.hero__container { + height: calc(100vh - 100px); +} + +.hero__column { + width: 40%; + margin-right: 10px; +} + +.hero__column--wider { + width: 60%; +} + +.hero__column--wider > img { + width: 80%; + height: auto; + border: 15px solid white; + border-radius: 20px; + transform: rotate(-7deg); +} + +.hero__title { + font-size: 30px; +} + +.hero__description { + font-size: 16px; + font-weight: 300; + width: 250px; + line-height: 26px; + padding: 20px 0; +} + +.hero__button { + background-color: #26F18B; + color: var(--color-alpha); + font-size: 16px; + font-weight: 600; + border-radius: 10px; + border: none; + cursor: pointer; + padding: 18px 45px; +} + +/* ------------------------------------------------ */ \ No newline at end of file From 94525234986adc3aa1ac73bc7c0e594888e03626 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Mon, 23 Sep 2024 17:48:21 +0200 Subject: [PATCH 02/12] created second section - features with full styles --- assets/index.html | 32 ++++++++++++++++++++++ assets/style.css | 70 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 100 insertions(+), 2 deletions(-) diff --git a/assets/index.html b/assets/index.html index 6d7d3adb..453e3b38 100644 --- a/assets/index.html +++ b/assets/index.html @@ -45,5 +45,37 @@

Beautiful Free Nova template

+ +
+

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.

+
+ +
+
+ \ No newline at end of file diff --git a/assets/style.css b/assets/style.css index 2b5423af..3d5c6117 100644 --- a/assets/style.css +++ b/assets/style.css @@ -20,7 +20,7 @@ height: 100vh; } -.navbar, .hero { +.navbar, .hero, .features { width: 100%; font-family: var(--font-primary); color: var(--color-alpha); @@ -111,4 +111,70 @@ padding: 18px 45px; } -/* ------------------------------------------------ */ \ No newline at end of file +/* ------------------------------------------------ */ + +.features { + background-color: black; + display: flex; + flex-direction: column; + align-items: center; + padding: 40px 0 80px 0; +} + +.features__title { + font-size: 28px; + color: var(--color-alpha); + font-weight: 300; + line-height: 32px; +} + +.features__container { + display: flex; + justify-content: space-evenly; + align-items: center; + padding-top: 80px; + max-width: 60%; +} + +.features__element { + width: 33.333%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-right: 50px; +} + +.features__element:last-child { + margin-right: 0; +} + +.element__description { + text-align: center; + font-size: 14px; + font-weight: 200; + line-height: 22px; +} + +.element__circle { + width: 80px; + height: 80px; + background-color: white; + border-radius: 50%; + position: relative; +} + +.element__image { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.element__title { + font-size: 16px; + font-weight: 500; + line-height: 24px; + padding: 20px 0; + text-align: center; +} \ No newline at end of file From dd06fa4b88ede40ecf0ec079672020620399a8a6 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Mon, 23 Sep 2024 18:18:20 +0200 Subject: [PATCH 03/12] fix spacing and margins, add section partners with styling --- assets/index.html | 6 ++++++ assets/style.css | 33 +++++++++++++++++++++++---------- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/assets/index.html b/assets/index.html index 453e3b38..d4f90984 100644 --- a/assets/index.html +++ b/assets/index.html @@ -77,5 +77,11 @@

SLICK AND BEAUTIFUL DESIGN

+
+
+ +
+
+ \ No newline at end of file diff --git a/assets/style.css b/assets/style.css index 3d5c6117..75156919 100644 --- a/assets/style.css +++ b/assets/style.css @@ -20,15 +20,14 @@ height: 100vh; } -.navbar, .hero, .features { +.navbar, .hero, .features, .partners { width: 100%; font-family: var(--font-primary); color: var(--color-alpha); } -.navbar__container, .hero__container { +.navbar__container, .hero__container, .features__container { max-width: 1150px; - display: flex; margin: 0 auto; display: flex; justify-content: space-between; @@ -113,6 +112,8 @@ /* ------------------------------------------------ */ +/* STYLES FOR SECOND SECTION - FEATURES */ + .features { background-color: black; display: flex; @@ -129,20 +130,18 @@ } .features__container { - display: flex; - justify-content: space-evenly; - align-items: center; padding-top: 80px; - max-width: 60%; + width: 100%; + justify-content: center; } .features__element { - width: 33.333%; + width: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center; - margin-right: 50px; + margin-right: 25px; } .features__element:last-child { @@ -177,4 +176,18 @@ line-height: 24px; padding: 20px 0; text-align: center; -} \ No newline at end of file +} + +/* ------------------------------------------------ */ + +/* STYLES FOR THIRD SECTION - PARTNERS */ + +.partners { + background-color: white; +} + +.partners__container { + display: flex; + justify-content: center; + padding: 20px 0; +} From 21611e5cb729c7fdca27ff780c6442da72ffbabb Mon Sep 17 00:00:00 2001 From: marrcelp Date: Mon, 23 Sep 2024 18:39:10 +0200 Subject: [PATCH 04/12] change index.html directory --- assets/index.html => index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename assets/index.html => index.html (100%) diff --git a/assets/index.html b/index.html similarity index 100% rename from assets/index.html rename to index.html From 6a5eeb14e567431a92de3d370e39b76b2c218e80 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Tue, 24 Sep 2024 14:12:01 +0200 Subject: [PATCH 05/12] create structure for fourth section with css styles --- assets/style.css | 39 +++++++++++++++++++++++++++++++++++++++ index.html | 13 +++++++++++++ 2 files changed, 52 insertions(+) diff --git a/assets/style.css b/assets/style.css index 75156919..a2b14869 100644 --- a/assets/style.css +++ b/assets/style.css @@ -191,3 +191,42 @@ justify-content: center; padding: 20px 0; } + + +/* ------------------------------------------------ */ + +/* STYLES FOR FOURTH SECTION - DESCRIPTION */ + + +.description { + width: 100%; + font-family: var(--font-primary); + color: var(--color-beta); +} + +.description__container { + margin: 40px; + display: flex; + justify-content: center; + align-items: flex-start; +} + +.description__image, .description__article { + max-width: 50%; +} + +.article__title, .article__desc { + padding: 40px 150px 0 60px; +} + +.article__desc { + font-size: 14px; + font-weight: 200; + line-height: 28px; +} + +.article__title { + font-size: 28px; + font-weight: 300; + line-height: 32px; +} \ No newline at end of file diff --git a/index.html b/index.html index d4f90984..aefb64a3 100644 --- a/index.html +++ b/index.html @@ -83,5 +83,18 @@

SLICK AND BEAUTIFUL DESIGN

+
+
+ imac +
+

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! +

+
+
+
+ \ No newline at end of file From 725dd967aabf377d480469facb492c3b7e455729 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Tue, 24 Sep 2024 17:37:34 +0200 Subject: [PATCH 06/12] create pricing section with full styles --- assets/style.css | 91 +++++++++++++++++++++++++++++++++++++++++++++--- index.html | 45 ++++++++++++++++++++++++ 2 files changed, 132 insertions(+), 4 deletions(-) diff --git a/assets/style.css b/assets/style.css index a2b14869..8e43f5d3 100644 --- a/assets/style.css +++ b/assets/style.css @@ -26,7 +26,7 @@ color: var(--color-alpha); } -.navbar__container, .hero__container, .features__container { +.navbar__container, .hero__container, .features__container, .pricing__container { max-width: 1150px; margin: 0 auto; display: flex; @@ -122,13 +122,16 @@ padding: 40px 0 80px 0; } -.features__title { +.features__title, .pricing__title { font-size: 28px; - color: var(--color-alpha); font-weight: 300; line-height: 32px; } +.features__title { + color: var(--color-alpha); +} + .features__container { padding-top: 80px; width: 100%; @@ -219,7 +222,7 @@ padding: 40px 150px 0 60px; } -.article__desc { +.article__desc, .pricing__subtitle { font-size: 14px; font-weight: 200; line-height: 28px; @@ -229,4 +232,84 @@ font-size: 28px; font-weight: 300; line-height: 32px; +} + + +/* ------------------------------------------------ */ + +/* STYLES FOR FIFTH SECTION - PRICING */ + + +.pricing__title--container { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 80px; +} + +.pricing__container { + justify-content: space-evenly; +} + +.pricing { + width: 100%; + font-family: var(--font-primary); + color: var(--color-beta); + background-color: #F8F9F9; + padding: 60px 0; +} + +.pricing__title { + color: var(--color-beta); + padding-bottom: 10px; +} + +.pricing__plan, .pricing__plan--square { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.pricing__plan--square { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + border-radius: 5px; + padding: 60px; +} + +.plan__title { + font-size: 16px; + font-weight: 300; + line-height: 24px; +} + +.plan__price { + font-size: 36px; + font-weight: 600; + line-height: 40px; + padding: 8px 0; +} + +.plan__description--smaller { + font-size: 10px; + font-weight: 500; + padding-bottom: 25px; +} + +.plan__description { + font-size: 14px; + font-weight: 500; + line-height: 20px; +} + +.plan__button { + background-color: #09BCEB; + color: var(--color-alpha); + font-size: 16px; + font-weight: 300; + border-radius: 10px; + border: none; + cursor: pointer; + padding: 18px 45px; + margin-top: 50px; } \ No newline at end of file diff --git a/index.html b/index.html index aefb64a3..cace57bb 100644 --- a/index.html +++ b/index.html @@ -96,5 +96,50 @@

SIMPLE AND BEAUTIFUL

+
+ +
+

CHOOSE YOUR PRICING PLAN

+

Pick any of our super affordable pricing plans

+
+ +
+ +
+

BASIC

+

$15

+

per month

+

Up to 7 Projects

+

2 Additional Developers

+
+
+ +
+ +
+

AGENCY

+

$55

+

per month

+

Up to 25 Projects

+

2 Additional Developers

+

Unlimited Support

+
+ +
+ +
+

PRO

+

$75

+

per month

+

Up to 25 Projects

+

2 Additional Developers

+

Unlimited Support

+

1.5GB Disk Space

+ +
+ +
+
+ \ No newline at end of file From c18857dcec80d460c4ef746f672f51632c936b19 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Wed, 25 Sep 2024 15:08:05 +0200 Subject: [PATCH 07/12] fix hover for pricing plan --- .vscode/settings.json | 3 +++ assets/style.css | 17 +++++++++++++---- index.html | 6 +++--- 3 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/style.css b/assets/style.css index 8e43f5d3..7b0584fd 100644 --- a/assets/style.css +++ b/assets/style.css @@ -264,17 +264,26 @@ padding-bottom: 10px; } -.pricing__plan, .pricing__plan--square { +.pricing__plan--left, .pricing__plan--center, .pricing__plan--right { display: flex; flex-direction: column; align-items: center; justify-content: center; + border-radius: 5px; + padding: 60px; } -.pricing__plan--square { +.pricing__plan--center { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + +} + +.pricing__container:hover .plan { + box-shadow: none; +} + +.pricing__container .plan:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); - border-radius: 5px; - padding: 60px; } .plan__title { diff --git a/index.html b/index.html index cace57bb..fff8874a 100644 --- a/index.html +++ b/index.html @@ -105,7 +105,7 @@

CHOOSE YOUR PRICING PLAN

-
+

BASIC

$15

per month

@@ -116,7 +116,7 @@

BASIC

-
+

AGENCY

$55

per month

@@ -127,7 +127,7 @@

AGENCY

-
+

PRO

$75

per month

From 936845097731ed05a21a784fcedcbe807b849dc7 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Wed, 25 Sep 2024 19:34:07 +0200 Subject: [PATCH 08/12] add section team with styles, add links to nav --- assets/style.css | 101 +++++++++++++++++++++++++++++++++++++++++++---- index.html | 68 ++++++++++++++++++++++++++++--- 2 files changed, 157 insertions(+), 12 deletions(-) diff --git a/assets/style.css b/assets/style.css index 7b0584fd..d2515fea 100644 --- a/assets/style.css +++ b/assets/style.css @@ -26,7 +26,7 @@ color: var(--color-alpha); } -.navbar__container, .hero__container, .features__container, .pricing__container { +.navbar__container, .hero__container, .features__container, .pricing__container, .team__container { max-width: 1150px; margin: 0 auto; display: flex; @@ -122,7 +122,7 @@ padding: 40px 0 80px 0; } -.features__title, .pricing__title { +.features__title, .pricing__title, .team__title { font-size: 28px; font-weight: 300; line-height: 32px; @@ -186,13 +186,13 @@ /* STYLES FOR THIRD SECTION - PARTNERS */ .partners { - background-color: white; + background-color: #F8F9F9; } .partners__container { display: flex; justify-content: center; - padding: 20px 0; + padding: 25px 0; } @@ -208,7 +208,7 @@ } .description__container { - margin: 40px; + margin: 50px; display: flex; justify-content: center; align-items: flex-start; @@ -264,7 +264,7 @@ padding-bottom: 10px; } -.pricing__plan--left, .pricing__plan--center, .pricing__plan--right { +.plan { display: flex; flex-direction: column; align-items: center; @@ -286,7 +286,7 @@ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } -.plan__title { +.plan__title, .member__title { font-size: 16px; font-weight: 300; line-height: 24px; @@ -321,4 +321,91 @@ cursor: pointer; padding: 18px 45px; margin-top: 50px; +} + + +/* ------------------------------------------------ */ + +/* STYLES FOR SIXTH SECTION - THE TEAM */ + +.team { + width: 100%; + font-family: var(--font-primary); + color: var(--color-beta); + background-color: white; + padding: 60px 0; + display: flex; + flex-direction: column; + align-items: center; +} + + +.team__member { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 33.333%; + text-align: center; +} + +.team__container { + width: 100%; + padding: 80px 0 100px 0; +} + +.member__description { + font-size: 14px; + font-weight: 300; + line-height: 25px; +} + +.member__description--bold { + font-weight: 600; +} + +.member__twitter, .member__facebook { + display: inline-block; +} + +.member__logo--container { + display: flex; + width: 40px; + justify-content: space-between; + align-items: center; + padding-top: 10px; +} + +.member__twitter, .member__facebook { + height: 15px; + width: auto; + filter: brightness(0) saturate(100%); +} + +.member__photo { + padding-bottom: 30px; +} + + +/* ------------------------------------------------ */ + +/* STYLES FOR SEVENTH SECTION - FOOTER */ + +.footer { + width: 100%; + background-color: #464646; + display: flex; + justify-content: center; + align-items: center; + padding: 15px 0; +} + +.footer__description { + color: var(--color-alpha); + font-family: var(--font-primary); + font-size: 14px; + font-weight: 500; + line-height: 25px; + padding-right: 10px; + } \ No newline at end of file diff --git a/index.html b/index.html index fff8874a..0ff183ee 100644 --- a/index.html +++ b/index.html @@ -15,15 +15,15 @@ @@ -46,7 +46,7 @@

Beautiful Free Nova template

-
+

FEATURES

@@ -96,7 +96,7 @@

SIMPLE AND BEAUTIFUL

-
+

CHOOSE YOUR PRICING PLAN

@@ -141,5 +141,63 @@

PRO

+
+ +

THE TEAM

+
+ +
+ cto photo +

CTO

+

Johnny B Good

+

The brains behind the whole operation

+
+ + + + + + +
+
+ +
+ ceo photo +

CEO

+

Roll Over Beethoven

+

The one that puts it all together

+
+ + + + + + +
+
+ +
+ cfo logo +

CFO

+

Chuck Berry

+

The guy with his hand on the wallet

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

A free template by

+ +
+ \ No newline at end of file From ea3eaaa4a2ef699d9dd39e64e036ca4a82b894f6 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Wed, 25 Sep 2024 19:50:10 +0200 Subject: [PATCH 09/12] change comments --- assets/style.css | 14 +++++++------- index.html | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/assets/style.css b/assets/style.css index d2515fea..d74309d0 100644 --- a/assets/style.css +++ b/assets/style.css @@ -12,7 +12,7 @@ --color-beta: #333; } -/* STYLES FOR FIRST SECTION - START (NAVBAR & HERO) */ +/* STYLES FOR SECTION START (NAVBAR & HERO) */ .start { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); @@ -112,7 +112,7 @@ /* ------------------------------------------------ */ -/* STYLES FOR SECOND SECTION - FEATURES */ +/* STYLES FOR SECTION FEATURES */ .features { background-color: black; @@ -183,7 +183,7 @@ /* ------------------------------------------------ */ -/* STYLES FOR THIRD SECTION - PARTNERS */ +/* STYLES FOR SECTION PARTNERS */ .partners { background-color: #F8F9F9; @@ -198,7 +198,7 @@ /* ------------------------------------------------ */ -/* STYLES FOR FOURTH SECTION - DESCRIPTION */ +/* STYLES FOR SECTION DESCRIPTION */ .description { @@ -237,7 +237,7 @@ /* ------------------------------------------------ */ -/* STYLES FOR FIFTH SECTION - PRICING */ +/* STYLES FOR SECTION PRICING */ .pricing__title--container { @@ -326,7 +326,7 @@ /* ------------------------------------------------ */ -/* STYLES FOR SIXTH SECTION - THE TEAM */ +/* STYLES FOR SECTION TEAM */ .team { width: 100%; @@ -389,7 +389,7 @@ /* ------------------------------------------------ */ -/* STYLES FOR SEVENTH SECTION - FOOTER */ +/* STYLES FOR SECTION FOOTER */ .footer { width: 100%; diff --git a/index.html b/index.html index 0ff183ee..a20dc4e0 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - NOVA + NOVA - PORTFOLIO PROJECT @@ -104,7 +104,7 @@

CHOOSE YOUR PRICING PLAN

- +

BASIC

$15

From 91524475bba89c92e140eb9a15622f9cc9ef86e5 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Wed, 2 Oct 2024 13:26:23 +0200 Subject: [PATCH 10/12] add corrections - html tags --- assets/style.css | 6 ++- index.html | 100 +++++++++++++++++++++++------------------------ 2 files changed, 54 insertions(+), 52 deletions(-) diff --git a/assets/style.css b/assets/style.css index d74309d0..5e4d0403 100644 --- a/assets/style.css +++ b/assets/style.css @@ -79,12 +79,13 @@ width: 60%; } -.hero__column--wider > img { +.hero_image { width: 80%; height: auto; border: 15px solid white; border-radius: 20px; transform: rotate(-7deg); + background-color: white; } .hero__title { @@ -122,7 +123,7 @@ padding: 40px 0 80px 0; } -.features__title, .pricing__title, .team__title { +.title { font-size: 28px; font-weight: 300; line-height: 32px; @@ -271,6 +272,7 @@ justify-content: center; border-radius: 5px; padding: 60px; + list-style: none; } .pricing__plan--center { diff --git a/index.html b/index.html index a20dc4e0..ea5a01be 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@ -
+
@@ -39,49 +39,49 @@

Beautiful Free Nova template

- screen + screen
-
+
-

FEATURES

-
+

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.

    -
    • + -
+
-
+
+
@@ -98,55 +98,55 @@

SIMPLE AND BEAUTIFUL

-
-

CHOOSE YOUR PRICING PLAN

+
+

CHOOSE YOUR PRICING PLAN

Pick any of our super affordable pricing plans

-
+
- -
+ +

    BASIC

    -

    $15

    -

    per month

    -

    Up to 7 Projects

    -

    2 Additional Developers

    +
  • $15
    • +
  • per month
    • +
  • Up to 7 Projects
    • +
  • 2 Additional Developers


    • -
+ -
+

    AGENCY

    -

    $55

    -

    per month

    -

    Up to 25 Projects

    -

    2 Additional Developers

    -

    Unlimited Support

    +
  • $55
    • +
  • per month
    • +
  • Up to 25 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support

    • -
+ -
+

    PRO

    -

    $75

    -

    per month

    -

    Up to 25 Projects

    -

    2 Additional Developers

    -

    Unlimited Support

    -

    1.5GB Disk Space

    +
  • $75
    • +
  • per month
    • +
  • Up to 25 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
  • 1.5GB Disk Space
    • -
+
-

THE TEAM

-
+

THE TEAM

+
    -
    +
  • cto photo

    CTO

    Johnny B Good

    @@ -159,9 +159,9 @@

    CTO

    • -
+ -
+
  • ceo photo

    CEO

    Roll Over Beethoven

    @@ -174,9 +174,9 @@

    CEO

    • -
    + -
    +
  • cfo logo

    CFO

    Chuck Berry

    @@ -189,15 +189,15 @@

    CFO

    • -
    + -
    + -
    +

    A free template by

    -
    + \ No newline at end of file From 4cd0f79e35797bb4a6d932614432152d7bd5cac2 Mon Sep 17 00:00:00 2001 From: marrcelp Date: Wed, 2 Oct 2024 13:49:13 +0200 Subject: [PATCH 11/12] add hover to hero button, add hover to member social media icons --- assets/style.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/style.css b/assets/style.css index 5e4d0403..6b027e76 100644 --- a/assets/style.css +++ b/assets/style.css @@ -111,6 +111,10 @@ padding: 18px 45px; } +.hero__button:hover { + color: #7255DF; +} + /* ------------------------------------------------ */ /* STYLES FOR SECTION FEATURES */ @@ -384,6 +388,10 @@ filter: brightness(0) saturate(100%); } +.member__twitter:hover, .member__facebook:hover { + filter: brightness(0) saturate(100%) invert(76%) sepia(57%) saturate(859%) hue-rotate(327deg) brightness(101%) contrast(95%); +} + .member__photo { padding-bottom: 30px; } From 48d8f5efa17cffedcf1431fff53ef5a7f1420f6e Mon Sep 17 00:00:00 2001 From: marrcelp Date: Fri, 4 Oct 2024 14:39:13 +0200 Subject: [PATCH 12/12] change tags in pricing plans, delete br tags, add margin-top for plan's button --- assets/style.css | 11 +++++++++++ index.html | 23 +++++++++++------------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/assets/style.css b/assets/style.css index 6b027e76..8ebc07b5 100644 --- a/assets/style.css +++ b/assets/style.css @@ -326,6 +326,17 @@ border: none; cursor: pointer; padding: 18px 45px; +} + +.plan__button--left { + margin-top: 90px; +} + +.plan__button--center { + margin-top: 70px; +} + +.plan__button--right { margin-top: 50px; } diff --git a/index.html b/index.html index ea5a01be..81102a9e 100644 --- a/index.html +++ b/index.html @@ -107,35 +107,34 @@

    CHOOSE YOUR PRICING PLAN

      BASIC

      -
    • $15
      • -
    • per month
      • +

      $15

      +

      per month

    • Up to 7 Projects
    • 2 Additional Developers
      • -
      -
      - + +

      AGENCY

      -
    • $55
      • -
    • per month
      • +

      $55

      +

      per month

    • Up to 25 Projects
    • 2 Additional Developers
    • Unlimited Support
      • -
      - + +

      PRO

      -
    • $75
      • -
    • per month
      • +

      $75

      +

      per month

    • Up to 25 Projects
    • 2 Additional Developers
    • Unlimited Support
    • 1.5GB Disk Space
      • - +