DEV Community: Prabhat Kumar

Build an Anime Website Source Code for Your Platform

Prabhat Kumar — Thu, 02 Jan 2025 09:13:12 +0000

Creating an anime website can be an exciting venture, especially with the increasing global popularity of anime. Whether you want to provide streaming services or a community hub for anime fans, building an anime website requires a thoughtful approach to both design and functionality. With the right tools and knowledge, you can create a highly engaging anime platform for your users. In this article, we will guide you on how to build an anime website using the anime website source code.

What is Anime Website Source Code?

The anime website source code refers to the underlying codebase that powers an anime website. This includes HTML, CSS, JavaScript, and any other back-end technologies required to support website features such as streaming, search functionality, user registration, and more. By using ready-made anime source code or templates, you can expedite the development process and focus more on customization and functionality.

Types of Anime Website Source Code

When building your watch anime website, you can opt for a free anime website template or anime web templates. These templates come pre-packaged with design and functional features that are essential for anime sites, such as responsive layouts, media galleries, and video players. Additionally, anime streaming site source code is designed to support streaming functionalities where users can watch anime videos directly from your platform.

How to Make an Anime Website: Key Steps

1. Choosing the Right Anime Source Code

Before diving into the actual coding, it's important to select the anime website source code that best suits your needs. Here are a few options:

Free Anime Website Templates: These templates offer pre-built designs and features tailored to anime content. They are a great starting point if you want to save time.
Anime Website HTML CSS: If you're building the site from scratch, you'll need to develop the front-end using HTML and CSS. This gives you complete control over the look and feel of the site.
Anime Streaming Site Source Code: If you plan to stream anime directly on your website, you'll need specialized code that supports video hosting, player integration, and streaming functionalities.

2. Setting Up Your Development Environment

To begin creating your anime website, you must first set up a local development environment. This allows you to work on your website without having to upload it to a live server initially. Follow these steps:

Install a text editor like Visual Studio Code or Sublime Text.
Set up a local web server environment (e.g., XAMPP or MAMP) for testing your code.
Use version control (like Git) to keep track of changes and collaborate with others, if necessary.

3. Customizing the Anime Web Template

Once you've chosen an anime web template, it's time to customize it to match your vision. Start by adjusting the layout, colors, fonts, and logos to reflect your brand. Consider adding features like:

Search functionality: Allow users to search for their favorite anime shows.
User registration and profiles: Enable users to create accounts, track their favorite shows, and interact with others.
Comment sections and reviews: Engage your audience by letting them leave feedback on the anime they watch.

4. Implementing Anime Streaming Features

For a create watch anime website that offers video streaming, you must integrate a video player into your design. You can either host the videos yourself or use third-party services like YouTube or Vimeo for streaming. Here's how:

Integrate Video Players: Use HTML5 elements to embed streaming content.
Video Hosting: If you're hosting videos on your server, ensure you have sufficient bandwidth and storage to handle the load.
Subtitles and Captions: For better accessibility, you can add subtitles or captions to your videos.

5. Testing the Website

Before launching your watch anime website, it's crucial to test its functionality thoroughly. Some key aspects to test include:

Cross-browser compatibility: Make sure your site works seamlessly across different browsers.
Mobile responsiveness: Ensure your site is optimized for mobile devices, as many users will access it from smartphones and tablets.
Load testing: Check how your site performs under heavy traffic to avoid crashes or slow loading times.

6. Deploying Your Anime Website

Once you're satisfied with your site's design and functionality, it's time to go live. Choose a reliable web hosting provider and deploy your site. Make sure to monitor performance and fix any bugs that may arise post-launch.

Common Challenges in Building an Anime Website

Legal Issues with Anime Content
When creating an anime streaming site, it's essential to be aware of copyright laws. Make sure you have the necessary permissions or licenses to stream or display anime content on your platform.
Scalability and Performance
As your platform grows, it may attract more users. Ensure that your anime website source code is scalable and can handle an increasing number of visitors without performance degradation.
User Engagement
A successful anime website is more than just a streaming platform; it should foster community engagement. Consider integrating social features like:

Forums and chat rooms for anime fans.
Reviews and ratings for shows.
Polls and surveys to involve users in decisions.

SEO Optimization for Anime Websites

To ensure your anime website source code is SEO-friendly, follow best practices for search engine optimization:

Use relevant keywords: Incorporate keywords like "how to make an anime website," "anime website HTML CSS," and "free anime website template" throughout your content.
Optimize meta tags: Use clear and descriptive title and meta tags for better visibility on search engines.
Mobile optimization: Ensure your site is mobile-friendly, as search engines like Google prioritize mobile-responsive websites.
Fast loading speeds: Compress images and use caching to improve loading times.

Conclusion

Building an anime website is an exciting project that can attract a wide range of users. By leveraging the right anime website source code and anime source code, you can quickly set up a visually appealing and functional site. Whether you're using a free anime website template or developing custom features like anime streaming, following the steps outlined in this article will guide you through the process.

To summarize, if you watch anime website that’s both engaging and functional, start with the right templates, integrate anime streaming features, test thoroughly, and ensure your site is SEO-optimized. By paying attention to the design, usability, and user engagement, you can build an anime website that fans will love to visit regularly.

HTML Tick Mark Code: Stylish and Interactive Checkbox Design

Prabhat Kumar — Sun, 29 Dec 2024 08:17:10 +0000

Creating visually appealing and functional web elements is a crucial aspect of modern web design. One of the most common interactive components found in forms and tasks lists is the HTML tick mark code. This article explores how to design a stylish and interactive checkbox that uses HTML tick mark and CSS to create a visually engaging user interface. By leveraging this design, developers can enhance user experience while maintaining simplicity.

Introduction to HTML Tick Mark Code

Checkboxes are essential components in forms, settings, and surveys, allowing users to select or deselect options. A well-designed checkbox doesn't just function; it also provides visual feedback, making the interaction feel smooth and responsive. The HTML tick mark code offers a simple yet powerful way to integrate checkboxes into your web projects, while adding a creative twist.

This guide will walk you through the process of styling a checkbox, including the use of HTML tick symbol, HTML tick character, and how to make the https://layakcoder.com/tick-mark/ come to life using CSS. We will start from the basic HTML structure and gradually enhance it with styling techniques that transform a plain checkbox into a dynamic interactive element.

Structuring the HTML for the Tick Mark

Before diving into the design, let’s take a look at the HTML tick mark structure. We begin with a basic HTML layout for a checkbox, which includes the input field for the checkbox and a label that will hold the tick mark:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Check Box || layakcoder</title>
</head>
<body>
    <input type="checkbox" id="_checkbox">
    <label for="_checkbox">
      <div id="tick_mark"></div>
    </label>



</body>
</html>

In this structure:

The checkbox is hidden using display: none; in the CSS, making it invisible to users.
A label is used to create a clickable area that will act as the checkbox. The label element is linked to the checkbox by the for="_checkbox" attribute.
The div with the ID tick_mark serves as a container for the HTML tick mark, where the tick icon will be rendered when the checkbox is checked.

Designing the Tick Mark with CSS

Once the basic HTML is in place, we can move on to styling. The goal is to create an attractive checkbox that not only functions properly but also provides a visually satisfying experience for the user.

