Get into the habit of writing together! This is the 14th day of my participation in the "Nuggets Daily New Plan·April Update Challenge", click to view the details of the event .
How to write markup
See what your page should look like at the end of the animation:
Landing page structure outline
We call the blue part the navigation bar, the yellow part the header, 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 nav bar, so go to this link and download it. Store it in build/assets, same name logo.jpg.
Your navigation bar will be divided into three sections:
- left sign
- one
divin the middle - button on the right
Open build/index.htmlit 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>
复制代码Next, you'll add spacing and alignment to the navigation bar using some CSS.
Open src/input.cssit up and add the following at the end of the section @layer base:
nav {
@apply flex p-4 md:py-8 md:px-4 lg:p-12;
@apply justify-center items-center gap-4;
}
复制代码Then add this to the end of the file, outside @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;
}
}
复制代码When done, your page should look like this:
Navigation bar screenshot
Now that you've built the navigation bar, hide it now so you can make it visible later.
Go back, and index.htmladd a class in:opacity-0``nav
<body>
<nav class="opacity-0">
<!-- leave the rest of the code as it is -->
</nav>
</body>
复制代码How to build the title
You'll implement the header by building three lines.
The first line consists of some bold, enlarged text and a piece of normal text that you hide when the screen is smaller than 768 pixels (on mobile).
The second line is similar to the first: some bold, enlarged text, shifted to the right, and a rotated SVG in place of the paragraph. SVG will also be hidden on mobile devices.
The third row is only visible on mobile devices and contains a piece of text and a button.
Put the following code build/index.htmlafter the nav 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 106 106" fill="none">
<path d="M0,53a53,53 0 1,0 106,0a53,53 0 1,0 -106,0" id="curve"></path>
<text 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>
复制代码Now that the structure is in place, it's time to make the visuals. You'll define a custom utility class called animate-spin-slow.
Replace the content of 's with the tailwind.config.jsfollowing:
module.exports = {
content: [
"./build/**/*.{html,js}"
],
theme: {
extend: {
animation: {
'spin-slow': 'spin 10s linear infinite',
}
},
},
plugins: [],
}
复制代码Next, you'll style the header itself.
Put the following code inside src/input.css, inside @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;
}
复制代码At this point, your page should look like this:
Title screenshot
Your navbar should appear on the page, but not visible, that's why the top is blank.
Now hide all the blocks in each row by giving them a class opacity-0. Edit index.htmlto look 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>
复制代码You are done with the title!