Landing Pages

responsive page sections

Share

\r\n <style>\r\n \/* Reset CSS *\/\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n \/* Body styles *\/\r\n body {\r\n font-family: 'Roboto', sans-serif;\r\n line-height: 1.6;\r\n background-color: #f9f9f9;\r\n color: #333;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden; \/* Prevent horizontal scrolling *\/\r\n }\r\n \r\n \/* Header styles *\/\r\n header {\r\n background-color: #4CAF50; \/* Green *\/\r\n color: #fff;\r\n padding: 20px;\r\n text-align: center;\r\n position: fixed;\r\n width: 100%;\r\n z-index: 1000;\r\n }\r\n \r\n header h1 {\r\n margin: 0;\r\n font-size: 2.5em;\r\n }\r\n \r\n nav {\r\n margin-top: 20px;\r\n }\r\n \r\n nav ul {\r\n list-style-type: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n \r\n nav ul li {\r\n display: inline;\r\n margin-right: 20px;\r\n }\r\n \r\n nav ul li:last-child {\r\n margin-right: 0;\r\n }\r\n \r\n nav ul li a {\r\n color: #fff;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n nav ul li a:hover {\r\n color: #f0f0f0; \/* Lighter shade of white *\/\r\n }\r\n \r\n \/* Main content styles *\/\r\n .container {\r\n max-width: 960px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n \r\n section {\r\n background-color: #2196F3; \/* Blue *\/\r\n color: #fff;\r\n padding: 40px;\r\n margin-bottom: 40px;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n position: relative;\r\n overflow: hidden;\r\n transform: translateZ(0); \/* Fix for flickering in Safari *\/\r\n }\r\n \r\n section h2 {\r\n font-size: 2em;\r\n margin-bottom: 20px;\r\n }\r\n \r\n section p {\r\n font-size: 1.1em;\r\n line-height: 1.8;\r\n }\r\n \r\n \/* Call to action button *\/\r\n .cta-button {\r\n background-color: #FF5722; \/* Orange *\/\r\n color: #fff;\r\n border: none;\r\n padding: 10px 20px;\r\n font-size: 1em;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 1;\r\n }\r\n \r\n .cta-button:hover {\r\n background-color: #FF7043; \/* Lighter shade of orange *\/\r\n transform: translateY(-3px);\r\n }\r\n \r\n \/* Footer styles *\/\r\n footer {\r\n background-color: #FFC107; \/* Yellow *\/\r\n color: #333;\r\n padding: 20px;\r\n text-align: center;\r\n position: relative;\r\n margin-top: 100px; \/* Adjusted for fixed header *\/\r\n }\r\n \r\n \/* Advanced animations *\/\r\n @keyframes slideInFromLeft {\r\n 0% {\r\n transform: translateX(-100%);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n .animated-section {\r\n animation: slideInFromLeft 1s ease;\r\n }\r\n \r\n \/* Parallax effect *\/\r\n .parallax {\r\n background-attachment: fixed;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n height: 500px;\r\n }\r\n \r\n \/* Smooth scrolling *\/\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n \r\n \/* Hover effects *\/\r\n .hover-effect {\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .hover-effect:hover {\r\n transform: scale(1.05);\r\n }\r\n \r\n \/* Grid layout *\/\r\n .grid-container {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n grid-gap: 20px;\r\n }\r\n \r\n .grid-item {\r\n background-color: #009688; \/* Teal *\/\r\n color: #fff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n text-align: center;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .grid-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n \/* Slideshow *\/\r\n .slideshow-container {\r\n max-width: 1000px;\r\n position: relative;\r\n margin: auto;\r\n overflow: hidden;\r\n }\r\n \r\n .slides {\r\n display: flex;\r\n transition: transform 0.5s ease;\r\n }\r\n \r\n .slide {\r\n min-width: 100%;\r\n overflow: hidden;\r\n }\r\n \r\n \/* Responsive styles *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 10px;\r\n }\r\n header h1 {\r\n font-size: 2em;\r\n }\r\n section {\r\n padding: 30px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"container\">\r\n <h1>Colorful & Advanced Website<\/h1>\r\n <nav>\r\n <ul>\r\n <li><a href=https://www.creative-tim.com/"#home\">Home<\/a><\/li>\r\n <li><a href=https://www.creative-tim.com/"#about\">About<\/a><\/li>\r\n <li><a href=https://www.creative-tim.com/"#services\">Services<\/a><\/li>\r\n <li><a href=https://www.creative-tim.com/"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <main>\r\n <section id=\"home\" class=\"animated-section parallax\" style=\"background-image: url(https://www.creative-tim.com/twcomponents/component/'https:\/\/via.placeholder.com\/1500x500');\">\r\n <div class=\"container\">\r\n <h2>Welcome to Our Website!<\/h2>\r\n <p>This is a vibrant and advanced website designed to catch your attention. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor blandit velit eget ultrices.<\/p>\r\n <p>Etiam aliquam, mi nec blandit venenatis, metus lectus gravida turpis, a laoreet erat tortor non est.<\/p>\r\n <button class=\"cta-button hover-effect\">Learn More<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"about\" class=\"animated-section\">\r\n <div class=\"container\">\r\n <h2>About Us<\/h2>\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dolor massa. Suspendisse potenti. Aliquam erat volutpat.<\/p>\r\n <div class=\"grid-container\">\r\n <div class=\"grid-item hover-effect\">Mission<\/div>\r\n <div class=\"grid-item hover-effect\">Vision<\/div>\r\n <div class=\"grid-item hover-effect\">Values<\/div>\r\n <div class=\"grid-item hover-effect\">Team<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-button hover-effect\">Read More<\/button>\r\n <\/section>\r\n\r\n <section id=\"services\" class=\"animated-section\">\r\n <div class=\"container\">\r\n <h2>Our Services<\/h2>\r\n <p>Check out our amazing services that we offer:<\/p>\r\n <div class=\"grid-container\">\r\n <div class=\"grid-item hover-effect\">Web Design<\/div>\r\n <div class=\"grid-item hover-effect\">Graphic Design<\/div>\r\n <div class=\"grid-item hover-effect\">Digital Marketing<\/div>\r\n <div class=\"grid-item hover-effect\">Content Creation<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-button hover-effect\">Explore Services<\/button>\r\n <\/section>\r\n \r\n <section id=\"contact\" class=\"animated-section\">\r\n <div class=\"container\">\r\n <h2>Contact Us<\/h2>\r\n <p>Feel free to get in touch with us:<\/p>\r\n <form>\r\n <label for=\"name\">Name:<\/label><br>\r\n <input type=\"text\" id=\"name\" name=\"name\" required><br>\r\n <label for=\"email\">Email:<\/label><br>\r\n <input type=\"email\" id=\"email\" name=\"email\" required><br>\r\n <label for=\"message\">Message:<\/label><br>\r\n <textarea id=\"message\" name=\"message\" rows=\"4\" required><\/textarea><br><br>\r\n <button type=\"submit\" class=\"cta-button hover-effect\">Send Message<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <footer>\r\n <div class=\"container\">\r\n <p>© 2024 Colorful & Advanced Website. All rights reserved.<\/p>\r\n <\/div>\r\n <\/footer>\r\n<\/body>\r\n<\/html>","author_type":"App\\User","author_id":16010,"collection_id":null,"fork_id":null,"votes":4,"score":"2.0","visits":3419,"popularity":94,"slug":"landing-pages-12","approved":1,"created_at":"2024-04-05T00:00:00.000000Z","updated_at":"2024-09-19T02:31:36.000000Z","downloads":47,"code_views":388,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11892,"model_type":"App\\Component","model_id":6577,"collection_name":"preview","name":"temp16758","file_name":"temp16758.png","mime_type":"image\/png","disk":"public","size":50801,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp16758___media_library_original_1280_957.png","temp16758___media_library_original_1070_800.png","temp16758___media_library_original_896_670.png","temp16758___media_library_original_749_560.png","temp16758___media_library_original_627_469.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEE5YS80VTlkLzM2K08vc21aK2UvMkRVSjQvaExkS01iZ2FyK3lwbHJJNmdTL0NXNmNZM0FVM2xjd2VSMUNEL2hUMTMvZnFQN0ptUi9ZTXp0aDhWOUlZZjZ3R3YycDhMNGxIVXVLTUt5cGMvRmZUQ0RzbEFOWno0V3hUV2hyUzRxd2FsN3dXM3hYMHdBYjVRYUljTFlwTFVLdkZXRGN2ZExRK0xXai93RFBVVnIvQUtyWWt4LzFwd3A4MlhWbmV4ajkyRFg2dmo2MGt2M1orSE9uVVd4REJwK29TbmtFR3ZKV0pxd2h6VFowNGJCMXNUUGtpU25TcjhldGR0R3BPdkRtakllSXdWYkR6NUpFa09tM1krOENhOVdnK1JlK3psOWpVNm4vMlE9PSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":1,"created_at":"2024-04-05T03:53:38.000000Z","updated_at":"2024-04-05T03:53:40.000000Z","conversions_disk":"public","uuid":"5afbe0b5-a6e3-4ae4-907f-cb8ade8e750a","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11892\/temp16758.png","preview_url":""}],"author":{"id":16010,"name":"Shehab coding","slug":"shehab-coding","bio":null,"avatar":"\/storage\/avatars\/WkI7PkGHABCVvWWVtUHrC0XaDCmoUKDN5t5mpAwQ.jpg","header":"\/storage\/headers\/BBkcg7EVmW2eyv4MPVnGWMpTQLwa3XFklfR9hQuU.jpg","created_at":"2023-12-23T21:37:58.000000Z","updated_at":"2024-04-01T12:20:39.000000Z"},"tags":[{"id":7,"name":{"en":"Pages"},"description":"Looking to get the work done faster? Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS. Get started or get inspired!","meta_description":"Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS","slug":{"en":"pages"},"type":null,"order_column":10,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:13:03.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6577,"tag_id":7}},{"id":41,"name":{"en":"Layout"},"description":"A layout component includes sections of your website that you want to share across multiple pages. See below our collection of Layouts that you can add directly to your Tailwind UI project.","meta_description":"Visit our Layouts collection that you can add to your Tailwind UI project to create awesome websites.","slug":{"en":"layout"},"type":null,"order_column":40,"created_at":"2022-08-31T14:27:17.000000Z","updated_at":"2022-12-21T11:01:02.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6577,"tag_id":41}}],"fork":null,"favorites":[{"id":15953,"name":"TheAnonymousDarck","slug":"theanonymousdarck","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26731255?v=4","header":null,"created_at":"2023-12-20T21:02:08.000000Z","updated_at":"2023-12-20T21:02:08.000000Z","pivot":{"component_id":6577,"user_id":15953}},{"id":10213,"name":"hadjamagamy","slug":"hadjamagamy","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/115471672?v=4","header":null,"created_at":"2022-12-22T07:16:20.000000Z","updated_at":"2022-12-22T07:16:20.000000Z","pivot":{"component_id":6577,"user_id":10213}}]}" :edit="false"> Full screen Preview

Shehab coding

97 components

Landing Pages

Community Rate

Related components