Make writing a habit together! This is the 14th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

How to write tags

See what your page should look like at the end of the animation:

Outline the structure of the landing page

We call the blue part the navigation bar, the yellow part the title, and the image the preloader.

Your next step is to build each section in the order they appear on the page.

How to build a navigation bar

You will need the image in the navigation bar, so go to this link and download it. Save it in Build/Assets with the same name as logo.jpg.

Your navigation bar will be divided into three sections:

  • The sign on the left
  • adivIn the middle
  • Button on the right

Open build/index.html and add the following code to the top of the body tag:

<nav>
    <img src="assets/logo.jpg" alt="logo">
    <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Shop</a>
        <a href="#">Contact</a>
        <a href="#">Testimonials</a>
    </div>
    <button class="cta">Let's work together</button>
</nav>
Copy the code

Next, you’ll use some CSS to add spacing and alignment to the navigation bar.

Open SRC /input.css and add the following @Layer Base content to the end of the section:

nav {
        @apply flex p-4 md:py-8 md:px-4 lg:p-12;
        @apply justify-center items-center gap-4;
    }
Copy the code

Then add it to the end of the file, outer @layer Base:

@layer components { nav > img { width: 120px; } nav a { @apply underline; } .cta { @apply rounded bg-black text-white py-2 px-4; } nav .cta { @apply hidden md:inline-block; } .nav-links { @apply hidden md:flex gap-4 lg:gap-8 lg:mx-16 xl:mx-20; }}Copy the code

When complete, your page should look like this:

Navigation screenshot

Now that you have built the navigation bar, hide it so that you can set it to visible later.

Go back to index.html and add a class: animation-0 ‘ ‘nav

<body> <nav class="opacity-0"> <! -- leave the rest of the code as it is --> </nav> </body>Copy the code

How to build a title

You will implement the title by building three lines.

The first line consists of some bold, enlarged text and a plain text that you hide when the screen is smaller than 768 pixels (on a mobile device).

The second line is similar to the first: some bold, enlarged text, a move to the right, and a rotated SVG instead of a paragraph. SVG will also be hidden on mobile devices.

The third line is only visible on the mobile device and contains a piece of text and a button.

Place the following code after the build/index.htmlnav tag:

<header> <div class="row first-row"> <p class="bold-text"> The Possibilities </p> <p class="copy"> <span> We believe that workspaces </span> <span> should be friendly and convenient. </span> <span> Here is an invitation into our how </span> <span> we design workspaces at curved. </span> </p> </div> <div class="row second-row"> <p class="bold-text"> Of  Workspaces </p> <p class="round-text" > <svg xmlns="http://www.w3.org/2000/svg" width="106" height="106" viewBox="0 0 "Fill ="none"> <path d="M0,53a53,53 0 1,0 106,0a53,53 0 1, 0-106,0" id="curve"></path> < width="314.1593"> <textPath alignment-baseline="top" xlink:href="#curve"> office workspace . office workspace . office workspace . </textPath> </text> <defs> </defs> </svg> </p> </div> <div class="row mobile-row"> <p class="copy"> <span> We believe that workspaces </span> <span> should be friendly and convenient. </span> <span> Here is an invitation into our how </span> <span> we design workspaces at curved. </span> </p> <button class="cta">Let's work together</button> </div> </header>Copy the code

Now that the structure is in place, it’s time to work on the visuals. You will define a custom utility class called inanimate -spin-slow, which applies a slowly rotating animation to the elements it uses.

Replace the contents of tailwind.config.js with the following:

module.exports = {
  content: [
    "./build/**/*.{html,js}"
  ],
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 10s linear infinite',
      }
    },
  },
  plugins: [],
}
Copy the code

Next, you’ll style the title itself.

Put the following code in SRC /input. CSS, where @layer Components:

    .row {
        @apply flex p-4 justify-center md:justify-start;
        @apply items-center gap-4 md:gap-8;
        @apply lg:gap-12 text-center md:text-left;
    }

    .first-row {
        @apply md:pt-8 lg:pt-16;
    }

    .bold-text {
        @apply font-bold text-5xl lg:text-6xl xl:text-8xl;
    }

    .copy {
        @apply font-medium;
    }

    .second-row .bold-text {
        @apply lg:pl-16 xl:pl-36
    }

    .first-row .copy {
        @apply hidden md:flex md:flex-col;
    }

    .round-text {
        @apply hidden md:block pl-20 lg:pl-40;
    }

    .round-text svg{
        @apply animate-spin-slow;
    }
    
    .round-text textPath {
        @apply text-xs fill-black;
    }

    .mobile-row {
        @apply flex md:hidden flex-col py-4;
    }
Copy the code

At this point, your page should look like this:

The title screenshots

Your navigation bar should appear on the page but is not visible, which is why the top is blank.

Now hide all the blocks animation-0 in each row by giving them a class. Editing index.html looks like this:

<header> <div class="row first-row"> <p class="bold-text opacity-0"> <! -- leave as is --> </p> <p class="copy opacity-0"> <! -- leave as is --> </p> </div> <div class="row second-row"> <p class="bold-text opacity-0"> <! -- leave as is --> </p> <p class="round-text opacity-0" > <! -- leave as is --> </p> </div> <div class="row mobile-row"> <p class="copy opacity-0"> <! -- leave as is --> </p> <button class="cta opacity-0"><! -- leave as is --></button> </div> </header>Copy the code

You’ve finished the title!