From c89d9567fc48f651811db270d4fa659af1ceaecb Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Fri, 22 Sep 2023 08:13:56 +0300 Subject: [PATCH 1/9] Add the basic HTML --- .../images/bg-pattern-circles.svg | 1 + .../images/bg-pattern-intro-desktop.svg | 1 + .../images/bg-pattern-intro-mobile.svg | 1 + .../images/icon-arrow-dark.svg | 1 + .../images/icon-arrow-light.svg | 1 + .../blogr_landing_page/images/icon-close.svg | 1 + .../images/icon-hamburger.svg | 1 + .../images/illustration-editor-desktop.svg | 1 + .../images/illustration-editor-mobile.svg | 1 + .../images/illustration-laptop-desktop.svg | 1 + .../images/illustration-laptop-mobile.svg | 1 + .../images/illustration-phones.svg | 1 + challenges/blogr_landing_page/images/logo.svg | 1 + challenges/blogr_landing_page/index.html | 259 ++++++++++++++++-- challenges/blogr_landing_page/style.css | 3 + .../blogr_landing_page/tailwind.config.js | 18 ++ 16 files changed, 264 insertions(+), 29 deletions(-) create mode 100644 challenges/blogr_landing_page/images/bg-pattern-circles.svg create mode 100644 challenges/blogr_landing_page/images/bg-pattern-intro-desktop.svg create mode 100644 challenges/blogr_landing_page/images/bg-pattern-intro-mobile.svg create mode 100644 challenges/blogr_landing_page/images/icon-arrow-dark.svg create mode 100644 challenges/blogr_landing_page/images/icon-arrow-light.svg create mode 100644 challenges/blogr_landing_page/images/icon-close.svg create mode 100644 challenges/blogr_landing_page/images/icon-hamburger.svg create mode 100644 challenges/blogr_landing_page/images/illustration-editor-desktop.svg create mode 100644 challenges/blogr_landing_page/images/illustration-editor-mobile.svg create mode 100644 challenges/blogr_landing_page/images/illustration-laptop-desktop.svg create mode 100644 challenges/blogr_landing_page/images/illustration-laptop-mobile.svg create mode 100644 challenges/blogr_landing_page/images/illustration-phones.svg create mode 100644 challenges/blogr_landing_page/images/logo.svg diff --git a/challenges/blogr_landing_page/images/bg-pattern-circles.svg b/challenges/blogr_landing_page/images/bg-pattern-circles.svg new file mode 100644 index 00000000..8ea70c59 --- /dev/null +++ b/challenges/blogr_landing_page/images/bg-pattern-circles.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/bg-pattern-intro-desktop.svg b/challenges/blogr_landing_page/images/bg-pattern-intro-desktop.svg new file mode 100644 index 00000000..5ca9112a --- /dev/null +++ b/challenges/blogr_landing_page/images/bg-pattern-intro-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/bg-pattern-intro-mobile.svg b/challenges/blogr_landing_page/images/bg-pattern-intro-mobile.svg new file mode 100644 index 00000000..cbfbc851 --- /dev/null +++ b/challenges/blogr_landing_page/images/bg-pattern-intro-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/icon-arrow-dark.svg b/challenges/blogr_landing_page/images/icon-arrow-dark.svg new file mode 100644 index 00000000..826844fc --- /dev/null +++ b/challenges/blogr_landing_page/images/icon-arrow-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/icon-arrow-light.svg b/challenges/blogr_landing_page/images/icon-arrow-light.svg new file mode 100644 index 00000000..cde8ec9f --- /dev/null +++ b/challenges/blogr_landing_page/images/icon-arrow-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/icon-close.svg b/challenges/blogr_landing_page/images/icon-close.svg new file mode 100644 index 00000000..0f0f6014 --- /dev/null +++ b/challenges/blogr_landing_page/images/icon-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/icon-hamburger.svg b/challenges/blogr_landing_page/images/icon-hamburger.svg new file mode 100644 index 00000000..0938b274 --- /dev/null +++ b/challenges/blogr_landing_page/images/icon-hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/illustration-editor-desktop.svg b/challenges/blogr_landing_page/images/illustration-editor-desktop.svg new file mode 100644 index 00000000..5256f754 --- /dev/null +++ b/challenges/blogr_landing_page/images/illustration-editor-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/illustration-editor-mobile.svg b/challenges/blogr_landing_page/images/illustration-editor-mobile.svg new file mode 100644 index 00000000..6d48b561 --- /dev/null +++ b/challenges/blogr_landing_page/images/illustration-editor-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/illustration-laptop-desktop.svg b/challenges/blogr_landing_page/images/illustration-laptop-desktop.svg new file mode 100644 index 00000000..da3096ee --- /dev/null +++ b/challenges/blogr_landing_page/images/illustration-laptop-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/illustration-laptop-mobile.svg b/challenges/blogr_landing_page/images/illustration-laptop-mobile.svg new file mode 100644 index 00000000..0ab1e32a --- /dev/null +++ b/challenges/blogr_landing_page/images/illustration-laptop-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/illustration-phones.svg b/challenges/blogr_landing_page/images/illustration-phones.svg new file mode 100644 index 00000000..b0ea10df --- /dev/null +++ b/challenges/blogr_landing_page/images/illustration-phones.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/images/logo.svg b/challenges/blogr_landing_page/images/logo.svg new file mode 100644 index 00000000..a5877e74 --- /dev/null +++ b/challenges/blogr_landing_page/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/blogr_landing_page/index.html b/challenges/blogr_landing_page/index.html index 6f2f8905..515e73af 100644 --- a/challenges/blogr_landing_page/index.html +++ b/challenges/blogr_landing_page/index.html @@ -29,35 +29,236 @@ -
-
- Frontend Mentor challenge -
-
- for - Optimum BH - Internship. -
+
+ +
+ Blogr logo + +
+

