In this project we are going to build a beautiful tailwind CSS site. This site again will be created using only HTML and CSS and no framework. This site will also have cool animation effect.
The installation of tailwind is a long process and covered earlier in my earlier post. Please refer it to get tailwind CSS setup in your project.
After the installation, in the index.html file, add the basic code by ! and tab. After that also add the link for the style sheet. We have also added an h1 text, for the testing.
After that, right-click and then click on Open with Live Server link.
Tailwind Site
Now, the code will open in http://127.0.0.1:5500/public/index.html
Tailwind Site
We will create our navigation bar first. So, inside a nav, we will have two divs. One will contain an icon and the other our menu items.
We are again taking the icon svg from the awesome site https://heroicons.dev/. The only thing which we have changed is the class size to w-12 and h-12.
The classes have been taken from the awesome documentation of tailwind site. They means as below.
flex - makes children flex items
justify-between - justify-content: space-between;
items-center - align-items: center;
h-16 - height: 4rem;
px-24 - padding-left: 6rem; padding-right: 6rem;
px-4 - padding-left: 1rem; padding-right: 1rem;
text-xl - font-size: 1.25rem; line-height: 1.75rem;
text-white - text color white
bg-green-600 - background-color: rgba(5, 150, 105, 1);
Navbar
And our Navbar is complete and showing beautifully.
Navbar
Now, we will create our header component, which will include our body. Here, inside a header tag, we have two divs. One contains the left part, which have a h1, p and two buttons.
The right half contains a vector image, which i have placed in the images folder. You can get free vector images from this site https://www.freepik.com/
The tailwind classes used for this part are mentioned below.
flex, justify-between, items-center - explained before
mt-28 - margin-top: 7rem;
mt-4 - margin-top: 1rem;
ml-4 - margin-left: 1rem;
pl-20 - padding-left: 5rem;
px-2 - padding-left: 0.5rem; padding-right: 0.5rem;
py-2 - padding-top: 0.5rem; padding-bottom: 0.5rem;
rounded - border-radius: 0.25rem;
text-4xl - font-size: 1.25rem; line-height: 1.75rem;
bg-green-600 - background-color: rgba(5, 150, 105, 1);
w-3/5 - width: 60%;
w-2/5 - width: 40%;
Header
Now, our site is almost complete with a beautiful body.
Beautiful body
Now, we will integrate animation in our site, which we will use from https://animate.style/
For using the animation first include this stylesheet inside your head.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />After that as per documentation, we need to add the base class of animate__animated to the element, which we want to animate. Beside this the other class, which tells about the animation and can be taken from the site.
If we have two animations on our site, we can also delay one of them by adding animate__delay-1s to it.
In our site, we are animating both the left and the right side.
animation
Our small animation project is complete and working as below.
Animation
You can find the GitHub repository for the same here.
Source: Medium - Nabendu Biswas
The Tech Platform
Life is full of battles. Ye cannae escape them. Ye can only prepare to stand yer ground and fight snake game
Very cool, thank you very much for telling such cool and really useful information, I love this kind of content. At one time, I wanted to become a 3D animator, but it didn't work out, but I wasn't too upset because I found a new vocation. Thanks to this blog https://blog.depositphotos.com/, I began to actively study photo and video design and editing, which later turned into the fact that I now fulfil various design and editing orders. Thus, I am now a pretty good specialist, and all this is thanks to a good theoretical part and desire.
I agree, I completely agree with you, it's a very familiar situation, and in general, your opinion overlaps with mine in some places. When I was at university, I also wanted to master a new field, but at the same time, I let my studies go a little bit, but I was saved by the fact that I turned to these gentlemen https://www.dnpcapstoneproject.com/ in time, who saved my situation by writing all the key papers for me, which I had to submit on time. So looking back, I'm glad I took the risk and went on such an adventure, it was worth it.
Very cool article, if there were such things in my time, I wouldn't have gone to college at all, I don't know how you do it, but you explained everything so cool and put it on the shelves that I'm just shocked. At one time, I was so much in the dark about college that I had to buy recommendation letters, which of course saved me, but the fact that I wanted to study a new discipline outside the institution and then this happened, I was a little outraged, but I'm very glad that everything ended well.