Setting the Background and Layout

The first step is to set the background color of the page to black and remove default margin and padding. This makes the checkbox stand out against the dark background. Here is how we style the body:

html,
body {
    height: 100%;
    background-color: black;
}

body {
    margin: 0;
}

This ensures that the tick mark is visible and clearly stands out.

Styling the Label

The label will take the shape of a circular button. We use CSS properties like border-radius, box-shadow, and background-color to style it. Additionally, a smooth transition effect is applied to the label for a more interactive feel.

label {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: #5e2cd3;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 7px 10px #bdb8ff;
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color,
      0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
}

This code positions the label centrally, making it round, and adds a shadow for depth. The transition effect enhances the user experience by animating changes like hover and click actions.

Adding the Tick Mark Using Pseudo-Elements

The most interesting part of this design is the HTML tick symbol, which appears when the checkbox is checked. We create the tick icon by using the :before and :after pseudo-elements. Initially, these elements are invisible with opacity: 0:

#tick_mark {
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-left: 14px;
    transform: rotateZ(-40deg);
}

#tick_mark:before,
#tick_mark:after {
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 2px;
    opacity: 0;
    transition: 0.2s ease transform, 0.2s ease opacity;
}

These pseudo-elements create the two parts of the tick mark. The before pseudo-element forms the vertical line, and the after element forms the horizontal line of the tick.

Triggering the Tick Mark on Checkbox Selection

When the checkbox is selected, we use the :checked pseudo-class to change the background color and reveal the HTML tick character:

#_checkbox:checked + label {
    background-color: #07d410;
    box-shadow: 0 7px 10px #92ff97;
}

#_checkbox:checked + label #tick_mark:before,
#_checkbox:checked + label #tick_mark:after {
    transform: translate(0);
    opacity: 1;
}

This code handles the HTML tick mark animation, where the tick mark appears and the label background turns green when the checkbox is checked.

Enhancing User Interaction with Hover and Active States

To further enhance the interactivity, we add a hover effect that shrinks the label and changes its shadow. This provides visual feedback when the user hovers over the checkbox, making the design feel more dynamic.

label:hover:before {
    width: 55px;
    height: 55px;
    box-shadow: inset 0 7px 10px #96a9ff;
}

label:active {
    transform: translateY(-50%) scale(0.9);
}

The :active state reduces the size of the label, giving it a "pressed" look, which makes the user feel like they are interacting with a real button.

Conclusion
In this article, we walked through how to create a stylish and interactive HTML tick mark checkbox. By using HTML tick mark code and applying CSS for design and animations, we transformed a simple checkbox into an engaging user interface element.

With this HTML tick mark code, you can enhance any web form or to-do list by adding a custom checkbox design that improves the user experience. The smooth animations, visually appealing tick mark, and interactive states all contribute to making the checkbox more than just a simple form element – it becomes an engaging part of the interface.

By following these steps and incorporating the HTML tick mark symbol, HTML tick character, and HTML tick icon, developers can easily implement a visually appealing checkbox with functionality.

Create a Footer with the Help of HTML and CSS

Prabhat Kumar — Fri, 27 Dec 2024 15:18:44 +0000

A well-designed footer is a crucial component of any website. It provides essential footer information such as contact details, navigation links, and social media icons, and contributes to the overall user experience. In this article, we will guide you through creating a footer with the help of HTML and CSS using an example codebase. Let’s explore how you can design an engaging and responsive footer that enhances your website’s appeal.

Why Is a Footer Important?

The HTML footer section is often overlooked but plays a vital role in website design. A footer can include:

Links to important pages (Privacy Policy, Terms of Service).
Footer content like contact information or location.
Social media links for easy accessibility.
Brand reinforcement with logos and taglines.

Designing a footer in HTML CSS ensures your website remains user-friendly and professional.

Step-by-Step Guide to Creating a Footer

*1. Setting Up the HTML Structure
*
To begin, we need to structure the footer using HTML and CSS. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Footer Design</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>

  <footer class="footer">
     <div class="container">
      <div class="row">
        <div class="footer-col">
          <h4>company</h4>
          <ul>
            <li><a href="#">about us</a></li>
            <li><a href="#">our services</a></li>
            <li><a href="#">privacy policy</a></li>
            <li><a href="#">affiliate program</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>get help</h4>
          <ul>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">shipping</a></li>
            <li><a href="#">returns</a></li>
            <li><a href="#">order status</a></li>
            <li><a href="#">payment options</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>online shop</h4>
          <ul>
            <li><a href="#">watch</a></li>
            <li><a href="#">bag</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">dress</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>follow us</h4>
          <div class="social-links">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
      </div>
     </div>
  </footer>

</body>
</html>

This footer HTML structure is clean and organized. It uses div elements to group content into columns, providing easy readability and a solid foundation for styling.

2. Styling the Footer with CSS
**
To enhance the **footer content visually, we use CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
  line-height: 1.5;
  font-family: 'Poppins', sans-serif;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.container{
  max-width: 1170px;
  margin:auto;
}
.row{
  display: flex;
  flex-wrap: wrap;
}
ul{
  list-style: none;
}
.footer{
  background-color: #24262b;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}
.footer-col h4::before{
  content: '';
  position: absolute;
  left:0;
  bottom: -10px;
  background-color: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}
.footer-col ul li:not(:last-child){
  margin-bottom: 10px;
}
.footer-col ul li a{
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}
.footer-col ul li a:hover{
  color: #ffffff;
  padding-left: 8px;
}
.footer-col .social-links a{
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,0.2);
  margin:0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
  color: #24262b;
  background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}

This CSS adds:

A responsive layout.

Smooth transitions for hover effects.
A visually appealing color scheme.

Best Practices for Designing a Footer

*1. Keep It Simple and Informative
*
The footer using HTML and CSS should focus on clarity. Avoid cluttering it with excessive information.

2. Make It Responsive

Ensure your footer in HTML CSS looks great on all devices. Use media queries to adjust styles for smaller screens.

3. Include Social Media Links

Adding icons encourages visitors to engage with your brand on social platforms.

4. Test the Footer Design

Before deploying, test your HTML footer across multiple browsers to ensure consistency.

Conclusion

Creating a footer with the help of HTML and CSS is a simple yet rewarding process that enhances your website's user experience. By implementing the tips and structure shared in this article, you can design a footer that’s visually appealing, functional, and SEO-optimized.

Incorporate footer content like company details, footer information, and navigation links effectively. Follow the best practices to make your footer in HTML CSS not just a design element but a strategic asset for your website.

With these steps, you’ll master creating a stunning and responsive footer using HTML and CSS in no time!

Designing a Delightful Under Maintenance Page HTML and CSS

Prabhat Kumar — Thu, 26 Dec 2024 01:45:11 +0000

In web development, having a well-crafted "Under Maintenance Page HTML" is vital to communicate website downtime effectively to users. It ensures transparency while maintaining user engagement, even when the primary site is inaccessible. This article delves into the nuances of designing such pages using HTML and CSS, ensuring they are visually appealing, responsive, and functional.

Why an Under Maintenance Page HTML Matters

The Importance of Communication

