From e3a635953eb8d28e1a939b663e949d67cdd2e7cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daria=20Se=C5=84ko?= Date: Mon, 13 Jan 2025 19:34:50 +0100 Subject: [PATCH 1/5] struktura strony --- index.html | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ main.css | 46 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 index.html create mode 100644 main.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..7308c5fe --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + + Document + + + +
+
+

+ +
+
+
+
+
+
+
+
+
+

FEATURES

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

CHOOSE YOUR PRICING PLAN

+
+
+
+
+
+
+
+

THE TEAM

+
+
+
+
+
+
+ + + diff --git a/main.css b/main.css new file mode 100644 index 00000000..8eb8f0f4 --- /dev/null +++ b/main.css @@ -0,0 +1,46 @@ +.green { + width: 100%; + border: 5px solid green; + margin: 10px; + padding: 5px 0; +} +.blue { + max-width: 1150px; + border: 5px solid blue; + margin: 0 auto; + padding: 5px 0; +} +.orange { + background-color: orange; + min-height: 50px; +} + +.green--header .blue { + display: flex; + justify-content: space-between; + padding-top: 2px; + padding-bottom: 5px; +} +.orange--logo { + width: 160px; +} +.orange--nav { + width: 300px; +} +.green--main .blue { + display: flex; + justify-content: space-between; +} +.green--main .orange { + width: 48%; + min-height: 400px; +} +.green--section .blue { + display: flex; + justify-content: space-around; + } + + .green--section .orange { + width: 30%; + min-height: 300px; + } \ No newline at end of file From e2f789062649455ed6ee31c09ba9d8101d177ad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daria=20Se=C5=84ko?= Date: Tue, 14 Jan 2025 16:50:59 +0100 Subject: [PATCH 2/5] struktura strony --- main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/main.css b/main.css index 8eb8f0f4..df7abb08 100644 --- a/main.css +++ b/main.css @@ -43,4 +43,5 @@ .green--section .orange { width: 30%; min-height: 300px; + display: flex; } \ No newline at end of file From 54da54a6e4499ff69271459b8a6b7c41ef8879eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daria=20Se=C5=84ko?= Date: Thu, 16 Jan 2025 19:18:04 +0100 Subject: [PATCH 3/5] strona --- index.html | 167 +++++++++++++++++++++++++++++++++++++++++------------ main.css | 163 +++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 261 insertions(+), 69 deletions(-) diff --git a/index.html b/index.html index 7308c5fe..87508603 100644 --- a/index.html +++ b/index.html @@ -4,58 +4,151 @@ Document + + + -
-
-

- +
+
+

+ Logo +

+
-
-
-
-
+ +
+
+
+

Beautiful Free Nova

+

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

+ +
+
+ Screen preview +
-
-

FEATURES

-
-
-
-
+ +
+
+

Features

+
+
+ Responsive +

Fully Responsive

+

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

+
+
+ Customizable +

Customizable

+

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

+
+
+ Design +

Slick and Beautiful Design

+

Trendy and fresh design, fits any website.

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

+
+
-
-

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

+ +
+
+

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

-
-
-
-
+ +
+
+

The Team

+
+
+ CTO +

CTO Johnny B. Good

+

The brains behind the whole operation.

+
+
+ CEO +

CEO Roll Over Beethoven

+

The one that puts it all together.

+
+
+ CFO +

CFO Chuck Berry

+

The guy with his hand on the wallet.

+
+
-
+ +
+
+

© 2025 Your Company. All rights reserved.

