From de88e970eb346936b3647374701c0043341c2b81 Mon Sep 17 00:00:00 2001 From: Neil Gorski Date: Sun, 9 Feb 2025 21:50:36 +0100 Subject: [PATCH 1/9] create index.html, create style.css, add reset.css, create sections --- images/design.svg | 2 +- index.html | 33 ++++++++++++++++++ styles/reset.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 42 ++++++++++++++++++++++ 4 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 index.html create mode 100644 styles/reset.css create mode 100644 styles/style.css diff --git a/images/design.svg b/images/design.svg index 41320bfc..4b715506 100644 --- a/images/design.svg +++ b/images/design.svg @@ -1,4 +1,4 @@ - +https://github.com/Neil-Gorski/task-html-and-css-basics.git design diff --git a/index.html b/index.html new file mode 100644 index 00000000..f21e4af1 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Nova + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 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..bac34796 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,42 @@ +.section__container { + width: 100%; +} + +.cell__container { + max-width: 1150px; +} + +.section__landing-page { + height: 730px; + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.section__features { + height: 522px; + background-color: #000; +} + +.section__icons { + height: 89px; + background-color: #f9fafa; +} + +.section_theme { + height: 657px; + background-color: #ffffff; +} + +.section__pricing { + height: 757px; + background-color: #f8f9f9; +} + +.section__team { + height: 677px; + background-color: #a0c5e8; +} + +.section_footer { + height: 77px; + background-color: #464646; +} From 68b22bc0ed9a317f5acd2a1036ca23efe297b517 Mon Sep 17 00:00:00 2001 From: Neil Gorski Date: Sun, 9 Feb 2025 23:59:04 +0100 Subject: [PATCH 2/9] style navbar --- index.html | 16 +++++++++++++++- styles/style.css | 27 +++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f21e4af1..514d63c5 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,21 @@
-
+
+ +
+
diff --git a/styles/style.css b/styles/style.css index bac34796..b630a841 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,6 +4,7 @@ .cell__container { max-width: 1150px; + margin: 0 auto; } .section__landing-page { @@ -11,6 +12,32 @@ background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); } +.nav__bar { + height: 100px; + padding: 35px 0 0 0; + outline: solid 1px blue; + display: flex; + justify-content: space-between; + + +.nav__bar--logo > object { + height: 35px; + padding: 5px 0 0; +} + +.nav__bar--links > ul { + display: flex; +} + +.nav__bar--links li { + padding: 10px; +} + +.nav__bar--links a { + text-decoration: none; + color: #e5def4; +} + .section__features { height: 522px; background-color: #000; From 9439265e647eb7b8c7bd169f59bbc7191d2708f7 Mon Sep 17 00:00:00 2001 From: Neil Gorski Date: Mon, 10 Feb 2025 17:56:45 +0100 Subject: [PATCH 3/9] styling section landingpage --- index.html | 24 +++++++++++++--- styles/style.css | 72 +++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 85 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 514d63c5..6b101b20 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,18 @@ Nova +
-
diff --git a/styles/style.css b/styles/style.css index b630a841..43a37cbb 100644 --- a/styles/style.css +++ b/styles/style.css @@ -12,32 +12,90 @@ background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); } -.nav__bar { +.navbar { height: 100px; padding: 35px 0 0 0; - outline: solid 1px blue; display: flex; justify-content: space-between; - +} -.nav__bar--logo > object { +.navbar__logo > object { height: 35px; padding: 5px 0 0; } -.nav__bar--links > ul { +.navbar__links > ul { display: flex; } -.nav__bar--links li { +.navbar__links li { padding: 10px; } -.nav__bar--links a { +.navbar__links a { text-decoration: none; color: #e5def4; } +.landingpage__content-container { + display: flex; + justify-content: space-between; +} + +.landingpage__left { + font-family: "Montserrat", serif; + font-style: normal; + color: #ffffff; + width: 40%; +} +.landingpage__left h1 { + margin: 20px 0 10px; + padding: 75px 0 15px; + font-weight: 600; + font-size: 36px; +} + +.landingpage__left h4 { + width: 287px; + font-weight: 300; + font-size: 18px; +} +.landingpage__left button { + height: 51px; + width: 210px; + margin: 30px 0; + padding: 1px 6px; + color: inherit; + font-family: inherit; + font-size: 14px; + background-color: #25f18b; + border-radius: 10px; + border: none; + transition: border-radius 100ms linear, background-color 100ms ease; +} + +.landingpage__left button:hover { + border-radius: 20px; + background-color: #6affb4; + cursor: pointer; +} + +.landingpage__right { + margin-right: 54px; +} +.landingpage__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__right img { + margin-top: 19px; +} .section__features { height: 522px; background-color: #000; From 6b6f7e4106d49bfb9d96161e2b16ed2474a27379 Mon Sep 17 00:00:00 2001 From: Neil Gorski Date: Tue, 11 Feb 2025 21:24:59 +0100 Subject: [PATCH 4/9] add styling to features section --- images/design.svg | 2 +- index.html | 32 +++++++++++++++++++++++- styles/style.css | 62 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 2 deletions(-) diff --git a/images/design.svg b/images/design.svg index 4b715506..41320bfc 100644 --- a/images/design.svg +++ b/images/design.svg @@ -1,4 +1,4 @@ -https://github.com/Neil-Gorski/task-html-and-css-basics.git + design diff --git a/index.html b/index.html index 6b101b20..08179789 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,37 @@

-
+
+

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.

+
+
diff --git a/styles/style.css b/styles/style.css index 43a37cbb..c8a3a30e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -101,6 +101,68 @@ background-color: #000; } +.features__cell--title { + display: flex; + height: calc(522px * 0.25); + justify-content: center; + align-items: center; +} + +.features__cell--title h2 { + font-size: 30px; + font-weight: 300; + color: #fffff7; + font-family: "Montserrat", serif; + font-style: normal; +} + +.features__cell--cards { + display: flex; + justify-content: center; + height: calc(522px * 0.75); + font-family: "Montserrat", serif; + font-style: normal; +} +.features__container--card { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 30px; + width: 276px; + margin-top: 20px; + text-align: center; +} + +.features__container--icon { + display: flex; + background-color: #fff; + height: 78px; + width: 78px; + justify-content: center; + align-items: center; + border-radius: 50%; +} + +.features__container--card h5 { + font-family: inherit; + font-style: inherit; + font-weight: 500; + color: #fffff7; + margin: 10px 0; + padding: 15px 0 0; + font-size: 14px; +} + +.features__container--card p { + font-family: "Montserrat", serif; + font-style: normal; + color: #fffff7; + margin: 0 0 10px; + font-size: 14px; + text-align: center; +} + .section__icons { height: 89px; background-color: #f9fafa; From b0bc032483034b256b765ce872e904e12f08939f Mon Sep 17 00:00:00 2001 From: Neil Gorski Date: Tue, 11 Feb 2025 22:06:02 +0100 Subject: [PATCH 5/9] add section theme styling --- index.html | 15 +++++++++++++-- styles/style.css | 46 ++++++++++++++++++++++++++++++++++------------ 2 files changed, 47 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 08179789..d3c130a8 100644 --- a/index.html +++ b/index.html @@ -75,10 +75,21 @@
SLICK AND BEAUTIFUL DESIGN
-
+
+ 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! +

+
diff --git a/styles/style.css b/styles/style.css index c8a3a30e..05633706 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,5 +1,7 @@ .section__container { width: 100%; + font-family: "Montserrat", serif; + font-style: normal; } .cell__container { @@ -42,8 +44,6 @@ } .landingpage__left { - font-family: "Montserrat", serif; - font-style: normal; color: #ffffff; width: 40%; } @@ -66,7 +66,6 @@ margin: 30px 0; padding: 1px 6px; color: inherit; - font-family: inherit; font-size: 14px; background-color: #25f18b; border-radius: 10px; @@ -112,16 +111,12 @@ font-size: 30px; font-weight: 300; color: #fffff7; - font-family: "Montserrat", serif; - font-style: normal; } .features__cell--cards { display: flex; justify-content: center; height: calc(522px * 0.75); - font-family: "Montserrat", serif; - font-style: normal; } .features__container--card { height: 100%; @@ -145,8 +140,6 @@ } .features__container--card h5 { - font-family: inherit; - font-style: inherit; font-weight: 500; color: #fffff7; margin: 10px 0; @@ -155,8 +148,6 @@ } .features__container--card p { - font-family: "Montserrat", serif; - font-style: normal; color: #fffff7; margin: 0 0 10px; font-size: 14px; @@ -168,11 +159,42 @@ background-color: #f9fafa; } -.section_theme { +.section__icons div { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.section__theme { height: 657px; background-color: #ffffff; + margin: 0 31px; + display: flex; } +.section__theme img { + width: calc((100% - 50px) / 2); + padding: 60px 25px 40px; +} + +.theme__container--text { + height: 368px; + width: 50%; +} +.theme__container--text h2 { + font-size: 30px; + margin: 100px 0 10px 110px; + padding: 0 0 35px; +} +.theme__container--text p { + max-width: 389px; + margin: 0 0 0 110px; + padding: 0 0 35px; + line-height: 30px; + font-size: 15px; + font-weight: 300; +} .section__pricing { height: 757px; background-color: #f8f9f9; From da999542c453a82c03ec923c06e540234bcf0e74 Mon Sep 17 00:00:00 2001 From: Neil Gorski Date: Tue, 11 Feb 2025 22:15:49 +0100 Subject: [PATCH 6/9] add divs to pricing section --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d3c130a8..e8de1894 100644 --- a/index.html +++ b/index.html @@ -92,7 +92,10 @@

SIMPLE AND BEAUTIFUL

-
+
+
+
+
From 47b156accb65b424c8adac09c7aaa89cbeb3cf84 Mon Sep 17 00:00:00 2001 From: Neil Gorski Date: Thu, 13 Feb 2025 23:43:40 +0100 Subject: [PATCH 7/9] refactor class names to BEM --- index.html | 88 +++++++++++++++++++++++++----------------------- styles/style.css | 55 +++++++++++++++--------------- 2 files changed, 74 insertions(+), 69 deletions(-) diff --git a/index.html b/index.html index e8de1894..2fb95669 100644 --- a/index.html +++ b/index.html @@ -11,29 +11,29 @@ -
-
-