DEV Community: Creative Salahu

Creative Full-Screen Photography Slider

Creative Salahu — Thu, 10 Jul 2025 09:01:13 +0000

Check out this Pen I made! A sleek and modern full-screen photography slider built with HTML, CSS, and JavaScript using the Swiper library. Features smooth transitions, responsive design, and elegant animations for showcasing stunning visuals. Includes navigation controls and pagination dots.

Creative Full Screen Carousal Hero

Creative Salahu — Mon, 17 Jun 2024 17:49:16 +0000

This CodePen pin showcases a creative full-screen carousel hero, designed to captivate users with high-impact visuals and smooth transitions. The carousel features multiple slides, each displaying a striking background image with a bold title and a call-to-action link.

Key Features:

Full-Screen Carousel: The carousel occupies the entire viewport height, providing an immersive browsing experience.
Responsive Design: The layout adapts seamlessly across different screen sizes, ensuring optimal viewing on desktops, tablets, and mobile devices.
Smooth Transitions: Slides transition smoothly with a sleek sliding effect, enhanced by Swiper.js, a modern touch slider.
Navigation Controls: Users can navigate through the slides using the 'PREV' and 'NEXT' buttons, or the progress bar at the bottom.
Typography: The text elements use the "Poppins" and "Fjalla One" fonts, adding a touch of modern elegance to the design.
Technologies Used:

HTML5: The structure of the carousel is built using semantic HTML5 elements.
CSS3: Custom styles are applied to enhance the visual appearance and ensure responsiveness.
Swiper.js: The popular Swiper library is utilized for the carousel functionality, providing smooth slide transitions and navigation controls.
jQuery: Simplifies JavaScript code for initializing the Swiper carousel and handling DOM manipulations.
Explore this pen to see a visually appealing full-screen carousel that can be a stunning addition to any modern website, perfect for showcasing featured content or high-quality images.

Creative Photography Showcase Slider | Swiper Slider

Creative Salahu — Sun, 16 Jun 2024 18:24:47 +0000

This CodePen pin showcases a creative photography slider using Swiper Slider, designed for a striking presentation of images. The slider features six slides, each with a parallax effect and a fade transition. The design includes layered images, stylish typography, and responsive layouts. The Swiper configuration supports looping, autoplay, and customizable pagination, enhancing user interaction. Social media links are also incorporated into the sidebar for easy navigation. The CSS ensures a smooth, visually appealing experience across various devices, from desktops to mobile screens. This slider is ideal for photographers and creatives seeking a modern, dynamic way to display their portfolio.

Creative HTML Coming Soon Template | Theme 1

Creative Salahu — Sat, 15 Jun 2024 12:46:52 +0000

This CodePen showcases a modern and stylish "Coming Soon" template, perfect for websites that are under construction and want to keep visitors informed and engaged. This template is designed with a clean and professional layout, featuring eye-catching animations and a user-friendly interface.

Key Features:

Responsive Design: Ensures optimal viewing experience across all devices, from desktops to mobile phones.
Elegant Typography: Utilizes "Libre Baskerville" and "Roboto" fonts for a sophisticated look.
Social Media Integration: Includes social media icons for Facebook, Instagram, Pinterest, and LinkedIn, allowing visitors to stay connected.
Email Notification Form: A functional form that lets users subscribe for updates, ensuring they are notified when the site goes live.
Animated Elements: Subtle animations on the shapes and elements add a dynamic touch to the overall design.
Section Breakdown:

Header:

A clean and simple header with the message "COMING SOON" to inform visitors about the site's status.
A catchy main headline "We’re blowing up" to grab attention.
Description:

A concise paragraph explaining that the site is under construction and encouraging visitors to stay in touch.
Subscription Form:

An email input field with placeholder text and a "Notify Me" button for users to subscribe to updates.
Social Media Icons:

Interactive social media icons that link to respective platforms, allowing users to follow and connect.
Background and Shapes:

A visually appealing background image that enhances the aesthetic appeal.
Various animated shapes positioned around the template to create an engaging visual experience.
CSS Highlights:

Flexbox Layout: Utilized for creating responsive and flexible layouts.
Custom Animations: Keyframe animations for the moving shapes, adding a dynamic feel to the design.
Form Styling: Custom styles for the email input and button, ensuring they stand out and are easy to use.
Media Queries: Responsive design adjustments for different screen sizes, ensuring the template looks great on all devices.
How to Use:

Integrate this template into your project by copying the HTML and CSS code.
Customize the text, images, and links to match your branding and requirements.
Ensure you have the necessary fonts and Font Awesome icons included in your project.
This "Coming Soon" template is perfect for keeping your audience informed and engaged while you work on launching your new site. Customize it to fit your needs and create a professional and captivating coming soon page.

Creative HTML Cards | Style 2

Creative Salahu — Sat, 15 Jun 2024 07:36:40 +0000

Discover the elegant design of our Creative HTML Cards (Style 2). This project showcases a sleek, responsive card layout perfect for photography services. Each card highlights a different service with captivating icons, smooth animations, and a modern aesthetic. Featuring a full-screen background, a stylish header, and a clean, minimalistic layout, this template is ideal for web designers and developers looking to create visually appealing and functional web components. Enjoy exploring the seamless user experience and adaptability across various devices.

Creative Full Screen Showcase Slider

Creative Salahu — Fri, 14 Jun 2024 18:12:24 +0000

