---
# System prepended metadata

title: BUILDING PARTS OF THE HACKMD WEBSITE

---

# 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.![Screenshot from 2025-03-11 04-31-26](https://hackmd.io/_uploads/HyjtLFTjJx.png)

![Screenshot from 2025-03-11 04-31-45](https://hackmd.io/_uploads/Bkvbwtps1x.png)

> 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;
 ![Screenshot from 2025-03-11 05-03-08](https://hackmd.io/_uploads/rJBdqtTjkl.png)
> 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="you@company.com" 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.

![Screenshot from 2025-03-11 07-28-54](https://hackmd.io/_uploads/B1OEf3TsJx.png)
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>
```

![Screenshot from 2025-03-11 08-20-02](https://hackmd.io/_uploads/rykIJ6Tjkx.png)


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.