From 932aa6fe75edf9c49794fb2405ed1094a45b9fb8 Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 12 Sep 2025 09:03:43 +0200 Subject: [PATCH 01/31] Create project files structure --- index.html | 19 +++++++++++++++++++ styles/index.css | 10 ++++++++++ 2 files changed, 29 insertions(+) create mode 100644 index.html create mode 100644 styles/index.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..109cd218 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + Website by Artur + + + + + + + \ No newline at end of file diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..46e16451 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,10 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Montserrat', Arial, Helvetica, sans-serif; +} + +html { + font-size: 62.5%; +} From 82c4ce0819d93f832d5e41dcda5a91353f282ec0 Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 12 Sep 2025 09:14:42 +0200 Subject: [PATCH 02/31] Create website html structure --- index.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/index.html b/index.html index 109cd218..8a2e75c9 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,38 @@ +
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
From cb5f20cb462fb8d00d94caa04b236cc46d28dd90 Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 12 Sep 2025 09:34:00 +0200 Subject: [PATCH 03/31] Add logo and menu --- index.html | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8a2e75c9..a630f8f0 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,18 @@
- + +
-
+
@@ -34,7 +41,12 @@
-
+
+
+ +
+
+
From ff2a89844b6d55e9224f611ae4f87e70605fa6d7 Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 12 Sep 2025 09:40:08 +0200 Subject: [PATCH 04/31] Style basic elements --- styles/index.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/styles/index.css b/styles/index.css index 46e16451..86f673cb 100644 --- a/styles/index.css +++ b/styles/index.css @@ -8,3 +8,17 @@ html { font-size: 62.5%; } + +a { + text-decoration: none; +} + +.row { + width: 100%; +} + +.container { + max-width: 1150px; + margin: 0 auto; + display: flex; +} From 5a9381dc8173e97c10976bf5956e84e3407e9780 Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 12 Sep 2025 09:58:50 +0200 Subject: [PATCH 05/31] Style logo --- styles/index.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/styles/index.css b/styles/index.css index 86f673cb..8e480dce 100644 --- a/styles/index.css +++ b/styles/index.css @@ -22,3 +22,16 @@ a { margin: 0 auto; display: flex; } + +.header { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + padding: 4.4em 0; +} + +.header__container { + justify-content: space-between; +} + +.header__logo img { + height: 3em; +} From 35359990db7ac87aa631f2a33770647b7c1dc64d Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 12 Sep 2025 10:17:44 +0200 Subject: [PATCH 06/31] Style navigation --- styles/index.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/styles/index.css b/styles/index.css index 8e480dce..0f055f72 100644 --- a/styles/index.css +++ b/styles/index.css @@ -35,3 +35,23 @@ a { .header__logo img { height: 3em; } +.header__nav { + padding-right: 2em; +} + +.header__nav ul { + column-gap: 2.5em; + display: flex; + font-size: 1.5rem; + list-style-type: none; +} + +.header__nav a { + color: #fff; + font-weight: 500; + transition: 0.3s ease color; +} + +.header__nav a:hover { + color: #58d4f7; +} From f636c8642e2a6f41c662e4d1fab1b93cd2d46063 Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 12 Sep 2025 11:18:26 +0200 Subject: [PATCH 07/31] Add and style header content --- index.html | 15 +++++++++++- styles/index.css | 59 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a630f8f0..9b358a9d 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-
+
+
+
+

Beautiful Free Nova template

+

A top noth premium qualtiy template for your next web project.

+ +
+
+
+ Tablet screen with website + +
+
+
diff --git a/styles/index.css b/styles/index.css index 0f055f72..891cc1c9 100644 --- a/styles/index.css +++ b/styles/index.css @@ -22,13 +22,31 @@ a { margin: 0 auto; display: flex; } +.cta-button { + background-color: #25f18b; + border: none; + border-radius: 10px; + color: #fff; + cursor: pointer; + font-size: 1.8rem; + padding: 1em 2em; + transition: 0.3s ease background-color, 0.3s ease box-shadow, + 0.3s ease transform; +} + +.cta-button:hover { + background-color: #6cfeb5; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); + transform: scale(1.1); +} .header { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + color: #fff; padding: 4.4em 0; } -.header__container { +.header__navbar { justify-content: space-between; } @@ -55,3 +73,42 @@ a { .header__nav a:hover { color: #58d4f7; } + +.header__container { + margin-top: 5em; + justify-content: space-between; + padding-bottom: 7em; +} + +.header__container .column { + padding-right: 80px; +} + +.header__container .column:first-child { + padding-top: 40px; +} + +.header__container h1 { + font-size: 3.8em; + margin-bottom: 0.5em; +} + +.header__container p { + font-size: 2em; + font-weight: 100; + margin-bottom: 2em; + margin-right: 11em; + line-height: 1.6; +} + +.header__hero-img { + width: 450px; + height: 350px; + transform: rotate(-8deg); + background-color: #fff; + border: 10px solid #fff; + border-radius: 8px; +} +.header__hero-img img { + width: 100%; +} From cddbdcd70146ade124dd9a57e62fbfe0541f51d0 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 06:48:01 +0200 Subject: [PATCH 08/31] Stop tracking README.md --- README.md | 56 ------------------------------------------------------- 1 file changed, 56 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index 6d1ec1cd..00000000 --- a/README.md +++ /dev/null @@ -1,56 +0,0 @@ -> ⭐ ***README** to coś więcej niż opis. Poprzez nie **pokazujesz swoje mocne strony** – swoją dokładność, sposób myślenia i podejście do rozwiązywania problemów. Niech Twoje README pokaże, że masz **świetne predyspozycje do rozwoju!*** -> -> 🎁 *Zacznij od razu. Skorzystaj z **[szablonu README i wskazówek](https://github.com/devmentor-pl/readme-template)**.* - -  - - -# HTML & CSS: Podstawy - -Najwyższy czas zakodować prawdziwą stronę internetową! - -Będziemy się wzorować na projekcie od [Webscope](https://themewagon.com/themes/project-app-showasing-onepage-bootstrap-template-free-nova/), który wygląda tak: - -![](./assets/demo.png) - -  - -## Opis projektu - -Wszystkie niezbędne grafiki masz przygotowane w katalogu `images`. Znajdziesz tam m.in. [pliki SVG](https://pl.wikipedia.org/wiki/Scalable_Vector_Graphics). W VS Code ich podgląd uzyskasz dzięki rozszerzeniu [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg). - -Font, który jest używany w projekcie, to [Montserrat](https://fonts.google.com/specimen/Montserrat). - -Tło w górnej części strony to gradient: -`background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235));` - -Jeśli chcesz dokładnie odwzorować położenie poszczególnych elementów, możesz użyć rozszerzenia do Chrome o nazwie [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi). Pozwoli Ci ono osadzić przedstawiony wyżej plik poglądowy (lokalizacja: `./assets/demo.png`) jako tło dla tworzonej strony. - -> **Uwaga!** Możliwe, że w powyższym rozszerzeniu będziesz musiał użyć odpowiedniej skali obrazu wykorzystywanego jako podgląd. Jest to zależne od [ustawień systemowych](https://pliki.wiki/blog/jak-korzystac-ze-skalowania-ekranu-w-systemie-windows-10/). Zazwyczaj jednak domyślne ustwienia wtyczki dobrze się sprawdzają i poza jej instalacją nie musisz nic robić. - -Strona nie musi być wykonana zgodnie z pierwowzorem 1:1. Ważne, aby na pierwszy rzut oka było widać, że jest to ten sam projekt. - -Pamiętaj, że przedstawiona grafika to element statyczny, a strona internetowa to element dynamiczny, który powinien dobrze wyglądać w różnych rozdzielczościach / na różnej wielkości monitorach. Część z nich może mieć szerokość ekranu 1280px, a inna 1440px itp. Na razie jednak skup się na odwzorowaniu zamieszczonego w zadaniu widoku. Innymi rozdzielczościami zajmiemy się w kolejnym module. - -## Propozycja podziału - -Poniżej zamieszczam propozycję podziału strony na poszczególne grupy: - -- wiersz (`width: 100%`) – kolor zielony -- wyśrodkowanie (`max-width: 1150px`) – kolor niebieski -- komórka (wiele elementów w jednej linii) – kolor pomarańczowy. - -Nie musisz się od tego stosować – to jedynie moja koncepcja, która ma Ci pomóc w utworzeniu odpowiedniej struktury. - -![](./assets/demo-info.png) - -  - -> :warning: Jeśli nie posiadasz materiałów do tego zadania, to znajdziesz je na stronie [devmentor.pl](https://devmentor.pl/p/html-and-css-basics/). - - -  - -> ⭐ ***README** to coś więcej niż opis. Poprzez nie **pokazujesz swoje mocne strony** – swoją dokładność, sposób myślenia i podejście do rozwiązywania problemów. Niech Twoje README pokaże, że masz **świetne predyspozycje do rozwoju!*** -> -> 🎁 *Zacznij od razu. Skorzystaj z **[szablonu README i wskazówek](https://github.com/devmentor-pl/readme-template)**.* From ae7d34af157ff2ae889f913df9987ba6d6fc29fc Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 06:49:29 +0200 Subject: [PATCH 09/31] Update .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..42061c01 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +README.md \ No newline at end of file From a62286ad0ee7ec05caf52875f905c5ae4a4c104f Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 10:25:34 +0200 Subject: [PATCH 10/31] Add and style features section --- index.html | 29 +++++++++++++++++++++++--- styles/index.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9b358a9d..f0d53a77 100644 --- a/index.html +++ b/index.html @@ -39,9 +39,32 @@

Beautiful Free Nova template

-
-
- +
+
+

FEATURES

+
+
+
+
+ responsive icon +
+

FULLY RESPONSIVE

+

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

+
+
+
+ features 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.

+
diff --git a/styles/index.css b/styles/index.css index 891cc1c9..a2febf30 100644 --- a/styles/index.css +++ b/styles/index.css @@ -40,6 +40,8 @@ a { transform: scale(1.1); } +/* HEADER */ + .header { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); color: #fff; @@ -109,6 +111,58 @@ a { border: 10px solid #fff; border-radius: 8px; } + .header__hero-img img { width: 100%; } + +/* FEATURES */ + +.features { + background-color: #000000; + color: #ffffff; + font-size: 1.4rem; + padding-bottom: 4em; + text-align: center; +} + +.features h2 { + font-size: 2.2em; + font-weight: 200; + padding: 1.5em 0; +} + +.features h4 { + font-weight: 500; + padding: 1.8em 0; +} + +.features p { + line-height: 1.5; + font-weight: 200; +} + +.features__container { + justify-content: center; + column-gap: 4em; + padding-bottom: 2em; +} + +.features .column { + width: clamp(100px, 30%, 200px); +} + +.features__image-holder { + background-color: #ffffff; + border-radius: 50%; + display: flex; + margin: 0 auto; + padding: 2em; + width: 80px; + height: 80px; + justify-content: center; +} + +.features__image-holder img { + object-fit: contain; +} From ecea77ff7505485c8882d078c0cfa68c716048bc Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 10:27:00 +0200 Subject: [PATCH 11/31] Fill missing alt atribute --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f0d53a77..604cf3e9 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
- +
-
-
- +
+
+ logos of companies
diff --git a/styles/index.css b/styles/index.css index 84d61eff..28d82223 100644 --- a/styles/index.css +++ b/styles/index.css @@ -165,3 +165,17 @@ a { .features__image-holder img { object-fit: contain; } + +/* LOGOS */ +.logos { + padding: 4em 0; +} + +.logos__container { + justify-content: center; +} + +.logos img { + height: 29px; + width: auto; +} From 23ba1328ff91feb079c4f4c1c14ddb93dcd90ac2 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 10:50:44 +0200 Subject: [PATCH 16/31] Change logos background color --- styles/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/index.css b/styles/index.css index 28d82223..5ec95ae4 100644 --- a/styles/index.css +++ b/styles/index.css @@ -169,6 +169,7 @@ a { /* LOGOS */ .logos { padding: 4em 0; + background-color: #f9fafa; } .logos__container { From 4d8c7f25001bcc4ce30197fb1a9ba5a39fa246b5 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 11:17:38 +0200 Subject: [PATCH 17/31] Update .gitignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 42061c01..56636363 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -README.md \ No newline at end of file +README.md +.DS_St \ No newline at end of file From d1999240365392b297f1bf9a4ea5760d8d7e63fd Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 11:20:14 +0200 Subject: [PATCH 18/31] Update .gitignore --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 56636363..ff6ee1f4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ README.md -.DS_St \ No newline at end of file +.DS_Store \ No newline at end of file From e033e86a68d069d63ea555985b26f5cd14da15b9 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 11:21:04 +0200 Subject: [PATCH 19/31] Add and style display section --- index.html | 13 +++++++++++-- styles/index.css | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d1f94325..a7c4a92d 100644 --- a/index.html +++ b/index.html @@ -73,9 +73,18 @@

SLICK AND BEAUTIFUL DESIGN

logos of companies
-
-
+
+
+
Apple desktop computer +
+
+

SIMPLE AND BEAUTIFUL

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. At omnis quidem officiis quis in + dignissimos eligendi nesciunt doloribus repellendus dolorem, sed debitis aliquid nihil ullam est + quo vero libero, perferendis illo? Quae, expedita. Voluptatibus alias ex iste. Necessitatibus + laboriosam at vel id, excepturi molestias vero neque ratione repudiandae quidem rerum?

+
diff --git a/styles/index.css b/styles/index.css index 5ec95ae4..f874a7ef 100644 --- a/styles/index.css +++ b/styles/index.css @@ -180,3 +180,36 @@ a { height: 29px; width: auto; } + +/* DISPLAY section */ + +.display { + color: #454545; + font-size: 1.4rem; + font-weight: 300; + padding: 3em 0; + text-align: justify; +} + +.display h2 { + font-size: 2.2em; + font-weight: 200; + padding: 0.8em 0; +} +.display p { + line-height: 1.8git s; +} + +.display__container { + justify-content: space-around; + column-gap: 5em; +} + +.display__section-img img { + width: clamp(100px, 100%, 600px); + height: auto; +} + +.display .column { + max-width: 50%; +} From c16244589d7dd4189cd92b46c08058b784baa41a Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 11:25:33 +0200 Subject: [PATCH 20/31] Delete typo --- styles/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/index.css b/styles/index.css index f874a7ef..fd0dda12 100644 --- a/styles/index.css +++ b/styles/index.css @@ -197,7 +197,7 @@ a { padding: 0.8em 0; } .display p { - line-height: 1.8git s; + line-height: 1.8; } .display__container { From 59eadfc6d900445d8ad21e1805cb54f47cd4d338 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 20:28:14 +0200 Subject: [PATCH 21/31] Change styles for columns size --- styles/index.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/styles/index.css b/styles/index.css index fd0dda12..4d244516 100644 --- a/styles/index.css +++ b/styles/index.css @@ -195,6 +195,7 @@ a { font-size: 2.2em; font-weight: 200; padding: 0.8em 0; + text-align: left; } .display p { line-height: 1.8; @@ -202,14 +203,14 @@ a { .display__container { justify-content: space-around; - column-gap: 5em; + column-gap: 2em; +} + +.display__section-img { + flex: 0 0 60%; } .display__section-img img { width: clamp(100px, 100%, 600px); height: auto; } - -.display .column { - max-width: 50%; -} From 62734873b01093c439482a5e9efc33e9931972f9 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 20:40:58 +0200 Subject: [PATCH 22/31] Add html structure for pricing section --- index.html | 37 +++++++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a7c4a92d..b09ba4ad 100644 --- a/index.html +++ b/index.html @@ -88,8 +88,41 @@

SIMPLE AND BEAUTIFUL

-
- +
+

CHOOSE YOUR PRICING PLAN

+

Pick any of our super affordable pricing plans

+
+
+
+

BASIC

+ $15 + +
    +
  • Up to 7 projects
    • +
  • 2 Additional Developers
    • +
+
+
+

AGENCY

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

PRO

+ $75 + +
    +
  • Up to 25 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
  • 1.5GB Disk Space
    • +
+
From 53ef27a532fb65c275ba8891b869a4170547263f Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 22:08:42 +0200 Subject: [PATCH 23/31] Style card section --- index.html | 13 +++++--- styles/index.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 93 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index b09ba4ad..07b450fc 100644 --- a/index.html +++ b/index.html @@ -87,7 +87,7 @@

SIMPLE AND BEAUTIFUL

-
+

CHOOSE YOUR PRICING PLAN

Pick any of our super affordable pricing plans

@@ -96,32 +96,35 @@

CHOOSE YOUR PRICING PLAN

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
+
diff --git a/styles/index.css b/styles/index.css index 4d244516..4d293221 100644 --- a/styles/index.css +++ b/styles/index.css @@ -194,7 +194,7 @@ a { .display h2 { font-size: 2.2em; font-weight: 200; - padding: 0.8em 0; + margin: 0.8em 0; text-align: left; } .display p { @@ -214,3 +214,87 @@ a { width: clamp(100px, 100%, 600px); height: auto; } + +/* PRICING */ +.pricing { + background-color: #f8f9f9; + color: #575957; + font-size: 1.4em; + padding: 4em 0; +} + +.pricing__header { + text-align: center; +} + +.pricing__header h2 { + font-weight: 200; + font-size: 2.1em; + margin: 0.6em 0; +} + +.pricing__header p { + color: #9d9ba6; + font-weight: 200; +} + +.cards { + justify-content: flex-start; + align-items: stretch; + padding: 3em 0; +} + +.cards__card { + padding: 3em 4em; + text-align: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} + +.cards__card h4 { + font-weight: 200; +} + +.cards__card ul { + list-style-type: none; + margin: 2em 0; + align-self: self-start; +} + +.cards__card ul li { + line-height: 1.3; +} + +.cards__card-price { + display: block; + font-size: 2em; + font-weight: 700; + margin: 0.3em 0; +} + +.cards__card-period { + font-size: 0.8em; +} + +.cards__card-btn { + background-color: #07bceb; + border: none; + border-radius: 1em; + color: #ffffff; + cursor: pointer; + padding: 1.2em 1.9em; + white-space: nowrap; + margin-top: auto; + transition: 0.3s ease-out transform, 0.3s ease background-color; +} + +.cards__card-btn:hover { + background-color: #62d6f4; + transform: scale(1.1); +} + +.cards__card--active { + box-shadow: 0 0 32px rgba(0, 0, 0, 0.2); +} From 5d4c1aee546ddf22cf7f7c24e4ce28f66e0ae0b9 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 15 Sep 2025 22:10:23 +0200 Subject: [PATCH 24/31] Center price section --- styles/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/index.css b/styles/index.css index 4d293221..3adbf8fd 100644 --- a/styles/index.css +++ b/styles/index.css @@ -239,7 +239,7 @@ a { } .cards { - justify-content: flex-start; + justify-content: center; align-items: stretch; padding: 3em 0; } From c6d213755f167b0174b58dd923b9df3e64abac37 Mon Sep 17 00:00:00 2001 From: Artur Date: Tue, 16 Sep 2025 08:19:03 +0200 Subject: [PATCH 25/31] Add and style team header section --- index.html | 7 ++++--- styles/index.css | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 07b450fc..92780a2c 100644 --- a/index.html +++ b/index.html @@ -128,10 +128,11 @@

PRO

-
-
- +
+
+

THE TEAM

+
diff --git a/styles/index.css b/styles/index.css index 3adbf8fd..2f4f1fcc 100644 --- a/styles/index.css +++ b/styles/index.css @@ -298,3 +298,21 @@ a { .cards__card--active { box-shadow: 0 0 32px rgba(0, 0, 0, 0.2); } + +/* TEAM */ + +.team { + font-size: 1.4rem; + padding: 3em 0; +} + +.team h2 { + font-size: 2.1em; + font-weight: 200; + margin: 0.6em 0; +} + +.team__header { + text-align: center; +} + From 9cb64e22eb09f492ce1765c07ea5135977b2d044 Mon Sep 17 00:00:00 2001 From: Artur Date: Tue, 16 Sep 2025 08:33:39 +0200 Subject: [PATCH 26/31] Create html structure for team cards --- index.html | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 92780a2c..2443d1d1 100644 --- a/index.html +++ b/index.html @@ -132,7 +132,39 @@

PRO

THE TEAM

-
+
+
+
cto photo
+

CTO

+ Johnny B Good + + + twitter logo + facebook logo + +
+
+
ceo photo
+

CEO

+ Roll Over Beethoven + + + twitter logo + facebook logo + +
+
+
cfo photo
+

CFO

+ Chuck Berry + + + twitter logo + facebook logo + +
+ +
From 736d706ac4f2f2d4c160b55c334d5066b7e7297a Mon Sep 17 00:00:00 2001 From: Artur Date: Tue, 16 Sep 2025 08:51:28 +0200 Subject: [PATCH 27/31] Style team card section --- index.html | 12 ++++++------ styles/index.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 2443d1d1..b995c246 100644 --- a/index.html +++ b/index.html @@ -137,8 +137,8 @@

THE TEAM

cto photo

CTO

Johnny B Good - - + The brains the whole operation + twitter logo facebook logo @@ -147,8 +147,8 @@

CTO

ceo photo

CEO

Roll Over Beethoven - - + The one that puts it all together + twitter logo facebook logo @@ -157,8 +157,8 @@

CEO

cfo photo

CFO

Chuck Berry - - + The guy with his hand on the wallet + twitter logo facebook logo diff --git a/styles/index.css b/styles/index.css index 2f4f1fcc..fa1288d3 100644 --- a/styles/index.css +++ b/styles/index.css @@ -316,3 +316,41 @@ a { text-align: center; } +.team-cards { + text-align: center; + justify-content: center; + padding: 3em 0; +} + +.team-cards span { + display: block; + margin: 1em 0; +} + +.team-cards h4 { + font-weight: 200; + font-size: 1.3em; + margin: 0.9em 0; +} + +.team-cards__card { + padding: 0 2.6em; +} + +.team-cards__card-photo img { + width: clamp(30px, 100px, 120px); + height: auto; +} + +.team-cards__card-name { + font-weight: 600; +} + +.team-cards__card-description { + font-weight: 300; + font-size: 0.9em; +} + +.team-cards__card-social img { + margin: 0.5em; +} From 7f8d29db45bfd43fc50c95062677a4cba39c7fa6 Mon Sep 17 00:00:00 2001 From: Artur Date: Tue, 16 Sep 2025 08:58:08 +0200 Subject: [PATCH 28/31] Add and style footer content --- index.html | 5 ++++- styles/index.css | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b995c246..4f086882 100644 --- a/index.html +++ b/index.html @@ -169,7 +169,10 @@

CFO

- +

+ A free template by +

+ webscope logo
diff --git a/styles/index.css b/styles/index.css index fa1288d3..42053c3c 100644 --- a/styles/index.css +++ b/styles/index.css @@ -354,3 +354,21 @@ a { .team-cards__card-social img { margin: 0.5em; } + +/* FOOTER */ + +.footer { + background-color: #464646; + color: #fff; + font-size: 1.2rem; + padding: 1.4em; +} + +.footer__container { + justify-content: center; + align-items: center; +} + +.footer img { + margin: 0 1em; +} From ae797224930e5ef7f9e076b2591b7a8176cc8d91 Mon Sep 17 00:00:00 2001 From: Artur Date: Thu, 18 Sep 2025 08:10:17 +0200 Subject: [PATCH 29/31] Add smooth page scroll --- styles/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/index.css b/styles/index.css index 42053c3c..048703a6 100644 --- a/styles/index.css +++ b/styles/index.css @@ -7,6 +7,7 @@ html { font-size: 62.5%; + scroll-behavior: smooth; } a { From 2bb1bf6126be902f1654c5608828afa7bef3d805 Mon Sep 17 00:00:00 2001 From: Artur Date: Thu, 18 Sep 2025 09:41:59 +0200 Subject: [PATCH 30/31] Improve semantic html structure and improve css BEM mistakes --- index.html | 182 ++++++++++++++++++++++++----------------------- styles/index.css | 78 ++++++++++---------- 2 files changed, 132 insertions(+), 128 deletions(-) diff --git a/index.html b/index.html index 4f086882..3b7e5389 100644 --- a/index.html +++ b/index.html @@ -16,164 +16,166 @@
- +
-
-

Beautiful Free Nova template

-

A top noth premium qualtiy template for your next web project.

+
+

Beautiful Free Nova template

+

A top noth premium qualtiy template for your next web project.

-
-
-
- Tablet screen with website + +
+
+ Tablet screen with website -
+
-
-

FEATURES

-
-
-
-
- responsive icon +
+

FEATURES

+
+
    +
  • +
    + responsive icon

    FULLY RESPONSIVE

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

    -
-
-
- features icon + +
  • +
    + features icon

    CUSTOMIZABLE

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

    -
    • -
    -
    - design icon + +
  • +
    + design icon

    SLICK AND BEAUTIFUL DESIGN

    Trendy and fresh design, fits any website.

    -
    • -
    -
    -
    -
    - logos of companies -
    + +
    +
    -
    Apple desktop computer -
    -
    -

    SIMPLE AND BEAUTIFUL

    -

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. At omnis quidem officiis quis in +

    Apple desktop computer +
    +
    +

    SIMPLE AND BEAUTIFUL

    +

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. At omnis + quidem officiis quis in dignissimos eligendi nesciunt doloribus repellendus dolorem, sed debitis aliquid nihil ullam est quo vero libero, perferendis illo? Quae, expedita. Voluptatibus alias ex iste. Necessitatibus laboriosam at vel id, excepturi molestias vero neque ratione repudiandae quidem rerum?

    -
    +
    -
    -

    CHOOSE YOUR PRICING PLAN

    -

    Pick any of our super affordable pricing plans

    -
    -
    -
    -

    BASIC

    - $15 - per month -
      +
      +

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

      AGENCY

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

    PRO

    - $75 - per month -
      + + +
    • +

      PRO

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

    THE TEAM

    -
    -
    -
    +
    +

    THE TEAM

    +
    +
      +
    • cto photo

      CTO

      Johnny B Good The brains the whole operation - twitter logo - facebook logo + twitter logo + facebook logo -
    -
    + +
  • ceo photo

    CEO

    Roll Over Beethoven The one that puts it all together - twitter logo - facebook logo + twitter logo + facebook logo -
    • -
    + +
  • cfo photo

    CFO

    Chuck Berry The guy with his hand on the wallet - twitter logo - facebook logo + twitter logo + facebook logo -
    • + -
    +
    -
    -

    +

    + +
    A free template by -

    - webscope logo -
    + +
    diff --git a/styles/index.css b/styles/index.css index 048703a6..b9fdac2c 100644 --- a/styles/index.css +++ b/styles/index.css @@ -55,24 +55,24 @@ a { padding-right: 2em; } -.header__logo img { +.header__logo-img { height: 3em; } -.header__nav ul { +.header__nav-menu { column-gap: 2.5em; display: flex; font-size: 1.5rem; list-style-type: none; } -.header__nav a { +.header__nav-link { color: #fff; font-weight: 500; transition: 0.3s ease color; } -.header__nav a:hover { +.header__nav-link:hover { color: #58d4f7; } @@ -82,20 +82,20 @@ a { padding-bottom: 7em; } -.header__container .column { +.header__column { padding-right: 80px; } -.header__container .column:first-child { +.header__column:first-child { padding-top: 40px; } -.header__container h1 { +.header__title { font-size: 3.8em; margin-bottom: 0.5em; } -.header__container p { +.header__description { font-size: 2em; font-weight: 100; margin-bottom: 2em; @@ -103,7 +103,7 @@ a { line-height: 1.6; } -.header__hero-img { +.header__hero { width: 450px; height: 350px; transform: rotate(-8deg); @@ -112,7 +112,7 @@ a { border-radius: 8px; } -.header__hero-img img { +.header__hero-img { width: 100%; } @@ -126,7 +126,7 @@ a { text-align: center; } -.features h2 { +.features__title { font-size: 2.2em; font-weight: 200; padding: 1.5em 0; @@ -145,6 +145,7 @@ a { .features__container { justify-content: center; column-gap: 4em; + list-style-type: none; padding-bottom: 2em; } @@ -152,7 +153,7 @@ a { width: clamp(100px, 30%, 200px); } -.features__image-holder { +.features__icon { background-color: #ffffff; border-radius: 50%; display: flex; @@ -163,7 +164,7 @@ a { justify-content: center; } -.features__image-holder img { +.features__icon-img { object-fit: contain; } @@ -177,7 +178,7 @@ a { justify-content: center; } -.logos img { +.logos-img { height: 29px; width: auto; } @@ -192,13 +193,13 @@ a { text-align: justify; } -.display h2 { +.display__title { font-size: 2.2em; font-weight: 200; margin: 0.8em 0; text-align: left; } -.display p { +.display__description { line-height: 1.8; } @@ -207,11 +208,11 @@ a { column-gap: 2em; } -.display__section-img { +.display__section-hero { flex: 0 0 60%; } -.display__section-img img { +.display__section-hero-img { width: clamp(100px, 100%, 600px); height: auto; } @@ -228,24 +229,24 @@ a { text-align: center; } -.pricing__header h2 { +.pricing__title { font-weight: 200; font-size: 2.1em; margin: 0.6em 0; } -.pricing__header p { +.pricing__caption { color: #9d9ba6; font-weight: 200; } -.cards { +.pricing-cards { justify-content: center; align-items: stretch; padding: 3em 0; } -.cards__card { +.pricing-cards__card { padding: 3em 4em; text-align: center; display: flex; @@ -254,32 +255,29 @@ a { align-items: center; } -.cards__card h4 { +.pricing-cards__card-title { font-weight: 200; } -.cards__card ul { +.pricing-cards__card-features { list-style-type: none; margin: 2em 0; align-self: self-start; + line-height: 1.4; } -.cards__card ul li { - line-height: 1.3; -} - -.cards__card-price { +.pricing-cards__card-price { display: block; font-size: 2em; font-weight: 700; margin: 0.3em 0; } -.cards__card-period { +.pricing-cards__card-period { font-size: 0.8em; } -.cards__card-btn { +.pricing-cards__card-btn { background-color: #07bceb; border: none; border-radius: 1em; @@ -291,12 +289,12 @@ a { transition: 0.3s ease-out transform, 0.3s ease background-color; } -.cards__card-btn:hover { +.pricing-cards__card-btn:hover { background-color: #62d6f4; transform: scale(1.1); } -.cards__card--active { +.pricing-cards__card--active { box-shadow: 0 0 32px rgba(0, 0, 0, 0.2); } @@ -307,7 +305,7 @@ a { padding: 3em 0; } -.team h2 { +.team__title { font-size: 2.1em; font-weight: 200; margin: 0.6em 0; @@ -320,12 +318,11 @@ a { .team-cards { text-align: center; justify-content: center; + list-style-type: none; padding: 3em 0; } .team-cards span { - display: block; - margin: 1em 0; } .team-cards h4 { @@ -345,14 +342,18 @@ a { .team-cards__card-name { font-weight: 600; + display: block; + margin: 1em 0; } .team-cards__card-description { + display: block; + margin: 1em 0; font-weight: 300; font-size: 0.9em; } -.team-cards__card-social img { +.team-cards__card-social-img { margin: 0.5em; } @@ -366,10 +367,11 @@ a { } .footer__container { + flex-direction: row-reverse; justify-content: center; align-items: center; } -.footer img { +.footer__logo { margin: 0 1em; } From c6fdf68fe287b757cfbfea01a95b0465138954f3 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 22 Sep 2025 09:22:59 +0200 Subject: [PATCH 31/31] Correct mistakes in class names --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3b7e5389..148e2de2 100644 --- a/index.html +++ b/index.html @@ -141,8 +141,8 @@

    CTO

    Johnny B Good The brains the whole operation - twitter logo - facebook logo + twitter logo + facebook logo
  • @@ -151,8 +151,8 @@

    CEO

    Roll Over Beethoven The one that puts it all together - twitter logo - facebook logo + twitter logo + facebook logo
  • @@ -161,8 +161,8 @@

    CFO

    Chuck Berry The guy with his hand on the wallet - twitter logo - facebook logo + twitter logo + facebook logo