diff --git a/06.04.2025_22.08.14_REC.mp4 b/06.04.2025_22.08.14_REC.mp4 new file mode 100644 index 00000000..d826a631 Binary files /dev/null and b/06.04.2025_22.08.14_REC.mp4 differ diff --git a/README.md b/README.md index 6d1ec1cd..e57247e2 100644 --- a/README.md +++ b/README.md @@ -1,56 +1,98 @@ -> ⭐ ***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)**.* +![Preview] +Nova Template Clone +👉 Live Version -  +A responsive one-page template inspired by a design from Webscope. Built using HTML and CSS only, this project replicates the structure, layout, and look of a premium template, focusing on clean code and layout practice. +✨ Main Features: +Layout with Flexbox -# HTML & CSS: Podstawy +Sectioned structure: header, features, logos, main content, pricing, team, footer -Najwyższy czas zakodować prawdziwą stronę internetową! +Interactive hover effects and reusable components -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: +💡 Technologies +![HTML5](image-1.png) +![CSS3](image-2.png) (including custom properties and Flexbox) -![](./assets/demo.png) -  +💿 Installation +You don’t need any advanced setup to run the project. Simply: -## Opis projektu +# Clone the repo +git clone git@github.com:satoshi300/task-html-and-css-basics.git -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). +# Open index.html in your browser +To enable live preview in development, use the VS Code Live Server extension. -Font, który jest używany w projekcie, to [Montserrat](https://fonts.google.com/specimen/Montserrat). +🤔 Solutions Provided in the Project +1. Flexbox-based Layout +Problem: Creating a clean, responsive layout +Solution: Use of .row, .container, .cell wrappers for control -Tło w górnej części strony to gradient: -`background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235));` +.row { + display: flex; + justify-content: space-between; +} -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. +2. Maintaining Design Consistency +Problem: Repeating layout logic without a framework +Solution: Utility-like classes with semantic naming -> **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. +.row, .container, .cell { + outline: 5px solid; +} -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. +3. Gradient Header Background +Issue Solution +Non-standard header design background: radial-gradient(...) +Typography consistency Google Fonts: Montserrat +Precise element placement PerfectPixel plugin -## Propozycja podziału +4. Example – Gradient and Button Styling +.header { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} -Poniżej zamieszczam propozycję podziału strony na poszczególne grupy: +🔁 Reusable Parts +.row – 100% width section -- wiersz (`width: 100%`) – kolor zielony -- wyśrodkowanie (`max-width: 1150px`) – kolor niebieski -- komórka (wiele elementów w jednej linii) – kolor pomarańczowy. +.container – max-width wrapper -Nie musisz się od tego stosować – to jedynie moja koncepcja, która ma Ci pomóc w utworzeniu odpowiedniej struktury. +.cell – flexible internal block -![](./assets/demo-info.png) +Feature and pricing cards reuse consistent structure -  +🔧 Tools / Extensions Used +PerfectPixel – overlay comparison with PNG mockup -> :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/). +Live Server (VS Code) – real-time preview +SVG Viewer – for previewing SVG icons -  +Prettier – for formatting -> ⭐ ***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)**.* +🌱 Inspirations +Template by Webscope + +devmentor.pl project example + +PerfectPixel UX pixel-precision approach + +💭 Conclusions for Future Projects +I would like to improve: + +Responsiveness for different resolutions (e.g. 1280px, 1440px) + +Use semantic HTML tags more precisely + +Refactor CSS into SCSS or better BEM-based naming + +🙋‍♂️ Feel free to contact me +Feel free to reach out if you'd like to collaborate, give feedback, or just say hi! +📬 Your LinkedIn https://www.linkedin.com/in/michal-wasiak-457a5331/ | Your GitHub https://github.com/satoshi300 + +👏 Thanks / Special thanks / Credits +Special thanks to devmentor.pl for the course, tasks, and code review guidance 🙏 +And to Webscope for the original design inspiration. \ No newline at end of file diff --git a/README1.md b/README1.md new file mode 100644 index 00000000..6d1ec1cd --- /dev/null +++ b/README1.md @@ -0,0 +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)**.* diff --git a/image-1.png b/image-1.png new file mode 100644 index 00000000..4c59f4dc Binary files /dev/null and b/image-1.png differ diff --git a/image-2.png b/image-2.png new file mode 100644 index 00000000..eeb2b120 Binary files /dev/null and b/image-2.png differ diff --git a/image-3.png b/image-3.png new file mode 100644 index 00000000..a7c5026a Binary files /dev/null and b/image-3.png differ diff --git a/image.png b/image.png new file mode 100644 index 00000000..edba9a34 Binary files /dev/null and b/image.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..8d3159c7 --- /dev/null +++ b/index.html @@ -0,0 +1,262 @@ + + + + + + + + + + + Task - HTML and CSS basics + + + +
+
+

