\\n </a>\\n <div class=\\"hero-actions\\">\\n <p class=\\"phone-number\\">+00 123 456 789</p>\\n <a href=\\"#\\" class=\\"booking-button\\">\\n <i class=\\"fa-solid fa-bell-concierge\\"></i>\\n <span>Book now</span>\\n </a>\\n <div class=\\"menu-icons\\">\\n <a href=\\"#\\" class=\\"menu-icon open-menu\\">\\n <i class=\\"fa-solid fa-bars\\"></i>\\n </a>\\n <a href=\\"#\\" class=\\"menu-icon close-menu\\">\\n <i class=\\"fa-solid fa-xmark\\"></i>\\n </a>\\n </div>\\n </div>\\n</div>\\n\\n\\n\\n
.sf-hotel-hero .hero-top {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n position: fixed;\\n left: 0;\\n top: 0;\\n width: 100%;\\n z-index: 1000;\\n padding: 20px 30px;\\n}\\n.sf-hotel-hero .hero-top a.hero-logo {\\n display: block;\\n line-height: 0;\\n}\\n.sf-hotel-hero .hero-top a.hero-logo img {\\n width: 140px;\\n height: auto;\\n}\\n\\n.sf-hotel-hero .hero-top .hero-actions {\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n padding: 10px 20px;\\n border-radius: 30px;\\n}\\n\\n.sf-hotel-hero .hero-top a.booking-button {\\n display: inline-flex;\\n gap: 10px;\\n align-items: center;\\n padding: 10px 20px;\\n color: #fff;\\n font-weight: 700;\\n border: 1px solid #fff;\\n border-radius: 5px;\\n text-decoration: none;\\n transition: all 0.3s ease-in-out;\\n}\\n.sf-hotel-hero .hero-top a.booking-button:hover {\\n background-color: #fff;\\n border: 1px solid #fff;\\n color: #000;\\n}\\n\\n.sf-hotel-hero .hero-top .menu-icons {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n width: 30px;\\n height: 30px;\\n}\\n.sf-hotel-hero .hero-top .menu-icons a {\\n font-size: 24px;\\n display: none;\\n} \\n.sf-hotel-hero .hero-top .menu-icons a.open-menu {\\n display: block;\\n}
\\n\\n\\n\\nNext, we’ll add an image carousel that will display in the background.
\\n\\n\\n\\n<div class=\\"hero-content\\">\\n <div class=\\"slick-slider\\">\\n <div class=\\"item\\">\\n <img src=\\"images/pexels-pixabay-258154.jpg\\" alt=\\"\\">\\n </div>\\n <div class=\\"item\\">\\n <img src=\\"images/pexels-elina-sazonova-1838554.jpg\\" alt=\\"\\" />\\n </div>\\n <div class=\\"item\\">\\n <img src=\\"images/pexels-ludvighedenborg-3578007.jpg\\" alt=\\"\\" />\\n </div>\\n </div>\\n</div>
\\n\\n\\n\\n.sf-hotel-hero .hero-content .slick-slider,\\n.sf-hotel-hero .hero-content .slick-slider .item {\\n width: 100%;\\n height: 100vh;\\n overflow: hidden;\\n}\\n.sf-hotel-hero .hero-content .slick-slider img {\\n width: 100%;\\n height: 100vh;\\n object-fit: cover;\\n}
\\n\\n\\n\\nWe will add hero text that will be displayed over the image carousel, including the main slogan.
\\n\\n\\n\\n<div class=\\"hero-banner\\">\\n <div class=\\"banner-wrapper\\">\\n <p>Your Comfort, Our Passion</p>\\n <h1>Where Luxury<br /> Meets Comfort</h1>\\n <a class=\\"read-more\\" href=\\"#\\"><i class=\\"fa-solid fa-arrow-down\\"></i></a>\\n </div>\\n</div>
\\n\\n\\n\\n.sf-hotel-hero .hero-content .hero-banner {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n width: 100%;\\n height: 100vh;\\n position: absolute;\\n left: 0;\\n top: 0;\\n}\\n.sf-hotel-hero .hero-content .banner-wrapper {\\n text-align: center;\\n}\\n.sf-hotel-hero .hero-content .banner-wrapper > *:not(:last-child) {\\n margin-bottom: 30px;\\n}\\n.sf-hotel-hero .hero-content .banner-wrapper h1 {\\n font-size: clamp(2.5rem,5vw, 6rem);\\n line-height: 1;\\n font-weight: 900;\\n}\\n.sf-hotel-hero .hero-content .banner-wrapper p { \\n font-size: 0.85rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 0.4vw;\\n}\\n.sf-hotel-hero .hero-content .banner-wrapper a.read-more {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n width: 60px;\\n height: 60px;\\n border-radius: 100%;\\n font-size: 20px;\\n background-color: #ffd763;\\n color: #000;\\n text-decoration: none;\\n transition: all 0.3s ease-in-out;\\n}\\n.sf-hotel-hero .hero-content .banner-wrapper a.read-more:hover {\\n transform: scale(1.1);\\n}
\\n\\n\\n\\nTo ensure that the hero section is accessible and visually appealing on all devices, we employed CSS media queries to adjust the layout and styling based on screen size
\\n\\n\\n\\n@media only screen and (max-width: 767px) {\\n .sf-hotel-hero .hero-top { padding: 10px 10px 10px 20px; }\\n .sf-hotel-hero .hero-top a.hero-logo img { width: 120px; }\\n .sf-hotel-hero .hero-top .hero-actions { padding: 7px 15px; gap: 10px; }\\n .sf-hotel-hero .hero-top a.booking-button { padding: 10px 12px; }\\n .sf-hotel-hero .hero-top a.booking-button span { display: none; }\\n .sf-hotel-hero .hero-top .phone-number { display: none; }\\n}
\\n\\n\\n\\nA sticky header enhances navigation by keeping essential elements, such as the header itself, visible at the top of the screen as the user scrolls through the page. This feature ensures that important navigation controls are always within easy reach, providing a consistent user experience.
\\n\\n\\n\\n.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-top {\\n justify-content: flex-end;\\n}\\n.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-logo {\\n display: none;\\n}\\n.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-actions {\\n background-color: rgba(0,0,0,.85);\\n}\\n.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-actions .booking-button {\\n border: 1px solid rgba(255,255,255,.3);\\n}
\\n\\n\\n\\nFirst, we’ll build the left side of the overlay menu, which contains navigation links to different sections of the website.
\\n\\n\\n\\n<div class=\\"overlay-navigation\\">\\n <nav class=\\"menu-links\\">\\n <ul>\\n <li><a href=\\"#\\">Homepage</a></li>\\n <li><a href=\\"#\\">Hotel</a></li>\\n <li><a href=\\"#\\">Offers</a></li>\\n <li><a href=\\"#\\">SPA & Wellness</a></li>\\n <li><a href=\\"#\\">Restaurants</a></li>\\n <li><a href=\\"#\\">Events</a></li>\\n <li><a href=\\"#\\">Services</a></li>\\n <li><a href=\\"#\\">Contact</a></li>\\n </ul>\\n </nav>\\n</div>
\\n\\n\\n\\n.sf-menu-overlay .overlay-navigation {\\n display: flex;\\n flex-direction: column;\\n justify-content: flex-end;\\n max-width: 1200px;\\n}\\n.sf-menu-overlay .menu-links ul { \\n display: inline-flex;\\n flex-wrap: wrap;\\n list-style: none;\\n}\\n.sf-menu-overlay .menu-links li {\\n width: 50%;\\n margin: 0;\\n}\\n.sf-menu-overlay .menu-links a {\\n display: inline-block;\\n position: relative;\\n color: #fff;\\n font-size: max(1.2rem, 3vw);\\n text-decoration: none;\\n}\\n.sf-menu-overlay .menu-links a:after {\\n content: \\"\\";\\n position: absolute;\\n left: 0;\\n top: 100%;\\n width: 0%;\\n height: 1px;\\n background-color: #fff;\\n transition: all 0.3s ease-in-out;\\n}\\n.sf-menu-overlay .menu-links a:hover:after {\\n width: 100%;\\n}
\\n\\n\\n\\nNow, we’ll add the right side of the overlay menu, which contains the hotel address, email, phone number, and social media links.
\\n\\n\\n\\n<div class=\\"overlay-addons\\">\\n <div class=\\"address-box\\">\\n <address>The Grand Oasis Hotel<br /> \\n 123 Paradise Road,<br /> \\n Palm Beach, FL 33480,<br /> \\n United States\\n </address>\\n <a href=\\"#\\">Show on map</a>\\n </div>\\n <p><a href=\\"#\\">noreply@gmail.com</a><br /> \\n +48 123 456 789\\n </p>\\n <nav class=\\"social-links\\">\\n <ul>\\n <li><a href=\\"#facebook\\"><i class=\\"fa-brands fa-facebook-f\\"></i> Facebook</a></li>\\n <li><a href=\\"#instagram\\"><i class=\\"fa-brands fa-instagram\\"></i> Instagram</a></li>\\n <li><a href=\\"#twitter\\"><i class=\\"fa-brands fa-youtube\\"></i> YouTube</a></li>\\n </ul>\\n </nav>\\n</div>
\\n\\n\\n\\n.sf-menu-overlay .overlay-addons {\\n display: flex;\\n flex-direction: column;\\n justify-content: space-between;\\n gap: 30px;\\n}\\n\\n.sf-menu-overlay .address-box address {\\n font-style: normal;\\n margin-bottom: 10px;\\n}\\n.sf-menu-overlay .social-links ul {\\n display: flex;\\n flex-direction: column;\\n gap: 10px;\\n list-style: none;\\n}\\n.sf-menu-overlay .social-links a {\\n display: flex;\\n align-items: center;\\n gap: 10px;\\n}
\\n\\n\\n\\n@media only screen and (max-width: 767px) {\\n .sf-menu-overlay { padding-top: 100px; }\\n .sf-menu-overlay .overlay-content { flex-direction: column; justify-content: flex-start; gap: 30px; padding: 25px; height: auto; }\\n .sf-menu-overlay .overlay-navigation { max-width: unset; width: 100%; }\\n .sf-menu-overlay .overlay-addons { width: 100%; }\\n .sf-menu-overlay .menu-links ul { gap: 10px; }\\n .sf-menu-overlay .menu-links li { width: 100%; }\\n}
\\n\\n\\n\\nFinally, we’ll add JavaScript to enable the opening and closing of the overlay menu and the functioning of the image carousel.
\\n\\n\\n\\nAdd the following lines to your HTML file, preferably just before the closing </body>
tag, to include jQuery and Slick Slider:
<!-- Include jQuery --\x3e\\n<script src=\\"https://code.jquery.com/jquery-3.6.0.min.js\\"></script>\\n\\n<!-- Include Slick Slider CSS --\x3e\\n<link rel=\\"stylesheet\\" href=\\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css\\" integrity=\\"sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==\\" crossorigin=\\"anonymous\\" referrerpolicy=\\"no-referrer\\" />\\n\\n<!-- Include Slick Slider JavaScript --\x3e\\n<script src=\\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js\\" integrity=\\"sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==\\" crossorigin=\\"anonymous\\" referrerpolicy=\\"no-referrer\\"></script>
\\n\\n\\n\\nNow, include the JavaScript code to initialize the Slick Slider and manage the overlay menu:
\\n\\n\\n\\nThe first step is to ensure that the $(document).ready()
function is set up correctly. This function ensures that the DOM is fully loaded before running any jQuery code.
$(document).ready(function() {\\n // All jQuery code will be placed inside this function\\n});
\\n\\n\\n\\nWithin the $(document).ready()
function, you can now initialize the Slick Slider. This part of the code sets up the carousel, specifying options like the number of slides to show, autoplay settings, and responsiveness.
$(document).ready(function() {\\n // Initialize the Slick Slider\\n $(\\".slick-slider\\").slick({\\n slidesToShow: 2,\\n slidesToScroll: 1,\\n infinite: true,\\n autoplay: true,\\n autoplaySpeed: 2000,\\n arrows: false,\\n responsive: [\\n {\\n breakpoint: 600,\\n settings: {\\n slidesToShow: 1,\\n slidesToScroll: 1\\n }\\n }\\n ]\\n });\\n \\n // Menu functions will be added here\\n});
\\n\\n\\n\\n\\n\\n\\n\\nFinally, still within the $(document).ready()
function, add the code to handle the opening and closing of the overlay menu. This code toggles the visibility of the menu and switches between the open and close icons.
$(document).ready(function() {\\n // Initialize the Slick Slider\\n $(\\".slick-slider\\").slick({\\n slidesToShow: 2,\\n slidesToScroll: 1,\\n infinite: true,\\n autoplay: true,\\n autoplaySpeed: 2000,\\n arrows: false,\\n responsive: [\\n {\\n breakpoint: 600,\\n settings: {\\n slidesToShow: 1,\\n slidesToScroll: 1\\n }\\n }\\n ]\\n });\\n\\n // Function to toggle the menu\\n function toggleMenu(event, action) {\\n event.preventDefault();\\n if (action === \'open\') {\\n $(\'.sf-menu-overlay\').fadeIn();\\n $(\'body\').addClass(\'menu-is-open\');\\n $(\'.open-menu\').hide();\\n $(\'.close-menu\').show();\\n } else if (action === \'close\') {\\n $(\'.sf-menu-overlay\').fadeOut();\\n $(\'body\').removeClass(\'menu-is-open\');\\n $(\'.close-menu\').hide();\\n $(\'.open-menu\').show();\\n }\\n }\\n\\n // Event listeners for opening and closing the menu\\n $(\'.open-menu\').on(\'click\', function(event) {\\n toggleMenu(event, \'open\');\\n });\\n\\n $(\'.close-menu\').on(\'click\', function(event) {\\n toggleMenu(event, \'close\');\\n });\\n});
\\n\\n\\n\\nThe functions for opening and closing the overlay menu are defined and linked to the appropriate button clicks.
\\n\\n\\n\\nIn this tutorial, we explored how to create a sophisticated hero section with an overlay menu, ideal for luxury websites like hotels. We began by defining the basic HTML structure, splitting it into the hero top (with a logo, phone number, booking button, and menu icons), an image carousel, and the hero text. We then detailed the construction of the overlay menu, breaking it down into the left side navigation and the right side with additional links and information.
\\n\\n\\n\\nAfter setting up the structure, we applied CSS to style each component, giving the page a polished and modern appearance. Finally, we incorporated jQuery and the Slick Slider plugin to bring interactivity to the section—initializing the image carousel and implementing functions to open and close the overlay menu. This approach provided a comprehensive, step-by-step guide to building a functional and visually appealing hero section with an overlay menu.
\\nThe post Creating a Hero Section with Overlay Menu appeared first on Snippflow.com.
","description":"In this tutorial, we will guide you step by step through creating a hero section with an overlay menu. We’ll discuss the basic HTML and CSS structure, then dive into elements like the header (hero top), image carousel, hero text, and building the overlay menu. Finally, we’ll add…","guid":"https://snippflow.com/?p=220","author":"Snippflow","authorUrl":null,"authorAvatar":null,"publishedAt":"2024-08-12T14:07:58.495Z","media":[{"url":"https://snippflow.com/wp-content/uploads/2024/08/creating-a-hero-section-with-overlay-menu.webp","type":"photo","width":960,"height":720}],"categories":["Tutorials"],"attachments":null,"extra":null,"language":null},{"title":"Website inspiration #1 Football Club","url":"https://snippflow.com/website-inspiration-1-football-club/","content":"We tried to make the best website inspiration list at Football club pages. These examples highlight the latest trends and innovative approaches in sports web design, blending dynamic visuals with user-friendly experiences to perfectly capture a team’s spirit and engage their audience.
\\n\\n\\n\\nEach of them offers a wealth of information for supporters around the world. This kind of websites are made by professionals and offers a polished UX/UI experience with a clean, well-organized layout and high-quality visuals that reflect the club’s prestige. All data is presented in a straightforward manner, making it easy for users to find what they need. It provides easy navigation and a responsive design, ensuring smooth access across all devices.
\\n\\n\\n\\nPretty much every site on the list ticks these boxes, so that’s why we picked them. But let’s be honest, we also had a thing for the look and feel.
\\n\\n\\n\\nReal Madrid’s Football Club Website inspiration, belonging to the world’s most successful football club, stands out for a reason. Its design seamlessly incorporates the club’s iconic colors. Upon landing on the homepage, visitors are greeted with the latest club news. Further down, a clear and concise match schedule and a comprehensive trophy cabinet showcase the club’s rich history. The intuitive main navigation guides users directly to key sections like team profiles, ticketing, and the official merchandise store. Additionally, a hamburger menu conceals an elaborate navigation structure that offers a user-friendly sitemap.
\\n\\n\\n\\nThe FC Bayern Munich official website offers a world-class digital experience. The sleek design, combined with the club’s iconic colors, creates an immersive atmosphere for fans. Whether you’re following the team’s latest transfer news or purchasing the latest kit, the website provides a seamless and enjoyable user experience. The news presented in the hero slider captures the user’s attention, focusing on the latest club news. The first view, also in the form of a slider, displays current results and the upcoming match schedule. This combination proves to be highly effective, as this is precisely the type of information fans are most eager to access.
\\n\\n\\n\\nThe Inter Miami CF official website offers a modern and visually appealing digital experience that aligns with the club’s youthful and dynamic brand. The design elements and user experience are carefully crafted to engage fans and provide a seamless browsing experience. The color Pallete used on this website corresponds with the team’s primary colors, black and pink, as seen on their first kit. The website’s authors have prioritized a current match schedule with a user-friendly banner featuring a button to purchase tickets for the next game. The news is presented in a modern way, but more importantly, it’s perfectly optimized for mobile devices. At the bottom of the page, there are links to other MLS team websites, all designed in a consistent style, suggesting a league-wide standard.
\\n\\n\\n\\nFC Barcelona’s official website is a digital hub for fans worldwide. The site is designed to engage viewers, offering everything from the latest news and match highlights to exclusive merchandise. At hero we’ve got huge eye-pleasing graphic about latest info from blog. Below there’s a couple of news with sliding animation. One standout feature is the excellent section showcasing Instagram reels, which is not present on other websites. The site is primarily focused on delivering the latest news, but the creators haven’t forgotten about the match schedule and a wealth of player and club statistics. The color scheme, including fonts and background gradients, directly references the club’s colors, undoubtedly making FC Barcelona fans feel right at home.
\\n\\n\\n\\nShakhtar Donetsk’s website stands out from the crowd with its unique design standards. The menu is positioned on the left-hand side, providing easy access to key sections such as the blog, team information, and the online store. Notably, a fan counter for various social media channels is conveniently placed at the bottom. The site features large, visually appealing sections that often span the entire screen height, accompanied by captivating background graphics. While the design may be relatively minimalist, this intentional choice ensures optimal performance, especially considering the challenging internet conditions in Ukraine. The website effectively fulfills its purpose of providing a fast and reliable user experience.
\\n\\n\\n\\nUpon visiting the AS Roma website, visitors are immediately captivated by a striking header designed in the club’s signature colors. The well-structured burger menu seamlessly incorporates elements from the main header, featuring a visually appealing color inversion that complements the background. Below the header, a hero section showcases a large slider displaying the latest news, complete with eye-catching images and video clips related to each story. The homepage also includes promoted products from the club store, a smaller news slider, and information on upcoming and past matches. This website effectively balances the objectives of delivering the most current club news and serving as a platform for merchandise sales.
\\n\\n\\n\\nThe Atlético Madrid website typically displays a section featuring the three most recent posts. However, when a significant club event occurs, a full-screen announcement is prioritized, providing fans with immediate updates. While the header only includes the most essential elements, while a detailed menu, is accessible via the burger icon. This expanded menu, designed with mobile users in mind, features large, easily clickable links. The website effectively utilizes sliders to showcase a vast amount of content, making it an engaging platform for fans.
\\n\\n\\n\\nLegia Warsaw’s website sets a high benchmark for Football Club Website inspiration. The header effectively promotes upcoming matches and offers direct access to ticket purchases. The minimalist main menu expands into a comprehensive navigation upon clicking the burger menu icon. The hero section, spanning the entire screen, showcases a visually appealing slider with the latest club news. The next news section employs a masonry layout, and the traditional ‘like button’ has been creatively replaced with a hand-shaped ‘L’ symbol, a unique touch for fans. The website’s high technological standard is evident in features such as a virtual stadium tour. Further down, visitors can find detailed club information, including a player roster slider and a visually pleasing display of trophies.
\\n\\n\\n\\nJuventus’ website is a design masterpiece. The carefully chosen font and simple club inspired color palette create a feeling of strolling through the streets of Turin in search of fashion. The unique menu features intuitive icons instead of text, and a traditional menu can be expanded if needed by the last one of them. The hero section is a real fashion show, but why not? The news is presented in the next section as an interesting center-mode slider
Whether you’re looking for the latest news, match information, or merchandise, the Juventus website offers a seamless and enjoyable browsing experience.
The post Website inspiration #1 Football Club appeared first on Snippflow.com.
","description":"A few words about this Football Club website inspiration list We tried to make the best website inspiration list at Football club pages. These examples highlight the latest trends and innovative approaches in sports web design, blending dynamic visuals with user-friendly…","guid":"https://snippflow.com/?p=189","author":"Snippflow","authorUrl":null,"authorAvatar":null,"publishedAt":"2024-08-09T11:04:34.530Z","media":[{"url":"https://snippflow.com/wp-content/uploads/2024/08/realmadrid.webp","type":"photo","width":1200,"height":675},{"url":"https://snippflow.com/wp-content/uploads/2024/08/bayern.webp","type":"photo","width":1200,"height":675},{"url":"https://snippflow.com/wp-content/uploads/2024/08/intermiamicf.webp","type":"photo","width":1200,"height":675},{"url":"https://snippflow.com/wp-content/uploads/2024/08/barcelona.webp","type":"photo","width":1200,"height":675},{"url":"https://snippflow.com/wp-content/uploads/2024/08/shakhtar.webp","type":"photo","width":1200,"height":661},{"url":"https://snippflow.com/wp-content/uploads/2024/08/asroma.webp","type":"photo","width":1200,"height":675},{"url":"https://snippflow.com/wp-content/uploads/2024/08/atleticodemadrid.webp","type":"photo","width":1200,"height":661},{"url":"https://snippflow.com/wp-content/uploads/2024/08/legiawarszawa.webp","type":"photo","width":1200,"height":661},{"url":"https://snippflow.com/wp-content/uploads/2024/08/juventus.webp","type":"photo","width":1200,"height":675}],"categories":["Articles","Inspiration"],"attachments":null,"extra":null,"language":null}],"readCount":0,"subscriptionCount":0,"analytics":{"feedId":"67455167051926528","updatesPerWeek":null,"subscriptionCount":0,"independentSubscriptionCount":0,"latestEntryPublishedAt":null,"view":0}}')