From 4c0c44b35b7258919e619dc92eb3b2b62ca633cd Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Tue, 16 Dec 2025 20:45:02 +0100 Subject: [PATCH 01/11] Initial + Header HTML structure with CSS styling + base.css + reset.css --- index.html | 73 +++++++++++ styles/banner.css | 94 +++++++++++++++ styles/base.css | 21 ++++ styles/reset.css | 299 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 487 insertions(+) create mode 100644 index.html create mode 100644 styles/banner.css create mode 100644 styles/base.css create mode 100644 styles/reset.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..d0a65f71 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + + + + nova | Template + + + + + + + + + \ No newline at end of file diff --git a/styles/banner.css b/styles/banner.css new file mode 100644 index 00000000..8b378b42 --- /dev/null +++ b/styles/banner.css @@ -0,0 +1,94 @@ +.banner { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + padding-bottom: 100px; +} + +.banner__nav { + min-height: 80px; + justify-content: space-between; + align-items: center; +} + +.banner__list { + display: flex; + align-items: center; + gap: 20px; +} + +.banner__link { + text-decoration: none; + color: white; +} + +.banner__link:hover { + color: #0ABCEB; +} + +.banner__logo { + display: flex; + align-items: center; +} + +.banner__hero { + justify-content: space-between; + align-items: center; + min-height: 550px; +} + +.banner__cta { + width: 45%; + color: white; + margin-left: 6em; +} + +.banner__heading { + font-weight: 700; + font-size: 2.5em; + margin-bottom: 1em; + max-width: 400px; +} + +.banner__text { + max-width: 280px; + line-height: 2em; +} + +.banner__download-btn { + width: 220px; + padding: 1em 2em; + color: white; + background-color: #25F18B; + border: none; + outline: none; + border-radius: 10px; + margin: 2em 0; + transition: all 250ms ease-in-out; + font-size: 1rem; +} + +.banner__download-btn:hover, +.banner__download-btn:focus { + background-color: #40fb9e; + border-radius: 25px; +} + +.banner__download-btn:focus { + outline: 5px dotted black; +} + +.banner__img-container { + width: 50%; + display: flex; + justify-content: center; + +} + +.banner__img { + aspect-ratio: 4/3; + width: 500px; + box-shadow: 10px 11px 45px -5px rgba(66, 68, 90, 1); + border: 10px solid white; + border-radius: 20px; + transform: rotateZ(-8deg); + background-color: white; +} \ No newline at end of file diff --git a/styles/base.css b/styles/base.css new file mode 100644 index 00000000..3d1edede --- /dev/null +++ b/styles/base.css @@ -0,0 +1,21 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + font-family: "Montserrat", sans-serif; +} + +.row { + width: 100%; + margin: 5px; + padding: 5px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + display: flex; +} + +.cell { + min-height: 50px; +} \ No newline at end of file diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..607fff0c --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,299 @@ +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; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +img { + max-width: 100%; +} + +ul { + list-style: none; +} + +/* we'll restore bullets as needed for content */ + +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; +} + +table { + border-collapse: separate; + border-spacing: 0; + text-align: left; +} + +th { + font-weight: bold; + vertical-align: bottom; +} + +td { + font-weight: normal; + vertical-align: top; +} + +td img { + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #999; + margin: 1rem 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre-line; +} + +input[type="radio"] { + vertical-align: text-bottom; +} + +input[type="checkbox"] { + vertical-align: bottom; +} + +small { + font-size: .8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: .8rem; + line-height: 0; + position: relative; +} + +sup { + top: -0.5rem; +} + +sub { + bottom: -0.25rem; +} + +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +label, +input[type=button], +input[type=submit], +input[type=file], +button { + cursor: pointer; +} + +button, +input, +select, +textarea { + margin: 0; +} + +ins { + background-color: var(--highlight-color); + color: #000; + text-decoration: none; +} + +mark { + background-color: var(--highlight-color); + color: #000; + font-style: italic; + font-weight: bold; +} + +blockquote { + padding: 2rem; + border-left: 1px solid #333; +} + +.clearfix:after { + content: ""; + display: table; + clear: both; +} + +/* https://css-tricks.com/snippets/css/clear-fix/ */ + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance +} + +p { + text-wrap: pretty; +} + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +/* ———— END THE GENERIC RESETS ———— */ + +:root { + --font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + /* https://css-tricks.com/snippets/css/system-font-stack */ + --text-color: #333; + --featured-color: #03f; + --featured-color-hover: #69f; + --highlight-color: #fcd700; +} + +body { + font-size: 16px; + font-family: var(--font-system); + color: var(--text-color); +} + +a { + color: var(--featured-color); +} + +a:hover { + color: var(--featured-color-hover); +} \ No newline at end of file From b4dac81f3f02b35be621cb111d27bdef36e951ca Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Wed, 17 Dec 2025 00:31:12 +0100 Subject: [PATCH 02/11] SCSS added + layout fixes hero section --- scss/banner.scss | 86 +++++++++++++++++++++++++++++++++++++++++++ styles/banner.css | 34 ++++------------- styles/banner.css.map | 1 + styles/base.css | 8 +++- 4 files changed, 100 insertions(+), 29 deletions(-) create mode 100644 scss/banner.scss create mode 100644 styles/banner.css.map diff --git a/scss/banner.scss b/scss/banner.scss new file mode 100644 index 00000000..adc6830b --- /dev/null +++ b/scss/banner.scss @@ -0,0 +1,86 @@ +.banner { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + padding-bottom: 100px; + + &__nav { + min-height: 80px; + justify-content: space-between; + align-items: center; + } + + &__list { + display: flex; + align-items: center; + gap: 20px; + } + + &__link { + text-decoration: none; + color: white; + } + + &__link:hover { + color: #0ABCEB; + } + + &__logo { + display: flex; + align-items: center; + } + + &__hero { + align-items: center; + min-height: 550px; + justify-content: space-around; + } + + &__cta { + color: white; + width: 45%; + } + + &__heading { + font-weight: 700; + font-size: 2.5em; + margin-bottom: 1em; + max-width: 400px; + } + + &__text { + max-width: 280px; + line-height: 2em; + } + + &__download-btn { + width: 220px; + padding: 1em 2em; + color: white; + background-color: #25F18B; + border: none; + outline: none; + border-radius: 10px; + margin: 2em 0; + transition: all 250ms ease-in-out; + font-size: 1rem; + } + + &__download-btn:hover, + &__download-btn:focus { + background-color: #40fb9e; + border-radius: 25px; + } + + &__download-btn:focus { + outline: 5px dotted black; + } + + &__img { + aspect-ratio: 4/3; + width: 500px; + box-shadow: 10px 11px 45px -5px rgba(66, 68, 90, 1); + border: 10px solid white; + border-radius: 20px; + transform: rotateZ(-8deg); + background-color: white; + } +} \ No newline at end of file diff --git a/styles/banner.css b/styles/banner.css index 8b378b42..c5b2e776 100644 --- a/styles/banner.css +++ b/styles/banner.css @@ -2,57 +2,46 @@ background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); padding-bottom: 100px; } - .banner__nav { min-height: 80px; justify-content: space-between; align-items: center; } - .banner__list { display: flex; align-items: center; gap: 20px; } - .banner__link { text-decoration: none; color: white; } - .banner__link:hover { color: #0ABCEB; } - .banner__logo { display: flex; align-items: center; } - .banner__hero { - justify-content: space-between; align-items: center; min-height: 550px; + justify-content: space-around; } - .banner__cta { - width: 45%; color: white; - margin-left: 6em; + width: 45%; } - .banner__heading { font-weight: 700; font-size: 2.5em; margin-bottom: 1em; max-width: 400px; } - .banner__text { max-width: 280px; line-height: 2em; } - .banner__download-btn { width: 220px; padding: 1em 2em; @@ -65,30 +54,21 @@ transition: all 250ms ease-in-out; font-size: 1rem; } - -.banner__download-btn:hover, -.banner__download-btn:focus { +.banner__download-btn:hover, .banner__download-btn:focus { background-color: #40fb9e; border-radius: 25px; } - .banner__download-btn:focus { outline: 5px dotted black; } - -.banner__img-container { - width: 50%; - display: flex; - justify-content: center; - -} - .banner__img { aspect-ratio: 4/3; width: 500px; - box-shadow: 10px 11px 45px -5px rgba(66, 68, 90, 1); + box-shadow: 10px 11px 45px -5px rgb(66, 68, 90); border: 10px solid white; border-radius: 20px; transform: rotateZ(-8deg); background-color: white; -} \ No newline at end of file +} + +/*# sourceMappingURL=banner.css.map */ diff --git a/styles/banner.css.map b/styles/banner.css.map new file mode 100644 index 00000000..d6799e7f --- /dev/null +++ b/styles/banner.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file diff --git a/styles/base.css b/styles/base.css index 3d1edede..ee2c5146 100644 --- a/styles/base.css +++ b/styles/base.css @@ -4,12 +4,16 @@ font-family: "Montserrat", sans-serif; } -.row { - width: 100%; +.container, +.cell { margin: 5px; padding: 5px; } +.row { + width: 100%; +} + .container { max-width: 1200px; margin: 0 auto; From 0aed352cc989be4012862f65d5dd11681514bca4 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Wed, 17 Dec 2025 00:32:33 +0100 Subject: [PATCH 03/11] banner.css error fix --- styles/banner.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/styles/banner.css b/styles/banner.css index c5b2e776..c618c982 100644 --- a/styles/banner.css +++ b/styles/banner.css @@ -2,46 +2,56 @@ background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); padding-bottom: 100px; } + .banner__nav { min-height: 80px; justify-content: space-between; align-items: center; } + .banner__list { display: flex; align-items: center; gap: 20px; } + .banner__link { text-decoration: none; color: white; } + .banner__link:hover { color: #0ABCEB; } + .banner__logo { display: flex; align-items: center; } + .banner__hero { align-items: center; min-height: 550px; justify-content: space-around; } + .banner__cta { color: white; width: 45%; } + .banner__heading { font-weight: 700; font-size: 2.5em; margin-bottom: 1em; max-width: 400px; } + .banner__text { max-width: 280px; line-height: 2em; } + .banner__download-btn { width: 220px; padding: 1em 2em; @@ -54,13 +64,17 @@ transition: all 250ms ease-in-out; font-size: 1rem; } -.banner__download-btn:hover, .banner__download-btn:focus { + +.banner__download-btn:hover, +.banner__download-btn:focus { background-color: #40fb9e; border-radius: 25px; } + .banner__download-btn:focus { outline: 5px dotted black; } + .banner__img { aspect-ratio: 4/3; width: 500px; @@ -71,4 +85,4 @@ background-color: white; } -/*# sourceMappingURL=banner.css.map */ +/*# sourceMappingURL=banner.css.map */ \ No newline at end of file From c1ff2be5891b8572cc134346c23ebd2fbb58a781 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Thu, 18 Dec 2025 19:05:40 +0100 Subject: [PATCH 04/11] HTML + Styles for Features section added --- index.html | 44 ++++++++++++++++++++++++++++++++- scss/banner.scss | 5 ++-- scss/features.scss | 55 +++++++++++++++++++++++++++++++++++++++++ styles/banner.css | 23 ++++------------- styles/banner.css.map | 2 +- styles/base.css | 14 ++++++----- styles/features.css | 50 +++++++++++++++++++++++++++++++++++++ styles/features.css.map | 1 + 8 files changed, 166 insertions(+), 28 deletions(-) create mode 100644 scss/features.scss create mode 100644 styles/features.css create mode 100644 styles/features.css.map diff --git a/index.html b/index.html index d0a65f71..a8a25bff 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,10 @@ rel="stylesheet" href="./styles/banner.css" > + nova | Template @@ -53,7 +57,7 @@ +
+
+

Features

+
+
+
+
+ Phone icon +
+

Responsive

+

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

+
+
+
+ Tools icon +
+

Customizable

+

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

+
+
+
+ Medal icon +
+

Slick and beautiful design

+

Trendy and fresh design, fits any website.

+
+
+
+ \ No newline at end of file diff --git a/scss/banner.scss b/scss/banner.scss index adc6830b..5441f056 100644 --- a/scss/banner.scss +++ b/scss/banner.scss @@ -1,6 +1,6 @@ .banner { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); - padding-bottom: 100px; + height: 55vh; &__nav { min-height: 80px; @@ -29,9 +29,10 @@ } &__hero { - align-items: center; + align-items: flex-start; min-height: 550px; justify-content: space-around; + margin-top: 2em; } &__cta { diff --git a/scss/features.scss b/scss/features.scss new file mode 100644 index 00000000..2616f883 --- /dev/null +++ b/scss/features.scss @@ -0,0 +1,55 @@ +.features { + background-color: #000000; + color: white; + height: 40vh; + + &__heading { + display: flex; + justify-content: center; + align-items: flex-start; + height: 25%; + } + + &__title { + display: flex; + align-items: center; + font-size: 2em; + text-transform: uppercase; + font-weight: 200; + margin-top: .5em; + } + + &__container { + display: flex; + justify-content: center; + height: 75%; + column-gap: 2em; + } + + &__card { + max-width: 250px; + min-height: 320px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + text-align: center; + } + + &__icon-container { + display: flex; + align-items: center; + justify-content: center; + min-height: 80px; + min-width: 80px; + border-radius: 50%; + background-color: white; + margin-bottom: 2em; + + } + + &__name { + text-transform: uppercase; + margin-bottom: .8em; + } +} \ No newline at end of file diff --git a/styles/banner.css b/styles/banner.css index c618c982..6c416dc7 100644 --- a/styles/banner.css +++ b/styles/banner.css @@ -1,57 +1,48 @@ .banner { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); - padding-bottom: 100px; + height: 55vh; } - .banner__nav { min-height: 80px; justify-content: space-between; align-items: center; } - .banner__list { display: flex; align-items: center; gap: 20px; } - .banner__link { text-decoration: none; color: white; } - .banner__link:hover { color: #0ABCEB; } - .banner__logo { display: flex; align-items: center; } - .banner__hero { - align-items: center; + align-items: flex-start; min-height: 550px; justify-content: space-around; + margin-top: 2em; } - .banner__cta { color: white; width: 45%; } - .banner__heading { font-weight: 700; font-size: 2.5em; margin-bottom: 1em; max-width: 400px; } - .banner__text { max-width: 280px; line-height: 2em; } - .banner__download-btn { width: 220px; padding: 1em 2em; @@ -64,17 +55,13 @@ transition: all 250ms ease-in-out; font-size: 1rem; } - -.banner__download-btn:hover, -.banner__download-btn:focus { +.banner__download-btn:hover, .banner__download-btn:focus { background-color: #40fb9e; border-radius: 25px; } - .banner__download-btn:focus { outline: 5px dotted black; } - .banner__img { aspect-ratio: 4/3; width: 500px; @@ -85,4 +72,4 @@ background-color: white; } -/*# sourceMappingURL=banner.css.map */ \ No newline at end of file +/*# sourceMappingURL=banner.css.map */ diff --git a/styles/banner.css.map b/styles/banner.css.map index d6799e7f..0f5b6cc7 100644 --- a/styles/banner.css.map +++ b/styles/banner.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file diff --git a/styles/base.css b/styles/base.css index ee2c5146..0aa89144 100644 --- a/styles/base.css +++ b/styles/base.css @@ -4,12 +4,6 @@ font-family: "Montserrat", sans-serif; } -.container, -.cell { - margin: 5px; - padding: 5px; -} - .row { width: 100%; } @@ -17,9 +11,17 @@ .container { max-width: 1200px; margin: 0 auto; + padding: 5px; display: flex; } .cell { min-height: 50px; + margin: 5px; + padding: 5px; +} + +.no-wrap { + white-space: nowrap; + font: inherit; } \ No newline at end of file diff --git a/styles/features.css b/styles/features.css new file mode 100644 index 00000000..b4ce5741 --- /dev/null +++ b/styles/features.css @@ -0,0 +1,50 @@ +.features { + background-color: #000000; + color: white; + height: 40vh; +} +.features__heading { + display: flex; + justify-content: center; + align-items: flex-start; + height: 25%; +} +.features__title { + display: flex; + align-items: center; + font-size: 2em; + text-transform: uppercase; + font-weight: 200; + margin-top: 0.5em; +} +.features__container { + display: flex; + justify-content: center; + height: 75%; + column-gap: 2em; +} +.features__card { + max-width: 250px; + min-height: 320px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + text-align: center; +} +.features__icon-container { + display: flex; + align-items: center; + justify-content: center; + min-height: 80px; + min-width: 80px; + border-radius: 50%; + background-color: white; + margin-bottom: 2em; +} +.features__name { + text-transform: uppercase; + margin-bottom: 0.8em; +} + +/*# sourceMappingURL=features.css.map */ diff --git a/styles/features.css.map b/styles/features.css.map new file mode 100644 index 00000000..cb7ea047 --- /dev/null +++ b/styles/features.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA","file":"features.css"} \ No newline at end of file From 4cd8bc04d41fbca4158226b09b191b1e79768a1b Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Thu, 18 Dec 2025 19:11:16 +0100 Subject: [PATCH 05/11] fit-content styling for main elements added --- scss/banner.scss | 1 + scss/features.scss | 1 + styles/banner.css | 1 + styles/banner.css.map | 2 +- styles/features.css | 1 + styles/features.css.map | 2 +- 6 files changed, 6 insertions(+), 2 deletions(-) diff --git a/scss/banner.scss b/scss/banner.scss index 5441f056..dad28478 100644 --- a/scss/banner.scss +++ b/scss/banner.scss @@ -1,6 +1,7 @@ .banner { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); height: 55vh; + min-height: fit-content; &__nav { min-height: 80px; diff --git a/scss/features.scss b/scss/features.scss index 2616f883..82f573bb 100644 --- a/scss/features.scss +++ b/scss/features.scss @@ -2,6 +2,7 @@ background-color: #000000; color: white; height: 40vh; + min-height: fit-content; &__heading { display: flex; diff --git a/styles/banner.css b/styles/banner.css index 6c416dc7..9c3f70fe 100644 --- a/styles/banner.css +++ b/styles/banner.css @@ -1,6 +1,7 @@ .banner { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); height: 55vh; + min-height: fit-content; } .banner__nav { min-height: 80px; diff --git a/styles/banner.css.map b/styles/banner.css.map index 0f5b6cc7..1954354d 100644 --- a/styles/banner.css.map +++ b/styles/banner.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file diff --git a/styles/features.css b/styles/features.css index b4ce5741..7671b9d4 100644 --- a/styles/features.css +++ b/styles/features.css @@ -2,6 +2,7 @@ background-color: #000000; color: white; height: 40vh; + min-height: fit-content; } .features__heading { display: flex; diff --git a/styles/features.css.map b/styles/features.css.map index cb7ea047..7384f3c0 100644 --- a/styles/features.css.map +++ b/styles/features.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA","file":"features.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA","file":"features.css"} \ No newline at end of file From 8c27b1722960ccfeef4da21fb98b067c5bd0cf14 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Thu, 18 Dec 2025 19:37:38 +0100 Subject: [PATCH 06/11] CSS: elements sizes adjusted --- scss/banner.scss | 11 ++++++----- scss/features.scss | 15 +++++++++++---- styles/banner.css | 11 ++++++----- styles/banner.css.map | 2 +- styles/features.css | 14 ++++++++++---- styles/features.css.map | 2 +- 6 files changed, 35 insertions(+), 20 deletions(-) diff --git a/scss/banner.scss b/scss/banner.scss index dad28478..835027ca 100644 --- a/scss/banner.scss +++ b/scss/banner.scss @@ -32,25 +32,26 @@ &__hero { align-items: flex-start; min-height: 550px; - justify-content: space-around; - margin-top: 2em; + justify-content: space-between; + margin-top: 3em; } &__cta { color: white; width: 45%; + margin-top: 4em; } &__heading { font-weight: 700; font-size: 2.5em; - margin-bottom: 1em; + margin-bottom: .5em; max-width: 400px; } &__text { max-width: 280px; - line-height: 2em; + line-height: 2; } &__download-btn { @@ -61,7 +62,7 @@ border: none; outline: none; border-radius: 10px; - margin: 2em 0; + margin: 1.4em 0; transition: all 250ms ease-in-out; font-size: 1rem; } diff --git a/scss/features.scss b/scss/features.scss index 82f573bb..4c7e5de6 100644 --- a/scss/features.scss +++ b/scss/features.scss @@ -17,22 +17,22 @@ font-size: 2em; text-transform: uppercase; font-weight: 200; - margin-top: .5em; + margin-top: 1.5em; } &__container { display: flex; justify-content: center; height: 75%; - column-gap: 2em; + column-gap: 2.5em; } &__card { - max-width: 250px; + max-width: 230px; min-height: 320px; display: flex; flex-direction: column; - justify-content: flex-start; + justify-content: center; align-items: center; text-align: center; } @@ -52,5 +52,12 @@ &__name { text-transform: uppercase; margin-bottom: .8em; + font-size: 14px; + font-weight: 500; + } + + &__text { + color: rgba(255, 255, 255, 0.750); + font-size: 14px; } } \ No newline at end of file diff --git a/styles/banner.css b/styles/banner.css index 9c3f70fe..d7c53953 100644 --- a/styles/banner.css +++ b/styles/banner.css @@ -27,22 +27,23 @@ .banner__hero { align-items: flex-start; min-height: 550px; - justify-content: space-around; - margin-top: 2em; + justify-content: space-between; + margin-top: 3em; } .banner__cta { color: white; width: 45%; + margin-top: 4em; } .banner__heading { font-weight: 700; font-size: 2.5em; - margin-bottom: 1em; + margin-bottom: 0.5em; max-width: 400px; } .banner__text { max-width: 280px; - line-height: 2em; + line-height: 2; } .banner__download-btn { width: 220px; @@ -52,7 +53,7 @@ border: none; outline: none; border-radius: 10px; - margin: 2em 0; + margin: 1.4em 0; transition: all 250ms ease-in-out; font-size: 1rem; } diff --git a/styles/banner.css.map b/styles/banner.css.map index 1954354d..881a0e0c 100644 --- a/styles/banner.css.map +++ b/styles/banner.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file diff --git a/styles/features.css b/styles/features.css index 7671b9d4..fd88d961 100644 --- a/styles/features.css +++ b/styles/features.css @@ -16,20 +16,20 @@ font-size: 2em; text-transform: uppercase; font-weight: 200; - margin-top: 0.5em; + margin-top: 1.5em; } .features__container { display: flex; justify-content: center; height: 75%; - column-gap: 2em; + column-gap: 2.5em; } .features__card { - max-width: 250px; + max-width: 230px; min-height: 320px; display: flex; flex-direction: column; - justify-content: flex-start; + justify-content: center; align-items: center; text-align: center; } @@ -46,6 +46,12 @@ .features__name { text-transform: uppercase; margin-bottom: 0.8em; + font-size: 14px; + font-weight: 500; +} +.features__text { + color: rgba(255, 255, 255, 0.75); + font-size: 14px; } /*# sourceMappingURL=features.css.map */ diff --git a/styles/features.css.map b/styles/features.css.map index 7384f3c0..d5756b7f 100644 --- a/styles/features.css.map +++ b/styles/features.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA","file":"features.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA","file":"features.css"} \ No newline at end of file From 14a4103d55c4ba659f9a8d66d30ca410bfe78cd0 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Fri, 19 Dec 2025 20:34:30 +0100 Subject: [PATCH 07/11] about and clients sections added (HTML and CSS applied) --- index.html | 35 +++++++++++++++++++++++++++++++---- scss/about.scss | 33 +++++++++++++++++++++++++++++++++ scss/clients.scss | 9 +++++++++ scss/features.scss | 8 ++------ styles/about.css | 30 ++++++++++++++++++++++++++++++ styles/about.css.map | 1 + styles/base.css | 4 ++++ styles/clients.css | 10 ++++++++++ styles/clients.css.map | 1 + styles/features.css | 7 ++----- styles/features.css.map | 2 +- 11 files changed, 124 insertions(+), 16 deletions(-) create mode 100644 scss/about.scss create mode 100644 scss/clients.scss create mode 100644 styles/about.css create mode 100644 styles/about.css.map create mode 100644 styles/clients.css create mode 100644 styles/clients.css.map diff --git a/index.html b/index.html index a8a25bff..096e5f63 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,14 @@ rel="stylesheet" href="./styles/features.css" > + + nova | Template @@ -74,7 +82,7 @@

Beautiful Free Nova tem
-

Features

+

Features

@@ -84,7 +92,7 @@

Features

alt="Phone icon" >
-

Responsive

+

Responsive

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

@@ -94,7 +102,7 @@

Responsive

alt="Tools icon" >
-

Customizable

+

Customizable

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

@@ -104,12 +112,31 @@

Customizable

alt="Medal icon" >
-

Slick and beautiful design

+

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!

+
+
+
\ No newline at end of file diff --git a/scss/about.scss b/scss/about.scss new file mode 100644 index 00000000..52cce881 --- /dev/null +++ b/scss/about.scss @@ -0,0 +1,33 @@ +.about { + display: flex; + width: 100%; + height: 1000px; + justify-content: space-between; + padding: 3em 5px; + + &__img-container { + background: url(./../images/imac.png) center/contain no-repeat; + width: 55%; + } + + &__content { + width: 40%; + margin-top: 3em; + display: flex; + align-items: flex-start; + justify-items: flex-start; + } + + &__content-container { + width: 60%; + } + + &__title { + margin-bottom: 1em; + font-size: 2em; + } + + &__text { + line-height: 2; + } +} \ No newline at end of file diff --git a/scss/clients.scss b/scss/clients.scss new file mode 100644 index 00000000..ad0ab6ec --- /dev/null +++ b/scss/clients.scss @@ -0,0 +1,9 @@ +.clients { + width: 100%; + height: 5vh; + + &__banner { + background: url(./../images/logos.png) center no-repeat; + height: 100%; + } +} \ No newline at end of file diff --git a/scss/features.scss b/scss/features.scss index 4c7e5de6..16323e85 100644 --- a/scss/features.scss +++ b/scss/features.scss @@ -7,17 +7,14 @@ &__heading { display: flex; justify-content: center; - align-items: flex-start; + align-items: flex-end; height: 25%; } &__title { - display: flex; - align-items: center; font-size: 2em; text-transform: uppercase; font-weight: 200; - margin-top: 1.5em; } &__container { @@ -46,11 +43,10 @@ border-radius: 50%; background-color: white; margin-bottom: 2em; - + box-shadow: 0px 0px 100px -12px rgba(255, 255, 255, 1); } &__name { - text-transform: uppercase; margin-bottom: .8em; font-size: 14px; font-weight: 500; diff --git a/styles/about.css b/styles/about.css new file mode 100644 index 00000000..745cdb38 --- /dev/null +++ b/styles/about.css @@ -0,0 +1,30 @@ +.about { + display: flex; + width: 100%; + height: 1000px; + justify-content: space-between; + padding: 3em 5px; +} +.about__img-container { + background: url(./../images/imac.png) center/contain no-repeat; + width: 55%; +} +.about__content { + width: 40%; + margin-top: 3em; + display: flex; + align-items: flex-start; + justify-items: flex-start; +} +.about__content-container { + width: 60%; +} +.about__title { + margin-bottom: 1em; + font-size: 2em; +} +.about__text { + line-height: 2; +} + +/*# sourceMappingURL=about.css.map */ diff --git a/styles/about.css.map b/styles/about.css.map new file mode 100644 index 00000000..195dabbf --- /dev/null +++ b/styles/about.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/about.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE","file":"about.css"} \ No newline at end of file diff --git a/styles/base.css b/styles/base.css index 0aa89144..3c6046a6 100644 --- a/styles/base.css +++ b/styles/base.css @@ -24,4 +24,8 @@ .no-wrap { white-space: nowrap; font: inherit; +} + +.uppercase { + text-transform: uppercase; } \ No newline at end of file diff --git a/styles/clients.css b/styles/clients.css new file mode 100644 index 00000000..dcf7fd87 --- /dev/null +++ b/styles/clients.css @@ -0,0 +1,10 @@ +.clients { + width: 100%; + height: 5vh; +} +.clients__banner { + background: url(./../images/logos.png) center no-repeat; + height: 100%; +} + +/*# sourceMappingURL=clients.css.map */ diff --git a/styles/clients.css.map b/styles/clients.css.map new file mode 100644 index 00000000..a7d948c6 --- /dev/null +++ b/styles/clients.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/clients.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA","file":"clients.css"} \ No newline at end of file diff --git a/styles/features.css b/styles/features.css index fd88d961..315786c8 100644 --- a/styles/features.css +++ b/styles/features.css @@ -7,16 +7,13 @@ .features__heading { display: flex; justify-content: center; - align-items: flex-start; + align-items: flex-end; height: 25%; } .features__title { - display: flex; - align-items: center; font-size: 2em; text-transform: uppercase; font-weight: 200; - margin-top: 1.5em; } .features__container { display: flex; @@ -42,9 +39,9 @@ border-radius: 50%; background-color: white; margin-bottom: 2em; + box-shadow: 0px 0px 100px -12px rgb(255, 255, 255); } .features__name { - text-transform: uppercase; margin-bottom: 0.8em; font-size: 14px; font-weight: 500; diff --git a/styles/features.css.map b/styles/features.css.map index d5756b7f..45b2ed2a 100644 --- a/styles/features.css.map +++ b/styles/features.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA","file":"features.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA","file":"features.css"} \ No newline at end of file From 8227983767e9efca1a75f0550dc9787af225b07e Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Fri, 19 Dec 2025 20:45:53 +0100 Subject: [PATCH 08/11] about sizing adjustment + clients bg color --- scss/about.scss | 13 +++++++------ scss/clients.scss | 1 + styles/about.css | 13 +++++++------ styles/about.css.map | 2 +- styles/clients.css | 1 + styles/clients.css.map | 2 +- 6 files changed, 18 insertions(+), 14 deletions(-) diff --git a/scss/about.scss b/scss/about.scss index 52cce881..7090c521 100644 --- a/scss/about.scss +++ b/scss/about.scss @@ -1,25 +1,26 @@ .about { display: flex; width: 100%; - height: 1000px; + height: 800px; justify-content: space-between; padding: 3em 5px; &__img-container { - background: url(./../images/imac.png) center/contain no-repeat; - width: 55%; + background: url(./../images/imac.png) right/contain no-repeat; + flex-basis: 50%; } &__content { - width: 40%; - margin-top: 3em; + flex-basis: 50%; + margin-top: 2em; display: flex; align-items: flex-start; justify-items: flex-start; } &__content-container { - width: 60%; + max-width: 550px; + padding-left: 5em; } &__title { diff --git a/scss/clients.scss b/scss/clients.scss index ad0ab6ec..e39dd3a3 100644 --- a/scss/clients.scss +++ b/scss/clients.scss @@ -1,6 +1,7 @@ .clients { width: 100%; height: 5vh; + background-color: rgb(245, 245, 245); &__banner { background: url(./../images/logos.png) center no-repeat; diff --git a/styles/about.css b/styles/about.css index 745cdb38..29055eb1 100644 --- a/styles/about.css +++ b/styles/about.css @@ -1,23 +1,24 @@ .about { display: flex; width: 100%; - height: 1000px; + height: 800px; justify-content: space-between; padding: 3em 5px; } .about__img-container { - background: url(./../images/imac.png) center/contain no-repeat; - width: 55%; + background: url(./../images/imac.png) right/contain no-repeat; + flex-basis: 50%; } .about__content { - width: 40%; - margin-top: 3em; + flex-basis: 50%; + margin-top: 2em; display: flex; align-items: flex-start; justify-items: flex-start; } .about__content-container { - width: 60%; + max-width: 550px; + padding-left: 5em; } .about__title { margin-bottom: 1em; diff --git a/styles/about.css.map b/styles/about.css.map index 195dabbf..b6d2d887 100644 --- a/styles/about.css.map +++ b/styles/about.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/about.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE","file":"about.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/about.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE","file":"about.css"} \ No newline at end of file diff --git a/styles/clients.css b/styles/clients.css index dcf7fd87..9799c8a3 100644 --- a/styles/clients.css +++ b/styles/clients.css @@ -1,6 +1,7 @@ .clients { width: 100%; height: 5vh; + background-color: rgb(245, 245, 245); } .clients__banner { background: url(./../images/logos.png) center no-repeat; diff --git a/styles/clients.css.map b/styles/clients.css.map index a7d948c6..f1d2a104 100644 --- a/styles/clients.css.map +++ b/styles/clients.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/clients.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA","file":"clients.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/clients.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA","file":"clients.css"} \ No newline at end of file From 6deb2e19866281ca996a42fa78ecf721c0f29a79 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Sat, 20 Dec 2025 13:57:53 +0100 Subject: [PATCH 09/11] pricing section + team section + footer done (HTML structure and CSS styling) --- index.html | 174 +++++++++++++++++++++++++++++++++++- scss/about.scss | 1 - scss/banner.scss | 1 - scss/card-section.scss | 40 +++++++++ scss/clients.scss | 1 - scss/features.scss | 1 - scss/foot.scss | 22 +++++ scss/pricing.scss | 53 +++++++++++ scss/team.scss | 44 +++++++++ styles/about.css | 1 - styles/about.css.map | 2 +- styles/banner.css | 1 - styles/banner.css.map | 2 +- styles/base.css | 5 ++ styles/card-section.css | 37 ++++++++ styles/card-section.css.map | 1 + styles/clients.css | 1 - styles/clients.css.map | 2 +- styles/features.css | 1 - styles/features.css.map | 2 +- styles/foot.css | 21 +++++ styles/foot.css.map | 1 + styles/pricing.css | 46 ++++++++++ styles/pricing.css.map | 1 + styles/team.css | 39 ++++++++ styles/team.css.map | 1 + 26 files changed, 485 insertions(+), 16 deletions(-) create mode 100644 scss/card-section.scss create mode 100644 scss/foot.scss create mode 100644 scss/pricing.scss create mode 100644 scss/team.scss create mode 100644 styles/card-section.css create mode 100644 styles/card-section.css.map create mode 100644 styles/foot.css create mode 100644 styles/foot.css.map create mode 100644 styles/pricing.css create mode 100644 styles/pricing.css.map create mode 100644 styles/team.css create mode 100644 styles/team.css.map diff --git a/index.html b/index.html index 096e5f63..3ccc6759 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,10 @@ rel="stylesheet" href="./styles/base.css" > + + + + nova | Template @@ -50,15 +66,15 @@ @@ -80,7 +96,10 @@

Beautiful Free Nova tem -
+

Features

@@ -137,6 +156,153 @@

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

The team

+
+
+
+
+
+

CTO

+ Johnny B Good +
+

The brains behind the whole operation

+
+ Twitter link + Facebook link +
+
+
+
+
+

CEO

+ Roll Over Beethoven +
+

The one that puts it all together

+
+ Twitter link + Facebook link +
+
+
+
+
+

CFO

+ Chuck Berry +
+

The guy with his hand on the wallet

+
+ Twitter link + Facebook link +
+
+
+
+ +
+
+
+ A free template by + Webscope link + +
+
+
\ No newline at end of file diff --git a/scss/about.scss b/scss/about.scss index 7090c521..aace28b1 100644 --- a/scss/about.scss +++ b/scss/about.scss @@ -1,6 +1,5 @@ .about { display: flex; - width: 100%; height: 800px; justify-content: space-between; padding: 3em 5px; diff --git a/scss/banner.scss b/scss/banner.scss index 835027ca..46f2eb13 100644 --- a/scss/banner.scss +++ b/scss/banner.scss @@ -1,7 +1,6 @@ .banner { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); height: 55vh; - min-height: fit-content; &__nav { min-height: 80px; diff --git a/scss/card-section.scss b/scss/card-section.scss new file mode 100644 index 00000000..e5d1b246 --- /dev/null +++ b/scss/card-section.scss @@ -0,0 +1,40 @@ +.card-section { + height: 800px; + + &__heading { + display: flex; + flex-direction: column; + gap: 1em; + align-items: center; + justify-content: center; + height: 25%; + } + + &__title { + font-size: 2em; + } + + &__subtitle { + color: rgb(131, 131, 131); + } + + &__container { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + height: 75%; + } + + &__card { + display: flex; + flex-direction: column; + text-align: center; + justify-content: flex-start; + align-items: center; + gap: 1em; + min-height: 440px; + min-width: 340px; + padding: 3em 2em; + } +} \ No newline at end of file diff --git a/scss/clients.scss b/scss/clients.scss index e39dd3a3..40fc023c 100644 --- a/scss/clients.scss +++ b/scss/clients.scss @@ -1,5 +1,4 @@ .clients { - width: 100%; height: 5vh; background-color: rgb(245, 245, 245); diff --git a/scss/features.scss b/scss/features.scss index 16323e85..ea5c6ef2 100644 --- a/scss/features.scss +++ b/scss/features.scss @@ -2,7 +2,6 @@ background-color: #000000; color: white; height: 40vh; - min-height: fit-content; &__heading { display: flex; diff --git a/scss/foot.scss b/scss/foot.scss new file mode 100644 index 00000000..ce3b2c2a --- /dev/null +++ b/scss/foot.scss @@ -0,0 +1,22 @@ +.foot { + background-color: #464646; + + &__container { + display: flex; + justify-content: center; + align-items: center; + color: white; + } + + &__content { + display: flex; + align-items: center; + justify-content: center; + gap: .5em; + } + + &__text { + font-size: .8em; + font-weight: 500; + } +} \ No newline at end of file diff --git a/scss/pricing.scss b/scss/pricing.scss new file mode 100644 index 00000000..9ba41544 --- /dev/null +++ b/scss/pricing.scss @@ -0,0 +1,53 @@ +.pricing { + margin-bottom: 2em; + + &__card:nth-child(2) { + box-shadow: 0px 0px 70px -9px rgba(66, 68, 90, 0.544); + border-radius: 5px; + } + + &__price-container { + display: flex; + flex-direction: column; + gap: .5em; + } + + &__name { + color: rgb(150, 150, 150); + } + + &__amount { + font-size: 2.5em; + font-weight: 700; + } + + &__period { + font-size: .6em; + } + + &__features-list { + line-height: 1.5; + min-height: 150px; + padding: 1em 0; + } + + &__feature { + font-size: .8em; + font-weight: 500; + } + + &__btn { + text-align: center; + padding: 1em 2.5em; + border-radius: .5em; + border: none; + background-color: #0ABCEB; + color: white; + transition: all 250ms ease-in-out; + } + + &__btn:hover { + transform: translateY(-5px); + background-color: #31ccf7; + } +} \ No newline at end of file diff --git a/scss/team.scss b/scss/team.scss new file mode 100644 index 00000000..2cf210a9 --- /dev/null +++ b/scss/team.scss @@ -0,0 +1,44 @@ +.cto { + background-image: url(./../images/cto.png); +} + +.ceo { + background-image: url(./../images/ceo.png); +} + +.cfo { + background-image: url(./../images/cfo.png); +} + +.team { + &__card { + padding: 5px; + } + + &__profile-picture { + min-width: 100px; + min-height: 100px; + background-size: contain; + border-radius: 50%; + } + + &__role { + color: rgb(150, 150, 150); + margin-top: 1.5em; + margin-bottom: .4em; + } + + &__name { + font-weight: 700; + } + + &__description { + font-size: .8em; + color: rgb(150, 150, 150); + } + + &__sm-container { + display: flex; + gap: 1em; + } +} \ No newline at end of file diff --git a/styles/about.css b/styles/about.css index 29055eb1..b1010e0c 100644 --- a/styles/about.css +++ b/styles/about.css @@ -1,6 +1,5 @@ .about { display: flex; - width: 100%; height: 800px; justify-content: space-between; padding: 3em 5px; diff --git a/styles/about.css.map b/styles/about.css.map index b6d2d887..dd7d63ee 100644 --- a/styles/about.css.map +++ b/styles/about.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/about.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE","file":"about.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/about.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE","file":"about.css"} \ No newline at end of file diff --git a/styles/banner.css b/styles/banner.css index d7c53953..847ede73 100644 --- a/styles/banner.css +++ b/styles/banner.css @@ -1,7 +1,6 @@ .banner { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); height: 55vh; - min-height: fit-content; } .banner__nav { min-height: 80px; diff --git a/styles/banner.css.map b/styles/banner.css.map index 881a0e0c..6d5ba351 100644 --- a/styles/banner.css.map +++ b/styles/banner.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"banner.css"} \ No newline at end of file diff --git a/styles/base.css b/styles/base.css index 3c6046a6..415ca5e6 100644 --- a/styles/base.css +++ b/styles/base.css @@ -4,8 +4,13 @@ font-family: "Montserrat", sans-serif; } +html { + scroll-behavior: smooth; +} + .row { width: 100%; + min-height: fit-content; } .container { diff --git a/styles/card-section.css b/styles/card-section.css new file mode 100644 index 00000000..96cd3165 --- /dev/null +++ b/styles/card-section.css @@ -0,0 +1,37 @@ +.card-section { + height: 800px; +} +.card-section__heading { + display: flex; + flex-direction: column; + gap: 1em; + align-items: center; + justify-content: center; + height: 25%; +} +.card-section__title { + font-size: 2em; +} +.card-section__subtitle { + color: rgb(131, 131, 131); +} +.card-section__container { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + height: 75%; +} +.card-section__card { + display: flex; + flex-direction: column; + text-align: center; + justify-content: flex-start; + align-items: center; + gap: 1em; + min-height: 440px; + min-width: 340px; + padding: 3em 2em; +} + +/*# sourceMappingURL=card-section.css.map */ diff --git a/styles/card-section.css.map b/styles/card-section.css.map new file mode 100644 index 00000000..f2c3ea9d --- /dev/null +++ b/styles/card-section.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/card-section.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"card-section.css"} \ No newline at end of file diff --git a/styles/clients.css b/styles/clients.css index 9799c8a3..3eb42e96 100644 --- a/styles/clients.css +++ b/styles/clients.css @@ -1,5 +1,4 @@ .clients { - width: 100%; height: 5vh; background-color: rgb(245, 245, 245); } diff --git a/styles/clients.css.map b/styles/clients.css.map index f1d2a104..a7d948c6 100644 --- a/styles/clients.css.map +++ b/styles/clients.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/clients.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA","file":"clients.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/clients.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA","file":"clients.css"} \ No newline at end of file diff --git a/styles/features.css b/styles/features.css index 315786c8..56b6a452 100644 --- a/styles/features.css +++ b/styles/features.css @@ -2,7 +2,6 @@ background-color: #000000; color: white; height: 40vh; - min-height: fit-content; } .features__heading { display: flex; diff --git a/styles/features.css.map b/styles/features.css.map index 45b2ed2a..de4f1d96 100644 --- a/styles/features.css.map +++ b/styles/features.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA","file":"features.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/features.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA","file":"features.css"} \ No newline at end of file diff --git a/styles/foot.css b/styles/foot.css new file mode 100644 index 00000000..54b086e9 --- /dev/null +++ b/styles/foot.css @@ -0,0 +1,21 @@ +.foot { + background-color: #464646; +} +.foot__container { + display: flex; + justify-content: center; + align-items: center; + color: white; +} +.foot__content { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5em; +} +.foot__text { + font-size: 0.8em; + font-weight: 500; +} + +/*# sourceMappingURL=foot.css.map */ diff --git a/styles/foot.css.map b/styles/foot.css.map new file mode 100644 index 00000000..b0bd3628 --- /dev/null +++ b/styles/foot.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/foot.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA","file":"foot.css"} \ No newline at end of file diff --git a/styles/pricing.css b/styles/pricing.css new file mode 100644 index 00000000..7f99c7d8 --- /dev/null +++ b/styles/pricing.css @@ -0,0 +1,46 @@ +.pricing { + margin-bottom: 2em; +} +.pricing__card:nth-child(2) { + box-shadow: 0px 0px 70px -9px rgba(66, 68, 90, 0.544); + border-radius: 5px; +} +.pricing__price-container { + display: flex; + flex-direction: column; + gap: 0.5em; +} +.pricing__name { + color: rgb(150, 150, 150); +} +.pricing__amount { + font-size: 2.5em; + font-weight: 700; +} +.pricing__period { + font-size: 0.6em; +} +.pricing__features-list { + line-height: 1.5; + min-height: 150px; + padding: 1em 0; +} +.pricing__feature { + font-size: 0.8em; + font-weight: 500; +} +.pricing__btn { + text-align: center; + padding: 1em 2.5em; + border-radius: 0.5em; + border: none; + background-color: #0ABCEB; + color: white; + transition: all 250ms ease-in-out; +} +.pricing__btn:hover { + transform: translateY(-5px); + background-color: #31ccf7; +} + +/*# sourceMappingURL=pricing.css.map */ diff --git a/styles/pricing.css.map b/styles/pricing.css.map new file mode 100644 index 00000000..a1efad08 --- /dev/null +++ b/styles/pricing.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/pricing.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA","file":"pricing.css"} \ No newline at end of file diff --git a/styles/team.css b/styles/team.css new file mode 100644 index 00000000..ea83e90d --- /dev/null +++ b/styles/team.css @@ -0,0 +1,39 @@ +.cto { + background-image: url(./../images/cto.png); +} + +.ceo { + background-image: url(./../images/ceo.png); +} + +.cfo { + background-image: url(./../images/cfo.png); +} + +.team__card { + padding: 5px; +} +.team__profile-picture { + min-width: 100px; + min-height: 100px; + background-size: contain; + border-radius: 50%; +} +.team__role { + color: rgb(150, 150, 150); + margin-top: 1.5em; + margin-bottom: 0.4em; +} +.team__name { + font-weight: 700; +} +.team__description { + font-size: 0.8em; + color: rgb(150, 150, 150); +} +.team__sm-container { + display: flex; + gap: 1em; +} + +/*# sourceMappingURL=team.css.map */ diff --git a/styles/team.css.map b/styles/team.css.map new file mode 100644 index 00000000..b927a279 --- /dev/null +++ b/styles/team.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/team.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"team.css"} \ No newline at end of file From 58f88218506100f774baabeaaab8d1859bccc476 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Sat, 20 Dec 2025 14:07:06 +0100 Subject: [PATCH 10/11] bg color added to pricing section --- scss/pricing.scss | 1 + styles/pricing.css | 1 + styles/pricing.css.map | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/scss/pricing.scss b/scss/pricing.scss index 9ba41544..9b90051d 100644 --- a/scss/pricing.scss +++ b/scss/pricing.scss @@ -1,5 +1,6 @@ .pricing { margin-bottom: 2em; + background-color: rgb(245, 245, 245); &__card:nth-child(2) { box-shadow: 0px 0px 70px -9px rgba(66, 68, 90, 0.544); diff --git a/styles/pricing.css b/styles/pricing.css index 7f99c7d8..d253c201 100644 --- a/styles/pricing.css +++ b/styles/pricing.css @@ -1,5 +1,6 @@ .pricing { margin-bottom: 2em; + background-color: rgb(245, 245, 245); } .pricing__card:nth-child(2) { box-shadow: 0px 0px 70px -9px rgba(66, 68, 90, 0.544); diff --git a/styles/pricing.css.map b/styles/pricing.css.map index a1efad08..bbf77cb8 100644 --- a/styles/pricing.css.map +++ b/styles/pricing.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/pricing.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA","file":"pricing.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/pricing.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA","file":"pricing.css"} \ No newline at end of file From 4db4a33554428046c54e1f513f187553d0b55f52 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Mon, 22 Dec 2025 09:42:54 +0100 Subject: [PATCH 11/11] added Semantic HTML lists --- index.html | 76 +++++++++++++++++++++++++++--------------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 3ccc6759..cea3c666 100644 --- a/index.html +++ b/index.html @@ -100,11 +100,11 @@

Beautiful Free Nova tem class="features row" id="features" > -
+

Features

-
-
-
+ +
    +
  • Features

Responsive

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

- -
+ +
  • Responsive

    • Customizable

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

    - -
    + +
  • Customizable

    • Slick and beautiful design

    Trendy and fresh design, fits any website.

    - - + +
    @@ -147,13 +147,13 @@

    Slick 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 fun and good luck!

    -
    +

    @@ -161,17 +161,17 @@

    Simple and beautiful

    class="card-section row pricing" id="pricing" > -
    +

    Choose your pricing plan

    Pick any of our super affordable pricing plans

    -
    -
    -
    -
    + +
      +
    • +

      Basic

      $15

      per month

      -
    +
    • Up to 7 Projects
      • @@ -182,13 +182,13 @@

      Basic

      type="button" class="pricing__btn" >Get Started -
    -
    -
    + +
  • +

    agency

    $55

    per month

    -
    • +
    • Up to 25 Projects
      • @@ -200,13 +200,13 @@

      agency

      type="button" class="pricing__btn" >Get Started -
    -
    -
    + +
  • +

    pro

    $75

    per month

    -
    • +
    • Up to 25 Projects
      • @@ -219,19 +219,19 @@

      pro

      type="button" class="pricing__btn" >Get Started -
    -
    + +
    -
    +

    The team

    -
    -
    -
    + +
      +

    • CTO

      @@ -248,8 +248,8 @@

      CTO

      alt="Facebook link" >
      -
    -
    + +

  • CEO

    @@ -266,8 +266,8 @@

    CEO

    alt="Facebook link" >
    -
    • -
    + +

  • CFO

    @@ -284,8 +284,8 @@

    CFO

    alt="Facebook link" >
    -
    • -
    + +