+ +
+
+
+

Beautiful Free Nova Template

+

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

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

features

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

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

+
+
+
+ +

cto

+

Hohnny B Good

+

The brains behind the whole operation + +

+
+ + +
+
+
+ +

ceo

+

Roll Over Beethoven +

+

The one that puts it all together + +

+
+ + +
+
+
+ +

cfo

+

Chuck Berry +

+

The guy with his hand on the wallet + +

+
+ + +
+
+
+
+ + + + \ No newline at end of file diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..8d745455 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,463 @@ +/* font-family: "Montserrat", sans-serif; + */ + +:root { + --text-color: #fff; + --text-color-hover: #000; + --text-color-main: #000; + --header-btn: #25F18B; + --header-image: #fff; + --features-background: #000; + --logos-background: #F9FAFA; + --main-background: #FFFFFF; + --pricing-background-color: #F8F9F9; + --pricing-header-heading: #333333; + --pricing-btn: #0ABCEB; + --footer-background: #464646; + --row-outline-color: green; + --cell-outline-color: orange; + --container-outline-color: #00A8F3; +} + +body { + color: var(--text-color); + font-family: "Montserrat", sans-serif; + font-size: 10px; +} + + + +.cell { + min-height: 50px; + /* outline-color: var(--cell-outline-color); */ +} + +.container { + margin: 0 auto; + max-width: 1400px; + /* outline-color: var(--container-outline-color); */ +} + +/* HEADER */ +.header { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.header__container { + display: flex; + justify-content: space-between; + padding-top: 5px; + padding-bottom: 10px; +} + +.nav__container { + margin-right: 10px; + margin-top: 5px; +} + +.header__container-bottom { + margin-top: 25px; + height: 550px; +} + +.header__logo { + display: flex; + align-items: flex-end; + margin-left: 5px; + +} + +.header__nav { + width: 300px; +} + +.nav { + display: flex; +} + +.nav__item { + color: var(--text-color); +} + +.nav__link { + display: inline-block; + width: 100%; + font-size: 1.6em; + padding: 20px 30px; + color: var(--text-color); + text-decoration: none; +} + +.nav__link:hover { + color: var(--text-color-hover); +} + +.header__heading { + font-weight: bold; + font-size: 3.6em; +} + +.header__paragraph { + width: 300px; + margin-top: 25px; + font-size: 1.6em; +} + +.header__btn { + width: 10vw; + padding: 20px; + margin-top: 25px; + font-size: 1.6em; + color: var(--text-color); + background-color: var(--header-btn); + border: none; + border-radius: 15px; + transition: .3s; +} + +.header__btn:hover { + color: var(--text-color-hover); + background-color: var(--pricing-btn); + border-radius: 25px; +} + +.article__header { + display: flex; + width: 35%; + margin-left: 10px; + flex-direction: column; + justify-content: center; +} + +.header__image { + margin-right: 10px; + width: 62%; +} + +.header__image-style { + width: 600px; + position: relative; + top: 35px; + left: 150px; + border: 15px solid white; + border-radius: 25px; + transform: rotate(-10deg); + background-color: var(--header-image); + +} + +/* FEATURES */ +.features { + background-color: var(--features-background); +} + +.features__heading { + padding: 40px; + background-color: var(--features-background); + font-size: 3.2em; + text-align: center; + text-transform: uppercase; +} + +.features__main { + display: flex; + justify-content: space-evenly; + margin-top: 20px; + background-color: var(--features-background); +} + +.feature__item { + align-items: baseline; + margin-top: 20px; + margin-bottom: 20px; + width: 25%; + align-self: flex-end; +} + +.feature__item-left { + height: 450px; + width: 350px; +} + +.feature__item-middle { + height: 440px; + +} + +.feature__item-right { + height: 430px; + width: 300px; +} + +.feature__icon-container { + display: flex; + margin: 20px auto; + width: 100px; + height: 100px; + border-radius: 50%; + background-color: #fff; +} + +.feature__icon { + margin: 0 auto; + align-self: center; +} + +.feature__title { + padding-top: 25px; + font-size: 2.2em; + text-align: center; + text-transform: uppercase; +} + +.feature_text { + padding: 25px 35px; + margin-top: 25px; + text-align: center; + font-size: 1.8em; +} + +/* LOGOS */ +.logos { + background-color: var(--logos-background); +} + +.logos__container { + display: flex; + justify-content: center; +} + +.logos__item { + margin: 20px 0; +} + +/* MAIN */ + +.main { + background-color: var(--main-background); +} + +.main__container { + display: flex; + justify-content: center; + max-width: 1400px; + margin: 0 auto; +} + +.photo__container { + width: 55%; + padding: 35px; + margin-right: 20px; +} + +.main__text { + width: 44%; + padding: 40px; +} + +.main__heading { + margin-top: 30px; + color: var(--text-color-main); + font-size: 3.6em; + text-transform: uppercase; +} + +.main__paragraph { + margin-top: 40px; + color: var(--text-color-main); + width: 85%; + line-height: 2em; + font-size: 1.8em; +} + +/* PRICING */ + +.pricing { + color: var(--text-color-main); + background-color: var(--pricing-background-color); +} + +.pricing__header { + margin-top: 50px +} + +.pricing__heading-top { + text-align: center; + color: var(--pricing-header-heading); + padding-top: 40px; + text-transform: uppercase; + font-size: 3.6em; +} + +.pricing__heading-paragraph { + margin-top: 20px; + padding-bottom: 20px; + font-size: 2em; + text-align: center; +} + +.pricing__items { + display: flex; + justify-content: space-around; + margin-top: 50px; + padding: 0 50px; +} + +.pricing__item { + position: relative; + display: flex; + flex-direction: column; + margin-top: 25px; + margin-bottom: 25px; + padding-top: 25px; + padding-bottom: 150px; + text-align: center; +} + +.pricing__item-sides { + width: 25%; +} + +.pricing__item-middle { + box-shadow: 5px 8.7px 40px rgba(99, 117, 138, 0.3); + border-radius: 7px; + width: 30%; +} + + + +.pricing__heading-bottom { + text-transform: uppercase; + font-size: 2.0em; +} + +.pricing__price { + padding-top: 20px; + font-weight: bold; + font-size: 4.5em; +} + +.pricing__monthly { + margin-top: 25px; + font-size: 1.6em; +} + +.plan__features { + margin-top: 55px; + font-size: 2.4em; +} + +.pricing__btn { + position: absolute; + bottom: 50px; + left: 50%; + transform: translate(-50%); + width: 150px; + padding: 20px; + border-radius: 10px; + background-color: var(--pricing-btn); + color: var(--text-color); + border: none; + transition: .3s; +} + +.pricing__btn:hover { + color: var(--text-color-hover); + background-color: var(--header-btn); + border-radius: 20px; +} + +.pricing__btn-left { + /* margin-top: 80px; + margin-bottom: 100px; */ + +} + +.pricing__btn-middle { + margin-top: 50px; +} + +.pricing__btn-right { + margin-top: 20px; +} + + +/* TEAM */ + +.team__h2heading { + + margin-top: 50px; + + padding: 30px; + color: var(--text-color-main); + text-transform: uppercase; + text-align: center; + font-size: 3.6em; +} + +.team__items { + display: flex; + justify-content: space-evenly; + margin-top: 20px; +} + +.team__item { + color: var(--text-color-hover); + margin-top: 20px; + margin-bottom: 20px; +} + +.team__photo { + display: flex; + margin: 20px auto; +} + +.team__item-h3heading { + margin-top: 20px; + text-align: center; + font-size: 1.8em; + text-transform: uppercase; +} + +.team__item-h4heading { + margin-top: 20px; + text-align: center; + font-size: 1.6em; + font-weight: bold; +} + +.team__paragraph { + margin: 20px 15px 0 15px; + font-size: 1.6em; +} + +.team__socials { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.team__social { + margin-bottom: 100px; +} + +.team__social:first-child { + margin-right: 20px; +} + +/* FOOTER */ +.footer { + background-color: var(--footer-background); +} + +.footer__container { + display: flex; + justify-content: center; +} + +.footer__text { + margin: 20px 0; + align-self: center; + font-size: 1.6em; + margin-right: 20px; +} \ No newline at end of file diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..9943a66c --- /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