Delete text.html
This commit is contained in:
parent
c51c33be8d
commit
11bf44752f
259
text.html
259
text.html
@ -1,259 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TL_Tech4biz</title>
|
||||
<link href="./output.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./styles/custom.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="bg-custom-bg border-b border-gray-700">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap justify-center sm:justify-end items-center h-14">
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-1.5 rounded-md text-sm font-medium transition duration-150 ease-in-out mx-1 my-1 sm:my-0">Events</a>
|
||||
<div class="relative mx-1 my-1 sm:my-0 sm:ml-3">
|
||||
<select class="custom-select bg-gray-700 text-gray-300 text-sm rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500 block appearance-none w-full py-1.5 px-3 pr-8 leading-tight transition duration-150 ease-in-out">
|
||||
<option class="bg-gray-800 text-gray-300">Select Language</option>
|
||||
<option class="bg-gray-800 text-gray-300">English</option>
|
||||
<option class="bg-gray-800 text-gray-300">Spanish</option>
|
||||
<option class="bg-gray-800 text-gray-300">French</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="relative mx-1 my-1 sm:my-0 sm:ml-6">
|
||||
<button class="text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white p-1 rounded-full transition duration-150 ease-in-out" id="searchToggle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="relative w-full hidden bg-white shadow-md" id="search-content">
|
||||
<div class="container mx-auto py-2 text-black">
|
||||
<input id="searchfield" type="search" placeholder="Search..." autofocus="autofocus" class="w-full text-gray-800 transition focus:outline-none focus:border-transparent p-1 appearance-none leading-normal text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Navigation Bar -->
|
||||
<nav class="bg-white shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-9 w-auto" src="./Assets/Tech4biz-logo.png" alt="Tech4biz Logo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center sm:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center sm:ml-6" id="desktopMenu">
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-gray-800 px-3 py-2 rounded-md text-sm font-medium bg-gray-100">Home</a>
|
||||
<a href="#" class="group text-gray-600 hover:bg-gray-100 hover:text-gray-800 px-3 py-2 rounded-md text-sm font-medium flex items-center" id="productsLink">
|
||||
Products
|
||||
<svg id="productsArrow" class="ml-1 h-4 w-4 transform transition-transform duration-200 ease-in-out" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-600 hover:bg-gray-100 hover:text-gray-800 px-3 py-2 rounded-md text-sm font-medium">Services</a>
|
||||
<a href="#" class="text-gray-600 hover:bg-gray-100 hover:text-gray-800 px-3 py-2 rounded-md text-sm font-medium">About</a>
|
||||
<a href="#" class="text-gray-600 hover:bg-gray-100 hover:text-gray-800 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card Section - Now inside nav -->
|
||||
<div id="productCard" class="hidden absolute w-full bg-custom-bg">
|
||||
<div class="max-w-7xl mx-auto px-4 py-8 relative">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold text-white">Our Products</h2>
|
||||
|
||||
<!-- New Updates Label -->
|
||||
<div class="new-updates-label" id="notificationBell">
|
||||
<div class="bell-container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bell-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
<span class="notification-dot"></span>
|
||||
</div>
|
||||
<span class="notification-text">New Updates</span>
|
||||
|
||||
<!-- Notifications Panel -->
|
||||
<div class="notifications-panel" id="notificationsPanel">
|
||||
<!-- Notification Item -->
|
||||
<div class="notification-item">
|
||||
<div class="video-thumbnail">
|
||||
<iframe src="https://www.youtube.com/embed/your_video_id" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
<h4 class="notification-title">New Feature Available</h4>
|
||||
<p class="notification-description">Check out our latest updates!</p>
|
||||
<span class="notification-time">Just now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- First Card (Sustainability) -->
|
||||
<div class="relative shadow-sm rounded-xl overflow-hidden h-72 group card-hover-effect">
|
||||
<img class="w-full h-full object-cover card-image" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image 1">
|
||||
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-60 transition-opacity duration-300"></div>
|
||||
<div class="absolute top-0 left-0 right-0 p-4">
|
||||
<h3 class="text-lg sm:text-xl font-bold text-white flex items-center">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
||||
<span>Sustainability</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 p-4">
|
||||
<div class="card-content opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0">
|
||||
<p class="text-sm text-gray-200 mb-2">Embrace eco-friendly tech solutions for a sustainable future.</p>
|
||||
<a href="#" class="inline-block text-white px-4 py-2 rounded-md text-sm font-medium bg-green-500 hover:bg-green-600 transition duration-300 ease-in-out">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Card (Innovation) -->
|
||||
<div class="relative shadow-sm rounded-xl overflow-hidden h-72 group card-hover-effect">
|
||||
<img class="w-full h-full object-cover card-image" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image 2">
|
||||
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-60 transition-opacity duration-300"></div>
|
||||
<div class="absolute top-0 left-0 right-0 p-4">
|
||||
<h3 class="text-lg sm:text-xl font-bold text-white flex items-center">
|
||||
<span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
|
||||
<span>Innovation</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 p-4">
|
||||
<div class="card-content opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0">
|
||||
<p class="text-sm text-gray-200 mb-2">Discover cutting-edge solutions that drive business growth.</p>
|
||||
<a href="#" class="inline-block text-white px-4 py-2 rounded-md text-sm font-medium bg-blue-500 hover:bg-blue-600 transition duration-300 ease-in-out">Explore</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Third Card (Security) -->
|
||||
<div class="relative shadow-sm rounded-xl overflow-hidden h-72 group card-hover-effect">
|
||||
<img class="w-full h-full object-cover card-image" src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image 3">
|
||||
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-60 transition-opacity duration-300"></div>
|
||||
<div class="absolute top-0 left-0 right-0 p-4">
|
||||
<h3 class="text-lg sm:text-xl font-bold text-white flex items-center">
|
||||
<span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
|
||||
<span>Security</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 p-4">
|
||||
<div class="card-content opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0">
|
||||
<p class="text-sm text-gray-200 mb-2">Protect your business with state-of-the-art cybersecurity.</p>
|
||||
<a href="#" class="inline-block text-white px-4 py-2 rounded-md text-sm font-medium bg-red-500 hover:bg-red-600 transition duration-300 ease-in-out">Secure Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fourth Card (Analytics) -->
|
||||
<div class="relative shadow-sm rounded-xl overflow-hidden h-72 group card-hover-effect">
|
||||
<img class="w-full h-full object-cover card-image" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image 4">
|
||||
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-60 transition-opacity duration-300"></div>
|
||||
<div class="absolute top-0 left-0 right-0 p-4">
|
||||
<h3 class="text-lg sm:text-xl font-bold text-white flex items-center">
|
||||
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
|
||||
<span>Analytics</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 p-4">
|
||||
<div class="card-content opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0">
|
||||
<p class="text-sm text-gray-200 mb-2">Transform data into actionable business insights.</p>
|
||||
<a href="#" class="inline-block text-white px-4 py-2 rounded-md text-sm font-medium bg-purple-500 hover:bg-purple-600 transition duration-300 ease-in-out">Analyze</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div class="sm:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1">
|
||||
<a href="#" class="text-gray-800 block px-3 py-2 rounded-md text-base font-medium bg-gray-100">Home</a>
|
||||
<div>
|
||||
<a href="#" class="text-gray-600 hover:bg-gray-100 hover:text-gray-800 block px-3 py-2 rounded-md text-base font-medium flex items-center justify-between" id="mobileProductsLink">
|
||||
Products
|
||||
<svg id="mobileProductsArrow" class="h-4 w-4 transform transition-transform duration-200 ease-in-out" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<div id="mobileProductCard" class="hidden bg-gray-100 p-4 mt-2 rounded-md">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Mobile product card 1 -->
|
||||
<div class="relative shadow-sm rounded-xl overflow-hidden h-48 group card-hover-effect">
|
||||
<img class="w-full h-full object-cover card-image" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image 1">
|
||||
<div class="absolute inset-0 bg-black opacity-60"></div>
|
||||
<div class="absolute inset-0 p-4 flex flex-col justify-between">
|
||||
<h3 class="text-lg font-bold text-white flex items-center">
|
||||
<span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
|
||||
<span>Innovation</span>
|
||||
</h3>
|
||||
<div>
|
||||
<p class="text-sm text-gray-200 mb-2">Discover cutting-edge solutions that drive business growth and efficiency.</p>
|
||||
<a href="#" class="inline-block text-white px-4 py-2 rounded-md text-sm font-medium bg-blue-500 hover:bg-blue-600 transition duration-300 ease-in-out">Explore</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile product card 2 -->
|
||||
<div class="relative shadow-sm rounded-xl overflow-hidden h-48 group card-hover-effect">
|
||||
<img class="w-full h-full object-cover card-image" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image 2">
|
||||
<div class="absolute inset-0 bg-black opacity-60"></div>
|
||||
<div class="absolute inset-0 p-4 flex flex-col justify-between">
|
||||
<h3 class="text-lg font-bold text-white flex items-center">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
||||
<span>Sustainability</span>
|
||||
</h3>
|
||||
<div>
|
||||
<p class="text-sm text-gray-200 mb-2">Embrace eco-friendly tech solutions for a sustainable future.</p>
|
||||
<a href="#" class="inline-block text-white px-4 py-2 rounded-md text-sm font-medium bg-green-500 hover:bg-green-600 transition duration-300 ease-in-out">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile product card 3 -->
|
||||
<div class="relative shadow-sm rounded-xl overflow-hidden h-48 group card-hover-effect">
|
||||
<img class="w-full h-full object-cover card-image" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image 3">
|
||||
<div class="absolute inset-0 bg-black opacity-60"></div>
|
||||
<div class="absolute inset-0 p-4 flex flex-col justify-between">
|
||||
<h3 class="text-lg font-bold text-white flex items-center">
|
||||
<span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
|
||||
<span>Security</span>
|
||||
</h3>
|
||||
<div>
|
||||
<p class="text-sm text-gray-200 mb-2">Protect your business with state-of-the-art cybersecurity solutions.</p>
|
||||
<a href="#" class="inline-block text-white px-4 py-2 rounded-md text-sm font-medium bg-red-500 hover:bg-red-600 transition duration-300 ease-in-out">Secure Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="text-gray-600 hover:bg-gray-100 hover:text-gray-800 block px-3 py-2 rounded-md text-base font-medium">Services</a>
|
||||
<a href="#" class="text-gray-600 hover:bg-gray-100 hover:text-gray-800 block px-3 py-2 rounded-md text-base font-medium">About</a>
|
||||
<a href="#" class="text-gray-600 hover:bg-gray-100 hover:text-gray-800 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="./scripts/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user