A modern publishing platform

+

Grow your audience and build your online brand

+ +
+
+ +
+

Designed for the future

+ Illustration editor mobile + +

Introducing an extensible editor

+

+ Blogr features an exceedingly intuitive interface which lets you focus + on one thing: creating content. The editor supports management of + multiple blogs and allows easy manipulation of embeds such as images, + videos, and Markdown. Extensibility with plugins and themes provide + easy ways to add functionality or change the looks of a blog. +

+

Robust content management

+

+ Flexible content management enables users to easily move through + posts. Increase the usability of your blog by adding customized + categories, sections, format, or flow. With this functionality, you’re + in full control. +

+
+
+ Illustration phones +

State of the Art Infrastructure

+

+ With reliability and speed in mind, worldwide data centers provide the + backbone for ultra-fast connectivity. This ensures your site will load + instantly, no matter where your readers are, keeping your site + competitive. +

+
+
+ Illustration laptop mobile + +

Free, open, simple

+

+ Blogr is a free and open source application backed by a large + community of helpful developers. It supports features such as code + syntax highlighting, RSS feeds, social media integration, third-party + commenting tools, and works seamlessly with Google Analytics. The + architecture is clean and is relatively easy to learn. +

-
- Source code -
-
+

Powerful tooling

+

+ Batteries included. We built a simple and straightforward CLI tool + that makes customization and deployment a breeze, but capable of + producing even the most complicated sites. +

