# BUILDING PARTS OF THE HACKMD WEBSITE USING TAILWIND CSS

1.INTRRODUCTION:
Tailwind CSS just like Vanila CSS has its own pros and cons. Its usage in my opinion is solely dependent on the developer's preference. In this project I used Tailwind CSS because it is my new learn and this can also be done using vanila CSS.

2.BUILDING PROCESS:
In all my projects I like to begin by structuring the complete HTML structure of the project. I do this by visualizing every possible element and its behaviour, including possible behaviours that will have an after state.


> Some of my bare HTML structures

After structing my HTML I went into styling the elements using Tailwind CSS. This version of CSS looks like inline styling but it is not the same as inline Styling.

2.1. The Nav Bar:
Through observation and visualization, you will see that the nav comprises of mainly three major divs or sections. The part that contains the logo, the quick links and the buttons. You will also notice that the nav bar on the hackMd webpage is in a fixed postion with opacity and it has a blur effect on every element passing beneath it.

 <header>
        <div class="flex justify-between my-0 pt-5 bg-black bg-opacity-10 fixed top-0 w-full h-16 z-10 backdrop-blur">
            <div class="h-28 w-28 ml-6">
                <img src="/dist/ASSETS/IMG/logo-full.svg" alt="logo">
            </div>
            <div>
                <ul class="flex gap-5">
                    <li> <a href="#">Solutions</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Learn</a></li>
                    <li><a href="/dist/blog.html">Blog</a></li>
                </ul>
            </div>

            <div class="flex gap-3 mr-6 text-sm">
                <div>
                    <button><a href="" class="bg-black py-[8px] px-2 rounded-[4px] border border-gray-400 hover:bg-gray-700">Sign in</a></button>
                </div>

                <div>
                    <button><a href="" class="py-[10px] px-4 rounded-[4px] bg-gradient-to-r from-black to-[#534bc1] border border-gray-500">Get HackMD free</a></button>
                </div>
            </div>
        </div>
    </header>

The rendition of my code abvove presented this following display;
> The Nav Bar

2.2. The Main Section:

From obervation you can see that the HackMD landing page has several sections under the `<main></main>`. These sections comprised of videos, images and animations that beautify the landing page.
The first section is the hero section that has a video included in it with an autoplay attribute.

<section>
            <div class=" mt-16">
                <div class="text-center">
                    <h1 class="text-[#cecae6] text-5xl font-bold mb-8">Build together with Markdown</h1>
                    <p class="text-[#cecae6] text-2xl mb-6">Real-time collaboration for teampersonaltechnicalresearcheducationalweb3community documentation in Markdown</p>
                    <div>
                        <input type="email" placeholder="[e-mail]" class="w-[400px] py-3 pl-5 rounded-md bg-[#39395a] border border-solid border-gray-500 mr-1">
                        <button class="text-[#545587] bg-white py-3 px-6 rounded-md hover:bg-[#5d55d3] hover:text-white">Get HackMD free</button>
                    </div>
                </div>
                <div class="mt-5">
                    <video src="/dist/ASSETS/VIDEOS/HeroAnimation-1080.webm" autoplay muted>
                    </video>
                </div>
            </div>
        </section>

        <section>

In my code I tried to keep it minimal and I avoid styling directly on my semantic tags but that is a preference of mine. The structure of your code can be different and arrive at the same result.

The rest of the main sections are composed of most of the same elments and content and can be done by strucrings that look almost like that of the first section.

2.3. Footer Section:
The footer section from my visualization I made use of 2 major divs; the first I made to house both the logo section and the quick links. While the second div consisted of the dropdown section and the social media icons sections.

<footer class="bg-[#26272b] mt-12 pt-14">
        <div class="flex justify-between">
            <div  class=" ml-6">
                <img src="/dist/ASSETS/IMG/logo-full.svg" alt="logo" class="w-48 mb-7">
                <p class="text-sm">Build together with the ultimate Markdown editor.</p>
            </div>

            <div class="flex justify-between gap-28 mr-28">
                <div>
                    <ul>
                        <li class="mb-6 hover:underline"><a href="" class="text-[#75727b]">Learning</a></li>
                     <li class="hover:underline"><a href="">Features</a></li>
                        <li class="hover:underline"><a href="">Tutorial book</a></li>
                    </ul>
                </div>

                <div>
                    <ul>
                        <li class="mb-6 hover:underline"><a href="" class="text-[#75727b]">Resources</a></li>
                        <li class="hover:underline"><a href="">About</a></li>
                        <li class="hover:underline"><a href="">Blog</a></li>
                        <li class="hover:underline"><a href="">Changelog</a></li>
                        <li class="hover:underline"><a href="">Enterprise</a></li>
                        <li class="hover:underline"><a href="">Pricing</a></li>
                    </ul>
                </div>

                <div>
                    <ul>
                        <li class="mb-6 hover:underline"><a href="" class="text-[#75727b]">Policy</a></li>
                        <li class="hover:underline"><a href="">Terms of use</a></li>
                        <li class="hover:underline"><a href="">Privacy policy</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="flex justify-between mt-10">
            <div>
                <select class="bg-transparent border w-40 pl-3 py-3 rounded-md ml-5">
                    <option value="english">English</option><i class='bx bx-chevron-down'></i>
                </select>
            </div>

            <div class="flex gap-10 items-center mr-8">
                <div class="border h-12 w-12 text-center rounded-full text-2xl hover:bg-[#8983fe]"><i class='bx bxl-linkedin-square align-middle pt-2'></i></div>
                <div class="border h-12 w-12 text-center rounded-full text-2xl hover:bg-[#8983fe]"><i class='bx bxl-twitter align-middle pt-2'></i></div>
                <div class="border h-12 w-12 text-center rounded-full text-2xl hover:bg-[#8983fe]"><i class='bx bxl-facebook-circle align-middle pt-2'></i></div>
                <div class="border h-12 w-12 text-center rounded-full text-2xl hover:bg-[#8983fe]"><i class='bx bxl-discord-alt align-middle pt-2'></i></div>
            </div>
        </div>
        <div class="bg-gray-400 w-[1160px] h-[1px] mx-5 my-12"></div>
        <div class="text-center text-sm pb-5">
            <p>&copy; 2025 HackMD. All Rights Reserved.</p>
        </div>
    </footer>


3.LEARNING PROCESS:
1.In this project one of the new feature learnt was the backdrop-blur property; this property enables for all contents passing beneath a fixed transparent nav bar or elemnt to appear to be blury.
2.Being new to Tailwind CSS, one of the help things I used apart from the Tailwind CSS documentation was the flowbite cheat sheet for CSS.

4.CONCLUSION:

Building parts of this website has been fun and I came across various new features in my research. The site has a lot of color gradient and it also improved my usage and styling and I will encourage anyone to pick up the task.