diff --git a/README.md b/README.md index 6d1ec1cd..14c27a30 100644 --- a/README.md +++ b/README.md @@ -1,56 +1,151 @@ -> ⭐ ***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)**.* + +### 🔥 Chcesz stworzyć własne repozytorium z projektem na podstawie repozytorium sforkowanego (np. oryginalnego repozytorium z zadaniem)? Zobacz, [jak to zrobić](https://github.com/devmentor-pl/from-fork-to-own-repo). + +### 💥 Nie wiesz, jak zabrać się do pisania? Przeczytaj [artykuł o tworzeniu README do projektu](https://devmentor.pl/b/jak-napisac-readme-do-projektu-na-githubie)! +   +___ +# SEKCJA NOTATEK - usuń po napisaniu README :) + +### funkcjonalności programu +- + +### problemy i ich rozwiązania + fragmenty kodu +- +`fragment kodu` +``` +większy fragment kodu +``` + + +### materiały, które pomogły Ci uzyskać dany efekt +- + +### reużywalne części projektu +- + +### narzędzia, frameworki, biblioteki +- + +### niezbędne paczki i komendy do uruchomienia projektu +- + +### wtyczki – rozszerzenia do przeglądarki czy do IDE +- + + +### inspiracje +- + +### wnioski, pomysły na rozwój projektu +- + +  + + + +## *`Koniec sekcji notatek. Poniżej znajdziesz szablon właściwego README.`* +___ + + + + +![screen or GIF of your app](https://via.placeholder.com/1000x300) + + +# Project Name -# HTML & CSS: Podstawy +See the live version of [Project Name](https://devmentor.pl). -Najwyższy czas zakodować prawdziwą stronę internetową! +1-3 sentences about the project... -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: +**Main features**: +- one +- two +- three -![](./assets/demo.png)   + +## 💡 Technologies +![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) +![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) +![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) -## 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). +  + +## 🔗 See also + +Are you interested in **techonologyName** and **technologyName**? See my other project [Interesting Project Name](https://devmentor.pl/podcast). + +  + +## 💿 Installation -Font, który jest używany w projekcie, to [Montserrat](https://fonts.google.com/specimen/Montserrat). +The project uses [node](https://nodejs.org/en/) and [npm](https://www.npmjs.com/). Having them installed, type into the terminal: `npm i`. + + +  + +## 🤔 Solutions provided in the project -Tło w górnej części strony to gradient: -`background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235));` +- one -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ć. +- two: +``` +some example code -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. +more code :) +``` +   -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. +- three + +| Issue | Solution | | +| ------------------------- | ----------------------------- | --- | +| one | `short code example` | | +| two | `short code example` | | +| thre | `short code example` | | + +   + +- four - some shortcut Ctrl + C + +   + +- five - example with a screenshot +what it is + + +  -## Propozycja podziału +## 💭 Conclusions for future projects -Poniżej zamieszczam propozycję podziału strony na poszczególne grupy: +I would like to improve... -- wiersz (`width: 100%`) – kolor zielony -- wyśrodkowanie (`max-width: 1150px`) – kolor niebieski -- komórka (wiele elementów w jednej linii) – kolor pomarańczowy. +#### This is the first issue: +``` +and this is a code example +``` -Nie musisz się od tego stosować – to jedynie moja koncepcja, która ma Ci pomóc w utworzeniu odpowiedniej struktury. +#### This is the second issue: +``` +and this is a code example +``` -![](./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/). +## 🙋‍♂️ Feel free to contact me +Write sth nice ;) Find me on...   -> ⭐ ***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)**.* +## 👏 Thanks / Special thanks / Credits +Thanks to my [Mentor - devmentor.pl](https://devmentor.pl/) – for providing me with this task and for code review. diff --git a/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf b/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf new file mode 100644 index 00000000..9f89c9de Binary files /dev/null and b/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf differ diff --git a/fonts/Montserrat/Montserrat-VariableFont_wght.ttf b/fonts/Montserrat/Montserrat-VariableFont_wght.ttf new file mode 100644 index 00000000..df7379cd Binary files /dev/null and b/fonts/Montserrat/Montserrat-VariableFont_wght.ttf differ diff --git a/fonts/Montserrat/OFL.txt b/fonts/Montserrat/OFL.txt new file mode 100644 index 00000000..45157748 --- /dev/null +++ b/fonts/Montserrat/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Montserrat.Git Project Authors (https://github.com/JulietaUla/Montserrat.git) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/fonts/Montserrat/README.txt b/fonts/Montserrat/README.txt new file mode 100644 index 00000000..526747dc --- /dev/null +++ b/fonts/Montserrat/README.txt @@ -0,0 +1,81 @@ +Montserrat Variable Font +======================== + +This download contains Montserrat as both variable fonts and static fonts. + +Montserrat is a variable font with this axis: + wght + +This means all the styles are contained in these files: + Montserrat-VariableFont_wght.ttf + Montserrat-Italic-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Montserrat: + static/Montserrat-Thin.ttf + static/Montserrat-ExtraLight.ttf + static/Montserrat-Light.ttf + static/Montserrat-Regular.ttf + static/Montserrat-Medium.ttf + static/Montserrat-SemiBold.ttf + static/Montserrat-Bold.ttf + static/Montserrat-ExtraBold.ttf + static/Montserrat-Black.ttf + static/Montserrat-ThinItalic.ttf + static/Montserrat-ExtraLightItalic.ttf + static/Montserrat-LightItalic.ttf + static/Montserrat-Italic.ttf + static/Montserrat-MediumItalic.ttf + static/Montserrat-SemiBoldItalic.ttf + static/Montserrat-BoldItalic.ttf + static/Montserrat-ExtraBoldItalic.ttf + static/Montserrat-BlackItalic.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them in your products & projects – print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/fonts/Montserrat/static/Montserrat-Black.ttf b/fonts/Montserrat/static/Montserrat-Black.ttf new file mode 100644 index 00000000..2d319308 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-Black.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-BlackItalic.ttf b/fonts/Montserrat/static/Montserrat-BlackItalic.ttf new file mode 100644 index 00000000..40c6e1ef Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-BlackItalic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-Bold.ttf b/fonts/Montserrat/static/Montserrat-Bold.ttf new file mode 100644 index 00000000..02ff6fff Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-Bold.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-BoldItalic.ttf b/fonts/Montserrat/static/Montserrat-BoldItalic.ttf new file mode 100644 index 00000000..998ed88c Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-BoldItalic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-ExtraBold.ttf b/fonts/Montserrat/static/Montserrat-ExtraBold.ttf new file mode 100644 index 00000000..59225514 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-ExtraBold.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-ExtraBoldItalic.ttf b/fonts/Montserrat/static/Montserrat-ExtraBoldItalic.ttf new file mode 100644 index 00000000..74155095 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-ExtraBoldItalic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-ExtraLight.ttf b/fonts/Montserrat/static/Montserrat-ExtraLight.ttf new file mode 100644 index 00000000..491c6ec5 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-ExtraLight.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-ExtraLightItalic.ttf b/fonts/Montserrat/static/Montserrat-ExtraLightItalic.ttf new file mode 100644 index 00000000..23dd23f8 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-ExtraLightItalic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-Italic.ttf b/fonts/Montserrat/static/Montserrat-Italic.ttf new file mode 100644 index 00000000..84bc0f46 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-Italic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-Light.ttf b/fonts/Montserrat/static/Montserrat-Light.ttf new file mode 100644 index 00000000..9d894920 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-Light.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-LightItalic.ttf b/fonts/Montserrat/static/Montserrat-LightItalic.ttf new file mode 100644 index 00000000..bf854d4b Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-LightItalic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-Medium.ttf b/fonts/Montserrat/static/Montserrat-Medium.ttf new file mode 100644 index 00000000..dfbcfe4f Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-Medium.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-MediumItalic.ttf b/fonts/Montserrat/static/Montserrat-MediumItalic.ttf new file mode 100644 index 00000000..1e674770 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-MediumItalic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-Regular.ttf b/fonts/Montserrat/static/Montserrat-Regular.ttf new file mode 100644 index 00000000..48ba65ed Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-Regular.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-SemiBold.ttf b/fonts/Montserrat/static/Montserrat-SemiBold.ttf new file mode 100644 index 00000000..8dbcdb39 Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-SemiBold.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf b/fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf new file mode 100644 index 00000000..8604419a Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-Thin.ttf b/fonts/Montserrat/static/Montserrat-Thin.ttf new file mode 100644 index 00000000..2a85a52c Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-Thin.ttf differ diff --git a/fonts/Montserrat/static/Montserrat-ThinItalic.ttf b/fonts/Montserrat/static/Montserrat-ThinItalic.ttf new file mode 100644 index 00000000..5dc7160a Binary files /dev/null and b/fonts/Montserrat/static/Montserrat-ThinItalic.ttf differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..70d6df73 --- /dev/null +++ b/index.html @@ -0,0 +1,265 @@ + + + + + + Nova Template + + + + +
+ +
+
+ + +
+ +
+
+

