From 4914a4d8e2cdf7a7707a6b8970f94b803e65cfb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magdalena=20Ko=C5=82tuniak?= Date: Thu, 25 Dec 2025 20:08:32 +0100 Subject: [PATCH 1/3] add static web page based on Webscope project --- index.html | 193 ++++++++++++++++++++ styles/index.css | 425 +++++++++++++++++++++++++++++++++++++++++++ styles/normalize.css | 353 +++++++++++++++++++++++++++++++++++ styles/reset.css | 293 +++++++++++++++++++++++++++++ 4 files changed, 1264 insertions(+) create mode 100644 index.html create mode 100644 styles/index.css create mode 100644 styles/normalize.css create mode 100644 styles/reset.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..a4b66d04 --- /dev/null +++ b/index.html @@ -0,0 +1,193 @@ + + + + + + + + + + + + + + Nova Page + + + +
+
+ + + +
+
+
+

Beautiful Free Nova
template

+

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

+ +
+
+
+ screen poglądowej strony +
+
+
+
+
+
+
+

Features

+
+
+
+
+ phone icon +
+

Fully responsive

+

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

+
+
+
+ customizable icon +
+

Customizable

+

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

+
+
+
+ design icon +
+

Slick and beautiful design

+

Trendy and fresh design, fits any website.

+
+ +
+
+ +
+
+ logos +
+
+ +
+
+ Apple iMac computer +
+

Simple and beautiful

+

Use Nova theme for your 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

+

$15per month

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

Agency

+

$55per month

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

Pro

+

$75per month

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

The team

+
+
+
+ photo of Johnny B Good +

CTO

+

Johnny B Good

+

The brains behind the whole operation

+
+ + Twitter icon + + + Facebook icon + +
+
+
+ photo of Johnny B Good +

CEO

+

Roll Over Beethoven

+

The one that puts it all together

+
+ + Twitter icon + + + Facebook icon + +
+
+
+ photo of Johnny B Good +

CFO

+

Chuck Berry

+

The guy with his hand on the wallet

