hosted link :-https://thakaresakshi.github.io/tailwind-project/
-
External Dependencies:
- The code includes external CSS dependencies using
<link>tags. These dependencies include:- animate.css: This is a CSS library that provides various pre-built animations.
- Material Icons: This link is used to load Google's Material Icons font.
- Tailwind CSS: The code uses Tailwind CSS, but the CSS file is likely located at "./dist/output.css," so it is linked here.
- The code includes external CSS dependencies using
-
Body Class:
class="bg-black font-sans": These classes set the background color to black and specify a sans-serif font for the entire<body>element.
-
Header Section:
- The
<header>section contains a navigation bar with a logo and social media icons. It uses various Tailwind CSS classes likew-full,flex,justify-between, andtext-whiteto style the navigation bar.
- The
-
Main Section:
- Hero Section: This section displays a hero image with text content on top of it.
bg-top bg-coveris used to set the background image and apply styles to it.- The text content is centered and styled using Tailwind CSS classes such as
text-5xl,font-bold, andtext-white. - A button is styled using classes like
bg-transparent,border-2,py-4, androunded-md.
- Hero Section: This section displays a hero image with text content on top of it.
- About Section: This section contains two columns, one with an image and the other with text.
- The image is styled using classes like
rounded-lg,overflow-hidden, andobject-cover. - Text content is styled using various classes like
text-white,font-sans, andtext-xl. - Icon elements use Font Awesome classes like
fa-solidandfa-dumbbellto display icons.
- The image is styled using classes like
-
Trainers Section:
- This section displays trainer profiles with images and text.
- Each trainer profile uses classes like
flex,flex-col,p-2, androunded-mdfor styling. - AOS (Animate On Scroll) is used for animations. For example,
data-aos="flip-left"triggers a flip-left animation when the element scrolls into view.
-
Contact Section:
- This section contains a contact form.
- The form elements are styled using classes like
rounded-md,border-2, andtext-black. - AOS is used for animations, such as
data-aos="fade-up-right"for the form.
-
Footer Section:
- The footer section contains social media icons and copyright information.
- Social media icons are styled with Font Awesome classes.
- The
clip-pathproperty is used to create a non-rectangular shape for the footer.
-
JavaScript:
- The code includes JavaScript for AOS initialization (
AOS.init()), which sets up the Animate On Scroll library with specific settings like delay and duration for animations.
- The code includes JavaScript for AOS initialization (
Overall, the code utilizes Tailwind CSS classes for styling and incorporates animations from the animate.css library and AOS for a visually appealing and interactive web page.