Beautiful Free Nova template

+

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

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

Features

+ +
+
+
+ +
+

Fully responsive

+

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

+
+ +
+
+ +
+

Customziable

+

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

+
+ +
+
+ +
+

Slick and beautiful design

+

+ Trendy and fresh design, fits any website. +

+
+
+
+
+ + +
+
+ +
+
+ + +
+
+ iMac in light gray color +
+
+

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

+

+ 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

+
+
+ Picture of Johhny B Good +
+ CTO +

Johhny B Good

+

+ The brains behind the whole operation +

+
+
+ + + + + + +
+
+ +
+ Picture of Chuck Berry +
+ CEO +

Roll Over Beethoven

+

+ The one that puts it all together +

+
+
+ + + + + + +
+
+ +
+ Picture of Chuck Berry +
+ CFO +

Chuck Berry

+

+ The guy with his hand on the wallet +

+
+
+ + + + + + +
+
+
+
+
+ + + + + diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..45ad130d --- /dev/null +++ b/styles/index.css @@ -0,0 +1,391 @@ +@font-face { + font-family: "Montserrat"; + src: url("../fonts/Montserrat/Montserrat-VariableFont_wght.ttf") + format("truetype"); + font-weight: 100 900; +} + +:root { + --primary-light-color: #fff; + --primary-dark-color: #000; + + --secondary-light-color: #f8f9f9; + --secondary-dark-color: #464646; + + --accent-primary-color: #25f18b; + --accent-secondary-color: #0abceb; + + scroll-behavior: smooth; +} + +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + position: relative; + font-family: "Montserrat"; + background-color: var(--primary-light-color); + + display: grid; + grid-template-rows: 1fr auto; + min-height: 100dvh; +} + +img { + display: block; + max-width: 100%; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; + color: inherit; +} + +h2, +h3 { + text-transform: uppercase; +} + +h2 { + font-weight: 300; + font-size: 1.75rem; +} + +p { + letter-spacing: 1px; + font-weight: 300; +} + +section { + padding: 2rem; +} + +.container { + width: min(100%, 1150px); + margin-inline: auto; +} + +.container-sm { + width: min(100%, 900px); + margin-inline: auto; +} + +.container-lg { + width: min(100%, 1400px); + margin-inline: auto; +} + +.description { + line-height: 1.8; + font-size: 0.875rem; +} + +.button { + border: none; + padding-block: 1rem; + border-radius: 0.5rem; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); + cursor: pointer; + font-weight: bold; + + transition: all 0.2s ease-out; +} + +.button:hover { + transform: scale(0.95); + opacity: 0.75; +} + +/* HERO STYLES */ +.hero { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + max-width: 6rem; +} + +.nav__list { + display: flex; + gap: 1.5rem; +} + +.nav__item { + padding: 2rem 0.5rem; +} + +.nav__link { + color: var(--secondary-light-color); + cursor: pointer; + transition: color 0.2s ease-out; +} + +.nav__link:hover { + color: var(--primary-dark-color); +} + +.hero__container { + display: flex; + gap: 6rem; + padding-block: 4rem 8rem; +} + +.hero__content { + display: flex; + flex-direction: column; + gap: 2rem; + margin-block-start: 3rem; + color: var(--primary-light-color); +} + +.hero__title { + font-size: 2rem; + width: 80%; +} + +.hero__subtitle { + width: 60%; + font-weight: 300; +} + +.hero__button { + width: 45%; + background-color: var(--accent-primary-color); + color: var(--primary-light-color); +} + +.hero__img-container { + background-color: var(--primary-light-color); + padding: 1rem; + border-radius: 1rem; + box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1); + transform: rotate(-5deg); +} + +.hero__img { + max-width: 30rem; +} + +/* FEATURES STYLES */ +.features { + background-color: var(--primary-dark-color); + color: var(--primary-light-color); + padding-block: 2rem 6rem; +} + +.features__title { + text-align: center; + margin-block: 2rem; +} + +.features-container { + display: grid; + gap: 1rem; + grid-template-columns: repeat(3, 1fr); +} + +.feature { + padding: 2rem; + text-align: center; +} + +.feature__title { + margin-block: 2rem 1rem; + font-size: 1rem; +} + +.feature__img-container { + display: flex; + flex-shrink: 0; + justify-content: center; + align-items: center; + + margin-inline: auto; + max-width: 5rem; + aspect-ratio: 1; + border-radius: 5rem; + + background-color: var(--primary-light-color); + box-shadow: 1px 1px 100px rgba(255, 255, 255, 0.5); +} + +/* LOGOS STYLES */ +.logos { + background-color: var(--secondary-light-color); +} + +.logos__container { + display: flex; + justify-content: center; +} + +/* NOVA THEME STYLES */ +.nova-theme { + display: flex; + justify-content: space-between; + gap: 3rem; +} + +.nova-theme__img-container { + flex: 1; + padding: 1rem; +} + +.nova-theme__content { + width: 40%; + padding: 2rem 6rem 2rem 2rem; +} + +.nova-theme__title { + margin-block-end: 2rem; +} + +.nova-theme__description { + width: 85%; +} + +/* PRICING STYLES */ +.pricing { + background-color: var(--secondary-light-color); +} + +.pricing__header { + text-align: center; + margin-block-end: 2rem; +} + +.pricing__title { + margin-block-end: 0.5rem; +} + +.pricing__plans { + display: grid; + grid-template-columns: 1fr 1.25fr 1fr; + gap: 1rem; +} + +.pricing__plan { + display: flex; + flex-direction: column; + gap: 4rem; + justify-content: space-between; + + padding: 3rem 2rem; + text-align: center; + border-radius: 0.5rem; +} + +.pricing__plan:nth-child(2) { + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); +} + +.pricing__name { + font-weight: 300; + margin-block-end: 1rem; +} + +.pricing__price { + margin-block-end: 2rem; + display: grid; +} + +.pricing__amount { + font-size: 2.5rem; + font-weight: 700; +} + +.pricing__period { + font-size: 0.75rem; + font-weight: 300; +} + +.pricing__feature { + font-weight: 500; +} + +.pricing__feature + .pricing__feature { + padding-block-start: 0.25rem; +} + +.pricing__button { + background-color: var(--accent-secondary-color); + color: var(--primary-light-color); + max-width: 12rem; + width: 100%; + margin-inline: auto; +} + +/* TEAM STYLES */ +.team__title { + text-align: center; + margin-block: 2rem; +} + +.team__content { + display: grid; + grid-template-columns: repeat(3, 1fr); + padding-block: 2rem; +} + +.team__member { + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; +} + +.team__member-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + text-align: center; +} + +.team__member-title { + font-size: 1.25rem; + font-weight: 300; +} + +.team__member-socials { + margin-top: auto; + display: flex; + align-items: center; + gap: 1rem; +} + +.team__member-social { + transition: all 0.2s ease-out; +} + +.team__member-social:hover { + opacity: 0.75; + transform: scale(0.95); +} + +/* FOOTER STYLES */ +footer { + background-color: var(--secondary-dark-color); + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + padding-block: 1rem; + color: var(--primary-light-color); +}