A website’s downtime can be due to server upgrades, content updates, or security patches. An "Under Maintenance Page Html" informs users about this and reassures them that the site will be back soon. This fosters trust and maintains user loyalty, minimizing the potential frustration caused by unexpected unavailability.

For example, if an e-commerce site is down during a sale, a clear and concise maintenance page can mitigate customer dissatisfaction by informing them when the site will be back online.

Enhancing User Experience

A thoughtfully designed Under maintenance page HTML does more than just notify users—it enhances their experience even during downtime. Key benefits include:

-** Providing estimated downtime**: Keeping users informed about when they can expect the site to be back.

Offering alternative ways to connect: Including links to social media or support contact details.
Showcasing creativity: Leveraging animations or humor to turn a potentially frustrating experience into a positive one.

Essential Elements of a Maintenance Page

A great maintenance page combines functionality with aesthetics. Here are the essential elements:

Clear Messaging

The primary purpose of an https://layakcoder.com/under-maintenance-page-html/ is to convey information clearly. Avoid jargon and use simple, reassuring language. Examples include:

"We’ll be back soon!"
"Site under maintenance. We appreciate your patience."

Branding and Design

Maintain consistency with your website’s branding to reinforce your identity. Incorporate:

Logo: Helps users identify your website immediately.
Color scheme: Use your brand colors to keep the page aligned with your overall design.
Typography: Use fonts consistent with your website for a cohesive look.

Contact Information

Provide alternative ways for users to reach you, such as:

Email address: For urgent queries.
Social media links: To keep users updated.
Support form: For additional communication options.

Additional Features

Countdown Timer: To indicate the exact time left for maintenance.
Interactive Elements: Links to blog posts, FAQs, or announcements can keep users engaged.

Step-by-Step Guide to Designing a Maintenance Page

Let’s create a simple yet elegant "Under Maintenance Page HTML" using HTML and CSS.

Step 1: HTML Structure

