diff --git a/README.md b/README.md index 6d1ec1cd..17cbbba7 100644 --- a/README.md +++ b/README.md @@ -1,56 +1,56 @@ -> ⭐ ***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)**.* +> ⭐ ***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)**.* diff --git a/images/customizable.svg b/images/customizable.svg index 43d895e4..d53e78ba 100644 --- a/images/customizable.svg +++ b/images/customizable.svg @@ -1,16 +1,16 @@ - - - - customizable - Created with Sketch. - - - - - - - - - - + + + + customizable + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/images/design.svg b/images/design.svg index 41320bfc..9f7ef4af 100644 --- a/images/design.svg +++ b/images/design.svg @@ -1,16 +1,16 @@ - - - - design - Created with Sketch. - - - - - - - - - - + + + + design + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/images/facebook.svg b/images/facebook.svg index c07e9798..df2e3b64 100644 --- a/images/facebook.svg +++ b/images/facebook.svg @@ -1,20 +1,20 @@ - - - - facebook - Created with Sketch. - - - - - - - - - - - - - - + + + + facebook + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/logo.svg b/images/logo.svg index 4246884d..3d71ef6d 100644 --- a/images/logo.svg +++ b/images/logo.svg @@ -1,21 +1,21 @@ - - - - logo - Created with Sketch. - - - - - - - - - - - - + + + + logo + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/responsive.svg b/images/responsive.svg index 8c162205..7479ce71 100644 --- a/images/responsive.svg +++ b/images/responsive.svg @@ -1,19 +1,19 @@ - - - - responsive - Created with Sketch. - - - - - - - - - - - - - + + + + responsive + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/team-facebook.svg b/images/team-facebook.svg index fa78a3e0..ce85f3f1 100644 --- a/images/team-facebook.svg +++ b/images/team-facebook.svg @@ -1,22 +1,22 @@ - - - - team-facebook - Created with Sketch. - - - - - - - - - - - - - - - - + + + + team-facebook + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/team-google.svg b/images/team-google.svg new file mode 100644 index 00000000..5195da59 --- /dev/null +++ b/images/team-google.svg @@ -0,0 +1,21 @@ + + + + team-google + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/team-twitter.svg b/images/team-twitter.svg index aca50aaa..a0b7f76e 100644 --- a/images/team-twitter.svg +++ b/images/team-twitter.svg @@ -1,26 +1,26 @@ - - - - team-twitter - Created with Sketch. - - - - - - - - - - - - - - - - - - - - + + + + team-twitter + Created with Sketch. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/twitter.svg b/images/twitter.svg index fc7e3423..35c77703 100644 --- a/images/twitter.svg +++ b/images/twitter.svg @@ -1,24 +1,24 @@ - - - - twitter - Created with Sketch. - - - - - - - - - - - - - - - - - - + + + + twitter + Created with Sketch. + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/webscope.svg b/images/webscope.svg index f9215c97..af24d271 100644 --- a/images/webscope.svg +++ b/images/webscope.svg @@ -1,26 +1,26 @@ - - - - webscope - Created with Sketch. - - - - - - - - - - - - - - - - - - - - + + + + webscope + Created with Sketch. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..eb20ead8 --- /dev/null +++ b/index.html @@ -0,0 +1,233 @@ + + + + + + Nova + + + + + +
+
+ +
+
+

Beautiful Free Nova template

+

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

+ +
+
+
+ Webpage image +
+
+
+
+
+
+
+

FEATURES

+
+
+
+
+ +
+
FULLY RESPONSIVE
+

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

+
+
+
+ +
+
CUSTOMIZABLE
+

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

+
+
+
+ +
+
SLICK AND BEAUTIFUL DESIGN
+

+ Trendy and frash design, fits any website. +

+
+
+
+
+
+ brand logos +
+
+
+
+ +
+
+

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

