Sweb graphic

bySuraj Singh

AI Website Prompt – Shekhar Creative Studio (SWEB Graphic) Create a premium, modern, dark-themed, fully responsive portfolio website for Shekhar, founder of SWEB Graphic. The design should look world-class with neon blue and purple gradients, glassmorphism effects, smooth animations, glowing buttons, premium typography, and a professional UI/UX. Showcase expertise in Graphic Design, Web Design, UI/UX Design, and 3D Design. Hero Section Headline: Creative Graphic, Website & 3D Designer Subheading: "I create premium graphic designs, modern websites, and stunning 3D visuals that help businesses grow their brand online." Primary Buttons: - Get a Free Quote - View Portfolio About Hi, I'm Shekhar, a professional Graphic Designer, Website Designer, and 3D Designer. I help businesses, startups, and creators build attractive brands through creative designs, responsive websites, and realistic 3D visuals. Services - Logo Design - Brand Identity - Website Design - Landing Page Design - UI/UX Design - Social Media Post Design - YouTube Thumbnail Design - Banner Design - Business Card Design - Flyer & Brochure Design - Poster Design - Packaging Design - E-commerce Website Design - Portfolio Website - Photo Editing - 3D Logo Design - 3D Product Mockups - 3D Product Visualization - 3D Website Elements - 3D Icons & Illustrations - 3D Social Media Graphics - 3D Branding & Advertising Designs Why Choose Me - Premium Quality Designs - Professional 3D Visuals - Fast Delivery - Mobile Responsive Websites - Affordable Pricing - Unlimited Revisions (where applicable) - 24/7 Customer Support - SEO-Friendly Website Design - 100% Client Satisfaction Portfolio Create a modern portfolio with categories: - Graphic Design - Website Design - Branding - UI/UX - 3D Designs Testimonials Include stylish client reviews with profile images and star ratings. Contact Name: Shekhar Call / WhatsApp: +91 8817728508 WhatsApp Button: Chat on WhatsApp Contact Form: - Name - Email - Phone Number - Project Details Footer SWEB Graphic Tagline: Designing Ideas. Building Brands. Creating Stunning 3D Experiences. Include social icons for WhatsApp, Instagram, Facebook, LinkedIn, and YouTube. Extra Features - Smooth scrolling - Loading animation - Sticky navigation - Dark/Light mode - Scroll-to-top button - Animated counters - FAQ section - Pricing section - Blog section - Floating WhatsApp button - SEO optimization - Fast loading - Fully responsive - Premium 3D animations, interactive 3D objects, glassmorphism, and futuristic visual effects. Overall style should feel like a premium international creative agency website with elegant UI, stunning 3D elements, glowing effects, and modern animations.Portfolio & Social Media Create a beautiful Portfolio section to showcase my best Graphic Design, Website Design, UI/UX, and 3D Design projects with modern cards, hover animations, filters, and a project gallery. Add an Instagram section that displays my latest posts and provides a direct link to my Instagram profile: Instagram: @sweb.graphic Include a Follow on Instagram button and an embedded Instagram feed to showcase my recent work and designs. Also add social proof with follower count (if available) and encourage visitors to follow my page for daily design inspiration and updates. Make the portfolio and Instagram sections fully responsive with smooth animations, glassmorphism effects, and a premium modern look.Create a modern, visually immersive hero section for a floral shop named "Bloomora" with the following specific requirements and code structure: Global & Base Setup 1. Fonts: Use Google Fonts "Inter" (weights 300, 400, 500) for UI elements and "Playfair Display" (weights 400, 500, 600) for headings. 2. Icons: Include the latest Lucide icons script via unpkg. 3. Base Styles: Reset margin, padding, and box-sizing (* { margin: 0; padding: 0; box-sizing: border-box; }). Set body to font-family: 'Inter', sans-serif;, color: #fff;, overflow-x: hidden;, height: 100vh;, and a fallback background color #79a6d0. 4. Layout Wrapper: Create a .content div containing everything, set to display: flex; flex-direction: column; height: 100vh; padding: 0 5%; position: relative; z-index: 1;. Background 1. Video Background: Create a full-screen, fixed video background behind all content (z-index: -2). Use this webm source: https://res.cloudinary.com/dprydfxok/video/upload/v1782698816/flowers_motion_r54og5.webm Use this mp4 source: https://res.cloudinary.com/dprydfxok/video/upload/v1782698816/flowers_motion_r54og5.mp4 Attributes: autoplay, loop, muted, playsinline. CSS: object-fit: cover; width: 100%; height: 100%;. 2. Overlay: Add a .overlay div directly over the video (z-index: -1) with a gradient: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.05) 50%, rgba(0,0,0,0)). Header / Navigation 1. Header Layout: display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 0;. 2. Logo (Left): "BLOOMORA" with a flower SVG icon (Lucide-style petal shape). Font weight 500, size 1.15rem, letter-spacing 2px, gap 0.8rem. 3. Main Nav (Center): Links: Home (active), About, Services, Shop, Journal, Contact. Absolutely positioned in center: left: 50%; transform: translateX(-50%);. Gap 2.5rem. Font: 0.9rem, weight 300, color #fff. Active state: A pink (#f87b97) 4x4px dot centered 10px below the active item ("Home"). 4. Header Right: Flex container with gap 1.5rem. Search Icon (Lucide). Cart Icon (Lucide shopping-bag) with a notification badge (pink #f87b97, text "2", absolute positioned top right). Outline Button: "Get in Touch" with a right-arrow icon. CSS: border: 1px solid rgba(255,255,255,0.4); border-radius: 50px; padding: 0.7rem 1.5rem; gap: 0.5rem;. Mobile Menu Toggle (hidden on desktop). Hero Section (Main Content) 1. Hero Container: .hero - flex: 1; display: flex; justify-content: center; align-items: center; position: relative;. 2. Centered Text Content: .hero-text - max-width: 650px; margin-top: -6rem; display: flex; flex-direction: column; align-items: center; text-align: center;. 3. Typography: Subtitle: "NATURE'S BEAUTY, YOUR SANCTUARY". CSS: font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 1.5rem; opacity: 0.85;. Heading: "Find Beauty<br>in Every Bloom". CSS: font-family: 'Playfair Display', serif; font-size: 5.5rem; line-height: 1.1; font-weight: 400; margin-bottom: 1.5rem;. Paragraph: "Discover thoughtfully curated floral collections<br>that bring peace, joy, and color to your world.". CSS: font-size: 1.15rem; line-height: 1.6; font-weight: 300; margin-bottom: 2.5rem; opacity: 0.9; max-width: 480px;. 4. Primary Button: "Explore Collections" with a right-arrow icon. CSS: background-color: #f87b97; color: #fff; border-radius: 50px; padding: 1rem 2rem; gap: 0.75rem; display: inline-flex; align-items: center;. Hover state should lift up slightly with a pink shadow. Circular Animated Badge 1. Positioning: .hero-badge - position: absolute; right: 2%; top: 15%; width: 140px; height: 140px;. 2. Styling: border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; justify-content: center; align-items: center; padding: 12px;. 3. Animation: Inside a relative .badge-circle container, an SVG .rotating-text that spins (animation: rotate 20s linear infinite;). 4. SVG Content: Use textPath on invisible paths to create circular text. Text 1 (Top Curve): "HANDPICKED" Text 2 (Bottom Curve): "WITH LOVE" Text CSS: font-size: 10.5px; fill: #fff; letter-spacing: 3.5px; font-weight: 300; font-family: 'Inter';. Two small pink (#f87b97) circles separating the texts. 5. Center Icon: A static SVG petal/flower icon positioned absolutely in the very center of the badge. Scroll Indicator 1. Positioning: .scroll-indicator - position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.75rem;. 2. Icon Circle: .scroll-icon - 40x40px circle, 1px solid border (white, 40% opacity), containing a downward arrow icon (Lucide). 3. Text: "SCROLL TO DISCOVER". CSS: font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8;. Responsiveness Setup Ensure you include basic media queries for hiding the central nav on tablet (converting to a hidden full-screen overlay menu with the mobile toggle), scaling down the 5.5rem heading to 4.5rem (<=1200px), 4rem (<=992px), 3rem (<=768px), and 2.5rem (<=480px), and hiding the circular badge on tablet and smaller screens (<=992px). Mujhe is per meri website ki saari cheeje dijiye