+
+
diff --git a/main.css b/main.css index df7abb08..5ef81c45 100644 --- a/main.css +++ b/main.css @@ -1,47 +1,146 @@ -.green { - width: 100%; - border: 5px solid green; - margin: 10px; - padding: 5px 0; +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +body { + font-family: 'Montserrat', serif; + color: #fff; } -.blue { - max-width: 1150px; - border: 5px solid blue; +.container { + max-width: 1620px; margin: 0 auto; padding: 5px 0; } -.orange { - background-color: orange; - min-height: 50px; + +.logo { + width: 160px; + padding-top: 20px; } -.green--header .blue { +.header { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.header .container { display: flex; justify-content: space-between; padding-top: 2px; padding-bottom: 5px; } -.orange--logo { - width: 160px; + +.navigation { + display: flex; + justify-content: center; + align-items: center; + width: 800px; + font-weight: bold; +} + +.menu { + display: flex; + list-style: none; } -.orange--nav { - width: 300px; + +.menu li { + margin: 0 10px; } -.green--main .blue { + +.menu li a { + text-decoration: none; + color: #fff; +} + +.section-title { + font-size: 40px; + font-weight: 200; + padding-bottom: 100px; +} + +.features { + background-color: black; + padding-top: 100px; + text-align: center; + padding-bottom: 150px; + position: relative; +} +.features .container { + max-width: 1000px; + margin: auto; +} + +.features-list { display: flex; - justify-content: space-between; + justify-content: space-around; +} + +.feature-item { + width: 30%; + padding: 10px; +} + +.cta-button { + background-color: #25f18b; + color: #fff; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 20px; +} + +.partners .container { + text-align: center; + padding: 30px; + max-width: 100%; + background-color: #f9fafa; +} + +.about .container { + display: flex; + max-width: 1900px; +} +.about-description { + color: black; + padding: 80px; +} +.about-description h2 { + padding-bottom: 50px; +} + +.pricing .container { + text-align: center; + color: black; + background-color: #f8f9f9; +} + +.pricing-options { + display: flex; + justify-content: space-around; +} + +.pricing-item { + width: 30%; + padding: 10px; + border: 1px solid #ddd; +} + +.team .container { + text-align: center; + color: black; +} + +.team-members { + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +.team-member { + text-align: center; +} + +.footer .container { + text-align: center; + padding: 20px 0; + color: black; } -.green--main .orange { - width: 48%; - min-height: 400px; -} -.green--section .blue { - display: flex; - justify-content: space-around; - } - - .green--section .orange { - width: 30%; - min-height: 300px; - display: flex; - } \ No newline at end of file From b0e396ae223c59ca43e9ee96b08c55570a3eb987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daria=20Se=C5=84ko?= Date: Tue, 21 Jan 2025 18:40:35 +0100 Subject: [PATCH 4/5] strona --- index.html | 151 +++++++++++++++++++++++++++++++++++---------- main.css | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 288 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 87508603..7cf00a47 100644 --- a/index.html +++ b/index.html @@ -31,12 +31,16 @@

-

Beautiful Free Nova

-

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

- +

Beautiful Free Nova
template

+

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

+
- Screen preview + Screen preview
@@ -46,7 +50,13 @@

Beautiful Free Nova

Features

- Responsive + + Responsive +

Fully Responsive

Looks amazing on any device: smartphone, tablet, laptop, and @@ -54,14 +64,24 @@

Fully Responsive

- Customizable + + Customizable + +

Customizable

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

- Design + + Design + +

Slick and Beautiful Design

Trendy and fresh design, fits any website.

@@ -78,15 +98,16 @@

Slick and Beautiful Design

- iMac + iMac
-

Simple and Beautiful

+

SIMPLE AND BEAUTIFUL

- Use Nova theme for your next web project. It is completely - customizable so you can change any of the sections to fit your - needs. Nova Theme is free for any kind of use, personal and - commercial. Have fun and good luck! + 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!

@@ -95,25 +116,42 @@

Simple and Beautiful

Choose Your Pricing Plan

-

Pick any of our super affordable pricing plans.

+

+ Pick any of our super affordable pricing plans. +

-

Basic

-

$15 per month

-

Up to 7 Projects, 2 Additional Developers

+

BASIC

+

$15
per month

+

+ Up to 7 Projects
+ 2 Additional Developers +

-
-

Agency

-

$55 per month

-

Up to 25 Projects, 2 Additional Developers, Unlimited Support

+
+

AGENCY

+

+ $55
+ per month +

+

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

-

Pro

-

$75 per month

+

PRO

- Up to 25 Projects, 2 Additional Developers, Unlimited Support, + $75
+ per month +

+

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

@@ -128,18 +166,62 @@

The Team

CTO -

CTO Johnny B. Good

-

The brains behind the whole operation.

+

CTO
Johnny B. Good

+

+ The brains behind the whole operation. +

+
+ + +
CEO -

CEO Roll Over Beethoven

-

The one that puts it all together.

+

+ CEO
+ Roll Over Beethoven +

+

The one that puts it all together.

+
+ + + +
CFO -

CFO Chuck Berry

-

The guy with his hand on the wallet.

+

CFO
Chuck Berry

+

+ The guy with his hand on the wallet. +

+
+ + +
@@ -147,7 +229,14 @@

CFO Chuck Berry

-

© 2025 Your Company. All rights reserved.

+

+ A free template by + +

diff --git a/main.css b/main.css index 5ef81c45..8d714fc4 100644 --- a/main.css +++ b/main.css @@ -26,7 +26,17 @@ body { display: flex; justify-content: space-between; padding-top: 2px; - padding-bottom: 5px; + padding-bottom: 100px; +} + +.heading { + padding-bottom: 20px; + font-size: 40px; +} +.heading__desrciption { + font-size: 20px; + font-weight: 300; + padding-bottom: 40px; } .navigation { @@ -43,7 +53,7 @@ body { } .menu li { - margin: 0 10px; + margin: 0 20px; } .menu li a { @@ -59,7 +69,7 @@ body { .features { background-color: black; - padding-top: 100px; + padding-top: 30px; text-align: center; padding-bottom: 150px; position: relative; @@ -80,12 +90,13 @@ body { } .cta-button { - background-color: #25f18b; + background-color: #0abceb; color: #fff; border: none; - padding: 10px 20px; + padding: 20px 40px; cursor: pointer; - border-radius: 20px; + border-radius: 10px; + font-size: 18px; } .partners .container { @@ -106,11 +117,23 @@ body { .about-description h2 { padding-bottom: 50px; } - +.section-title { + padding-top: 60px; + margin-top: -10px; +} +.pricing__description { + font-size: 18px; + font-weight: 300; + margin-top: -70px; + padding-bottom: 70px; +} +.pricing { + background-color: #f8f9f9; + padding-bottom: 100px; +} .pricing .container { text-align: center; color: black; - background-color: #f8f9f9; } .pricing-options { @@ -119,9 +142,25 @@ body { } .pricing-item { + position: relative; width: 30%; padding: 10px; - border: 1px solid #ddd; + border: 1px #ddd; + min-height: 300px; +} +.pricing-item .cta-button { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); +} + +.pricing-item--details { + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + border: 1px solid #fff; + background-color: #fff; + padding: 50px; + border-radius: 10px; } .team .container { @@ -144,3 +183,123 @@ body { padding: 20px 0; color: black; } + +.hero-image { + transform: translateX(-350px) translateY(-30px) rotate(-5deg); + border: 15px solid #fff; + border-radius: 20px; + background-color: #fff; +} + +.circle { + display: flex; + align-items: center; + justify-content: center; + height: 80px; + width: 80px; + background-color: #fff; + border-radius: 50%; +} + +.circle_icon { + max-width: 50%; + max-height: 50%; + vertical-align: middle; +} + +.feature-item { + display: flex; + flex-direction: column; + align-items: center; + width: 30%; + padding: 10px; +} + +.feature-item h3 { + margin-top: 20px; + font-size: 18px; + font-weight: 400; +} + +.feature-item p { + margin-top: 10px; + font-size: 16px; + color: #fff; + font-weight: 200; +} + +.about__heading { + font-weight: 300; + font-size: 35px; +} +.about-image { + width: 40%; +} +.about-description { + width: 40%; + font-weight: 300; +} +.about .container { + justify-content: space-around; + padding: 80px; +} +.about-image img { + width: 100%; +} +.pricing__heading { + font-weight: 300; + padding: 20px; +} +.pricing__cost { + display: inline-block; + margin-bottom: 10px; + font-size: 1.5em; + font-size: 50px; + font-weight: bold; +} +.pricing__details { + padding: 20px; + font-weight: 500; + padding-bottom: 100px; +} +.team__heading { + display: inline-block; + font-weight: 300; + margin-top: 30px; + margin-bottom: 5px; +} + +.team__description { + margin-top: 20px; +} +.team__socials { + margin-top: 20px; + display: flex; + gap: 15px; + justify-content: center; +} +.team { + padding-bottom: 200px; +} + +.social-icon { + width: 15px; + height: 15px; +} +.footer { + background-color: #464646; + padding: 20px 0; + text-align: center; + font-size: 14px; +} + +.footer-logo { + width: 100px; + height: auto; + vertical-align: middle; + margin-left: 5px; +} +.footer__description { + color: #fff; + font-weight: 500; +} From 028873ec259d28fb35dbd7ecc73844d7345fc05c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daria=20Se=C5=84ko?= Date: Mon, 27 Jan 2025 17:05:35 +0100 Subject: [PATCH 5/5] zmiany --- index.html | 101 +++++++++++++++++++++++++++-------------------------- main.css | 6 ++-- 2 files changed, 55 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index 7cf00a47..3962af8e 100644 --- a/index.html +++ b/index.html @@ -13,38 +13,39 @@ -
-
-

- Logo -

- -
-
- -
-
-
-

Beautiful Free Nova
template

-

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

- -
-
- Screen preview -
-
-
+
+
+
+

+ Logo +

+ +
+
+
+
+
+

Beautiful Free Nova
template

+

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

+ +
+
+ Screen preview +
+
+
+

Features

@@ -89,17 +90,17 @@

Slick and Beautiful Design

-
+
+
-
+
iMac -
+

SIMPLE AND BEAUTIFUL

@@ -123,10 +124,10 @@

Choose Your Pricing Plan

BASIC

$15
per month

-

- Up to 7 Projects
- 2 Additional Developers -

+
    +
  • Up to 7 Projects
    • +
  • 2 Additional Developers
    • +
@@ -135,11 +136,11 @@

AGENCY

$55
per month

-

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

+
    +
  • Up to 25 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
@@ -148,12 +149,12 @@

PRO

$75
per month

-

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

+
    +
  • Up to 25 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
  • 1.5GB Disk Space
    • +
diff --git a/main.css b/main.css index 8d714fc4..7d1a7342 100644 --- a/main.css +++ b/main.css @@ -18,7 +18,7 @@ body { padding-top: 20px; } -.header { +.hero { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); } @@ -156,10 +156,11 @@ body { } .pricing-item--details { + position: relative; + width: 25%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: 1px solid #fff; background-color: #fff; - padding: 50px; border-radius: 10px; } @@ -258,6 +259,7 @@ body { font-weight: bold; } .pricing__details { + list-style-type: none; padding: 20px; font-weight: 500; padding-bottom: 100px;