Here’s the basic structure for your Under maintenance page HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap"
      rel="stylesheet"
    />
    <!-- Material ui icons - google web fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-10 main-title">
          <h1>Website</h1>
          <h2>under construction</h2>
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-sm-10 col-md-6 col-lg-6 svg-img p-5">
          <svg
            viewBox="0 0 834 690"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g id="undraw_dev_productivity_umsq 1" clip-path="url(#clip0)">
              <g id="man">
                <path
                  id="Vector"
                  d="M435.922 191.941C476.534 191.941 509.458 159.018 509.458 118.405C509.458 77.7923 476.534 44.869 435.922 44.869C395.309 44.869 362.385 77.7923 362.385 118.405C362.385 159.018 395.309 191.941 435.922 191.941Z"
                  fill="#A0616A"
                />
                <path
                  id="Vector_2"
                  d="M381.036 155.173C381.036 155.173 394.891 259.616 373.576 271.339C352.261 283.062 500.399 284.128 500.399 284.128C500.399 284.128 467.361 193.54 482.281 165.831L381.036 155.173Z"
                  fill="#A0616A"
                />
                <path
                  id="Vector_3"
                  d="M608.57 284.656L596.25 340.756L570.2 459.446L569.42 465.946L560.43 541.196L554.45 591.186L550.44 624.766C526.06 637.296 508.39 645.946 508.39 645.946C508.39 645.946 506.87 638.326 504.42 628.576C487.31 633.706 455.65 642.216 428.82 643.916C438.59 654.806 443.08 665.036 436.99 672.586C418.61 695.346 342.73 647.666 316.19 629.886C315.572 634.143 315.338 638.447 315.49 642.746L295.18 627.126L297.19 591.186L300.58 530.376L304.84 454.116C303.497 450.851 302.371 447.5 301.47 444.086C295.25 421.966 287.7 377.796 281.91 340.756C277.25 310.946 273.75 285.756 273.01 280.396C272.91 279.696 272.86 279.336 272.86 279.336L385.29 229.656C393.28 248.186 430.59 253.756 430.59 253.756C461.5 251.626 485.73 235.326 485.73 235.326L608.57 284.656Z"
                  fill="#D0CDE1"
                />
                <path
                  id="Vector_4"
                  d="M374.746 48.8468L360.997 43.3423C360.997 43.3423 389.746 11.6915 429.744 14.4439L418.494 2.05865C418.494 2.05865 445.993 -8.95021 470.992 19.9482C484.134 35.1394 499.339 52.996 508.817 73.1112H523.542L517.396 86.643L538.906 100.175L516.828 97.7442C518.144 105.154 518.346 112.719 517.428 120.189C516.48 127.661 512.667 134.473 506.793 139.187C506.793 139.187 489.741 103.891 489.741 98.387V112.148C489.741 112.148 475.992 99.7631 475.992 91.5065L468.492 101.139L464.742 86.0019L418.494 101.139L425.994 88.7543L397.245 92.8826L408.495 77.7452C408.495 77.7452 375.997 95.6348 374.746 110.772C373.497 125.909 363.984 140.253 363.984 140.253C363.984 140.253 338.498 69.4885 374.746 48.8468Z"
                  fill="#2F2E41"
                />
                <g id="rightHand">
                  <path
                    id="Vector_5"
                    d="M516.92 624.636C516.92 624.636 512.16 626.266 504.42 628.576C487.31 633.706 455.65 642.216 428.82 643.916C405.72 645.396 386.2 641.836 382.63 626.766C381.1 620.286 383.27 614.956 388 610.576C402.12 597.486 439 592.796 468.25 591.186C476.51 590.736 484.15 590.526 490.51 590.446C501.31 590.306 508.39 590.526 508.39 590.526L508.56 591.186L516.92 624.636Z"
                    fill="#A0616A"
                  />
                  <path
                    id="Vector_6"
                    d="M688.5 542.566C681.01 550.686 662.45 562.916 639.95 576.156C631.58 581.076 622.67 586.146 613.58 591.186C591.89 603.216 569.18 615.136 550.44 624.766C526.06 637.296 508.39 645.946 508.39 645.946C508.39 645.946 506.87 638.326 504.42 628.576C501.14 615.526 496.2 598.656 491.05 591.186C490.87 590.926 490.69 590.686 490.51 590.446C489.01 588.476 487.5 587.326 486.01 587.326L560.43 541.196L592.59 521.256L569.42 465.946L540.36 396.566L557.9 340.756L575.53 284.656H608.57C608.57 284.656 619.51 308.536 633.5 341.836C635.59 346.816 637.75 352.006 639.95 357.366C668.73 427.366 704.61 525.116 688.5 542.566Z"
                    fill="#D0CDE1"
                  />
                </g>
                <g id="leftHand">
                  <path
                    id="Vector_7"
                    d="M436.99 672.586C418.61 695.346 342.73 647.666 316.19 629.886C310.41 626.016 306.97 623.566 306.97 623.566L331.25 591.186L338.94 580.936C338.94 580.936 345.82 584.586 355.99 590.526C356.36 590.746 356.73 590.966 357.11 591.186C365.88 596.336 376.89 603.066 388 610.576C403.33 620.946 418.83 632.776 428.82 643.916C438.59 654.806 443.08 665.036 436.99 672.586Z"
                    fill="#A0616A"
                  />
                  <path
                    id="Vector_8"
                    d="M355.99 590.526C353.276 590.516 350.567 590.736 347.89 591.186C324.9 595.136 318.12 615.946 316.19 629.886C315.572 634.143 315.338 638.447 315.49 642.746L295.18 627.126L287.78 621.436C269.97 615.226 254.1 604.196 240.34 591.186C228.403 579.7 217.695 567.001 208.39 553.296C199.122 539.788 190.86 525.616 183.67 510.896C181.664 506.788 180.586 502.29 180.512 497.719C180.437 493.148 181.369 488.617 183.24 484.446L208.39 428.396L245.15 346.476C245.42 344.526 245.717 342.619 246.04 340.756C253.33 298.956 272.86 280.396 272.86 280.396H287.78L297.76 340.756L310.16 415.746L301.47 444.086L281.39 509.536L300.58 530.376L355.99 590.526Z"
                    fill="#D0CDE1"
                  />
                </g>
                <path
                  id="Vector_9"
                  d="M372.877 415.806L385.631 430.687C390.37 429.783 395.319 428.721 400.416 427.529L396.752 415.806L405.71 426.256C459.707 412.976 526.637 387.155 526.637 387.155C526.637 387.155 454.38 392.453 400.428 380.666C376.558 375.451 351.998 387.284 342.202 409.669C336.509 422.679 337.403 433.952 357.596 433.952C364.419 433.835 371.224 433.195 377.949 432.037L372.877 415.806Z"
                  fill="#6C63FF"
                />
              </g>
              <g id="allOther">
                <path
                  id="Vector_10"
                  d="M663.65 660.386V666.456C663.654 668.122 663.345 669.774 662.74 671.326C662.472 672.018 662.147 672.687 661.77 673.326C660.579 675.327 658.887 676.983 656.863 678.133C654.838 679.283 652.549 679.887 650.22 679.886H203.67C201.342 679.887 199.053 679.283 197.028 678.133C195.003 676.983 193.312 675.327 192.12 673.326C191.743 672.687 191.419 672.018 191.15 671.326C190.546 669.774 190.237 668.122 190.24 666.456V660.386C190.24 658.622 190.587 656.876 191.262 655.246C191.936 653.616 192.926 652.136 194.173 650.889C195.42 649.641 196.901 648.652 198.53 647.977C200.16 647.303 201.907 646.956 203.67 646.956H229.41V644.126C229.41 644.053 229.425 643.98 229.453 643.912C229.481 643.844 229.522 643.782 229.574 643.73C229.626 643.678 229.688 643.637 229.756 643.608C229.824 643.58 229.897 643.566 229.97 643.566H243.4C243.474 643.566 243.547 643.58 243.615 643.608C243.683 643.637 243.745 643.678 243.797 643.73C243.849 643.782 243.89 643.844 243.918 643.912C243.946 643.98 243.96 644.053 243.96 644.126V646.956H252.35V644.126C252.35 644.053 252.365 643.98 252.393 643.912C252.421 643.844 252.462 643.782 252.514 643.73C252.566 643.678 252.628 643.637 252.696 643.608C252.764 643.58 252.837 643.566 252.91 643.566H266.34C266.414 643.566 266.487 643.58 266.555 643.608C266.623 643.637 266.684 643.678 266.736 643.73C266.789 643.782 266.83 643.844 266.858 643.912C266.886 643.98 266.9 644.053 266.9 644.126V646.956H275.3V644.126C275.3 644.053 275.315 643.98 275.343 643.912C275.371 643.844 275.412 643.782 275.464 643.73C275.516 643.678 275.578 643.637 275.646 643.608C275.714 643.58 275.787 643.566 275.86 643.566H289.29C289.364 643.566 289.437 643.58 289.505 643.608C289.573 643.637 289.634 643.678 289.687 643.73C289.739 643.782 289.78 643.844 289.808 643.912C289.836 643.98 289.85 644.053 289.85 644.126V646.956H298.24V644.126C298.24 644.053 298.255 643.98 298.283 643.912C298.311 643.844 298.352 643.782 298.404 643.73C298.456 643.678 298.518 643.637 298.586 643.608C298.654 643.58 298.727 643.566 298.8 643.566H312.23C312.304 643.566 312.377 643.58 312.445 643.608C312.513 643.637 312.574 643.678 312.626 643.73C312.679 643.782 312.72 643.844 312.748 643.912C312.776 643.98 312.79 644.053 312.79 644.126V646.956H321.18V644.126C321.18 644.053 321.195 643.98 321.223 643.912C321.251 643.844 321.292 643.782 321.344 643.73C321.396 643.678 321.458 643.637 321.526 643.608C321.594 643.58 321.667 643.566 321.74 643.566H335.17C335.244 643.566 335.317 643.58 335.385 643.608C335.453 643.637 335.514 643.678 335.566 643.73C335.619 643.782 335.66 643.844 335.688 643.912C335.716 643.98 335.73 644.053 335.73 644.126V646.956H344.13V644.126C344.13 644.053 344.145 643.98 344.173 643.912C344.201 643.844 344.242 643.782 344.294 643.73C344.346 643.678 344.408 643.637 344.476 643.608C344.544 643.58 344.617 643.566 344.69 643.566H358.12C358.194 643.566 358.267 643.58 358.335 643.608C358.403 643.637 358.464 643.678 358.516 643.73C358.569 643.782 358.61 643.844 358.638 643.912C358.666 643.98 358.68 644.053 358.68 644.126V646.956H367.07V644.126C367.07 644.053 367.085 643.98 367.113 643.912C367.141 643.844 367.182 643.782 367.234 643.73C367.286 643.678 367.348 643.637 367.416 643.608C367.484 643.58 367.557 643.566 367.63 643.566H472.83C472.904 643.566 472.977 643.58 473.045 643.608C473.113 643.637 473.174 643.678 473.227 643.73C473.279 643.782 473.32 643.844 473.348 643.912C473.376 643.98 473.39 644.053 473.39 644.126V646.956H481.79V644.126C481.79 644.053 481.805 643.98 481.833 643.912C481.861 643.844 481.902 643.782 481.954 643.73C482.006 643.678 482.068 643.637 482.136 643.608C482.204 643.58 482.277 643.566 482.35 643.566H495.78C495.928 643.568 496.07 643.627 496.175 643.732C496.279 643.836 496.339 643.978 496.34 644.126V646.956H504.73V644.126C504.73 644.053 504.745 643.98 504.773 643.912C504.801 643.844 504.842 643.782 504.894 643.73C504.946 643.678 505.008 643.637 505.076 643.608C505.144 643.58 505.217 643.566 505.29 643.566H518.72C518.794 643.566 518.867 643.58 518.935 643.608C519.003 643.637 519.065 643.678 519.117 643.73C519.169 643.782 519.21 643.844 519.238 643.912C519.266 643.98 519.28 644.053 519.28 644.126V646.956H527.67V644.126C527.67 644.053 527.685 643.98 527.713 643.912C527.741 643.844 527.782 643.782 527.834 643.73C527.886 643.678 527.948 643.637 528.016 643.608C528.084 643.58 528.157 643.566 528.23 643.566H541.66C541.734 643.566 541.807 643.58 541.875 643.608C541.943 643.637 542.005 643.678 542.057 643.73C542.109 643.782 542.15 643.844 542.178 643.912C542.206 643.98 542.22 644.053 542.22 644.126V646.956H550.62V644.126C550.62 644.053 550.635 643.98 550.663 643.912C550.691 643.844 550.732 643.782 550.784 643.73C550.836 643.678 550.898 643.637 550.966 643.608C551.034 643.58 551.107 643.566 551.18 643.566H564.61C564.757 643.568 564.898 643.628 565.001 643.733C565.104 643.838 565.161 643.979 565.16 644.126V646.956H573.56V644.126C573.56 644.053 573.575 643.98 573.603 643.912C573.631 643.844 573.672 643.782 573.724 643.73C573.776 643.678 573.838 643.637 573.906 643.608C573.974 643.58 574.047 643.566 574.12 643.566H587.55C587.624 643.566 587.697 643.58 587.765 643.608C587.833 643.637 587.895 643.678 587.947 643.73C587.999 643.782 588.04 643.844 588.068 643.912C588.096 643.98 588.111 644.053 588.11 644.126V646.956H596.5V644.126C596.5 644.053 596.515 643.98 596.543 643.912C596.571 643.844 596.612 643.782 596.664 643.73C596.716 643.678 596.778 643.637 596.846 643.608C596.914 643.58 596.987 643.566 597.06 643.566H610.49C610.564 643.566 610.637 643.58 610.705 643.608C610.773 643.637 610.835 643.678 610.887 643.73C610.939 643.782 610.98 643.844 611.008 643.912C611.036 643.98 611.051 644.053 611.05 644.126V646.956H650.22C651.984 646.956 653.731 647.303 655.36 647.977C656.99 648.652 658.471 649.641 659.718 650.889C660.965 652.136 661.954 653.616 662.629 655.246C663.304 656.876 663.651 658.622 663.65 660.386Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_11"
                  d="M833.5 671.326H60.5002V673.326H833.5V671.326Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_12"
                  d="M627.695 404.757H461.252V401.326H385.78V404.757H218.651C215.665 404.757 212.801 405.943 210.69 408.054C208.579 410.166 207.392 413.029 207.392 416.015V643.927C207.392 646.913 208.578 649.776 210.69 651.888C212.801 653.999 215.665 655.185 218.651 655.185H627.695C630.68 655.185 633.544 653.999 635.656 651.888C637.767 649.776 638.953 646.913 638.953 643.927V416.015C638.953 414.537 638.662 413.073 638.096 411.707C637.53 410.341 636.701 409.1 635.656 408.054C634.61 407.009 633.369 406.179 632.003 405.614C630.637 405.048 629.173 404.757 627.695 404.757Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_13"
                  d="M108.446 661.223H80.446V689.223H108.446V661.223Z"
                  fill="#D0CDE1"
                />
                <path
                  id="Vector_14"
                  d="M91.45 639.223V673.223H125.45V639.223H91.45ZM123.97 671.743H92.92V640.703H123.97V671.743Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_15"
                  d="M756.446 661.223H728.446V689.223H756.446V661.223Z"
                  fill="#D0CDE1"
                />
                <path
                  id="Vector_16"
                  d="M739.45 639.223V673.223H773.45V639.223H739.45ZM771.97 671.743H740.92V640.703H771.97V671.743Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_17"
                  d="M94.5801 230.113C138.399 230.113 173.921 194.591 173.921 150.773C173.921 106.954 138.399 71.4324 94.5801 71.4324C50.7616 71.4324 15.2396 106.954 15.2396 150.773C15.2396 194.591 50.7616 230.113 94.5801 230.113Z"
                  fill="#6C63FF"
                />
                <path
                  id="Vector_18"
                  d="M122.229 56.49C115.045 55.5764 107.775 55.5764 100.591 56.49C84.5863 58.5914 69.5206 65.2399 57.1812 75.6466C44.8419 86.0533 35.747 99.7814 30.9756 115.202C28.8056 122.229 27.5767 129.514 27.3211 136.864C27.2851 137.886 27.261 138.92 27.261 139.954C27.2833 162.265 36.1561 183.655 51.9323 199.431C67.7084 215.208 89.0991 224.08 111.41 224.103C113.201 224.103 114.992 224.043 116.759 223.934C120.908 223.674 125.03 223.103 129.093 222.227C148.495 218.055 165.798 207.161 177.947 191.468C190.096 175.776 196.308 156.295 195.487 136.467C194.666 116.638 186.864 97.7381 173.459 83.104C160.054 68.4699 141.909 59.0436 122.229 56.49H122.229ZM137.748 217.347H137.736C130.959 219.659 123.905 221.062 116.759 221.518C114.992 221.638 113.201 221.698 111.41 221.698C89.7379 221.672 68.9613 213.051 53.6369 197.727C38.3126 182.402 29.6917 161.626 29.6652 139.954C29.6652 138.92 29.6892 137.886 29.7253 136.864C30.5517 115.744 39.5159 95.7617 54.7414 81.1009C69.9669 66.4401 90.2733 58.2371 111.41 58.209C130.776 58.2101 149.513 65.0866 164.283 77.6132C179.052 90.1399 188.895 107.503 192.057 126.61C195.22 145.716 191.496 165.325 181.55 181.942C171.604 198.559 156.082 211.106 137.748 217.347H137.748Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_19"
                  d="M112.612 63.0175H110.208V79.8473H112.612V63.0175Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_20"
                  d="M57.8578 84.7016L56.1577 86.4017L68.0582 98.3021L69.7582 96.6021L57.8578 84.7016Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_21"
                  d="M34.4738 138.752V141.156H51.3035V138.752H34.4738Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_22"
                  d="M56.1577 193.506L57.8578 195.206L69.7582 183.305L68.0582 181.605L56.1577 193.506Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_23"
                  d="M153.061 96.602L154.762 98.3021L166.662 86.4016L164.962 84.7016L153.061 96.602Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_24"
                  d="M171.516 138.752V141.156H188.346V138.752H171.516Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_25"
                  d="M154.762 181.605L153.061 183.305L164.962 195.206L166.662 193.506L154.762 181.605Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_26"
                  d="M112.612 200.06H110.208V216.89H112.612V200.06Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_27"
                  d="M122.229 35.3686H100.591V57.0069H122.229V35.3686Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_28"
                  d="M111.41 38.975C127.344 38.975 140.261 34.4002 140.261 28.7569C140.261 23.1136 127.344 18.5388 111.41 18.5388C95.4759 18.5388 82.5588 23.1136 82.5588 28.7569C82.5588 34.4002 95.4759 38.975 111.41 38.975Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_29"
                  d="M226 220.44H0V222.844H226V220.44Z"
                  fill="#3F3D56"
                />
              </g>
              <g id="clock">
                <path
                  id="Vector_30"
                  d="M115.016 94.2729H107.803V135.145H115.016V94.2729Z"
                  fill="#3F3D56"
                />
                <path
                  id="Vector_31"
                  d="M115.016 135.145C113.976 134.365 112.71 133.943 111.41 133.943C110.109 133.943 108.844 134.365 107.803 135.145C107.091 135.686 106.505 136.375 106.084 137.165C105.552 138.181 105.322 139.329 105.421 140.473C105.52 141.616 105.944 142.707 106.643 143.617C107.343 144.527 108.288 145.218 109.368 145.608C110.447 145.998 111.616 146.07 112.735 145.817C113.855 145.564 114.878 144.996 115.685 144.179C116.492 143.363 117.048 142.333 117.288 141.211C117.528 140.088 117.441 138.921 117.039 137.846C116.636 136.771 115.934 135.834 115.016 135.145H115.016ZM111.41 143.56C110.454 143.557 109.539 143.176 108.863 142.501C108.187 141.825 107.806 140.909 107.803 139.954C107.808 139.224 108.03 138.513 108.441 137.91C108.793 137.4 109.271 136.989 109.828 136.718C110.385 136.447 111.003 136.324 111.622 136.361C112.241 136.398 112.84 136.595 113.361 136.931C113.881 137.267 114.306 137.732 114.595 138.281C114.883 138.83 115.025 139.444 115.007 140.063C114.988 140.683 114.811 141.288 114.49 141.818C114.17 142.349 113.718 142.788 113.179 143.093C112.639 143.399 112.03 143.559 111.41 143.56V143.56Z"
                  fill="#3F3D56"
                />
              </g>
              <g id="leftTree">
                <path
                  id="Vector_32"
                  d="M150.594 599.754C151.527 631.704 132.859 643.413 109.43 644.097C108.886 644.113 108.345 644.123 107.805 644.126C106.719 644.135 105.643 644.117 104.577 644.072C83.3891 643.193 66.6173 631.945 65.7495 602.232C64.8515 571.482 103.018 531.529 105.882 528.574L105.887 528.571C105.996 528.458 106.052 528.402 106.052 528.402C106.052 528.402 149.661 567.807 150.594 599.754Z"
                  fill="#D0CDE1"
                />
                <path
                  id="Vector_33"
                  d="M107.744 639.255L122.626 617.124L107.774 641.636L107.805 644.126C106.719 644.135 105.643 644.117 104.577 644.072L105.316 612.06L105.295 611.813L105.323 611.766L105.393 608.741L89.0953 585.078L105.374 606.477L105.432 607.116L105.989 582.93L91.9123 558.397L106.029 578.681L105.882 528.574L105.882 528.407L105.887 528.571L106.822 568.062L119.651 552.021L106.864 571.464L107.144 593.098L118.949 571.984L107.187 596.279L107.343 608.309L124.512 578.897L107.395 612.505L107.744 639.255Z"
                  fill="#3F3D56"
                />
              </g>
              <g id="righTree">
                <path
                  id="Vector_34"
                  d="M798.594 599.754C799.527 631.704 780.859 643.413 757.43 644.097C756.886 644.113 756.345 644.123 755.805 644.126C754.719 644.135 753.643 644.117 752.577 644.072C731.389 643.193 714.617 631.945 713.75 602.232C712.852 571.482 751.018 531.529 753.882 528.574L753.887 528.571C753.996 528.458 754.052 528.402 754.052 528.402C754.052 528.402 797.661 567.807 798.594 599.754Z"
                  fill="#D0CDE1"
                />
                <path
                  id="Vector_35"
                  d="M755.744 639.255L770.626 617.124L755.774 641.636L755.805 644.126C754.719 644.135 753.643 644.117 752.577 644.072L753.316 612.06L753.295 611.813L753.323 611.766L753.393 608.741L737.095 585.078L753.374 606.477L753.432 607.116L753.989 582.93L739.912 558.397L754.029 578.681L753.882 528.574L753.882 528.407L753.887 528.571L754.822 568.062L767.651 552.021L754.864 571.464L755.144 593.098L766.949 571.984L755.187 596.279L755.343 608.309L772.512 578.897L755.395 612.505L755.744 639.255Z"
                  fill="#3F3D56"
                />
              </g>
              <g id="pc-circle">
                <path
                  id="Vector_36"
                  d="M422.5 512.326C436.307 512.326 447.5 501.133 447.5 487.326C447.5 473.519 436.307 462.326 422.5 462.326C408.693 462.326 397.5 473.519 397.5 487.326C397.5 501.133 408.693 512.326 422.5 512.326Z"
                  fill="#3F3D56"
                />
              </g>
            </g>
            <defs>
              <clipPath id="clip0">
                <rect width="833.5" height="689.223" fill="white" />
              </clipPath>
            </defs>
          </svg>
        </div>
      </div>

    </div>
      <footer class="footer">
        <div class="container text-center">
          <span>Layakcoder.com</span>
        </div>
      </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