+
+ + Twitter icon + + + Facebook icon + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..b893eb5a --- /dev/null +++ b/styles/index.css @@ -0,0 +1,425 @@ +:root { + --color-white: #ffffff; + --color-black: #000000; + --color-gray-light: rgb(248, 249, 249); + --color-gray-dark: rgb(70, 70, 70); + + --color-green: rgb(37, 241, 139); + --color-blue: rgb(10, 188, 235); + --color-hover: rgb(187, 75, 134); +} + +html { + font-size: 10px; +} + +body { + font-family: 'Montserrat', sans-serif; + color: var(--color-white); +} + +.container { + width: 100%; +} + +.box { + margin: 0 auto; + max-width: 1150px; +} + +/* header */ + +.header { + height: 720px; + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.header__nav { + display: flex; + justify-content: space-between; + align-items: center; + height: 100px; +} + +.header__logo img { + height: 30px; + margin: 0 20px; +} + +.header__menu-list { + display: flex; + list-style: none; + margin: 0; + padding: 20px; +} + +.header__menu-link { + padding: 10px 20px; + font-size: 1.6rem; + text-decoration: none; + color: inherit; + transition: 0.3s ease-in; +} + +.header__menu-link:hover { + color: var(--color-hover); +} + +/* CTA */ + +.header__cta { + display: flex; + gap: 40px; + height: 620px; +} + +.header__cta-description { + flex-basis: 45%; +} + +.header__title { + margin: 90px 20px 20px; + font-weight: bold; + font-size: 4rem; +} + +.header__text { + margin: 0 70px 0 20px; + max-width: 300px; + font-size: 1.8rem; + line-height: 3rem; +} + +.header__btn { + padding: 20px 50px; + margin: 30px 20px; + color: var(--color-white); + font-weight: bold; + background-color: var(--color-green); + border: none; + border-radius: 15px; +} + +.header__cta-image { + display: flex; + justify-content: center; + flex-basis: 55%; + margin-top: 50px; +} + +.header__image-bg { + display: flex; + align-items: flex-start; + border-radius: 20px; + padding: 20px; + width: 550px; + height: 430px; + background-color: var(--color-white); + transform: rotate(-6deg); +} + +.header__image { + width: 100%; + height: auto; +} + +/* main */ +/* section features */ + +.features { + height: 520px; + background-color: var(--color-black); +} + +.features__header { + padding: 20px 40px; + text-align: center; +} + +.features__title { + margin-top: 40px; + text-transform: uppercase; + font-size: 3rem; +} + +.features__cards { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 50px; +} + +.feature-card { + display: flex; + flex-direction: column; + text-align: center; + width: 23%; + margin-top: 20px; + padding: 20px; + min-height: 230px; + font-size: 1.4rem; + line-height: 2rem; +} + +.feature-card__bg { + display: flex; + justify-content: center; + align-self: center; + height: 80px; + width: 80px; + background-color: var(--color-white); + border-radius: 50%; +} + +.feature-card__icon { + width: 25px; + height: auto; +} + +.feature-card__title { + text-transform: uppercase; + margin-top: 20px; + font-size: 1.4rem; +} + +.feature-card__description { + margin-top: 15px; + text-align: center; +} + +/* section logos */ + +.logos { + display: flex; + justify-content: center; + align-items: center; + height: 100px; + background-color: var(--color-gray-light); +} + +/* section usage */ + +.usage { + color: var(--color-gray-dark); + background-color: var(--color-white); +} + +.usage__box { + display: flex; + align-items: center; + padding: 20px; + gap: 70px; + height: 650px; +} + +.usage__image { + height: 85%; + width: auto; + flex-shrink: 0; +} + +.usage__content { + display: flex; + flex-direction: column; + height: 100%; +} + +.usage__title { + margin-top: 40px; + padding: 40px 20px; + text-transform: uppercase; + font-size: 3rem; +} + +.usage__text { + padding: 0 20px; + line-height: 3rem; + font-size: 1.6rem; +} + +/* section pricing */ + +.pricing { + padding: 20px; + min-height: 750px; + color: var(--color-gray-dark); + background-color: var(--color-gray-light); +} + +.pricing__header { + text-align: center; +} + +.pricing__title { + margin-top: 40px; + padding: 20px; + text-transform: uppercase; + font-size: 3rem; +} + +.pricing__subtitle { + font-size: 1.6rem; + margin-top: 10px; +} + +.pricing__options { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 70px; +} + +.pricing-card { + display: flex; + flex-direction: column; + padding: 20px; + margin-top: 10px; + width: 28%; + min-height: 430px; + text-align: center; + border-radius: 5px; +} + +.pricing-card--active { + box-shadow: 0 0 35px rgba(70, 70, 70, 0.2); +} + +.pricing-card__title { + margin-top: 20px; + padding: 20px; + text-transform: uppercase; + font-size: 2rem; +} + +.pricing-card__price { + font-size: 1.2rem; +} + +.pricing-card__price-value { + display: block; + padding-bottom: 5px; + font-size: 4.5rem; + font-weight: bold; +} + +.pricing-card__list { + margin-top: 30px; + line-height: 2rem; +} + +.pricing-card__btn { + align-self: center; + max-width: 60%; + margin-top: auto; + margin-bottom: 25px; + padding: 20px 40px; + border: none; + border-radius: 10px; + color: var(--color-gray-light); + background-color: var(--color-blue); + font-size: 1.4rem; +} + +/* section team */ + +.team { + min-height: 700px; + padding: 20px; + color: var(--color-gray-dark); + background-color: var(--color-white); +} + +.team__header { + text-align: center; +} + +.team__title { + margin-top: 40px; + padding: 20px; + text-transform: uppercase; + font-size: 3rem; +} + +.team__members { + display: flex; + justify-content: center; + margin-top: 70px; +} + +.team-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + min-height: 430px; + width: 28%; + text-align: center; + border-radius: 5px; +} + +.team-card__image { + margin-top: 20px; + max-width: 45%; + max-height: 45%; +} + +.team-card__role { + margin-top: 30px; + text-transform: uppercase; +} + +.team-card__name { + margin-top: 10px; + font-weight: bold; + font-size: 1.6rem; +} + +.team-card__description { + margin-top: 10px; + font-size: 1.4rem; + line-height: 2.2rem; +} + +.team-card__links { + margin-top: 15px; + display: flex; + gap: 5px; +} + +.team-card__links a { + display: flex; + justify-content: center; + align-items: center; + padding: 0 10px; + text-decoration: none; +} + +/* footer */ + +.footer { + display: flex; + justify-content: center; + align-items: center; + height: 90px; + color: var(--color-gray-light); + background-color: var(--color-gray-dark); + font-size: 1.2rem; +} + +.footer__box { + display: flex; + justify-content: center; + align-items: center; +} + +.footer__copyright { + display: flex; + justify-content: center; + align-items: center; +} + +.footer__logo { + margin-left: 10px; + height: 30px; + width: auto; +} diff --git a/styles/normalize.css b/styles/normalize.css new file mode 100644 index 00000000..f08f949a --- /dev/null +++ b/styles/normalize.css @@ -0,0 +1,353 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type='button'], +[type='reset'], +/* [type='submit'] { + -webkit-appearance: button; +} */ + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type='checkbox'], +[type='radio'] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type='search'] { + /* -webkit-appearance: textfield; 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..404d9af1 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,293 @@ +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: 0.8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: 0.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); +} + +@media screen and (max-width: 480px) { +} + +@media print { +} From a229fafe9baff57290d0529ddc0821b21dc86c64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magdalena=20Ko=C5=82tuniak?= Date: Mon, 5 Jan 2026 12:28:37 +0100 Subject: [PATCH 2/3] refactor: fixes according to comments from PR --- index.html | 83 ++++++++++++++++++++++++------------------------ styles/index.css | 8 ++--- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index a4b66d04..50530f4a 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + @@ -17,17 +17,17 @@
- + -
-
+

Beautiful Free Nova
template

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

@@ -38,46 +38,45 @@

Beautiful Free Nova
template

screen poglądowej strony
- +
-
+

Features

-
-
-
+ +
    +
  • phone icon

    Fully responsive

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

    -
-
+ +
  • customizable icon

    Customizable

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

    -
    • -
    + +
  • design icon

    Slick and beautiful design

    Trendy and fresh design, fits any website.

    -
    • - -
    + +
    -
    +
    +
    @@ -93,13 +92,13 @@

    Simple and beautiful

    -
    +

    Choose your pricing plan

    Pick any of our super affordable pricing plans

    -
    + -
    -
    +
      +

    • Basic

      $15per month

        @@ -107,8 +106,8 @@

        Basic

      • 2 Additional Developers
      -
    -
    + +

  • Agency

    $55per month

      @@ -117,8 +116,8 @@

      Agency

    • Unlimited Support
    -
    • -
    + +

  • Pro

    $75per month

      @@ -128,16 +127,16 @@

      Pro

    • 1.5GB Disk Space
    -
    • -
    + +
    -
    +

    The team

    -
    -
    -
    + +
      +
    • photo of Johnny B Good

      CTO

      Johnny B Good

      @@ -150,8 +149,8 @@

      CTO

      Facebook icon
    -
    -
    + +
  • photo of Johnny B Good

    CEO

    Roll Over Beethoven

    @@ -164,8 +163,8 @@

    CEO

    Facebook icon
    • - -
    + +
  • photo of Johnny B Good

    CFO

    Chuck Berry

    @@ -178,8 +177,8 @@

    CFO

    Facebook icon
    • - - + +