Building Crazy Header with Webflow
Flux Academy
@fluxacademyAbout
Learn to be a more successful and profitable web designer: master the latest trends, tools, and technologies, and make it easy to get and retain high-value dream clients. Whether you're starting from zero, or already running a successful web design studio, we'll help you take your design skills and your business to the next level. We're on a mission to make web design better and more accessible around the world, and we want to help you build your dream business, by giving you expert web design instruction, insights into the latest tools, including AI design tools and no code solutions. We've helped more than 7,000 students become more competent and profitable web designers. 🔥 FREE TRAINING: 3 Steps to Build a Thriving Web Design Career 👉 link below
Latest Posts
Video Description
Learn Webflow the FAST way with our full Webflow Masterclass course - https://bit.ly/3VQJFys In this video we’re building a header from dribbble so you can see exactly what goes into making something this creative. First we’ll take a look at the figma file where I rebuilt this header using autolayout, then we’ll jump into webflow and rebuild it so you guys can see exactly how the pro’s do it. Original Shot:https://dribbble.com/shots/20368238-Flowly-Website Figma File if you want to try and rebuild:https://www.figma.com/file/vJn9b5aaIEQK5aE9NttY8G/Dribbble-Rebuild?node-id=0%3A1&t=SVVYzOgyoEcIXBpo-1 📽️ CHAPTERS 00:00 - Intro 00:17 - Overview of the design 02:26 - Recreating the layout in Webflow 11:47 - Adding a relative H1& image 15:50 - Adding the nav bar 20:36 - Other brake points Have questions? Let us know in the comments!! 📱 Find us on SOCIAL MEDIA Flux Academy's Instagram 👉 https://www.instagram.com/flux.academy/ Arnau Ros Channel 👉 https://www.youtube.com/c/ArnauRos Thanks for watching our video! #webflow #webdesign #websitedesigner #webdesignbeginner #figma
You May Also Like
Webflow Mastery Kit
AI-recommended products based on this video
tomtoc 360° Protective Laptop Sleeve for 15-inch MacBook Air M4/A3241 2025, M3/A3114 2024, M2/A2941 2023, 15-inch MacBook Pro A1990 A1707, Dell XPS 15 Plus Laptop, Water-Resistant Computer Case Bag Global Recycled Standard
tomtoc 360° Protective Laptop Sleeve for 13-inch New MacBook Air M4/A3240 2025, M3/A3113, M2/A2681 M1/A2337 A2179 A1932, 13-inch MacBook Pro M2/A2686 M1/A2338, Water-Resistant Computer Case Bag Global Recycled Standard
INIU USB C Charger Block, 100W 3-Port PD Fast Charging, Advanced GaN Power Adapter, Foldable Charger with USB C Cable for MacBook Air 13 Pro, iPad, iPhone 17 16 Pro Max, Samsung S25 S24, Switch 2 etc ClimatePartner certified
UGREEN USB to USB C Adapter & USB C to USB Adapter Combo 4-Pack, 10Gbps Type-C Converter, Car Charger Compatible with MacBook Pro, iPad Mac mini, iPhone 17/16, Galaxy, PC/Laptop, Hard Drive Enclosure
Metapen Air 8 Apple Pencil for iPad 2018-2025, 20H Battry Life, 2Min Fast Charging, Palm Rejection, Stylus Pen for iPad 11/10/9/8/7/6th, iPad Pro 12.9/11/13“M4, iPad Air 3/4/5/6/M2/M3, iPad mini 5/6
Deeyaple USB C to Aux, 4FT/1.2M, Type C to 3.5mm Audio Cable Headphone Jack Cable for Car Mobile Phone, iPhone 16 15, iPad Pro, Samsung Galaxy S24 S23 S2010, Google Pixel,Oneplus Grey (1)
Metapen Air 8 Apple Pencil for iPad 2018-2025, 20H Battry Life, 2Min Fast Charging, Palm Rejection, Stylus Pen for iPad 11/10/9/8/7/6th, iPad Pro 12.9/11/13“M4, iPad Air 3/4/5/6/M2/M3, iPad mini 5/6
Laptop Screen Extender, 18.5" Dual Monitors Stacked Folding Triple Monitor (Wins/Mac) 1080P 100hz USB C Travel Extended Computer Display Triple Portable Monitor for Laptop PC Windows Mac
InnoView 18.5" Laptop Screen Extender 115% sRGB 100Hz Dual Monitors Stacked Folding Triple Monitor (Wins/Mac) 1080P Triple Portable Monitor for Laptop 90°/180° Rotation Black (No Driver Needed)
Laptop Screen Extender, 14" FHD 1080P Triple Portable Screen Monitor for 13"-16.5" Laptop with Stand Dual Monitors Built-in Speakers, Monitor Extender for MacOS/Wins/Chrome/Dex
InnoView Laptop Screen Extender 15.6" Dual Portable Monitors 1080P FHD Stacked Folding Triple Monitor HDMI USB-C Portable Dual Monitor for Laptop Windows Mac (No Driver Needed)
StanbyME LG 27-Inch Class Smart Portable Touch Screen Monitor 27ART10AKPL. Built-in 3 Hour Battery, Full Swivel Rotation, Rollable. LG Stanbyme, Standbyme, Stand by me.
Logitech G203 Wired Gaming Mouse, 8,000 DPI, Rainbow Optical Effect LIGHTSYNC RGB, 6 Programmable Buttons, On-Board Memory, Screen Mapping, PC/Mac Computer and Laptop Compatible - Black
Logitech G305 Lightspeed Wireless Gaming Mouse, Hero 12K Sensor, 12,000 DPI, Lightweight, 6 Programmable Buttons, 250h Battery Life, On-Board Memory, PC/Mac - Black
The Art of Home: A Designer Guide to Creating an Elevated Yet Approachable Home, Hardcover