+
+
+
+
+ Johny B Good +
+
CTO
+
Johny B Good
+
+ The brains behind the whole operation +
+ +
+
+
+ Johny B Good +
+
CEO
+
Roll Over Beethoven
+
+ The one that puts it all together +
+ +
+
+
+ Johny B Good +
+
CFO
+
Chuck Berry
+
+ The guy with his hand on the wallet +
+ +
+
+
+ + + diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..ca67d254 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,89 @@ +html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;} + +main, article, aside, figure, footer, header, nav, section, details, summary {display: block;} + +html {box-sizing: border-box;} + +*, *:before, *:after {box-sizing: inherit;} + +img {max-width: 100%;} + +ul {list-style: none;} /* we'll restore bullets as needed for content */ + +blockquote, q {quotes: none;} + +blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} + +a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} + +del {text-decoration: line-through;} + +abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} + +table {border-collapse: separate; border-spacing: 0; text-align: left;} +th {font-weight: bold; vertical-align: bottom;} +td {font-weight: normal; vertical-align: top;} +td img {vertical-align: top;} + +hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;} + +input, select {vertical-align: middle;} + +pre {white-space: pre-line;} + +input[type="radio"] {vertical-align: text-bottom;} +input[type="checkbox"] {vertical-align: bottom;} + +small {font-size: .8rem;} + +strong {font-weight: bold;} + +sub, sup {font-size: .8rem; line-height: 0; position: relative;} +sup {top: -0.5rem;} +sub {bottom: -0.25rem;} + +pre, code, kbd, samp {font-family: monospace, sans-serif;} + +label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;} + +button, input, select, textarea {margin: 0;} + +ins {background-color: var(--highlight-color); color: #000; text-decoration: none;} +mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;} + +blockquote {padding: 2rem; border-left: 1px solid #333;} + +.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */ + +h1, h2, h3, h4, h5, h6 {text-wrap: balance} + +p {text-wrap: pretty;} + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +/* ———— END THE GENERIC RESETS ———— */ + +:root { + --font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */ + --text-color: #333; + --featured-color: #03f; + --featured-color-hover: #69f; + --highlight-color: #fcd700; +} + +body {font-size: 16px; font-family: var(--font-system); color: var(--text-color);} + +a {color: var(--featured-color);} +a:hover {color: var(--featured-color-hover);} + +@media screen and (max-width: 480px) { + +} + +@media print { + +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 00000000..59bf3ec8 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,358 @@ +body { + overflow-x: hidden; + font-family: "Montserrat", serif; + font-style: normal; +} +.section { + width: 100vw; +} + +.btn { + height: 51px; + width: 210px; + margin: 30px 0; + padding: 1px 6px; + color: inherit; + font-size: 14px; + border-radius: 10px; + border: none; + transition: border-radius 100ms linear, background-color 100ms ease; +} + +.btn:hover { + border-radius: 20px; + cursor: pointer; +} +.section__container { + max-width: 1150px; + margin: 0 auto; +} + +.section__top { + height: 730px; + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.navbar { + height: 100px; + padding: 35px 0 0 0; + display: flex; + justify-content: space-between; +} + +.navbar__logo > object { + height: 35px; + padding: 5px 0 0; +} + +.navbar__links { + display: flex; +} + +.navbar__link-item { + padding: 10px; +} + +.navbar__link-item a { + text-decoration: none; + color: #e5def4; +} +.section__landingpage { + display: flex; + justify-content: space-between; +} + +.landingpage__container--left { + color: #ffffff; + width: 40%; +} +.landingpage__title { + margin: 20px 0 10px; + padding: 75px 0 15px; + font-weight: 600; + font-size: 36px; +} + +.landingpage__text { + width: 287px; + font-weight: 300; + font-size: 18px; +} + +.landingpage__downlaod-btn { + background-color: #25f18b; +} + +.landingpage__downlaod-btn:hover { + background-color: #6affb4; +} + +.landingpage__container--right { + margin-right: 54px; +} +.landingpage__container--right > div { + padding: 0 15px; + background-color: #fefefe; + margin-top: 40px; + width: 568px; + height: 480px; + border-radius: 25px; + transform: scale(0.9) rotate(-7deg); +} + +.landingpage__container--right img { + margin-top: 19px; +} +.section__features { + height: 522px; + background-color: #000000; +} + +.features__container--titel { + display: flex; + height: calc(522px * 0.25); + justify-content: center; + align-items: center; +} + +.features__title { + font-size: 30px; + font-weight: 300; + color: #fffff7; +} + +.features__container--cards { + display: flex; + justify-content: center; + height: calc(522px * 0.75); +} +.features__card { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 30px; + width: 276px; + margin-top: 20px; + text-align: center; +} + +.features__card--icon { + display: flex; + background-color: #ffffff; + height: 78px; + width: 78px; + justify-content: center; + align-items: center; + border-radius: 50%; +} + +.features__card--title { + font-weight: 500; + color: #fffff7; + margin: 10px 0; + padding: 15px 0 0; + font-size: 14px; +} + +.features__card--text { + color: #fffff7; + margin: 0 0 10px; + font-size: 14px; + text-align: center; +} + +.section__logos { + height: 89px; + background-color: #f9fafa; +} + +.logos__container { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.section__theme { + height: 657px; + background-color: #ffffff; + margin: 0 31px; + display: flex; + justify-content: center; +} + +.theme__imac { + padding: 60px 25px 40px; + max-height: 650px; +} + +.theme__container--text { + height: 368px; + width: 50%; +} +.theme__title { + font-size: 30px; + margin: 100px 0 10px 40px; + padding: 0 0 35px; +} +.theme__text { + max-width: 389px; + margin: 0 0 0 40px; + padding: 0 0 35px; + line-height: 30px; + font-size: 15px; + font-weight: 300; +} +.section__pricing { + height: 757px; + background-color: #f8f9f9; +} +.pricing__container--cards { + display: flex; + justify-content: center; +} +.pricing__container--title { + text-align: center; +} +.pricing__title { + font-size: 30px; + margin: 20px 0 10px; + padding: 75px 0 0; + display: block; + color: #333; +} +.pricing__text { + font-size: 18px; + margin: 10px 0; + padding: 10px 0 20px; + color: #888a88; +} + +.pricing__container--card { + width: 350px; + height: 430px; + padding: 0 15px; + font-size: 14px; +} + +.pricing__card { + text-align: center; + background-color: #f8f9f9; + padding: 36px 15px 45px; + transition: background-color 5.8s cubic-bezier(0.39, 0.58, 0.57, 1), + box-shadow 0.3s cubic-bezier(0.39, 0.58, 0.57, 1); + position: relative; +} +.pricing__card:hover { + box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); + background-color: #ffffff; +} + +.pricing__card--title { + margin: 20px 0 10px; + padding-bottom: 5px; + font-size: 18px; +} + +.pricing__card--cost { + margin: 10px 0; + font-size: 45px; + font-weight: 600; +} +.pricing__card--cost-intervall { + margin: 10px 0; + padding-bottom: 20px; + font-size: 12px; +} +.pricing__card--feature { + min-height: 120px; +} +.pricing__card--feature li::before { + content: "\2713"; + font-size: 18px; + margin-right: 8px; + color: #3aeb8c; +} + +.pricing__card--btn { + background-color: #0abceb; + width: 164px; + color: #ffffff; + padding-top: auto; +} + +.pricing__card--btn:hover { + background-color: #58d5f7; +} +.section__team { + height: 677px; + background-color: #ffffff; + padding: 60px 0 130px; +} + +.team__title { + margin: 20px 0 10px; + padding: 0 0 90px; + font-size: 30px; + font-weight: 300; + text-align: center; +} + +.team__container--cards { + display: flex; + justify-content: center; +} + +.team__card { + display: flex; + flex-direction: column; + align-items: center; + width: 306px; + height: 334px; + padding: 0 15px 60px; +} + +.team__card--img { + padding-bottom: 25px; +} + +.team__card--title { + font-size: 18px; + color: #747474; + margin: 10px 0; +} + +.team__card--name { + font-size: 14px; + margin: 10px 0; + color: #333333; + font-weight: 600; +} + +.team__card--role-description { + font-size: 14px; + margin-bottom: 10px; + font-weight: 300; + color: #333333; +} + +.team__card--social-media-icon { + padding: 7px; +} +.section_footer { + height: 77px; + background-color: #464646; +} + +.footer { + display: flex; + justify-content: center; + align-items: center; +} + +.footer__text { + color: #ffffff; + font-size: 14px; + padding-right: 7px; +}