From e5e174c1868e50a880556a57c6c498418f88765f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krystian=20B=C4=85k?= Date: Sat, 12 Apr 2025 21:02:53 +0200 Subject: [PATCH 1/2] Zadanie wykonane, po hover jest anmika --- image.html | 215 ++++++++++++++++++++++++ styles/base.css | 34 ++++ styles/content.css | 396 +++++++++++++++++++++++++++++++++++++++++++++ styles/footer.css | 33 ++++ styles/header.css | 55 +++++++ 5 files changed, 733 insertions(+) create mode 100644 image.html create mode 100644 styles/base.css create mode 100644 styles/content.css create mode 100644 styles/footer.css create mode 100644 styles/header.css diff --git a/image.html b/image.html new file mode 100644 index 00000000..9f347979 --- /dev/null +++ b/image.html @@ -0,0 +1,215 @@ + + + + + + + Zadanie 5 + + + + + + + + + + + + +
+
+

+ +

+ +
+
+ + + +
+
+
+ Beautiful Free Nova template +

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

+ +
+
+ +
+
+
+ + + +
+
+
FEATURES
+
+
+
+
+ +
+ fully responsive +

Look amazing on any device: smartphone, tablet, laptop and desktop

+
+
+
+ +
+ customizable +

Look amazing on any device: smartphone, tablet, laptop and desktop

+
+
+
+ +
+ slick and beautiful design +

Look amazing on any device: smartphone, tablet, laptop and desktop

+
+
+
+ + + +
+ +
+ +
+
+ + + +
+ +
+ +
+
+
+ simple and beautiful +

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type + and scrambled it to make a type specimen book.

+
+
+ +
+ + + +
+
+
+ choose your pricing plan + Pick any of our super affordable pricing plans +
+
+
+
+
+ basic + $15 +

per mouth

+
    +
  • Up to 7 Projects
    • +
  • 2 Additional Developers
    • +
+
+ +
+
+
+ agency + $55 +

per mouth

+
    +
  • Up to 7 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
+ +
+ +
+ +
+
+ pro + $75 +

per mouth

+
    +
  • Up to 7 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
  • 1.5GB Disk Space
    • +
+
+ +
+
+
+ + + +
+
+
THE TEAM
+
+
+
+
+ + CEO +

jonny b good

+

The brains behind the whole operation

+ +
+
+
+
+ + CEO +

roll over beethoven

+

TThe one the puts it all toghether

+ +
+
+
+
+ + CEO +

chuck barry

+

The guy with his hand on the wallet