+ + + diff --git a/challenges/blogr_landing_page/style.css b/challenges/blogr_landing_page/style.css index b5c61c95..8d967703 100644 --- a/challenges/blogr_landing_page/style.css +++ b/challenges/blogr_landing_page/style.css @@ -1,3 +1,6 @@ +@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,600;1,300;1,600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; diff --git a/challenges/blogr_landing_page/tailwind.config.js b/challenges/blogr_landing_page/tailwind.config.js index b2e81c86..2e62996a 100644 --- a/challenges/blogr_landing_page/tailwind.config.js +++ b/challenges/blogr_landing_page/tailwind.config.js @@ -5,6 +5,24 @@ module.exports = { colors: { 'optimum-blue': '#009efc', 'optimum-darkblue': '#0389e1', + 'light-red-CTA-text': 'hsl(356, 100%, 66%)', + 'very-light-red': 'hsl(355, 100%, 74%)', + 'very-dark-blue': 'hsl(208, 49%, 24%)', + // Neutral + 'white-text': 'hsl(0, 0%, 100%)', + 'grayish-blue': 'hsl(240, 2%, 79%)', + 'very-dark-grayish-blue': 'hsl(207, 13%, 34%)', + 'very-dark-black-blue': 'hsl(240, 10%, 16%)', + // Background gradient - Intro/CTA mobile nav: + 'very-light-red': 'hsl(13, 100%, 72%)', + 'light-red': 'hsl(353, 100%, 62%)', + // Background gradient - body: + 'very-dark-gray-blue': 'hsl(237, 17%, 21%)', + 'very-dark-desaturated-blue': 'hsl(237, 23%, 32%)', + }, + fontFamily: { + ubuntu: ['Ubuntu', 'sans-serif'], + overpass: ['Overpass', 'sans-serif'], }, }, }, From c3b072dfbe19f6ea8864b310ab098b4427e74018 Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Sat, 23 Sep 2023 18:35:18 +0300 Subject: [PATCH 2/9] Style mobile (just the basic) --- challenges/blogr_landing_page/index.html | 236 +++++++++++++++++------ 1 file changed, 174 insertions(+), 62 deletions(-) diff --git a/challenges/blogr_landing_page/index.html b/challenges/blogr_landing_page/index.html index 515e73af..df429368 100644 --- a/challenges/blogr_landing_page/index.html +++ b/challenges/blogr_landing_page/index.html @@ -27,24 +27,40 @@ /> + - -
+ +
-
- Blogr logo -
+ From c7083906c6d2bb27668bc5b7d4476e5ef6b4fdeb Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Sun, 24 Sep 2023 10:01:32 +0300 Subject: [PATCH 3/9] Fix model height --- challenges/blogr_landing_page/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/challenges/blogr_landing_page/index.html b/challenges/blogr_landing_page/index.html index df429368..8419016d 100644 --- a/challenges/blogr_landing_page/index.html +++ b/challenges/blogr_landing_page/index.html @@ -290,8 +290,7 @@

Connect

+ + +

A modern publishing platform

Grow your audience and build your online brand

@@ -155,32 +161,39 @@

A modern publishing platform

Designed for the future

- Illustration editor mobile - -

Introducing an extensible editor

-

- Blogr features an exceedingly intuitive interface which lets you focus - on one thing: creating content. The editor supports management of - multiple blogs and allows easy manipulation of embeds such as images, - videos, and Markdown. Extensibility with plugins and themes provide - easy ways to add functionality or change the looks of a blog. -

+
+ Illustration edit-266pxor mobile + +
+

+ Introducing an extensible editor +

+

+ Blogr features an exceedingly intuitive interface which lets you + focus on one thing: creating content. The editor supports + management of multiple blogs and allows easy manipulation of + embeds such as images, videos, and Markdown. Extensibility with + plugins and themes provide easy ways to add functionality or + change the looks of a blog. +

-

Robust content management

-

- Flexible content management enables users to easily move through - posts. Increase the usability of your blog by adding customized - categories, sections, format, or flow. With this functionality, you’re - in full control. -

+

Robust content management

+

+ Flexible content management enables users to easily move through + posts. Increase the usability of your blog by adding customized + categories, sections, format, or flow. With this functionality, + you’re in full control. +

+
+
Powerful tooling
-
- Blogr logo -
-

Product

-
    -
  • Overview
    • -
  • Pricing
    • -
  • Marketplace
    • -
  • Features
    • -
  • Integrations
    • -
-
-
-

Company

-
    -
  • About
    • -
  • Team
    • -
  • Blog
    • -
  • Careers
    • -
-
-
-

Connect

-
    -
  • Contact
    • -
  • Newsletter
    • -
  • LinkedIn
    • -
+
+ Blogr logo +
+
+

Product

+
    +
  • Overview
    • +
  • Pricing
    • +
  • Marketplace
    • +
  • Features
    • +
  • Integrations
    • +
+
+
+

Company

+
    +
  • About
    • +
  • Team
    • +
  • Blog
    • +
  • Careers
    • +
+
+
+

Connect

+
    +
  • Contact
    • +
  • Newsletter
    • +
  • LinkedIn
    • +
+
@@ -290,85 +305,92 @@

Connect

From 6a2aa6b10bcc51b49d0d05a34c3803758885fd95 Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Thu, 12 Oct 2023 08:00:11 +0300 Subject: [PATCH 5/9] Adjust UI styles --- challenges/blogr_landing_page/index.html | 341 +++++++++++++++-------- 1 file changed, 221 insertions(+), 120 deletions(-) diff --git a/challenges/blogr_landing_page/index.html b/challenges/blogr_landing_page/index.html index b49668e4..1ad52d6d 100644 --- a/challenges/blogr_landing_page/index.html +++ b/challenges/blogr_landing_page/index.html @@ -32,129 +32,211 @@ src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" > - +
-
- Blogr logo - -
- Hamburger icon - Close icon -
- - +
+ +
+

A modern publishing platform

+

Grow your audience and build your online brand

+
+ Start for Free Sign UpLearn More
- -
- -
-

A modern publishing platform

-

Grow your audience and build your online brand

-
- Start for Free - Learn More
@@ -168,7 +250,7 @@

Designed for the future

alt="Illustration edit-266pxor mobile" /> @@ -241,9 +323,9 @@

Powerful tooling

-
+
Blogr logo -
+

Product

    @@ -306,7 +388,7 @@

    Connect

+
  • + Contact +
    • +
  • + Newsletter +
    • +
  • + LinkedIn +
    • + + + + + + +
    @@ -243,14 +246,14 @@

    A modern publishing platform

    Designed for the future

    -
    +
    Illustration edit-266pxor mobile @@ -295,12 +298,12 @@

    State of the Art Infrastructure

    Illustration laptop mobile @@ -323,36 +326,36 @@

    Powerful tooling

    -
    - Blogr logo -
    -
    -

    Product

    -
      -
    • Overview
      • -
    • Pricing
      • -
    • Marketplace
      • -
    • Features
      • -
    • Integrations
      • -
    -
    -
    -

    Company

    -
      -
    • About
      • -
    • Team
      • -
    • Blog
      • -
    • Careers
      • -
    -
    -
    -

    Connect

    -
      -
    • Contact
      • -
    • Newsletter
      • -
    • LinkedIn
      • -
    -
    +
    + Blogr logo +
    +

    Product

    +
      +
    • Overview
      • +
    • Pricing
      • +
    • Marketplace
      • +
    • Features
      • +
    • Integrations
      • +
    +
    +
    +

    Company

    +
      +
    • About
      • +
    • Team
      • +
    • Blog
      • +
    • Careers
      • +
    +
    +
    +

    Connect

    +
      +
    • Contact
      • +
    • Newsletter
      • +
    • LinkedIn
      • +
    @@ -386,113 +389,116 @@

    Connect

    -
    - - - - - + From 45030fc5f706784dfd744611873bdb777255e75b Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Sat, 21 Oct 2023 17:38:10 +0300 Subject: [PATCH 8/9] Finish mobile design --- challenges/blogr_landing_page/index.html | 142 ++++++++++++----------- challenges/blogr_landing_page/style.css | 19 +++ 2 files changed, 91 insertions(+), 70 deletions(-) diff --git a/challenges/blogr_landing_page/index.html b/challenges/blogr_landing_page/index.html index 144bf6fc..fce1c64f 100644 --- a/challenges/blogr_landing_page/index.html +++ b/challenges/blogr_landing_page/index.html @@ -32,8 +32,11 @@ src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" > - -
    + +
    -
    +
    Blogr logo
    -

    Designed for the future

    +

    + Designed for the future +

    Illustration edit-266pxor mobile -
    -

    +
    +

    Introducing an extensible editor

    -

    +

    Blogr features an exceedingly intuitive interface which lets you focus on one thing: creating content. The editor supports management of multiple blogs and allows easy manipulation of @@ -256,8 +244,10 @@

    change the looks of a blog.

    -

    Robust content management

    -

    +

    + Robust content management +

    +

    Flexible content management enables users to easily move through posts. Increase the usability of your blog by adding customized categories, sections, format, or flow. With this functionality, @@ -267,20 +257,28 @@

    Robust content management

    - Illustration phones -

    State of the Art Infrastructure

    -

    - With reliability and speed in mind, worldwide data centers provide the - backbone for ultra-fast connectivity. This ensures your site will load - instantly, no matter where your readers are, keeping your site - competitive. -

    +
    + Illustration phones +
    +
    +

    + State of the Art Infrastructure +

    +

    + With reliability and speed in mind, worldwide data centers provide + the backbone for ultra-fast connectivity. This ensures your site + will load instantly, no matter where your readers are, keeping your + site competitive. +

    +
    State of the Art Infrastructure src="images/illustration-laptop-desktop.svg" alt="Illustration laptop desktop" /> -

    Free, open, simple

    -

    +

    + Free, open, simple +

    +

    Blogr is a free and open source application backed by a large community of helpful developers. It supports features such as code syntax highlighting, RSS feeds, social media integration, third-party @@ -302,8 +302,10 @@

    Free, open, simple

    architecture is clean and is relatively easy to learn.

    -

    Powerful tooling

    -

    +

    + Powerful tooling +

    +

    Batteries included. We built a simple and straightforward CLI tool that makes customization and deployment a breeze, but capable of producing even the most complicated sites. diff --git a/challenges/blogr_landing_page/style.css b/challenges/blogr_landing_page/style.css index 8d967703..0c23f893 100644 --- a/challenges/blogr_landing_page/style.css +++ b/challenges/blogr_landing_page/style.css @@ -4,3 +4,22 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.nav { + @apply absolute top-24 right-0 left-0 mx-auto flex w-80 flex-col rounded-md bg-white shadow-md md:static md:w-full md:bg-transparent md:shadow-none; +} + +.nav_div_ul { + @apply text-very-dark-grayish-blue md:text-white-text mx-auto my-6 flex flex-col items-center gap-4 md:mx-0 md:my-0 md:flex-row; +} + +.menu_item { + @apply flex items-center justify-center gap-2 font-bold; +} +.nav_dropdown_ul { + @apply md:bg-white-text md:text-very-dark-grayish-blue mt-4 flex flex-col items-center gap-2 rounded-md bg-gray-200 py-4 px-16 text-xs font-bold md:absolute md:top-8 md:mt-0 md:-ml-4 md:items-start md:p-4 md:pr-8 md:font-normal; +} + +.nav_dropdown_ul li { + @apply hover:font-semibold; +} From 31f20252d2ef3decdb160456f5accc99a99ef4f1 Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Wed, 25 Oct 2023 23:45:41 +0300 Subject: [PATCH 9/9] Finsh desktop and adjustments --- challenges/blogr_landing_page/index.html | 126 ++++++++++++++--------- 1 file changed, 76 insertions(+), 50 deletions(-) diff --git a/challenges/blogr_landing_page/index.html b/challenges/blogr_landing_page/index.html index fce1c64f..31ab7f90 100644 --- a/challenges/blogr_landing_page/index.html +++ b/challenges/blogr_landing_page/index.html @@ -42,7 +42,7 @@ class="font-ubuntu from-very-light-red to-light-red text-white-text place-content-center rounded-bl-[100px] bg-gradient-to-r bg-cover bg-no-repeat md:flex md:flex-col" >

    Blogr logo @@ -50,7 +50,7 @@
    -

    A modern publishing platform

    +

    A modern publishing platform

    Grow your audience and build your online brand

    Grow your audience and build your online brand
    -
    -

    +
    +

    Designed for the future

    -
    +
    Illustration box mobile -
    -

    +
    +

    Introducing an extensible editor

    @@ -244,7 +248,9 @@

    change the looks of a blog.

    -

    +

    Robust content management

    @@ -257,67 +263,87 @@

    Illustration phones -
    -
    -

    - State of the Art Infrastructure -

    -

    - With reliability and speed in mind, worldwide data centers provide - the backbone for ultra-fast connectivity. This ensures your site - will load instantly, no matter where your readers are, keeping your - site competitive. -

    +
    + Illustration phones +
    +

    + State of the Art Infrastructure +

    +

    + With reliability and speed in mind, worldwide data centers + provide the backbone for ultra-fast connectivity. This ensures + your site will load instantly, no matter where your readers are, + keeping your site competitive. +

    +
    +
    -
    + +
    Illustration laptop mobile -

    - Free, open, simple -

    -

    - Blogr is a free and open source application backed by a large - community of helpful developers. It supports features such as code - syntax highlighting, RSS feeds, social media integration, third-party - commenting tools, and works seamlessly with Google Analytics. The - architecture is clean and is relatively easy to learn. -

    - -

    - Powerful tooling -

    -

    - Batteries included. We built a simple and straightforward CLI tool - that makes customization and deployment a breeze, but capable of - producing even the most complicated sites. -

    +
    +
    +

    + Free, open, simple +

    +

    + Blogr is a free and open source application backed by a large + community of helpful developers. It supports features such as code + syntax highlighting, RSS feeds, social media integration, + third-party commenting tools, and works seamlessly with Google + Analytics. The architecture is clean and is relatively easy to + learn. +

    +
    +
    +

    + Powerful tooling +

    +

    + Batteries included. We built a simple and straightforward CLI tool + that makes customization and deployment a breeze, but capable of + producing even the most complicated sites. +

    +
    +