This simple structure includes a header, a message, and a contact link.

Step 2: Adding CSS for Styling

Here’s the CSS to style your maintenance page:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%; /* 1rem = 10px */
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: #777;

}

.main-title{
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 8rem;
    text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

.main-title h1{
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 800;
    color: #555;
}

.main-title h2{
    font-size: 4rem;
    font-weight: 300;
    text-transform: uppercase;
}

.svg-img{
   display: block;
   margin: auto;
}

svg{
    display: block;
   margin: auto;
}

#clock{
    animation: clockHand 5s infinite linear;


    transform-box: fill-box;
    transform-origin: bottom;
}

#leftTree, #righTree{
    animation: tree 2s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#man{
    animation: manBody 1s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#pc-circle{
    fill: #6ace66;
    stroke-width: 4;
    animation: change-light 4s linear infinite alternate;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #f5f5f5;
    font-size: 1.3rem;
}

@keyframes clockHand{
    from{
        transform: rotateZ(0deg);
    }
    from{
        transform: rotateZ(-360deg);
    }
}

@keyframes manBody{
    from{
        transform: rotateX(0deg);
    }
    to{
        transform: rotateX(10deg);
    }
}

@keyframes tree{
    from{
        transform: rotateZ(10deg);
    }
    to{
        transform: rotateZ(-20deg);
    }
}

