</ 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='/Courses/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"> <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="FeaturedCourses" /> <input type="hidden" id="categoryId" data-value="192" /> <input type="hidden" id="categoryName" data-value="CSS" /> <script src="/js/tailwind/tailwind.js"></script> <style> .outer-wrapper { background: white; } .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"> Courses </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 />Courses in</span> <span class="categorytext categoryBannerCategoryName font-bold text-[#5fc3ae]">CSS</span> </h1> <p class="text-gray-800 text-justify mt-6 leading-7"> Enhance your web design skills with Guruface's CSS courses. Learn how to style HTML and XML documents and create visually stunning presentations across multiple platforms. Our expert instructors provide hands-on training to help you master essential CSS concepts. Dive into the intricacies of designing responsive and attractive layouts for the web and other media. Whether you're a beginner or looking to advance your skills, Guruface's online CSS courses offer a comprehensive learning experience. Elevate your proficiency, unlock the potential of web styling, and enrol today to embark on a stylish journey into the world of coding! </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>