</ iframe ></noscript> <div class="fixed top-0 right-0 left-0" style="z-index: 556;"> <div class="bg-gray-800 text-white flex justify-between md:!pr-5 pr-2 items-center border-b border-white pt-1"> <div class="flex flex-nowrap md:!ml-3 ml-1"> <span id="btn-students" class="cursor-pointer md:!px-5 px-2 py-2 bg-black text-white relative md:!top-[2px] top-[1px] border border-white rounded-t-[5px] font-normal focus:outline-none inline-flex items-center gap-1 lg:!text-[14px] text-xs whitespace-nowrap" onclick="window.location.href='/'"> <img src="/images/Business/student-white.png" alt="Student Icon" class="w-5 h-5" /> For Students </span> <span id="btn-business" class="cursor-pointer md:!px-5 px-2 py-2 bg-gray-800 text-white hover:text-blue-400 border-transparent font-normal focus:outline-none inline-flex items-center gap-2 gap-1 lg:!text-[14px] text-xs whitespace-nowrap" onclick="window.location.href='/Trainers/Business'"> <i class="fa fa-plus fa-sm text-white"></i> For Business </span> </div> <div> <ul class="flex md:space-x-4 space-x-2 md:!text-[14px] text-[10px]"> <li><a href="/faq" class="text-white hover:underline">Faq</a></li> <li><a href="/about-us" class="text-white hover:underline">About Us</a></li> <li><a href="http://blog.guruface.com" class="text-white hover:underline">Blog</a></li> <li><a href="/contact-us" class="text-white hover:underline">Contact Us</a></li> </ul> </div> </div> <style> #btn-students { transition: all 0.3s ease; } #btn-business { transition: all 0.3s ease; } </style> <!-- For Large Screens header Homelayout--> <div class="lg:flex flex-col hidden"> <nav class="bg-black shadow-lg !w-full justify-center" style="z-index: 555;"> <div class="mx-auto flex items-center lg:justify-between justify-end p-0 custom-container py-1 "> <!-- LoggedUserHiddenVars Partial --> <div class="hidden lg:flex w-full items-center"> <!-- Main Search Component --> <div class="w-full"> <main-search class="w-full"></main-search> </div> <!-- For Large Screens --> <div class="hidden lg:flex items-center"> <style> .Image-icon-xs { height: 40px; width: 40px; } .topdrpheadercolor { background: black; color: white; } .topdrpCard-top { border-top: 4px solid #00b9bd; } .viewcartdrp-menu { left: auto; right: 21%; min-width: 25%; } .cartitemscount { border-radius: 50%; color: #fff; display: inline-block; font-size: 12px; height: 18px; line-height: 16px; padding: 2px; position: relative; text-align: center; float: right; min-width: 20px; background: red; } </style> <ul class="flex space-x-2 my-1 "> <li> <a class="inline-flex items-center px-4 py-[10px] text-white border border-orange-500 bg-[#000]-600 rounded-[4px] text-sm font-semibold transition duration-200 whitespace-nowrap" href="/account/login"> Login </a> </li> <li> <a class="inline-flex items-center px-4 py-[10px] text-white border border-orange-500 bg-[#e56932] rounded-[4px] text-sm font-semibold transition duration-200 whitespace-nowrap" href="/Account/Register"> Get Started </a> </li> </ul> <div id="changeCompanyModal" class="normal-width-popup" style="display:none;"> <div class="modal-overlay"> <div class="modal-container lg:w-[70%] w-full"> <div class="modal-content mt-[15px]"> <div class="modal-header"> <h3 class="text-2xl font-semibold p-3 py-4">Change Company</h3> <button class="p-0 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none" id="CloseModelIcon" onclick="closeChangeCompany()"> <span id="popupCloseIcon" class="text-white text-2xl block outline-none focus:outline-none p-3 py-4 bg-[#c94d4d] rounded-tr-lg">×</span> </button> </div> <div> <app-change-company></app-change-company> </div> </div> </div> </div> </div> <script> function openChangeCompany() { const changeCompanyModal = document.getElementById("changeCompanyModal"); if (changeCompanyModal) { changeCompanyModal.style.display = "block"; } } function closeChangeCompany() { const changeCompanyModal = document.getElementById("changeCompanyModal"); if (changeCompanyModal) { changeCompanyModal.style.display = "none"; } } document.addEventListener("DOMContentLoaded", function () { // Get modal elements const changeCompanyModal = document.getElementById("changeCompanyModal"); const closeModelIcon = document.getElementById("CloseModelIcon"); // Get dropdown elements const cartButton = document.getElementById("cartButton"); const cartDropdown = document.getElementById("cartDropdown"); const topHeaderIcon = document.getElementById("topHeaderIcon"); const topHeaderdropdown = document.getElementById("topHeaderdropdown"); const closeDropdownIcon = document.getElementById("closeDropdown"); // Close modal when clicking the close icon if (closeModelIcon && changeCompanyModal) { closeModelIcon.addEventListener("click", function () { changeCompanyModal.style.display = "none"; }); } // Toggle cart dropdown visibility if (cartButton && cartDropdown) { cartButton.addEventListener("click", function (e) { e.stopPropagation(); const isVisible = cartDropdown.classList.contains("opacity-100"); cartDropdown.classList.toggle("opacity-100", !isVisible); cartDropdown.classList.toggle("visible", !isVisible); cartDropdown.classList.toggle("opacity-0", isVisible); cartDropdown.classList.toggle("invisible", isVisible); }); } // Toggle top header dropdown visibility if (topHeaderIcon && topHeaderdropdown) { topHeaderIcon.addEventListener("click", function (e) { e.stopPropagation(); const isVisible = topHeaderdropdown.classList.contains("opacity-100"); topHeaderdropdown.classList.toggle("opacity-100", !isVisible); topHeaderdropdown.classList.toggle("visible", !isVisible); topHeaderdropdown.classList.toggle("opacity-0", isVisible); topHeaderdropdown.classList.toggle("invisible", isVisible); }); } // Close dropdowns when clicking outside document.addEventListener("click", function () { if (cartDropdown) { cartDropdown.classList.add("opacity-0", "invisible"); cartDropdown.classList.remove("opacity-100", "visible"); } if (topHeaderdropdown) { topHeaderdropdown.classList.add("opacity-0", "invisible"); topHeaderdropdown.classList.remove("opacity-100", "visible"); } }); // Close cart dropdown when clicking the close icon if (closeDropdownIcon && cartDropdown) { closeDropdownIcon.addEventListener("click", function () { cartDropdown.classList.add("opacity-0", "invisible"); cartDropdown.classList.remove("opacity-100", "visible"); }); } }); </script> <!-- Show on large screens --> </div> </div> </div> </nav> </div> <!-- For Small Screens header Homelayout --> <div class="lg:hidden block bg-white border-b border-[#1f9980] bg-[#f5fffd]" style="z-index: 555;"> <div class="w-full flex justify-center items-start relative gap-0.5 pr-2"> <div class="w-full"> <app-category-menuv2></app-category-menuv2> </div> <div class="text-start flex pt-[8px]"> <!-- For Small Screens --> <div class="lg:hidden flex justify-end"> <style> .Image-icon-xs { height: 40px; width: 40px; } .topdrpheadercolor { background: black; color: white; } .topdrpCard-top { border-top: 4px solid #00b9bd; } .viewcartdrp-menu { left: auto; } .drpMenuLeft { left: auto; right: 0; } .moreLinks .dropdown-toggle::after { display: none; } .moreLinks .dropdown-menu { min-width: 15rem; } .moreLinks small { font-size: 65%; } .cursor-pointer { position: relative; z-index: 10; } </style> <div class="flex gap-1 items-center"> <!-- Login Button --> <div class="my-auto"> <a href="/account/login" class="inline-flex items-center justify-center px-1.5 py-2 border bg-white border-orange-500 text-orange-500 rounded-md hover:bg-orange-500 hover:text-white transition-colors duration-200" title="Login"> <i class="fa-solid fa-right-to-bracket"></i> </a> </div> <!-- Register Button --> <div class="my-auto"> <a href="/account/register" class="inline-flex items-center justify-center px-1.5 py-2 border hover:bg-white border-[#6dd5c0] hover:!text-[#6dd5c0] rounded-md bg-[#6dd5c0] text-white transition-colors duration-200" title="Register"> <i class="fa-solid fa-user-plus"></i> </a> </div> </div> <div id="changeCompanyModalsmall" class="normal-width-popup hidden"> <div class="modal-overlay"> <div class="modal-container lg:w-[70%] w-full"> <div class="modal-content mt-[15px]"> <div class="modal-header"> <h3 class="text-2xl font-semibold p-3 py-4">Change Company</h3> <button class="p-0 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none" id="CloseModelIconsmall" onclick="closeChangeCompanySmall()"> <span id="popupCloseIconsmall" class="text-white text-2xl block outline-none focus:outline-none p-3 py-4 bg-[#c94d4d] rounded-tr-lg">×</span> </button> </div> <div> <app-change-company></app-change-company> </div> </div> </div> </div> </div> <script> function openChangeCompanySmall() { const modal = document.getElementById('changeCompanyModalsmall'); if (modal) { console.log('Opening modal', modal); modal.classList.remove("hidden"); modal.classList.add("block"); } } function closeChangeCompanySmall() { const modal = document.getElementById('changeCompanyModalsmall'); if (modal) { console.log('Closing modal', modal); modal.classList.remove("block"); modal.classList.add("hidden"); } } document.addEventListener("DOMContentLoaded", function () { const toggleButton = document.getElementById("dropdownToggle"); const dropdownContent = document.getElementById("dropdownContent"); const dropdownButton = document.getElementById('dropdownheaderButton'); const dropdownMenu = document.getElementById('dropdownMenu'); const topHeaderIcon = document.getElementById('topHeaderIcon'); const closeModelIcon = document.getElementById('CloseModelIcon'); const topHeaderdropdown = document.getElementById('topHeaderdropdown'); // Toggle top header dropdown visibility if (dropdownButton && topHeaderdropdown) { dropdownButton.addEventListener('click', function (e) { e.stopPropagation(); const isVisible = topHeaderdropdown.classList.contains('opacity-100'); topHeaderdropdown.classList.toggle('opacity-100', !isVisible); topHeaderdropdown.classList.toggle('visible', !isVisible); topHeaderdropdown.classList.toggle('opacity-0', isVisible); topHeaderdropdown.classList.toggle('invisible', isVisible); }); } // Toggle dropdown visibility if (toggleButton && dropdownContent) { toggleButton.addEventListener("click", function (event) { event.stopPropagation(); dropdownContent.classList.toggle("hidden"); if (dropdownMenu) dropdownMenu.classList.add("hidden"); }); } // Toggle dropdown menu visibility if (dropdownButton && dropdownMenu) { dropdownButton.addEventListener("click", function (event) { event.stopPropagation(); dropdownMenu.classList.toggle("hidden"); }); } // Close all dropdowns when clicking outside document.addEventListener("click", function () { if (dropdownContent) dropdownContent.classList.add("hidden"); if (dropdownMenu) dropdownMenu.classList.add("hidden"); if (topHeaderdropdown) { topHeaderdropdown.classList.add('opacity-0', 'invisible'); topHeaderdropdown.classList.remove('opacity-100', 'visible'); } }); // Close dropdowns when clicking inside if (dropdownContent) { dropdownContent.addEventListener("click", function () { dropdownContent.classList.add("hidden"); }); } if (dropdownMenu) { dropdownMenu.addEventListener("click", function () { dropdownMenu.classList.add("hidden"); }); } }); </script> <!-- Show on small screens --> </div> </div> </div> </div> </div> <div class="hidden lg:block items-center md:!pt-[99px]"> <app-category-menuv2></app-category-menuv2> </div> <input type="hidden" id="PageType" data-value="FeaturedTrainers" /> <input type="hidden" id="categoryName" data-value="CSS" /> <input type="hidden" id="categoryId" data-value="192" /> <style> .outer-wrapper { background: white; } /*new style*/ .font_Custom_training_heading { text-align: left; font-family: 'SF Pro Display',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; font-size: 30px; letter-spacing: 0px; color: #FFFFFF; text-transform: uppercase; opacity: 1; } .font_Custom_training_desc { text-align: left; font-family: 'SF Pro Display',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; font-size: 18px; letter-spacing: 0px; color: #FFFFFF; opacity: 1; } .trainers_Link { text-align: left; font: normal normal bold 15px/32px Nunito; letter-spacing: 0.55px; color: #010101; opacity: 1; } .space60 { margin-bottom: 60px; } .image_aboutus { width: 100%; background-repeat: no-repeat; height: 165px; background-position: center; } .categorytext { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 2.2rem; line-height: 1.1; } .featured_heading_fonts { color: #000; letter-spacing: -1px; font-weight: bold; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; } .categorytext { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2.2rem; line-height: 1.1; } </style> <!-- PAGE HEADER --> <nav aria-label="breadcrumb" class="bg-[#e9ecef] py-3"> <div class=""> <ol class="flex flex-wrap text-sm text-gray-600 mx-4 md:mx-[3rem] lg:mx-12 xl:mx-[6rem] 2xl:mx-[9rem]"> <li class="flex items-center"> <a href="/" class="flex items-center text-blue-600 hover:underline"> <i class="fa fa-home mr-1"></i> Home </a> <span class="mx-2">/</span> </li> <li class="flex items-center text-gray-500" aria-current="page"> Trainers </li> </ol> </div> </nav> <div class="bg-[#e1f9f7]"> <div class="custom-container"> <div class="py-4"> <div class="flex flex-col-reverse md:flex-row items-center"> <!-- Text Section --> <div class="w-full md:w-7/12 md:order-1"> <h1 class="text-white text-3xl md:text-5xl font-sans"> <span class="featured_heading_fonts">Find the best <br />Trainer in</span> <span class="categorytext categoryBannerCategoryName font-bold text-[#5fc3ae]">CSS</span> </h1> <p class="text-gray-800 text-justify mt-6 leading-7"> CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. It will essentially describe how different elements must be seen on screen, on paper, or in other media. You have to fully know all the finer details of this program to be able to have a website that functions properly and allows people to visit it. If you take CSS training online, you will find a CSS Guru who can give you all the details you need to know. Join now and start learning with your CSS trainer. </p> </div> <!-- Image Section --> <div class="w-full md:w-5/12 md:order-2 flex justify-center mb-6 md:mb-0"> <span class="icon-category"> <img src="https://cdn-images-gf-prod.azureedge.net/categories/icon-category-webdesign.png" alt="Category Icon" height="300" width="350" class="border border-gray-300 object-contain" /> </span> </div> </div> </div> </div> </div> <!-- 404 ERROR CONTENT --> <div class="search-container category-webdesign-theme popularsearchtags_categires"> <div> <Featured-Entities></Featured-Entities> </div> </div> <link rel="stylesheet" href="/css/featured-entities-app.css" /> <script src="/js/featured-entities-app.js"></script> <div class="bg-gray-900 text-white lg:pt-5 pt-2 pb-5"> <div class="custom-container px-4"> <div class="flex flex-wrap -mx-4"> <!-- About Company --> <div class="w-full lg:w-5/12"> <div class="hidden lg:!flex flex-col"> <h4 class="text-lg font-semibold">ABOUT US</h4> <a href="/about-us"> <img src="https://cdn-images-gf-prod.azureedge.net/GuruFaceLogo.png" class="mt-4 p-1 rounded w-[72px] bg-[#f8f9fa]" alt="Logo"> </a> </div> <div class=" lg:!hidden flex justify-between"> <h4 class="text-lg font-semibold">ABOUT US</h4> <a href="/about-us"> <img src="https://cdn-images-gf-prod.azureedge.net/GuruFaceLogo.png" class="p-1 rounded w-[72px] bg-[#f8f9fa]" alt="Logo"> </a> </div> <p class="lg:mt-4 mt-1 text-muted"> Guruface is your complete online platform for learning, teaching, and training. Our mission is to provide a state-of-the-art online training platform for students, freelance teachers, corporate trainers, and small to mid-size companies worldwide. </p> <p class="mt-2 "> We have a foundation of highly talented professional trainers who specialize in a variety of subject areas. </p> <a href="/about-us" class="mt-4 inline-block px-4 py-2 border border-yellow-400 text-yellow-400 rounded hover:bg-yellow-400 hover:text-gray-900 transition duration-300">Read More</a> </div> <!-- Links --> <div class="w-full lg:w-3/12 lg:px-4 mb-2 lg:mb-0"> <h4 class="text-lg font-semibold mt-4 lg:mt-0">Links</h4> <ul class="lg:mt-4 mt-2 lg:space-y-2 text-[#007bff]"> <li><a href="/faq" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>FAQs</a></li> <li><a href="/contact-us" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Contact Us</a></li> <li><a href="/about-us" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>About Us</a></li> <li><a href="http://blog.guruface.com/" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Blogs</a></li> <li><a href="/find-courses" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Courses</a></li> <li><a href="/training-events" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Events</a></li> <li><a href="/find-trainers" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Trainers</a></li> <li><a href="/find-trainer-jobs" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Jobs</a></li> <li><a href="/practice-exams" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Practice Exams</a></li> <li><a href="/knowledge-tests" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Knowledge Tests</a></li> <li><a href="/masterclasses" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Master Classes</a></li> <li><a href="/learningpaths" class="hover:text-gray-200"><i class="fa fa-angle-right mr-2"></i>Learning Paths</a></li> </ul> </div> <!-- Location --> <div class="w-full lg:w-4/12 lg:px-4"> <h4 class="text-lg font-semibold">Location</h4> <p class="lg:mt-4 text-gray-400">P O Box 1843<br>Frisco<br>Texas 75034</p> <a href="tel:(+1) 888-448-7432" class="mt-4 text-[#007bff]"><i class="fa fa-phone mr-2"></i>(+1) 888-448-7432</a><br /> <a href="mailto:info@guruface.com" class="text-[#007bff]"><i class="fa fa-envelope mr-2"></i>info@guruface.com</a> </div> </div> <!-- Copyright --> <div class="border-t border-gray-800 mt-5 pt-4"> <p class="text-center text-muted text-sm"> © Copyright 2025 Guruface Inc. Designed by <a href="https://www.guruface.com" class="text-[#007bff] hover:underline">Guruface Inc.</a> </p> </div> </div> </div> </body> </html>