- The mobile view toggle in the Navbar isn't functioning properly. It's expected to toggle the menu visibility, but it doesn't respond as intended.
2.The Cout Up Section is experiencing cropping issues in mobile view. It seems that the content is not displaying correctly, and some parts are getting cut off.
3.For quick navigation to the Navbar, search for in the code. This section contains the Navbar code where the issue is located.
4.To locate the Cout Up section swiftly, search for in the code. This will take you directly to the section where the Cout Up component is implemented.
5.I've marked problematic sections with tags for easy identification. These tags highlight areas where issues are expected to be found and addressed.
<!-- NavBar and Heros Section --> <!-- Expected Problem -->
<div class="flex flex-col h-screen ">
<header class="bg-white font-sans">
<nav class="p-5 bg-white shadow md:flex md:items-center md:justify-between">
<div class="flex justify-between items-center ">
<span class="text-2xl font-[Poppins] cursor-pointer">
<img class="h-10 inline" src="./Images/Logo.png">
tailwind
</span>
<span class="text-3xl cursor-pointer mx-2 md:hidden block">
<ion-icon id="menuIcon" name="menu" onclick="toggleMenu()"></ion-icon>
</span>
</div>
<ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-white w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">HOME</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">SERVICE</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">ABOUT</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">CONTACT</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">BLOG'S</a>
</li>
<h2 class=""></h2>
</ul>
</nav>
</header>
<!-- Content -->
<div class="relative overflow-hidden bg-cover bg-no-repeat bg-center bg-fixed" style="
background-position: 50%;
background-image: url('Images\BackgroundImg.webp');
height: 100%;
">
<div class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsla(0,0%,0%,0.65)] bg-fixed">
<div class="flex h-full items-center justify-center">
<div class="px-6 text-center text-white md:px-12">
<h1 class="mt-2 mb-16 text-5xl font-bold tracking-tight md:text-6xl xl:text-7xl">
The best offer on the market <br /><span class="role"></span>
</h1>
<button type="button"
class="rounded border-2 border-neutral-50 px-[46px] pt-[14px] pb-[12px] text-sm font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-100 hover:bg-neutral-100 hover:bg-opacity-10 hover:text-neutral-100 focus:border-neutral-100 focus:text-neutral-100 focus:outline-none focus:ring-0 active:border-neutral-200 active:text-neutral-200"
data-te-ripple-init data-te-ripple-color="light">
Get started
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Cout Up--> <!-- Expected Problem -->
<div class="md:min-h-[650px] h-96">
<div class="relative overflow-hidden bg-cover bg-no-repeat bg-center bg-fixed" style="
background-position: 50%;
background-image: url('Images\BackgroundImg.webp');
height: 100%;
">
<div class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsla(0,0%,0%,0.65)] bg-fixed">
<div class="flex h-full items-center justify-center">
<div class="px-6 text-center text-white md:px-12">
<!-- Container for demo purpose -->
<div class="container my-24 mx-auto md:px-6">
<!-- Section: Design Block -->
<section class="mb-32 text-center">
<div class="grid gap-x-6 md:grid-cols-3 lg:gap-x-12">
<div class="mb-12 md:mb-0">
<h2 class="display-5 mb-4 text-4xl font-bold text-primary dark:text-primary-400">
<span class="num" data-val = 200>100</span> <span>+</span>
</h2>
<h5 class="mb-4 text-lg font-medium">Happy customers</h5>
<p class="text-neutral-500 dark:text-neutral-300">
Laudantium totam quas cumque pariatur at doloremque hic quos quia
eius
</p>
</div>
<div class="mb-12 md:mb-0">
<h2 class="display-5 mb-4 text-4xl font-bold text-primary dark:text-primary-400">
<span class="num" data-val = 245>100</span><span>+</span>
</h2>
<h5 class="mb-4 text-lg font-medium">Growth</h5>
<p class="text-neutral-500 dark:text-neutral-300">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam
</p>
</div>
<div class="mb-12 md:mb-0">
<h2 class="display-5 mb-4 text-4xl font-bold text-primary dark:text-primary-400">
<span class="num" data-val = 70>100</span><span>+</span>
</h2>
<h5 class="mb-4 text-lg font-medium">Projects</h5>
<p class="text-neutral-500 dark:text-neutral-300">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere
potistas
</p>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<!-- Container for demo purpose -->
<!-- <div class="text-center">
<img
src="https://tecdn.b-cdn.net/img/new/avatars/5.webp"
class="mx-auto mb-4 w-32 rounded-lg"
alt="Avatar" />
<h5 class="mb-2 text-xl font-medium leading-tight">John Doe</h5>
<p class="text-neutral-500 dark:text-neutral-400">Web designer</p>
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- Why do we so special Section -->
<div class="pt-12 bg-gradient-to-r from-[#77AFC1] to-[#354D6E]">
<div class="container py-6 mx-auto md:px-6">
<section class="">
<div class="flex flex-wrap items-center">
<div class="mb-6 w-full shrink-0 grow-0 basis-auto px-3 lg:mb-0 lg:w-4/12">
<h2 class="mb-6 text-3xl font-bold">
Why is it so<u class="text-primary dark:text-primary-400">
great?</u>
</h2>
<p class="mb-12 text-neutral-500 dark:text-neutral-300">
Nunc tincidunt vulputate elit. Mauris varius purus malesuada neque
iaculis malesuada. Aenean gravida magna orci, non efficitur est
porta id. Donec magna diam.
</p>
</div>
<div class="mb-md-0 mb-6 w-full shrink-0 grow-0 basis-auto px-3 lg:w-8/12">
<div class="flex flex-wrap">
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Support 24/7</p>
<p class="text-neutral-500 dark:text-neutral-300">
Pellentesque mollis, metus nec fringilla aliquam. Donec
consequat orci quis volutpat imperdiet.
</p>
</div>
</div>
</div>
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Tracking</p>
<p class="text-neutral-500 dark:text-neutral-300">
Magna lacus iaculis elit, quis pharetra varius. Aenean
lectus ex, placerat id tellus in eros.
</p>
</div>
</div>
</div>
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Reporting</p>
<p class="text-neutral-500 dark:text-neutral-300">
Pellentesque varius ex vel consequat quis. Sed mauris ex,
imperdiet sit amet nisl ac, ultrices.
</p>
</div>
</div>
</div>
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Analytics</p>
<p class="text-neutral-500 dark:text-neutral-300">
Vestibulum gravida iaculis nisl, vel lobortis eros.
Praesent vulputate lacus bibendum augue.
</p>
</div>
</div>
</div>
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Huge community</p>
<p class="text-neutral-500 dark:text-neutral-300">
Praesent vulputate lacus bibendum augue. Pellentesque
mollis, metus nec fringilla aliquam.
</p>
</div>
</div>
</div>
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Easy to use</p>
<p class="text-neutral-500 dark:text-neutral-300">
Sed mauris ex, imperdiet sit amet nisl ac, ultrices. Magna
lacus iaculis elit, quis pharetra varius.
</p>
</div>
</div>
</div>
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Frequent updates</p>
<p class="text-neutral-500 dark:text-neutral-300">
Aenean lectus ex, placerat id tellus in eros. Pellentesque
varius ex vel consequat quis. Sed mauris ex
</p>
</div>
</div>
</div>
<div class="mb-12 w-full shrink-0 grow-0 basis-auto md:w-6/12 lg:px-3">
<div class="flex">
<div class="mt-0.5 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="mr-3 h-5 w-5 text-primary dark:text-primary-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-2 grow">
<p class="mb-3 font-bold">Responsive</p>
<p class="text-neutral-500 dark:text-neutral-300">
Donec consequat orci quis volutpat imperdiet. Vestibulum
gravida iaculis nisl, vel lobortis eros.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
<!-- Section: Design Block -->
</div>
</div>
<script>
function toggleMenu() {
let list = document.querySelector('ul');
let icon = document.getElementById('menuIcon');
if (icon.getAttribute('name') === 'menu') {
icon.setAttribute('name', 'close');
list.classList.add('top-[80px]', 'opacity-100');
} else {
icon.setAttribute('name', 'menu');
list.classList.remove('top-[80px]', 'opacity-100');
}
}
var typeData = new Typed(".role", {
strings: [
"success with Us.",
" digital presence.",
" reputation.",
"reach effectively.",
"Online presence.",
],
loop: true,
typeSpeed: 100,
backSpeed: 80,
backDelay: 1000,
});
let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
</script>