From 23f12bd10359a1237b15c0b7900e6f0ddd14f041 Mon Sep 17 00:00:00 2001 From: Zaneta Sochon Date: Sat, 15 Feb 2025 22:28:26 +0100 Subject: [PATCH 1/3] feat: Create banner/features sections --- index.html | 111 ++++++++++++++++++ styles/index.css | 167 +++++++++++++++++++++++++++ styles/reset.css | 293 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 571 insertions(+) create mode 100644 index.html create mode 100644 styles/index.css create mode 100644 styles/reset.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..222c7ea6 --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ + + + + + + + + + + + + Task - HTML and CSS Basics + + +
+ +
+
+

+ Beautiful Free Nova +
+ template +

+

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

+
+ + Download FREE! + +
+
+
+ Next Gen App Banner +
+
+
+ +
+
+

FEATURES

+
+
+
+ Mobile Phone Icon +
+

Fully Responsive

+

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

+
+ +
+
+ Tools Icon +
+

CUSTOMIZABLE

+

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

+
+ +
+
+ Prize Icon +
+

+ SLICK AND BEAUTIFUL +
+ DESIGN +

+

+ Trendy and fresh design, fits +
+ any website. +

+
+
+
+
+ + diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..0aa03dcb --- /dev/null +++ b/styles/index.css @@ -0,0 +1,167 @@ +body { + font-family: 'Montserrat', serif; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.container__nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 1150px; + padding-top: 35px; +} + +.logo { + max-width: 100px; +} + +.nav { + display: flex; + align-items: center; + gap: 20px; +} + +.nav__link { + text-decoration: none; + color: #ffffff; + font-size: 14px; +} + +.nav__link:hover { + color: #58d5f7; +} + +.btn { + display: flex; + align-items: center; + justify-content: center; + background-color: #0abceb; + border-radius: 10px; + width: 195px; + height: 51px; + transition-duration: 0.4s; +} + +.btn:hover { + background-color: #58d5f7; + color: white; + border-radius: 20px; + box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1); +} + +.nav__link--hover:hover { + color: #ffffff; +} + +.hero { + justify-content: flex-start; + align-items: flex-start; + padding-bottom: 150px; + padding-top: 80px; +} + +.left-section__hero { + padding-top: 45px; + width: 560px; +} + +.title { + color: #ffffff; + font-size: 36px; + font-weight: 700; + padding-bottom: 20px; +} + +.description { + line-height: 30px; + font-weight: 400; + font-size: 18px; + color: #ffffff; + padding-bottom: 40px; +} + +.ipad-screen__hero { + background-color: #ffffff; + border: 1px solid #ffffff; + border-width: 15px 15px 80px 15px; + height: 427px; + max-width: 45%; + border-radius: 25px; + transform: rotate(-6deg); +} + +.btn__hero { + background-color: #25f18b; +} + +.btn__hero:hover { + background-color: #6affb4; +} + +.main__container { + background-color: #000000; +} + +.features__container { + display: flex; + flex-direction: column; + align-items: center; + max-width: 830px; + margin: auto; + padding: 70px 0 90px 0px; +} + +.features__header { + color: #ffffff; + padding-bottom: 70px; + font-weight: 400; + font-size: 30px; +} + +.features__offer { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + gap: 60px; +} + +.offer__item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.feature__icon { + background-color: white; + border-radius: 50%; + height: 5.625em; + width: 5.625em; + display: flex; + justify-content: center; + align-items: center; +} + +.feature__title { + font-size: 14px; + font-weight: 500; + line-height: 1.1; + margin: 10px 0; + padding: 15px 0; + color: #ffffff; +} + +.feature__description { + font-weight: 300; + font-size: 14px; + color: #ffffff; +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..80eeb069 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,293 @@ +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: 0.8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: 0.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 { +} From ef481793ea57380395c3b8103f28044ad5ee6d51 Mon Sep 17 00:00:00 2001 From: Zaneta Sochon Date: Sun, 16 Feb 2025 15:40:22 +0100 Subject: [PATCH 2/3] feat: Create Nova Template Layout --- images/team-google.svg | 20 +++ images/team-twitter.svg | 2 +- index.html | 174 ++++++++++++++++++++++- styles/index.css | 304 +++++++++++++++++++++++++++++++++++++++- 4 files changed, 493 insertions(+), 7 deletions(-) create mode 100644 images/team-google.svg diff --git a/images/team-google.svg b/images/team-google.svg new file mode 100644 index 00000000..f6cfe761 --- /dev/null +++ b/images/team-google.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/team-twitter.svg b/images/team-twitter.svg index aca50aaa..c7a56619 100644 --- a/images/team-twitter.svg +++ b/images/team-twitter.svg @@ -1,7 +1,7 @@ - team-twitter + team-google Created with Sketch. diff --git a/index.html b/index.html index 222c7ea6..a9040ca6 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,13 @@ + - Task - HTML and CSS Basics + Nova Theme
@@ -22,7 +23,7 @@
  • The Team
  • - Pricing + plan
  • Features
  • @@ -106,6 +107,175 @@

    + +
    +
    + logos row +
    +
    + +
    +
    + White Imac on light background +
    +
    +

    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 plan plans

    +
    +
    +
    +

    BASIC

    +

    $15

    +

    per month

    +
      +
    • + ✓ + Up to 7 Projects +
      • +
    • + ✓ + 2 Additional Developers +
      • + +
    • + + Get Started + +
      • +
    +
    +
    +

    AGENCY

    +

    $55

    +

    per month

    +
      +
    • + ✓ + Up to 25 Projects +
      • +
    • + ✓ + 2 Additional Developers +
      • +
    • + ✓ + Unlimited Support +
      • +
    • + + Get Started + +
      • +
    +
    +
    +

    PRO

    +

    $75

    +

    per month

    +
      +
    • + ✓ + Up to 7 Projects +
      • +
    • + ✓ + 2 Additional Developers +
      • +
    • + ✓ + Unlimited Support +
      • +
    • + ✓ + 1.5GB Disk Space +
      • +
    • + + Get Started + +
      • +
    +
    +
    +
    + +
    +

    THE TEAM

    +
    +
    + Young men wearing sunglasses +
    +

    CTO

    +

    Johnny B Good

    +

    The brains behind the whole operation

    + +
    +
    +
    + Younge, sad woman, portrait photo +
    +

    CEO

    +

    Roll Over Beethoven

    +

    The one that puts it all together

    + +
    +
    +
    + Young men wearing glasses +
    +

    CFO

    +

    Chuck Berry

    +

    The guy with his hand on the wallet

    + +
    +
    +
    +
    + +
    +

    Download FREE!

    +

    Take it for a ride for any of your projects!

    + +
    + +
    +
    +
    +

    A free template by

    + Webscope Logo +
    + +
    +
    diff --git a/styles/index.css b/styles/index.css index 0aa03dcb..64e6c6ab 100644 --- a/styles/index.css +++ b/styles/index.css @@ -2,6 +2,8 @@ body { font-family: 'Montserrat', serif; } +/* Banner */ + .container { display: flex; flex-direction: column; @@ -47,6 +49,7 @@ body { width: 195px; height: 51px; transition-duration: 0.4s; + cursor: pointer; } .btn:hover { @@ -105,17 +108,15 @@ body { background-color: #6affb4; } -.main__container { - background-color: #000000; -} +/* Feature section */ .features__container { display: flex; flex-direction: column; align-items: center; - max-width: 830px; margin: auto; padding: 70px 0 90px 0px; + background-color: #000000; } .features__header { @@ -165,3 +166,298 @@ body { font-size: 14px; color: #ffffff; } + +/* Logos section */ + +.logos__container { + display: flex; + justify-content: center; + align-items: center; + background-color: #f9fafa; +} + +.logos { + padding: 30px; +} + +/* About */ + +.about__container { + background-color: #ffffff; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); + max-width: 1400px; + margin: auto; + overflow: hidden; +} + +.imac-screen { + padding: 60px 15px 40px 15px; +} + +.about__section-text { + display: flex; + flex-direction: column; + padding: 80px 0 0 100px; + max-width: 500px; +} + +.about__title { + padding-bottom: 35px; + font-weight: 300; + font-size: 30px; + color: #333333; +} + +.about__description { + font-weight: 300; + font-size: 15px; + line-height: 30px; + color: #333333; +} + +/* plan */ + +.plan__container { + background-color: #f8f9f9; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.plan__title { + padding-top: 75px; + font-weight: 300; + font-size: 30px; + margin: 20px 0 10px; + color: #333333; +} + +.plan__description { + font-weight: 300; + padding-top: 10px; + margin: 10px 0; + color: #808080; + font-size: 18px; +} + +.plan__cards { + display: flex; + flex-direction: row; + padding: 70px 0 100px; + max-width: 1050px; + margin: auto; + gap: 30px; +} + +.plan__card-item { + display: flex; + justify-content: space-evenly; + flex-direction: column; + max-width: 390px; + margin: auto; + height: 430px; + padding: 30px 40px 25px; +} + +.plan__card-title { + font-size: 18px; + font-weight: 300; +} + +.plan__card-price { + font-size: 45px; + font-weight: 600; +} + +.plan__period { + font-size: 12px; + font-weight: 500; +} + +.plan__list { + display: flex; + flex-direction: column; + gap: 5px; + margin-top: 30px; +} + +.list__item { + font-size: 14px; + color: #333333; +} + +.plan__link--hover:hover { + color: #ffffff; + text-decoration: underline; +} + +.checkmark { + color: #3aeb8c; + margin-right: 5px; +} + +.middle__plan { + background-color: #ffffff; + border: 1px solid #ffffff; + border-radius: 7px; + box-shadow: 5px 8.7px 40px rgba(99, 117, 138, 0.3); +} + +/* The Team */ + +.team__container { + display: flex; + padding: 60px 0 130px; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 60px 0 130px; +} + +.team__title { + padding-bottom: 90px; + font-weight: 300; + font-size: 30px; + margin: 20px 0 10px; +} + +.team__items { + display: flex; + text-align: center; + gap: 50px; +} + +.team-item { + padding: 0 15px 60px; +} + +.team__content { + display: flex; + flex-direction: column; + gap: 20px; + padding-top: 25px; +} + +.team__item-title { + color: #747474; + font-weight: 300; + font-size: 18px; +} + +.team__item-name { + font-weight: 700; + color: #333333; + font-size: 14px; +} + +.team__item-description { + font-weight: 300; + font-size: 14px; +} + +.social-icons__container { + display: flex; + justify-content: center; + align-items: center; + gap: 15px; +} + +/* Email form */ + +.form__container { + display: flex; + flex-direction: column; + background-color: #0abceb; + color: white; + margin: auto; + text-align: center; + padding-top: 25px; + padding-bottom: 40px; +} + +.form__title { + font-weight: 600; + font-size: 24px; + margin: 20px 0 10px; +} + +.form__description { + max-width: 250px; + line-height: 22px; + font-size: 15px; + margin: auto; + font-weight: 300; +} + +.email__form { + display: flex; + justify-content: center; + align-items: center; +} + +.email__input { + background-color: white; + border-radius: 10px; + border: 1px solid #fff; + width: 210px; + height: 51px; + color: #808080; + margin-top: 20px; + border: none; + padding: 6px 12px; +} + +.btn__input { + background-color: #25f18b; + border-radius: 10px; + color: #fff; + height: 51px; + width: 120px; + margin-top: 20px; + margin-left: 3px; + transition-duration: 0.4s; + border: none; + margin-bottom: 0; + font-size: 14px; + font-weight: 400; +} + +/* Footer */ + +.footer__container { + background-color: #464646; + padding-top: 20px; + padding-bottom: 20px; +} + +.content-footer__container { + display: flex; + justify-content: space-between; + align-items: center; + width: 1200px; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.footer__info { + display: flex; + justify-content: center; + align-items: center; + margin-left: 40%; +} + +.footer__text { + margin-right: 10px; + font-size: 12px; + color: #ffffff; +} + +.social-icons__footer { + display: flex; + gap: 20px; +} From 160a02e8888a1fef4a21ecebd07adccfe6ff5bcd Mon Sep 17 00:00:00 2001 From: Zaneta Sochon Date: Mon, 17 Feb 2025 20:13:36 +0100 Subject: [PATCH 3/3] fix(#177): improve non semantic parts of HTML --- index.html | 48 ++++++++++++++++++++++++------------------------ styles/index.css | 6 +++++- 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index a9040ca6..9b7f1ba6 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@

-
+

Beautiful Free Nova
@@ -52,18 +52,18 @@

Download FREE!

- -
+ +
Next Gen App Banner -
+

FEATURES

-
-
+
    +
  • Mobile Phone Icon
    @@ -74,9 +74,9 @@

    Fully Responsive

    smartphone, tablet, laptop and

    -
+ -
+
  • Tools Icon
    @@ -88,9 +88,9 @@

    CUSTOMIZABLE


    needs.

    -
    • + -
    +
  • Prize Icon
    @@ -104,8 +104,8 @@


    any website.

    -

    • -
    + +
    @@ -118,23 +118,23 @@

    White Imac on light background
    -
    +

    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 plan plans

    -
    -
    -
    + +
      +

    • BASIC

      $15

      per month

      @@ -154,8 +154,8 @@

      BASIC

    -
    -
    + +

  • AGENCY

    $55

    per month

    @@ -178,8 +178,8 @@

    AGENCY

    • -
    -
    + +

  • PRO

    $75

    per month

    @@ -206,8 +206,8 @@

    PRO

    • -
    -
    + +
    diff --git a/styles/index.css b/styles/index.css index 64e6c6ab..105692cb 100644 --- a/styles/index.css +++ b/styles/index.css @@ -126,7 +126,7 @@ body { font-size: 30px; } -.features__offer { +.offer { display: flex; justify-content: center; align-items: center; @@ -289,6 +289,10 @@ body { color: #333333; } +.btn__plan { + margin-top: 60px; +} + .plan__link--hover:hover { color: #ffffff; text-decoration: underline;