Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

    <title>Evento Landing Page</title>
</head>
<body class="bg-slate-950">
    <!-- Nav bar start here -->
  <nav class="fixed left-0 top-0 z-20 w-full border-b border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-900">
    <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
      <a href="#" class="flex items-center">
        <img src="https://i.ibb.co/CVFbsH1/oig.png" class="mr-3 h-12" alt="Evento Logo" />
        <span class="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">Evento</span>
      </a>
      <div class="flex md:order-2">
        <a href="#register"><button type="button" class="mr-0 rounded-lg bg-indigo-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800 md:mr-0">Register Now</button>
        </a>
      </div>
      <div class="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto" id="navbar-sticky">
        <ul class="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 font-medium dark:border-gray-700 dark:bg-gray-800 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 md:dark:bg-gray-900">
          <li>
            <a href="#" class="block rounded bg-indigo-700 py-2 pl-3 pr-4 text-white md:bg-transparent md:p-0 md:text-indigo-700 md:dark:text-indigo-500" aria-current="page">Home</a>
          </li>
          <li>
            <a href="#agenda" class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-indigo-700 md:dark:hover:bg-transparent md:dark:hover:text-indigo-500">Agenda</a>
          </li>
          <li>
            <a href="#host" class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-indigo-700 md:dark:hover:bg-transparent md:dark:hover:text-indigo-500">Host</a>
          </li>
          <li>
            <a href="#review" class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-indigo-700 md:dark:hover:bg-transparent md:dark:hover:text-indigo-500">Review</a>
          </li>
          <li>
            <a href="#benefits" class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-indigo-700 md:dark:hover:bg-transparent md:dark:hover:text-indigo-500">Benefits</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
    <!-- Nav bar End here -->
   
    <!-- Hero Section start here -->
    <section class="bg-gray-700 bg-[url('https://i.ibb.co/8Dw3HDN/conference.jpg')] bg-center bg-no-repeat bg-blend-multiply mt-6 h-screen">
        <div class="mx-auto max-w-screen-xl px-4 py-24 text-center lg:py-56">
          <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-white md:text-5xl lg:text-6xl">Unleashing the Power of Web Development</h1>
          <p class="mb-8 text-lg font-normal text-gray-300 sm:px-16 lg:px-48 lg:text-xl">Join us for an exciting journey into the world of web development, where we believe in harnessing the boundless potential of innovation, technology, and capital.</p>
          <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-x-4 sm:space-y-0">
            <a href="#register" class="inline-flex items-center justify-center rounded-lg bg-indigo-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-900">
              Book Your Spot Now
              <svg aria-hidden="true" class="-mr-1 ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
            <a href="#agenda" class="inline-flex items-center justify-center rounded-lg border border-white px-5 py-3 text-center text-base font-medium text-white hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-400"> Learn more </a>
          </div>
        </div>
      </section>

    <!-- Hero Section end here -->

    <!-- Agenda Section Card -->
     <div id="agenda">
        <div class="mt-16 text-center">
            <h2 class="text-2xl  md:text-4xl font-bold text-gray-100 dark:text-white">What You Will Learn</h2>
            <p class="text-gray-500 text-lg mt-4 mb-8 dark:text-gray-400 ">Topics that will be covered in this webinar</p>
        </div>
        <!-- Card Component  -->
        <div class="flex flex-wrap justify-center mx-auto py-8 px-4 md:mb-16">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Card 1 -->
        <div class="w-full sm:w-80  mb-4 bg-white rounded-lg shadow-lg">
            <img class="rounded-t-lg w-full h-48 sm:h-64 object-cover" src="https://i.ibb.co/RzdXZB6/Card-image.jpg" alt="" />
            <div class="py-4 px-6">
              <h2 class="hover:cursor-pointer mt-2 text-gray-900 font-bold text-xl sm:text-2xl tracking-tight">Front-End Development</h2>
              <p class="hover:cursor-pointer py-2 text-gray-600 leading-5">HTML, CSS, JavaScript, and frameworks like React and Vue.js - Learn to craft stunning user interfaces and create responsive websites that leave a lasting impression.</p>
            </div>
        </div> 

        <!-- Card 2 -->
        <div class="w-full sm:w-80  mb-4 bg-white rounded-lg shadow-lg">
          <img class="rounded-t-lg w-full h-48 sm:h-64 object-cover" src="https://i.ibb.co/PWpPSD7/Card-image-1.jpg" alt="" />
          <div class="py-4 px-6">
            <h2 class="hover:cursor-pointer mt-2 text-gray-900 font-bold text-xl sm:text-2xl tracking-tight">Back-End Development</h2>
            <p class="hover:cursor-pointer py-2 text-gray-600 leading-5">Node.js, Python, MongoDB, MySQL, Express.js, and Django - Discover the magic of server-side programming and build scalable web applications.</p>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="w-full sm:w-80  mb-4 bg-white rounded-lg shadow-lg">
          <img class="rounded-t-lg w-full h-48 sm:h-64 object-cover" src="https://i.ibb.co/SfqGZQW/Card-image-3.jpg" alt="" />
          <div class="py-4 px-6">
            <h2 class="hover:cursor-pointer mt-2 text-gray-900 font-bold text-xl sm:text-2xl tracking-tight">Becoming a Full-Stack Developer</h2>
            <p class="hover:cursor-pointer py-2 text-gray-600 leading-5">Front-end to back-end, APIs, development tools, and optimization - Elevate your coding skills and become a versatile web development maestro.</p>
          </div>
        </div>
        
           </div>
        </div>
    </div>
          
    <!-- CTA Section -->
    <div class="flex flex-col md:flex-row items-center justify-between bg-indigo-500 text-white p-8 md:p-16 space-y-4 md:space-y-0 md:space-x-8 font-semibold text-lg ">
        <div class="flex flex-col items-center space-y-4 text-xl">
          <i class="far fa-calendar-alt text-2xl"></i> 
          <p>August 12th 2023</p>
        </div>
        <div class="flex flex-col items-center space-y-4 text-xl">
          <i class="far fa-clock text-2xl"></i> 
          <p>09:00 am GMT</p>
        </div>
        <div class="flex flex-col items-center space-y-4 text-xl">
          <i class="far fa-hourglass text-2xl"></i> 
          <p>Duration: 8 Hour</p>
        </div>
        <a href="#register">
            <button class="bg-white text-black px-6 py-2 rounded-md md:text-2xl text-xl">Book Seat Now</button>
        </a>
        </div>
    
    <!-- About Host Section -->
    <div id="host" class="bg-white py-6 sm:py-8 lg:py-12 ">
        <div class="mx-auto max-w-screen-xl px-4 md:px-8 mt-10">
          <!-- text - start -->
          <div class="mb-8 md:mb-10">
            <h2 class="mb-4 text-center text-3xl font-bold text-gray-800 md:mb-6 lg:text-3xl">About The Host</h2>
            <p class="mx-auto max-w-screen-md text-center font-semibold text-gray-600 md:text-lg">Expert who will be conducting this webinar</p>
          </div>
          <!-- text - end -->
      
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 p-8">
            <!-- stat - start -->
            <div class="flex flex-col items-center justify-center rounded-lg p-4 lg:p-8">
              <img src="https://i.ibb.co/GCyYvKt/host-2x.jpg" alt="Host Avatar" class="h-56 w-56 sm:h-auto sm:w-auto mb-2 rounded-md">
            </div>
            <!-- stat - end -->
      
            <!-- stat - start -->
            <div class="flex flex-col rounded-lg sm:p-8 p-4">
              <div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">John Doe</div>
              <div class="text-sm font-semibold sm:text-base mb-6 mt-2">CEO, Evento</div>
      
              <p class="text-base font-serif text-gray-500 text-justify sm:leading-relaxed sm:mr-8 mb-8 mt-8">
                Meet John Doe, an experienced web developer and tech enthusiast who is passionate about sharing his knowledge with aspiring developers. As the host of our upcoming webinar on Web Development, John will take you on an exciting journey into the world of web development.
              </p>
              <p class="hidden md:text-justify md:block text-base font-serif text-gray-500 leading-relaxed sm:mr-8 mb-12">
                During the webinar, John will cover various topics, including front-end and back-end development, popular programming languages, essential tools and frameworks, best practices, and tips for building responsive and user-friendly websites. 
              </p>
      <!-- social - start -->
              <div class="flex gap-4">
                <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                  <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                  </svg>
                </a>
      
                <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                  <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
                  </svg>
                </a>
      
                <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                  <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
                  </svg>
                </a>
      
                <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                  <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                  </svg>
                </a>
              </div>
              <!-- social - end -->
                  </div>
                  
                </div>
              </div>
            </div>


    <!-- Stats Section Start Here  -->
    <div class="bg-slate-100 py-6 sm:py-8 lg:py-12">
        <div class="mx-auto max-w-screen-xl px-4 md:px-8">
      
          <div class="grid grid-cols-2 gap-4 md:grid-cols-4 lg:gap-8">
            <!-- stat - start -->
            <div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 lg:p-8">
              <div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">50+</div>
              <div class="text-sm font-semibold sm:text-base">Webinar</div>
            </div>
            <!-- stat - end -->
      
            <!-- stat - start -->
            <div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 md:p-8">
              <div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">5000+</div>
              <div class="text-sm font-semibold sm:text-base">Attended</div>
            </div>
      
            <!-- stat - start -->
            <div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 md:p-8">
              <div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">400+</div>
              <div class="text-sm font-semibold sm:text-base">Hours</div>
            </div>
            <!-- stat - end -->
      
            <!-- stat - start -->
            <div class="flex flex-col items-center justify-center rounded-lg bg-gray-200 p-4 md:p-8">
              <div class="text-xl font-bold text-indigo-500 sm:text-2xl md:text-3xl">6000+</div>
              <div class="text-sm font-semibold sm:text-base">Subscriber</div>
            </div>
            <!-- stat - end -->
          </div>
        </div>
      </div>

    <!-- Stats Section Ends Here -->


    <!-- Testimonial Start Here-->
    <div id="review" class="bg-white py-6 sm:py-8 lg:py-12">
        <div class="mx-auto max-w-screen-xl px-4 md:px-8 md:mt-16 md:mb-16">
          <h2 class="mb-16 text-center text-2xl font-bold text-gray-800 md:mb-12 lg:text-3xl">What others say about us</h2>
      
          <div class="grid gap-y-10 sm:grid-cols-2 sm:gap-y-12 lg:grid-cols-3 lg:divide-x">
            <!-- quote - start -->
            <div class="flex flex-col items-center gap-4 sm:px-4 md:gap-6 lg:px-8">
              <div class="text-center text-gray-600">“The webinar on web development conducted by John was exceptional. He explained complex concepts in a simple and engaging manner. I learned a lot and feel more confident in my web development skills now.”</div>
      
              <div class="flex flex-col items-center gap-2 sm:flex-row md:gap-3">
                <div class="h-12 w-12 overflow-hidden rounded-full bg-gray-100 shadow-lg md:h-14 md:w-14">
                  <img src="https://images.unsplash.com/photo-1567515004624-219c11d31f2e??auto=format&q=75&fit=crop&w=112" loading="lazy" alt="Photo by Radu Florin" class="h-full w-full object-cover object-center" />
                </div>
      
                <div>
                  <div class="text-center text-sm font-bold text-indigo-500 sm:text-left md:text-base">Sarah Thompson</div>
                  <p class="text-center text-sm text-gray-500 sm:text-left md:text-sm">Lead Developer / TechPro Solutions</p>
                </div>
              </div>
            </div>
            <!-- quote - end -->
      
            <!-- quote - start -->
            <div class="flex flex-col items-center gap-4 sm:px-4 md:gap-6 lg:px-8 ">
              <div class="text-center text-gray-600">“I thoroughly enjoyed the webinar hosted by Michael. His expertise in web development is evident, and he shared valuable insights and tips. It was a great learning experience, and I would highly recommend it to others.”</div>
      
              <div class="flex flex-col items-center gap-2 sm:flex-row md:gap-3">
                <div class="h-12 w-12 overflow-hidden rounded-full bg-gray-100 shadow-lg md:h-14 md:w-14">
                  <img src="https://images.unsplash.com/photo-1532073150508-0c1df022bdd1?auto=format&q=75&fit=crop&w=112" loading="lazy" alt="Photo by christian ferrer" class="h-full w-full object-cover object-center" />
                </div>
      
                <div>
                  <div class="text-center text-sm font-bold text-indigo-500 sm:text-left md:text-base">Kate Berg</div>
                  <p class="text-center text-sm text-gray-500 sm:text-left md:text-sm">Chief Technology Officer / InnovateX</p>
                </div>
              </div>
            </div>
            <!-- quote - end -->
      
            <!-- quote - start -->
            <div class="flex flex-col items-center gap-4 sm:px-4 md:gap-6 lg:px-8">
              <div class="text-center text-gray-600">Attending Emily's webinar on web development was a game-changer for me. His knowledge and passion for the subject were inspiring. The practical examples and hands-on helped me improve my coding skills.”</div>
      
              <div class="flex flex-col items-center gap-2 sm:flex-row md:gap-3">
                <div class="h-12 w-12 overflow-hidden rounded-full bg-gray-100 shadow-lg md:h-14 md:w-14">
                  <img src="https://images.unsplash.com/photo-1463453091185-61582044d556?auto=format&q=75&fit=crop&w=500" loading="lazy" alt="Photo by Ayo Ogunseinde" class="h-full w-full object-cover object-center" />
                </div>
      
                <div>
                  <div class="text-center text-sm font-bold text-indigo-500 sm:text-left md:text-base">Greg Jackson</div>
                  <p class="text-center text-sm text-gray-500 sm:text-left md:text-sm">Frontend Developer / CodeCrafters</p>
                </div>
              </div>
            </div>
            <!-- quote - end -->
          </div>
        </div>
      </div>

    <!-- Benefits Section   -->
    <div id="benefits" class="bg-white py-6 sm:py-8 lg:py-12">
        <div class="mx-8 max-w-screen-2xl px-4 md:px-8 md:mt-16 md:mb-12">
          <!-- text - start -->
          <div class="mb-10 md:mb-16">
            <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">More reasons to signup
      </h2>
      
            <p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">Benefits of joining this webinar</p>
          </div>
          <!-- text - end -->
      
          <div class="grid gap-8 sm:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-16">
            <!-- feature - start -->
            <div class="flex gap-4 md:gap-6">
              <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                </svg>
              </div>
      
              <div>
                <h3 class="mb-2 text-lg font-semibold md:text-xl">Growth</h3>
                <p class="mb-2 text-gray-500">Expand your knowledge and stay ahead in the tech world.</p>
                <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
              </div>
            </div>
            <!-- feature - end -->
      
            <!-- feature - start -->
            <div class="flex gap-4 md:gap-6">
              <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
      
              <div>
                <h3 class="mb-2 text-lg font-semibold md:text-xl">Expertise</h3>
                <p class="mb-2 text-gray-500">Learn from industry experts and gain valuable insights..</p>
                <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
              </div>
            </div>
            <!-- feature - end -->
      
            <!-- feature - start -->
            <div class="flex gap-4 md:gap-6">
              <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                </svg>
              </div>
      
              <div>
                <h3 class="mb-2 text-lg font-semibold md:text-xl">Resources</h3>
                <p class="mb-2 text-gray-500">Access exclusive tools and resources to enhance your projects. </p>
                <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
              </div>
            </div>
            <!-- feature - end -->
      
            <!-- feature - start -->
            <div class="flex gap-4 md:gap-6">
              <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
      
              <div>
                <h3 class="mb-2 text-lg font-semibold md:text-xl">Empowerment</h3>
                <p class="mb-2 text-gray-500"> Elevate your web development skills to new heights.</p>
                <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
              </div>
            </div>
            <!-- feature - end -->
      
            <!-- feature - start -->
            <div class="flex gap-4 md:gap-6">
              <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </div>
      
              <div>
                <h3 class="mb-2 text-lg font-semibold md:text-xl">Networking</h3>
                <p class="mb-2 text-gray-500">Connect with like-minded developers and build valuable connections..</p>
                <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
              </div>
            </div>
            <!-- feature - end -->
      
             <!-- feature - start -->
            <div class="flex gap-4 md:gap-6">
              <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </div>
      
              <div>
                <h3 class="mb-2 text-lg font-semibold md:text-xl">Opportunities</h3>
                <p class="mb-2 text-gray-500">Unlock new career opportunities with advanced web development skills.</p>
                <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
              </div>
            </div>
            <!-- feature - end -->
          </div>
        </div>
      </div>
    
    <!-- Registration form  -->
    <div id="register" class="bg-white py-6 sm:py-8 lg:py-12">
        <div class="mx-auto max-w-screen-2xl px-4 md:px-8 mt-16 mb-8">
          <h2 class="mb-4 text-center text-3xl font-bold text-gray-800 md:mb-8 lg:text-4xl">Join the Webinar</h2>
      
          <form class="mx-auto max-w-lg rounded-lg border">
            <div class="flex flex-col gap-4 p-4 md:p-8">
              <div>
              <label for="name" class="mb-2  text-sm sm:text-base block text-gray-700 font-medium">Your name</label>
              <input type="text" id="name" name="name" class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none ring-indigo-300 transition duration-100 focus:ring" required>
            </div>
      
            <div>
                <label for="email" class="mb-2  text-sm sm:text-base block text-gray-700 font-medium">Email Address</label>
                <input name="email" class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none ring-indigo-300 transition duration-100 focus:ring" />
              </div>
      
            <div>
              <label for="how" class="block text-gray-700 font-medium">How did you find us?</label>
              <select id="how" name="how" class="mt-2 p-2 border border-gray-400 rounded w-full focus:outline-none focus:ring focus:border-blue-500" required>
                <option value="">Select an option</option>
                <option value="search_engine">Search Engine</option>
                <option value="social_media">Social Media</option>
                <option value="word_of_mouth">Word of Mouth</option>
                <option value="other">Other</option>
              </select>
            </div>
      
            <div class="flex items-center">
              <input type="checkbox" id="agree" name="agree" class="mr-2">
              <label for="agree" class="text-gray-600">By clicking sign up you agree to our <a href="#" class="text-blue-500 hover:underline">Terms</a> and read our <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a>.</label>
            </div>
      
            <button type="submit" class="bg-blue-500 text-white font-medium px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-500">Sign Up</button>
          </form>
          </div>
        </div>
      </div>

    <!-- Bottom CTA  -->

    <div class="bg-slate-100">
        <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
      
          <section class="flex flex-col items-center border-t-2 p-3">
            
            <div class="flex max-w-xl flex-col items-center pb-0 pt-8 text-center sm:pb-16 lg:pb-16 lg:pt-32">
              <p class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">Revolutionary way to build the web</p>
              <h1 class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl">Join The Webinar</h1>
              <p class="mb-8 leading-relaxed text-gray-700 md:mb-12 text-lg xl:text-2xl"><span class="bg-red-200 font-bold">890</span> users already registered. Hurry before we're filled.</p>
              <div class="flex w-full flex-col gap-2.5 sm:flex-row sm:justify-center">
                <a href="#register" class="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">CLAIM YOUR SPOT NOW</a>
              </div>
              <p class="mb-8 mt-8 leading-relaxed text-gray-500 md:mb-12 xl:text-lg">Can't make it? Join anyway. We will send you the recording.</p>
            </div>
          </section>
        </div>
      </div>



    <!-- Footer Start Here  -->
    <footer class="bg-slate-950 md:pt-8 md:pb-8">

        <!-- Support Section Start Here -->
        <div class="py-6 sm:py-8 lg:py-12">
        <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
          <div class="flex flex-col items-center justify-between gap-4 rounded-lg bg-slate-100 p-4 sm:flex-row md:p-8">
            <div>
              <h2 class="text-xl font-bold text-indigo-500 md:text-2xl text-center md:text-left" >Any Question?</h2>
              <p class="text-gray-600">Feel free to get in touch with us.</p>
            </div>
      
            <a href="#" class="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">Contact Us</a>
          </div>
        </div>
        </div>
        <!-- Support Section Ends Here -->
        <div class="pt-12 lg:pt-16">
          <div class="mx-auto max-w-screen-2xl px-4 md:px-16">
            <div class="mb-16 grid grid-cols-2 gap-12 md:grid-cols-4 lg:gap-8">
              <div class="col-span-full lg:col-span-2">
                <!-- logo - start -->
                <div class="mb-4 lg:-mt-2">
                  <a href="/" class="inline-flex items-center gap-2 text-xl font-bold text-white dark:text-white md:text-2xl">
                    <img src="https://i.ibb.co/CVFbsH1/oig.png" class="mr-1 h-14" alt="Evento Logo" />
                    Evento
                  </a>
                </div>
                <!-- logo - end -->
      
                <p class="mb-6 text-gray-400 sm:pr-8">Join us for an exciting journey into the world of web development and take your skills to the next level. </p>
      
                <!-- social - start -->
                <div class="flex gap-4">
                  <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                    <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                    </svg>
                  </a>
      
                  <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                    <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
                    </svg>
                  </a>
      
                  <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                    <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
                    </svg>
                  </a>
      
                  <a href="#" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
                    <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                    </svg>
                  </a>
                </div>
                <!-- social - end -->
              </div>
      
              <!-- nav - start -->
              <div>
                <div class="mb-4 font-bold uppercase tracking-widest text-gray-300">Support</div>
      
                <nav class="flex flex-col gap-4">
                  <div>
                    <a href="#" class="text-gray-500 transition duration-100 hover:text-indigo-500 active:text-indigo-600">About Us</a>
                  </div>
      
                  <div>
                    <a href="#" class="text-gray-500 transition duration-100 hover:text-indigo-500 active:text-indigo-600">Contact Us</a>
                  </div>
      
                  <div>
                    <a href="#" class="text-gray-500 transition duration-100 hover:text-indigo-500 active:text-indigo-600">Chat</a>
                  </div>
      
                  <div>
                    <a href="#" class="text-gray-500 transition duration-100 hover:text-indigo-500 active:text-indigo-600">FAQ</a>
                  </div>
                </nav>
              </div>
              <!-- nav - end -->
      
              <!-- nav - start -->
              <div>
                <div class="mb-4 font-bold uppercase tracking-widest text-gray-300">Legal</div>
      
                <nav class="flex flex-col gap-4">
                  <div>
                    <a href="#" class="text-gray-500 transition duration-100 hover:text-indigo-500 active:text-indigo-600">Terms of Service</a>
                  </div>
      
                  <div>
                    <a href="#" class="text-gray-500 transition duration-100 hover:text-indigo-500 active:text-indigo-600">Privacy Policy</a>
                  </div>
      
                  <div>
                    <a href="#" class="text-gray-500 transition duration-100 hover:text-indigo-500 active:text-indigo-600">Cookie settings</a>
                  </div>
                </nav>
              </div>
              <!-- nav - end -->
            </div>
      
            <div class="border-t py-8 text-center text-sm text-gray-400">© 2023 - Present Evento. All rights reserved.</div>
          </div>
        </div>
      </footer>

    <!-- Footer Ends Here -->
      
    
</body>
</html>
!

CSS
!

JS
!
999px

Console