This CodePen demo features a stunning full-screen showcase slider built using Swiper.js. It highlights various creative projects with immersive background images and parallax effects. Each slide includes dynamic headings and subtitles, and there are smooth transitions between slides.

Features:

Full-screen slides with beautiful background images
Parallax scrolling for a dynamic visual experience
Responsive design for optimal viewing on all devices
Navigation controls and pagination for easy browsing
Autoplay functionality to cycle through the slides automatically
Perfect for showcasing portfolios, products, or any visual content in a captivating way.

Creative HTML Hero Section -- Digital Agency

Creative Salahu — Thu, 13 Jun 2024 16:45:53 +0000

Explore a stunning and dynamic HTML hero section designed for a digital agency. This pen showcases a creative, modern, and responsive layout perfect for web developers or agencies looking to make a bold statement.

Features:

Hero Section: Eye-catching design with a professional yet creative aesthetic.
Responsive Design: Adapts seamlessly to various screen sizes, from desktops to mobile devices.
Font Awesome Integration: Utilizes the latest Font Awesome icons for added visual appeal.
Custom Animations: Smooth and engaging animations enhance user experience.
Contact CTA: Prominent "Contact Me" button leading to a Fiverr profile.
Rating Display: Highlights an A+ rating by Trusted Pilot, adding credibility.
Technologies Used:

HTML5
CSS3
Font Awesome
Feel free to explore and customize this hero section to fit your own digital agency or web development portfolio.

Creative Background Parallax Slider

Creative Salahu — Wed, 12 Jun 2024 18:21:05 +0000

This CodePen demonstrates a full-screen background parallax slider built using Swiper.js. The slider features smooth fade transitions and autoplay functionality, making it ideal for creating visually appealing hero sections or landing pages. The background images are dynamically adjusted to cover the entire viewport, ensuring a seamless and immersive user experience.

Features:
Full Height Slider: The slider takes up the full height of the viewport, providing a compelling visual experience.
Smooth Fade Transitions: Transitions between slides use a fade effect for a smooth and modern look.
Autoplay: The slides automatically transition every 10 seconds, maintaining user engagement.
Responsive Design: The layout adjusts gracefully across different screen sizes, ensuring usability on desktops, tablets, and mobile devices.
Animated Content: The text and buttons within the slider feature subtle animations, adding an extra layer of interactivity and polish.
Technologies Used:
HTML5 & CSS3: For markup and styling.
JavaScript & jQuery: For interactive behavior.
Swiper.js: For the slider functionality.
Google Fonts: Using the "DM Sans" font for modern typography.
Explore the pen to see the complete implementation and customize it further to fit your needs!

Creative Full Page Slider

Creative Salahu — Wed, 12 Jun 2024 08:02:22 +0000

Explore a stunning and interactive full-page slider, perfect for showcasing visual content in a dynamic and engaging way. This slider features:

Horizontal Sliding: Smooth horizontal transitions between slides.
Parallax Effects: Adds depth to your slides with parallax scrolling.
Rich Media Support: Easily incorporate images and videos into your slides.
Navigation and Pagination: Custom next/prev buttons and a progress bar for easy navigation.
Responsive Design: Optimized for desktops, tablets, and mobile devices.
Built with Swiper.js, this full-page slider is perfect for modern web designs that require a visually appealing and user-friendly way to present content. Check out the interactive demo and see how it can enhance your website's user experience.

Creative HTML Team Section | Style 1

Creative Salahu — Tue, 11 Jun 2024 19:09:19 +0000

This project demonstrates a visually appealing and responsive team section ideal for corporate or personal websites. The design emphasizes clean aesthetics and usability, featuring:

A grid layout showcasing team members with their photos, names, and designations
Hover effects that reveal social media links for each team member
Integration of Font Awesome icons for enhanced visual elements
Responsive design ensuring compatibility across various devices
Technologies used:

HTML5
CSS3
Font Awesome
Explore the code to see how you can implement a stylish team section in your projects!

Creative HTML Accordion | Style 1

Creative Salahu — Tue, 11 Jun 2024 17:52:38 +0000

This project showcases a stylish and functional HTML accordion, perfect for educational websites. The design includes an accordion with a clean and modern aesthetic, integrated with Font Awesome icons for visual appeal. It features:

A responsive layout that adapts seamlessly across devices
Smooth toggle animations for opening and closing accordion sections
A content area showcasing how this design can be used for educational purposes, with details about the Histudy course and support information
Technologies used:

HTML5
CSS3
jQuery
Font Awesome
Feel free to explore the code and see how you can integrate a similar accordion into your own projects!

Creative HTML Cards | Style 1

Creative Salahu — Mon, 10 Jun 2024 16:22:26 +0000

This CodePen showcases a stylish and modern card design using HTML and CSS. The cards feature a unique skewed background and smooth hover effects, making them visually appealing for various uses like portfolios, services, or product features. The layout is responsive, ensuring a seamless experience across different devices, from desktops to mobile phones.

Features
Responsive Design: Adjusts seamlessly for desktop, tablet, and mobile views.
Interactive Hover Effects: Cards change background color and reveal a "Read More" button on hover.
Custom Icons: Each card includes a unique icon that is centered and styled for aesthetic appeal.
Typography: Uses the "Epilogue" font for a clean and modern look.
External Links: Each card has a link to a Fiverr profile for more information.
How to Use
Copy the HTML structure into your CodePen editor or any HTML file.
Include the provided CSS either in a tag or an external stylesheet.<br> Customize the card content, links, and icons to fit your needs.</p> <p> </p>