From 56d21ff936e4d1dda6681084ffb606e0b667c8c7 Mon Sep 17 00:00:00 2001 From: Michal Nowakowski Date: Tue, 1 Aug 2023 18:30:44 +0200 Subject: [PATCH 1/5] coded header in html --- index.html | 46 +++++++++++++++++++++++ reset.css | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 0 3 files changed, 152 insertions(+) create mode 100644 index.html create mode 100644 reset.css create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..5a990a0a --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + HTML + CSS Project Website + + + + +
+ +
+
+

Beautiful Free Nova template

+

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

+ +
+
+ Image of modern website template +
+
+
+ + diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..af080da1 --- /dev/null +++ b/reset.css @@ -0,0 +1,106 @@ +/*** + The new CSS reset - version 1.9 (last updated 19.6.2023) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) + */ +*:where( + :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) + ) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reapply the pointer cursor for anchor tags */ +a, +button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, +ul, +menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, +textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* preformatted text - use only for this feature */ +:where(pre) { + all: revert; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* remove default dot (•) sign */ +::marker { + content: initial; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} + +/* Revert Modal native behavior */ +:where(dialog:modal) { + all: revert; +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..e69de29b From d2bb976b8e5e7489237c5d7a77e96e12e0545bab Mon Sep 17 00:00:00 2001 From: Michal Nowakowski Date: Tue, 1 Aug 2023 21:55:04 +0200 Subject: [PATCH 2/5] css header done --- index.html | 6 +++++ styles.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) diff --git a/index.html b/index.html index 5a990a0a..1915653b 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,12 @@ HTML + CSS Project Website + + + diff --git a/styles.css b/styles.css index e69de29b..142e743e 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,75 @@ +:root { + --color-white: rgba(255, 255, 255, 1); + --color-white-light: rgba(255, 255, 255, 0.8); +} + +body { + font-size: 16px; + font-family: "Montserrat", sans-serif; +} + +/* Header */ +.header { + width: 100%; + display: flex; + flex-direction: column; + + align-items: center; + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +/* Nav section */ /* Main section */ +.header__nav-container, +.header__section-container { + width: 1150px; + max-width: 1150px; + + padding: 25px 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.header__section-container { + padding-bottom: 125px; +} + +.header__nav-items { + display: flex; +} + +.header__nav-item { + padding: 0 10px; + font-weight: 700; + color: var(--color-white); +} + +.header__heading-title { + color: var(--color-white); + font-size: 2rem; + font-weight: 700; + max-width: 400px; +} +.header__description { + color: var(--color-white-light); + max-width: 240px; + padding: 30px 0; + line-height: 30px; +} +.header__download-btn { + font-size: 0.9rem; + font-weight: 700; + color: var(--color-white); + padding: 15px 40px; + background-color: #12f094; + border-radius: 10px; +} + +.header__ad-img-container { + height: 400px; + width: 500px; + margin-right: 90px; + border: 10px solid rgb(255, 255, 255); + background-color: var(--color-white); + border-radius: 15px; + transform: rotate(-7deg); +} From fe5d65790d218c0a7fb749712255d582a315b2cd Mon Sep 17 00:00:00 2001 From: Michal Nowakowski Date: Wed, 2 Aug 2023 17:39:48 +0200 Subject: [PATCH 3/5] 4/7 sections done --- index.html | 55 ++++++++++++++++++++++++++++ styles.css | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 158 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 1915653b..de7dda0f 100644 --- a/index.html +++ b/index.html @@ -48,5 +48,60 @@

Beautiful Free Nova template

+
+
+

Features

+
+
+
+ Mobile phone image +
+

Fully responsive

+

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

+
+
+
+ tools image +
+

Customizable

+

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

+
+
+
+ medal image +
+

Slick and beautiful design

+

+ Trendy and fresh design, fits any website. +

+
+
+
+
+
+ Image of companies logo +
+
+
+
+ Image of screen +
+
+

Simple and beautiful

+

+ Use Nowa theme for your next ewb project. It is completely + customizable so you can change any of the sections to fit your + needs. Now Theme is Free for any kind of use, personal and + commercial. Have fun and good luck! +

+
+
+
diff --git a/styles.css b/styles.css index 142e743e..68381190 100644 --- a/styles.css +++ b/styles.css @@ -18,7 +18,6 @@ body { background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); } -/* Nav section */ /* Main section */ .header__nav-container, .header__section-container { width: 1150px; @@ -73,3 +72,106 @@ body { border-radius: 15px; transform: rotate(-7deg); } + +/* Main section */ + +.main { + width: 100%; + background-color: #000; +} +.main__features { + width: 1150px; + max-width: 1150px; + + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} +.main__features-title { + width: 100%; + font-size: 1.6rem; + text-align: center; + padding: 30px 0; + color: var(--color-white-light); + text-transform: uppercase; +} +.main_features-container { + display: flex; + justify-content: space-evenly; + align-items: center; + width: 80%; + padding: 30px 0; +} +.main__features-item { + width: 25%; + height: 270px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + color: var(--color-white); +} +.features-item__img-wrapper { + height: 70px; + width: 70px; + background-color: #000; + border-radius: 50%; + background-color: var(--color-white); + display: flex; + justify-content: center; + align-items: center; +} +.features-item__img-wrapper img { + height: 40%; + width: 40%; +} +.features-item__title { + padding: 30px 0 20px 0; + text-transform: uppercase; + + font-weight: 700; + text-align: center; +} +.features-item__desc { + text-align: center; + font-size: 0.9rem; + color: var(--color-white-light); +} + +/* Main Logos */ +.main__logos { + width: 100%; + background-color: rgba(255, 255, 255, 0.97); +} +.main__logos-container { + text-align: center; + padding: 20px; +} + +/* Main ad */ + +.main__ad { + width: 100%; + padding: 50px 0; + display: flex; + justify-content: space-around; + background-color: var(--color-white); +} +.main__ad-desc { + width: 29%; +} +.main__ad-img-container { + height: 500px; +} + +.ad__desc-title { + font-size: 1.8rem; + text-transform: uppercase; + padding: 30px 0px; +} +.ad__desc-desc { + color: rgba(0, 0, 0, 0.5); + line-height: 30px; +} From f8d3f72c75cd339f1fbf91b9118a6707a797459d Mon Sep 17 00:00:00 2001 From: Michal Nowakowski Date: Wed, 2 Aug 2023 19:27:28 +0200 Subject: [PATCH 4/5] finished, but need refactor --- index.html | 115 +++++++++++++++++++++++++++++++++++- styles.css | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 280 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index de7dda0f..25c221b8 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

Beautiful Free Nova template

-

Features

+

Features

@@ -93,7 +93,7 @@

Slick and beautiful design

Image of screen
-

Simple and beautiful

+

Simple and beautiful

Use Nowa theme for your next ewb project. It is completely customizable so you can change any of the sections to fit your @@ -102,6 +102,117 @@

Simple and beautiful

+
+
+

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

Cto

+

Johnny B Good

+

+ The brain behind the whole operation +

+
+ + twitter + + + facebook + +
+
+
+
+ ceo person +
+

Ceo

+

Roll Over Beethoven

+

+ The one that must pull it together +

+
+ + twitter + + + facebook + +
+
+
+
+ cfo person +
+

Cfo

+

Chuck Berry

+

+ The guy with the hand on the wallet +

+
+ + twitter + + + facebook + +
+
+
+
+
+
+

+ A free template by +

webscope image

+

+
diff --git a/styles.css b/styles.css index 68381190..6e7bc7fa 100644 --- a/styles.css +++ b/styles.css @@ -175,3 +175,170 @@ body { color: rgba(0, 0, 0, 0.5); line-height: 30px; } + +/* Main pricing plan */ + +.main__pricing-plan { + width: 100%; + background-color: rgba(255, 255, 255, 0.97); +} + +.main__pricing-plan-container { + width: 1150px; + max-width: 1150px; + margin: 0 auto; + padding: 50px 0; + text-align: center; +} + +.pricing-plan__title { + text-transform: uppercase; + font-size: 1.4rem; +} + +.pricing-plan__title-2 { + padding: 15px 0; + font-size: 0.8rem; + color: rgba(0, 0, 0, 0.5); +} + +.pricing-plan__items { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin: 40px 0 15px 0; +} + +.pricing-plan__item { + /* margin-top: 40px; */ + width: 25%; + height: 400px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + /* outline: 1px solid red; */ + padding: 20px; + border-radius: 5px; +} +.pricing-plan__item:nth-child(2) { + background-color: #ffffff; + position: relative; + box-shadow: 0px 0px 15px 2px #00000048; +} + +.item__option { + text-transform: uppercase; + color: rgba(0, 0, 0, 0.5); + margin-top: 20px; +} + +.item__price { + font-size: 2rem; + font-weight: 700; + padding: 10px 0; +} + +.item__period { + font-size: 0.6rem; + padding-bottom: 30px; +} + +.item__benefit { + font-size: 0.8rem; + font-weight: 700; + line-height: 20px; +} + +.item__btn-container { + flex-grow: 1; + display: flex; + align-items: flex-end; + margin-bottom: 15px; +} +.item__buy-plan-btn { + padding: 15px 40px; + background-color: rgb(67, 156, 240); + color: rgba(255, 255, 255, 0.7); + font-size: 0.8rem; + border-radius: 10px; +} + +/* Main team */ + +.main_team { + width: 100%; + background-color: var(--color-white); +} + +.main__team-container { + width: 1150px; + max-width: 1150px; + margin: 0 auto; + padding: 50px 0; + text-align: center; +} +.main__team-title { + text-transform: uppercase; + font-size: 1.4rem; + margin-bottom: 60px; + color: rgba(0, 0, 0, 0.7); +} + +.main__team-people { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin-bottom: 90px; +} + +.team__person { + width: 25%; + height: 310px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding: 20px; +} + +.team__person-ing-container { + flex-grow: 1; +} + +.team__person-title { + text-transform: uppercase; + color: rgba(0, 0, 0, 0.5); + padding-bottom: 10px; +} +.team__person-name { + padding-bottom: 10px; + font-weight: 700; +} + +.team__person-desc { + padding-bottom: 10px; + font-size: 0.8rem; +} +.team__person-twitter { + padding-right: 10px; +} + +/* Footer */ + +.footer { + width: 100%; + height: 50px; + background-color: rgba(43, 42, 42, 0.8); + /* text-align: center; */ + display: flex; + justify-content: center; + align-items: center; +} +.footer__title { + color: var(--color-white); + font-size: 0.6rem; + padding-right: 10px; +} From 8cc9297067da00fb3e29badb178c565bf76675c2 Mon Sep 17 00:00:00 2001 From: mikroTesting Date: Mon, 18 Mar 2024 19:46:50 +0100 Subject: [PATCH 5/5] css and html refactor --- index.html | 28 ++++++++++++------------ styles.css | 63 ++++++++++++++++++++++-------------------------------- 2 files changed, 40 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 25c221b8..b01b3ac1 100644 --- a/index.html +++ b/index.html @@ -92,7 +92,7 @@

Slick and beautiful design

Image of screen
-
+

Simple and beautiful

Use Nowa theme for your next ewb project. It is completely @@ -100,7 +100,7 @@

Simple and beautiful

needs. Now Theme is Free for any kind of use, personal and commercial. Have fun and good luck!

-
+
@@ -109,7 +109,7 @@

Choose your pricing plan

Pick any of our super affordable pricing plans

-
+

Basic

$15

per month

@@ -119,8 +119,8 @@

$15

-
-
+ +

Agency

$55

per month

@@ -130,8 +130,8 @@

$55

-
-
+ +

Pro

$75

per month

@@ -142,7 +142,7 @@

$75

-
+
@@ -150,7 +150,7 @@

$75

The Team

-
+
cto person
@@ -167,8 +167,8 @@

The Team

facebook
-
-
+ +
ceo person
@@ -185,8 +185,8 @@

The Team

facebook
-
-
+ +
cfo person
@@ -203,7 +203,7 @@

The Team

facebook
- + diff --git a/styles.css b/styles.css index 6e7bc7fa..4ae70da5 100644 --- a/styles.css +++ b/styles.css @@ -3,6 +3,24 @@ --color-white-light: rgba(255, 255, 255, 0.8); } +.footer__title, +.header__nav-item, +.header__heading-title, +.header__download-btn, +.header__ad-img-container, +.main__features-item { + color: var(--color-white); +} + +.header__nav-container, +.header__section-container, +.main__features, +.main__pricing-plan-container, +.main__team-container { + width: 100%; + max-width: 1150px; +} + body { font-size: 16px; font-family: "Montserrat", sans-serif; @@ -13,23 +31,19 @@ body { width: 100%; display: flex; flex-direction: column; - align-items: center; background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); } .header__nav-container, .header__section-container { - width: 1150px; - max-width: 1150px; - padding: 25px 0; display: flex; justify-content: space-between; align-items: center; } .header__section-container { - padding-bottom: 125px; + margin-bottom: 125px; } .header__nav-items { @@ -39,11 +53,9 @@ body { .header__nav-item { padding: 0 10px; font-weight: 700; - color: var(--color-white); } .header__heading-title { - color: var(--color-white); font-size: 2rem; font-weight: 700; max-width: 400px; @@ -57,7 +69,6 @@ body { .header__download-btn { font-size: 0.9rem; font-weight: 700; - color: var(--color-white); padding: 15px 40px; background-color: #12f094; border-radius: 10px; @@ -76,13 +87,9 @@ body { /* Main section */ .main { - width: 100%; background-color: #000; } .main__features { - width: 1150px; - max-width: 1150px; - margin: 0 auto; display: flex; justify-content: center; @@ -111,12 +118,10 @@ body { flex-direction: column; justify-content: flex-start; align-items: center; - color: var(--color-white); } .features-item__img-wrapper { height: 70px; width: 70px; - background-color: #000; border-radius: 50%; background-color: var(--color-white); display: flex; @@ -130,7 +135,6 @@ body { .features-item__title { padding: 30px 0 20px 0; text-transform: uppercase; - font-weight: 700; text-align: center; } @@ -139,10 +143,8 @@ body { font-size: 0.9rem; color: var(--color-white-light); } - /* Main Logos */ .main__logos { - width: 100%; background-color: rgba(255, 255, 255, 0.97); } .main__logos-container { @@ -153,18 +155,17 @@ body { /* Main ad */ .main__ad { - width: 100%; padding: 50px 0; display: flex; justify-content: space-around; background-color: var(--color-white); } -.main__ad-desc { - width: 29%; -} .main__ad-img-container { height: 500px; } +.main__ad-desc { + width: 29%; +} .ad__desc-title { font-size: 1.8rem; @@ -179,13 +180,10 @@ body { /* Main pricing plan */ .main__pricing-plan { - width: 100%; background-color: rgba(255, 255, 255, 0.97); } .main__pricing-plan-container { - width: 1150px; - max-width: 1150px; margin: 0 auto; padding: 50px 0; text-align: center; @@ -206,19 +204,16 @@ body { display: flex; justify-content: center; align-items: center; - width: 100%; margin: 40px 0 15px 0; } .pricing-plan__item { - /* margin-top: 40px; */ width: 25%; height: 400px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; - /* outline: 1px solid red; */ padding: 20px; border-radius: 5px; } @@ -265,6 +260,10 @@ body { border-radius: 10px; } +.item__buy-plan-btn:hover { + cursor: pointer; +} + /* Main team */ .main_team { @@ -273,8 +272,6 @@ body { } .main__team-container { - width: 1150px; - max-width: 1150px; margin: 0 auto; padding: 50px 0; text-align: center; @@ -290,7 +287,6 @@ body { display: flex; justify-content: center; align-items: center; - width: 100%; margin-bottom: 90px; } @@ -304,10 +300,6 @@ body { padding: 20px; } -.team__person-ing-container { - flex-grow: 1; -} - .team__person-title { text-transform: uppercase; color: rgba(0, 0, 0, 0.5); @@ -329,16 +321,13 @@ body { /* Footer */ .footer { - width: 100%; height: 50px; background-color: rgba(43, 42, 42, 0.8); - /* text-align: center; */ display: flex; justify-content: center; align-items: center; } .footer__title { - color: var(--color-white); font-size: 0.6rem; padding-right: 10px; }