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..31ab7f90 100644 --- a/challenges/blogr_landing_page/index.html +++ b/challenges/blogr_landing_page/index.html @@ -27,37 +27,392 @@ /> + - -
-
- Frontend Mentor challenge +
+ +
+
-
-
- for - Optimum BH + Blogr logo + +
+ Hamburger icon + Close icon +
+ + +
+ +
+

A modern publishing platform

+

Grow your audience and build your online brand

+
+ Start for Free + Learn More +
+
+
+ + +
+

+ Designed for the future +

+
- Internship. -
+ Illustration box 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. +

-
- Source code + 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. +

+
+
+

+ 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..0c23f893 100644 --- a/challenges/blogr_landing_page/style.css +++ b/challenges/blogr_landing_page/style.css @@ -1,3 +1,25 @@ +@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; + +.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; +} 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'], }, }, },