@keyframes change-light {
    0% {
        stroke: #cd61f8;
      }
      25% {
        stroke: #6ace66;
      }
      75% {
        stroke: #2995c0;
      }
      100% {
        stroke: #e92949;
      }
  }

  /* Media Queries */

  @media (min-width: 640px){
    .main-title h1{
        font-size: 5rem;
        text-transform: uppercase;
        font-weight: 700;
        color: #555;
    }

    .main-title h2{
        font-size: 3rem;
        font-weight: 300;
        text-transform: uppercase;
    }


    }

    @media (min-width: 768px){
        .main-title h1{
            font-size: 6rem;
            text-transform: uppercase;
            font-weight: 800;
            color: #555;
        }

        .main-title h2{
            font-size: 4rem;
            font-weight: 300;
            text-transform: uppercase;
        }


    }

    @media (min-width: 1024px){

        .main-title h1{
            font-size: 7rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }

        .main-title h2{
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
        }

    }

    @media (min-width: 1200px){

        .main-title h1{
            font-size: 8rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }

        .main-title h2{
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
        }

        .main-title{
            text-align: center;
            margin-top: 4rem;
            margin-bottom: 4rem;
        }


    }

This design ensures the page is clean, professional, and visually appealing.

Step 3: Adding Animations

To make your page dynamic and engaging, you can include animations. For example, a fade-in effect:

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.container {
    animation: fadeIn 2s ease-in-out;
}