+ +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/styles/base.css b/styles/base.css new file mode 100644 index 00000000..314a95ba --- /dev/null +++ b/styles/base.css @@ -0,0 +1,34 @@ +/* base.css */ +body{ + margin: 0px; +} + +.row, +.cell, +.container { + box-sizing: border-box; + margin: 0px; + padding: 0px; +} + +.row { + margin-bottom: 0px; + padding: 12px 0px; +} + +.container { + margin: 0 auto; + max-width: 1150px; +} + +.cell { + min-height: 50px; +} + +title{ + display: block; +} + +button{ + cursor: pointer; +} \ No newline at end of file diff --git a/styles/content.css b/styles/content.css new file mode 100644 index 00000000..a5afa4ee --- /dev/null +++ b/styles/content.css @@ -0,0 +1,396 @@ +@font-face { + font-family: 'Montserrat'; + src: url(https://fonts.google.com/specimen/Montserrat) format('opentype'); + font-style: normal; + font-weight: bold; +} + + + + +:root { + --color-alfa: rgb(255, 255, 255); + --color-beta: rgb(37, 241, 139); + --color-gamma: rgb(51, 51, 51); + --color-delta: rgb(10, 188, 235); +} + +/* content.css */ + +.content__container { + align-items: flex-start; + display: flex; + justify-content: center; + gap: 40px; +} + +.content__article img { + max-width: 100%; +} + + + +/* Slider */ + +section[data-id="Slider"] { + padding-top: 100px; + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +section[data-id="Slider"] .content__container { + margin-top: 40px; + padding: 0px 8px; +} + +section[data-id="Slider"] .content__article.cell { + min-height: 500px; +} + +section[data-id="Slider"] .content__article.cell.left { + padding: 48px 0; + width: 40%; +} + +section[data-id="Slider"] .content__article.cell.left title { + font: bold 2.1rem/1.2em 'Montserrat'; + color: var(--color-alfa); +} + +section[data-id="Slider"] .content__article.cell.left p { + max-width: 60%; + font: 200 1.1rem/1.8em 'Montserrat'; + color: var(--color-alfa); +} + +section[data-id="Slider"] .content__article.cell.left button { + width: 200px; + padding: 18px 0; + font: 600 0.9rem/1em 'Montserrat'; + background-color: var(--color-beta); + color: var(--color-alfa); + border-radius: 8px; + border: 0px; + cursor: pointer; +} + +section[data-id="Slider"] .content__article.cell.right { + width: 60%; +} + +section[data-id="Slider"] .content__article.cell.right a { + display: flex; + justify-content: center; +} + +.screen { + width: 80%; + transform: rotate(-5deg); + border: 16px solid white; + border-radius: 20px; + padding-bottom: 40px; + background-color: var(--color-alfa); +} + +/* Features */ + +section[data-id="Features"] { + padding: 0px 8px; + background-color: black; + color: var(--color-alfa); +} + + +section[data-id="Features"] .content__article { + padding: 0px 8px; +} + +section[data-id="Features"] .content__article.title--module { + width: 100%; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + font: 200 1.8rem/1em 'Montserrat'; + padding: 20px 0; +} + +section[data-id="Features"] .content__article.cell { + display: flex; + flex-flow: column wrap; + justify-content: start; + align-items: center; + width: 33%; + min-height: 300px; + text-align: center; + cursor: pointer; +} + +section[data-id="Features"] .content__article.cell div { + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + margin-bottom: 28px; + background-color: var(--color-alfa); + border-radius: 50%; +} + +section[data-id="Features"] .content__article.cell title { + max-width: 80%; + font: 400 0.9rem/1.2em 'Montserrat'; + text-transform: uppercase; +} + +section[data-id="Features"] .content__article.cell p { + font: 200 0.8rem/1.6em 'Montserrat'; +} + +section[data-id="Features"] .content__container { + padding: 12px 12%; +} + +section[data-id="Features"] article { + text-align: center; +} + + +/* Module cooperating companies */ + +section[data-id="Module cooperating"]{ + background-color: #F9FAFA; +} + +section[data-id="Module cooperating"] article { + display: flex; + justify-content: center; + align-items: center; + margin: 12px 0; +} + +section[data-id="Module cooperating"] .content__article.cell.left { + width: 100%; +} + + +/* Simple */ + +section[data-id="Simple"] { + display: flex; + flex-flow: row nowrap; + justify-content: center; + gap: 8px; + padding: 40px 0; +} + +section[data-id="Simple"] .content__article.cell.left { + width: 55%; +} + +section[data-id="Simple"] .content__article.cell.left img { + width: 80%; +} + +section[data-id="Simple"] .content__article.cell.right { + display: flex; + flex-flow: row wrap; + align-items: start; + justify-content: left; + width: 45%; + padding: 40px 0 0 16px; + text-align: left; +} + +section[data-id="Simple"] .content__article.cell.right title { + max-width: 80%; + font: 300 2rem/1.2em 'Montserrat'; + color: var(--color-gamma); + text-transform: uppercase; + margin-bottom: 40px; +} + +section[data-id="Simple"] .content__article.cell.right p { + max-width: 65%; + font: 300 0.9rem/2em 'Montserrat'; + color: var(--color-gamma); + filter: opacity(0.5); +} + + +section[data-id="Simple"] .content__article.cell { + display: flex; + flex-flow: column wrap; + justify-content: center; + min-height: 300px; + text-align: center; +} + +section[data-id="Simple"] .content__container { + padding: 12px 0px; +} + + + +/* Pricing plan */ + +section[data-id="Pricing plan"] { + background-color: #F8F9F9; + padding-bottom: 80px; + +} + +section[data-id="Pricing plan"] .content__article.title--module { + width: 100%; + height: 50px; + padding: 40px 0; + text-align: center; +} + +section[data-id="Pricing plan"] .content__article.title--module title { + font: 300 2rem/1.2em 'Montserrat'; + color: var(--color-gamma); + text-transform: uppercase; + margin-bottom: 20px; +} + +section[data-id="Pricing plan"] .content__article.title--module span { + font: 300 1.2rem/1.2em 'Montserrat'; + color: var(--color-gamma); + filter: opacity(0.5); +} + +section[data-id="Pricing plan"] .content__article.cell { + position: relative; + display: flex; + justify-content: center; + align-items: start; + min-height: 400px; + width: 33%; + padding: 40px 0; + text-align: center; + border-radius: 8px; + cursor: pointer; + transition: 1.2s ease-in-out; +} + +section[data-id="Pricing plan"] .content__article.cell:hover { + width: 40%; + -webkit-box-shadow: 8px 8px 24px 0px rgba(130, 130, 130, 0.5); + -moz-box-shadow: 8px 8px 24px 0px rgba(130, 130, 130, 0.5); + box-shadow: 8px 8px 24px 0px rgba(130, 130, 130, 0.5); + transition: 1.2s ease-in-out; + cursor: pointer; +} + +section[data-id="Pricing plan"] .content__article.cell div title { + margin-bottom: 8px; + font: 400 1.2rem/1.2em 'Montserrat'; + color: var(--color-gamma); + filter: opacity(0.5); + text-transform: uppercase; +} + +section[data-id="Pricing plan"] .content__article.cell div span { + font: bold 3rem/1.2em 'Montserrat'; + color: var(--color-gamma); + text-transform: uppercase; +} + +section[data-id="Pricing plan"] .content__article.cell div p { + font: 400 0.8rem/1.2em 'Montserrat'; + color: var(--color-gamma); + filter: opacity(0.8); +} + +section[data-id="Pricing plan"] .content__article.cell div ul { + display: flex; + justify-content: center; + flex-flow: column wrap; + padding: 0px; + list-style-type: none; +} + +section[data-id="Pricing plan"] .content__article.cell div ul li { + font: 600 0.8rem/1.6em 'Montserrat'; + color: var(--color-gamma); + list-style-type: none; +} + +section[data-id="Pricing plan"] .content__article.cell button { + position: absolute; + bottom: 40px; + left: calc(50%-150px); + width: 150px; + padding: 18px 0; + font: 200 0.9rem/1em 'Montserrat'; + background-color: var(--color-delta); + color: var(--color-alfa); + border-radius: 8px; + border: 0px; +} + +section[data-id="Pricing plan"] .content__container { + padding: 12px 8%; +} + + +/* The team */ + +section[data-id="The team"] .content__article { + padding: 0px 8px; +} + +section[data-id="The team"] .content__article.title--module { + display: flex; + align-items: center; + height: 100px; + font: 300 2rem/1.2em 'Montserrat'; + color: var(--color-gamma); + text-transform: uppercase; + margin-bottom: 20px; +} + +section[data-id="The team"] .content__article.cell { + min-height: 400px; + width: 33%; + padding-top: 20px; + text-align: center; +} + +section[data-id="The team"] .content__article.cell title{ + margin-bottom: 8px; + font: 400 1.2rem/1.2em 'Montserrat'; + color: var(--color-gamma); + filter: opacity(0.5); + text-transform: uppercase; +} + +section[data-id="The team"] .content__article.cell .name{ + margin-bottom: 8px; + font: 800 0.9rem/1.2em 'Montserrat'; + color: var(--color-gamma); + text-transform: capitalize; +} + +section[data-id="The team"] .content__article.cell .about{ + margin-bottom: 8px; + font: 300 0.8rem/1.2em 'Montserrat'; + color: var(--color-gamma); + filter: opacity(0.8); + text-transform: capitalize; +} + +section[data-id="The team"] .content__article.cell span img{ + margin: 0 5px; + scale: 0.6; + filter: invert(0.7); +} + +.person { + margin-bottom: 24px; +} + +section[data-id="The team"] .content__container { + /* box-sizing: border-box; Przeniosłem do base.css */ + padding: 12px 8%; +} \ No newline at end of file diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 00000000..f50660e8 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,33 @@ +/* footer.css */ + +:root { + --color-alfa: rgb(255, 255, 255); + --color-beta: rgb(37, 241, 139); + --color-gamma: rgb(51, 51, 51); + --color-delta: rgb(10, 188, 235); +} + +.footer { + max-height: 80px; + padding: 0px; +} + +.footer__container, .footer__logo{ + display: flex; + justify-content: center; + align-items: center; +} + +.footer__container { + min-width: 100%; + min-height: 100px; + background-color: var(--color-gamma); +} + +.footer__container span{ + margin: 8px; + font: 700 0.7rem/1em 'Montserrat'; + color: var(--color-alfa); +} + + diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 00000000..e5e389e2 --- /dev/null +++ b/styles/header.css @@ -0,0 +1,55 @@ +/* header.css */ +:root { + --color-alfa: rgb(255, 255, 255); + --color-beta: rgb(37, 241, 139); + --color-gamma: rgb(51, 51, 51); +} + +.header{ + position: absolute; + width: 100%; + padding: 0px; +} + +.header__container { + display: flex; + justify-content: space-between; + height: 100px; + padding: 12px 0px; +} + +.header__logo { + display: flex; + align-items: end; + margin: 0px; +} + +.header__logo.cell img{ + width: 100px; + padding: 8px; +} + +.header__nav { + display: flex; + justify-content: right; + min-width: 400px; + margin: 0px; +} + +nav ul { + display: flex; + align-items: center; + justify-content: right; + gap: 20px; + padding: 0 10px 10px; + list-style-type: none; + padding: 0; + margin: 0; + +} + +nav ul li a{ + font: 600 14px/1.5em 'Montserrat'; + color: var(--color-alfa); + text-decoration: none; +} \ No newline at end of file From 85babe070d32d749b1217be41f6c9b2130004df2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krystian=20B=C4=85k?= Date: Sat, 12 Apr 2025 21:04:57 +0200 Subject: [PATCH 2/2] Zmiana nazwy plikow --- image.html => index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename image.html => index.html (100%) diff --git a/image.html b/index.html similarity index 100% rename from image.html rename to index.html