Step 4: Responsive Design

Use media queries to ensure the page looks great on all devices:

@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    .container {
        width: 90%;
    }
}

Enhancing the Page with Advanced Features

Countdown Timer

A countdown timer adds interactivity and sets clear expectations. Here’s how to implement one using JavaScript:

<p id="countdown"></p>

<script>
    const countdownElement = document.getElementById('countdown');
    const targetDate = new Date('2024-12-31T23:59:59').getTime();

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = targetDate - now;

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        countdownElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;

        if (distance < 0) {
            countdownElement.innerHTML = "Maintenance Complete!";
        }
    }

    setInterval(updateCountdown, 1000);
</script>

Common Mistakes to Avoid

*Overloading the Page
*
Avoid adding too many elements or heavy scripts that can slow down the page. Keep it simple and lightweight.

*Missing Key Information
*
Always include the following:

Estimated Return Time: Let users know when the site will be back online.
Alternative Contact Details: Ensure users have a way to reach you.

*Ignoring Accessibility
*
Ensure your page is accessible to all users. Use:

Proper contrast between text and background.
Alt attributes for images.
Keyboard navigability.

*Real-World Examples and Inspiration
*
Humor and Creativity

Companies like GitHub and Twitter often use humor in their Animated Maintenance Page. For instance:

"We’re fixing some bugs. No real bugs were harmed!"
"Be right back. We’re making things awesome!"

Interactive Features

Some websites include mini-games or fun animations to keep users entertained.

Conclusion

Designing an effective "Under Maintenance Page HTML" is crucial for maintaining user trust during downtime. By incorporating clear messaging, responsive design, and engaging elements like animations and countdown timers, you can turn a potentially negative experience into a positive one.

A well-crafted Animated Maintenance Page demonstrates professionalism and ensures users feel valued, even when the primary site is temporarily unavailable. Whether you opt for a minimalist approach or an interactive design, focus on clarity, accessibility, and user engagem

Mastering CSS Animated Carousel Effects: A Step-by-Step Guide

Prabhat Kumar — Tue, 24 Dec 2024 05:27:01 +0000

In today's digital landscape, providing engaging and interactive elements for your website is crucial for retaining users and enhancing the user experience. One such element is the CSS animated carousel effect. This interactive feature allows you to display content dynamically, whether it’s images, text, or both. In this comprehensive guide, we will walk you through the process of creating a CSS-based animated carousel, focusing on Hero section carousel and Slider with hover effect features to create visually appealing and responsive designs.

What is a CSS Animated Carousel Effect?

A CSS animated carousel effect is a technique that enables content (like images, videos, or text) to be rotated in a circular motion, often with smooth transitions and animations. This effect makes your web page more interactive and visually attractive. Whether it's showcasing featured content, product images, or team members, a carousel offers a great solution for displaying multiple items in a confined space.

Key Benefits of CSS Animated Carousel Effects

Improved User Engagement: The dynamic nature of a carousel grabs attention and encourages users to interact with the content.
Optimized Space: It allows you to present multiple pieces of information without overcrowding the page, which is particularly useful for hero sections and product displays.
Customizability: With CSS, you can fully control the look and feel of the carousel, adding unique animations and hover effects.
How to Build a Basic CSS Animated Carousel
Step 1: HTML Structure for Carousel
The first step in creating a CSS animated carousel effect is setting up the basic HTML structure. Below is an example layout for the carousel:

<div class="carousel">
  <div class="carousel__item carousel__item--left">
    <img src="https://i.pinimg.com/originals/ea/fd/16/eafd1603d0937a7fe51208013cc84eb2.jpg" alt="Tony Stark">
    <div class="carousel__text">
      <h3>Tony Stark</h3>
      <p>The Iron Man</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--main">
    <img src="https://wallpapersmug.com/download/800x600/867960/thor-artwork.jpg" alt="Thor Odin'son">
    <div class="carousel__text">
      <h3>Thor Odin'son</h3>
      <p>God of Thunder</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--right">
    <img src="https://wallpapers.com/images/hd/captain-america-android-0aqaztdwgpz41epy.jpg" alt="Steve Rogers">
    <div class="carousel__text">
      <h3>Steve Rogers</h3>
      <p>Captain America</p>
    </div>
  </div>
  <!-- Additional Carousel Items -->
</div>

This structure features several carousel items, each containing an image and text, wrapped in div elements with appropriate class names. The main carousel item is marked with the carousel_item--main class, while the adjacent items are labeled as carouselitem--left and carousel_item--right.

Step 2: Styling the Carousel with CSS

Now, it's time to style the carousel and apply the CSS animated carousel effect. This step involves defining the layout, positioning, and animation transitions.

.carousel {
  display: flex;
  position: relative;
  overflow: hidden;
}

.carousel__item {
  flex: 1;
  transition: transform 0.5s ease-in-out;
  position: absolute;
  opacity: 0;
}

.carousel__item--main {
  opacity: 1;
  transform: translateX(0);
}

.carousel__item--left {
  opacity: 0.5;
  transform: translateX(-100%);
}

.carousel__item--right {
  opacity: 0.5;
  transform: translateX(100%);
}

.carousel__btns {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.carousel__btn {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

This CSS creates a flexible layout using display: flex, positions the items absolutely within the carousel, and applies transition effects when shifting between items.

Step 3: Adding JavaScript for Carousel Navigation

To allow users to navigate through the carousel, you can add buttons for sliding left or right. Here’s a simple JavaScript implementation:

const carouselItems = document.querySelectorAll('.carousel__item');
let currentItem = document.querySelector('.carousel__item--main');
const leftBtn = document.querySelector('#leftBtn');
const rightBtn = document.querySelector('#rightBtn');

rightBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--right');
    const leftItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    leftItem.classList.add('carousel__item--left');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const rightItem = currentId === carouselItems.length - 1 ? carouselItems[0] : carouselItems[currentId + 1];
    rightItem.classList.add('carousel__item--right');
});

leftBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--left');
    const rightItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    rightItem.classList.add('carousel__item--right');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const leftItem = currentId === 0 ? carouselItems[carouselItems.length - 1] : carouselItems[currentId - 1];
    leftItem.classList.add('carousel__item--left');
});

Step 4: Hero Section Carousel

The Hero section carousel is a great example of how CSS animated carousel effects can be used in the top section of a website. You can showcase key visuals and call-to-action elements to draw users' attention immediately. In the previous code, each item in the carousel can represent a hero image or a promotional banner.

By customizing the content in the .carousel__item elements, you can create a full-screen hero section with smooth transitions between multiple promotional images or videos.

Step 5: Slider with Hover Effect

One popular enhancement for CSS animated carousel effects is adding a hover effect that allows users to interact with the carousel. For instance, you can modify the opacity or scale of the carousel items when users hover over them.

.carousel__item:hover {
  transform: scale(1.05);
  opacity: 1;
}

This Slider with hover effect adds a subtle zoom-in effect to the carousel items when users hover over them, providing a more engaging and dynamic user experience.

Best Practices for CSS Animated Carousels

Optimizing Performance Make sure to optimize your carousel for performance by:

Reducing image file sizes.
Using CSS transform and opacity for animations instead of left, top, or other properties that trigger layout recalculations.
Using will-change: transform for smoother animations.

Responsive Design Ensure that your CSS animated carousel effect is mobile-friendly. Use media queries to adjust the size and layout of the carousel on different screen sizes.

@media (max-width: 768px) {
  .carousel {
    flex-direction: column;
  }
  .carousel__item {
    width: 100%;
    height: auto;
  }
}

Accessibility Considerations Ensure that your carousel is accessible to all users by providing alternative text for images and making the carousel navigation keyboard-friendly. Use aria-labels and ensure the carousel can be controlled using Tab, Enter, and arrow keys.

Conclusion

Creating a CSS animated carousel effect can transform your website’s user experience, making it more interactive and visually appealing. By following this step-by-step guide, you can implement a smooth, responsive carousel in your projects. Remember, whether you are designing a Hero section carousel or a Slider with hover effect, the possibilities are endless. By fine-tuning your carousel's transitions, styling, and interactivity, you'll ensure it delivers both beauty and functionality.

2+ Creative Star Rating Animation CSS for Enhanced User Engagement

Prabhat Kumar — Mon, 23 Dec 2024 06:14:25 +0000

In today's digital world, user reviews play a crucial role in shaping the reputation of businesses, products, and services. To ensure that users can easily rate their experience and give feedback, many websites incorporate star rating systems. The star rating system allows users to evaluate products or services on a simple scale. One of the best ways to engage users and enhance the experience is through star rating animation CSS. In this article, we will explore two dynamic star rating animation CSS examples that can be used to create an engaging and visually appealing user review interface.

The Power of Star Rating Animation CSS

Star ratings are commonly used across websites to allow users to share their opinions on a product or service. While a simple star rating system is functional, adding animation through CSS can enhance the user experience and make it more interactive. Star rating animation CSS enables smooth transitions and eye-catching effects that improve the visual appeal of the rating system. By utilizing CSS star animation, designers can create more engaging interfaces that draw users' attention and encourage them to interact with the review system.

Why Use CSS Star Animation?

Visual Appeal: Adding star animation CSS to your website's rating system makes it more visually appealing. Instead of static stars, animated ones draw attention and create a memorable experience.

User Engagement: Animations can significantly boost user engagement. When users see smooth transitions or effects when interacting with the rating system, they are more likely to participate and share their thoughts.

Branding: A customized star rating animation CSS can reflect the overall branding of a website or app, adding consistency to the user experience.

Example 1: A Simple Five-Star Rating with Animation

To illustrate the power of star rating animation CSS, let’s explore a simple implementation of a five star rating system. This system uses basic HTML, CSS, and JavaScript to allow users to select and rate products.

HTML Structure

<div class="container">
    <div class="info">
        <div class="emoji"></div>
        <div class="status"></div>
    </div>
    <div class="stars">
        <div class="star" data-rate="5">
            <!-- Star SVG Icon -->
        </div>
        <div class="star" data-rate="4">
            <!-- Star SVG Icon -->
        </div>
        <div class="star" data-rate="3">
            <!-- Star SVG Icon -->
        </div>
        <div class="star" data-rate="2">
            <!-- Star SVG Icon -->
        </div>
        <div class="star" data-rate="1">
            <!-- Star SVG Icon -->
        </div>
    </div>
</div>

In this structure, each

represents an individual star within the rating system. These stars are dynamically animated when hovered over or clicked.

CSS for Star Rating Animation

.star {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.star:hover {
    transform: scale(1.2);
    color: gold;
}

Here, the transform property scales the star when hovered, and the color property changes it to gold. This simple CSS star animation provides a smooth, visually engaging effect that encourages user interaction.

JavaScript for Rating Selection

document.querySelectorAll('.star').forEach(star => {
    star.addEventListener('click', () => {
        alert('You rated: ' + star.getAttribute('data-rate') + ' stars');
    });
});

The JavaScript portion of this code captures the user’s rating selection and displays it in an alert box. By clicking on a star, users can easily give feedback.

Example 2: Animated Star Rating System with Hover Effects
For a more advanced star rating system, you can implement additional hover effects and color transitions to enhance the user experience further. This system involves star rating animation CSS for both hover and active states, providing a dynamic and interactive experience.

HTML Structure

<div class="star-rating">
    <div class="star" data-value="5"></div>
    <div class="star" data-value="4"></div>
    <div class="star" data-value="3"></div>
    <div class="star" data-value="2"></div>
    <div class="star" data-value="1"></div>
</div>

This structure includes five stars, each with a data-value attribute that will be used to track the user's rating.

CSS for Dynamic Star Animation

.star-rating .star {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('star-outline.svg') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.star-rating .star:hover {
    background: url('star-filled.svg') no-repeat center center;
    background-size: contain;
    transform: scale(1.1);
}

.star-rating .star.selected {
    background: url('star-filled.svg') no-repeat center center;
    background-size: contain;
}

This star animation CSS includes hover effects that change the star icon to a filled star when hovered over. It also slightly enlarges the star to provide a more dynamic and engaging effect. When a user clicks on a star, the .selected class is added, making it persist in the filled state.

JavaScript for Rating System Interaction

document.querySelectorAll('.star-rating .star').forEach(star => {
    star.addEventListener('mouseover', function() {
        this.style.background = 'url("star-filled.svg") no-repeat center center';
    });
    star.addEventListener('mouseout', function() {
        this.style.background = 'url("star-outline.svg") no-repeat center center';
    });
    star.addEventListener('click', function() {
        document.querySelectorAll('.star-rating .star').forEach(s => s.classList.remove('selected'));
        this.classList.add('selected');
        alert('You rated: ' + this.getAttribute('data-value') + ' stars');
    });
});

This code allows for hover effects, rating selection, and visual feedback when the user clicks a star. The system visually marks the selected rating by adding a "selected" class.

Enhancing User Engagement with CSS Star Animation

Adding animations to your star rating system can make it more visually appealing and engaging for users. The following best practices can help you further enhance user engagement:

Smooth Transitions: Using CSS transitions for hover and active states creates a smoother, more interactive experience for users.

Customizable Animations: You can customize the star rating animation CSS to suit the style of your website. For example, you can change the color, size, or type of animation to match your branding.

Mobile Responsiveness: Ensure that your star rating system is responsive. The animations should work seamlessly on both desktop and mobile devices to provide an optimal experience across different screen sizes.

Feedback Mechanism: Consider combining your star rating animation CSS with a feedback system that allows users to leave comments or explanations alongside their ratings. This adds depth to the review process and helps businesses gather more valuable insights.

Conclusion

Using star rating animation CSS is an excellent way to improve the user experience on your website. The two examples discussed in this article show how you can implement engaging and dynamic animations to enhance your star rating system. By adding animations, you not only make the rating system more interactive but also create a visually appealing interface that encourages users to engage and leave reviews. Whether you choose a simple hover effect or a more complex dynamic system, incorporating CSS star animations will undoubtedly boost your website’s usability and overall appeal.

By following the guidelines and best practices mentioned above, you can create an effective, engaging, and visually stunning star rating system that will delight your users and enhance their experience.