Digital%20Product%20Designer%20crafting%20innovative%20interfaces%2C%20illustrations%20and%20print.
ijbdesign has 47 followers on Webflow.
infinite-carousel-ijbd
Two%20infinite%20carousel%20sliders%20without%20using%20JavaScript.%20All%20setup%20with%20Webflow%27s%20interactions.
Tags:
- slider
- carousel
- interaction%20design
- interactions
Visit Site
webflow-party-build
Hi%21%20%0A%0AI%20created%20a%20project%20for%20The%20Webflow%20Party%20hosted%20by%20Melissa%20Mendez%20founder%20of%20The%20Webflow%20Party.%20During%20the%20Live-Build%20we%20covered%20design%20tools%2C%20resources%2C%20design%20systems%20and%20style%20systems.%20This%20project%20was%20created%20with%20Finsweets%20Client-First%20Style%20Systems.%20CFSS%20organization%20helped%20developed%20a%20well%20balanced%20structure%20in%20Webflow.%0A%0ACheers%2C%0A%0AIvan%20-%20ijbdesign
Tags:
- css
- cssgrid
- nested
- collectionlist
- interactions
- microinteractions
- navbars
- flexbox
Visit Site
header-rotation
Header%20services%20infinity%20cycle%20using%20a%203D%20forward%20rotation.%20Social%20media%20icons%20with%20reverse%20hover%20states.
Tags:
- rotation
- cycle
- 3deffect
- hovereffect
- social%20media
- icons
Visit Site
price-chart-popup
Simple%20price%20chart%20table%20with%20a%20tool%20popup%20window%20on%20hover%20for%20desktop%20and%20click%20for%20all%20mobile%20breakpoints.%20I%20used%20a%20dropdown%20to%20create%20the%20tool%20tip%20popup.
Tags:
- popup
- prices
- tablegrid
- dropdownhack
Visit Site
team-profile-cards
Team%20profile%20cards%20with%20hover%20in/hover%20out%20for%20desktop%20and%20click%20open/close%20for%20all%20mobile%20breakpoints.%20CSS%20Grid%20set-up%20and%20interaction%20set-up
Tags:
- cssgrid
- hovercard
- profilecard
- team
- agency
- overlayeffects
Visit Site
circular-svg-effect
Exploring%20some%20experimental%20circular%20SVG%20text%20effects%20for%20an%20intro%20animation.%20Inspired%20by%20Mary%20Lou%20in%20CodeDrop%27s%20Playground.%0A%0AThree%20demos%20with%20hover-in%2C%20hover-out%20and%20click/tap%20interactions.%20Also%2C%20links%20to%20CodeDrop%20project%20and%20an%20Illustrator%20file%20I%20used%20to%20create%20the%20SVG%20text.%20Clone%20it%20today%20and%20feel%20free%20to%20use%20for%20all%20projects.
Tags:
- text
- svg
- animation
- rotation
- bounce
- fade
Visit Site
Audio%20unmute/mute%20Javascript%20control
Updates%20to%20Dropbox%20are%20complete%20and%20you%20can%20clone%20this%20project%20again.%20Now%2C%20you%20can%20hear%20the%20sound.%20Thank%20you%20for%20your%20patients.%0A%0AUsing%20custom%20code%20to%20control%20unmuting%20and%20muting%20sound.%20Video%20independent%20of%20the%20sound%20file%20loading%20from%20a%20cloud%20server%20%28%20Dropbox%20%29.%20By%20default%20all%20audio%20URLs%20end%20with%20d1%3D0%2C%20if%20left%20with%20default%20settings%20sound%20wont%20play%20change%20to%20d1%3D1.%0A%0ACustom%20Code%20%3A%0A%0A%3Caudio%20src%3D%22https%3A//youraudiosource.com%22%20class%3D%22audio%22%3E%0A%0A//%20The%20audio%20HTML%20element%0Aconst%20audio%20%3D%20document.querySelector%28%27audio%27%29%3B%0A%0Alet%20playing%20%3D%20false%3B%0A%0A//%20Check%20if%20document%20is%20ready%0A%24%28document%29.ready%28function%28%29%7B%0A%09//%20Clicking%20the%20play_btn%0A%09%24%28%27.play_btn%27%29.click%28function%28%29%7B%0A%20%20%09if%20%28playing%20%3D%3D%20true%29%20%7B%0A%20%20%20%20%09audio.pause%28%29%3B%0A%20%20%20%20%20%20playing%20%3D%20false%3B%0A%09%09%09//%20Setting%20the%20button%20text%0A%20%20%20%20%20%20%24%28this%29.html%28%22Play%22%29%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%09audio.play%28%29%3B%0A%20%20%20%20%20%20playing%20%3D%20true%3B%0A%0A%09%09%09//%20Setting%20the%20button%20text%0A%20%20%20%20%20%20%24%28this%29.html%28%22Pause%22%29%3B%0A%20%20%20%20%7D%0A%20%20%7D%29%3B%0A%7D%29%3B
Tags:
- audio
- javascript
- webflowcustomcode
Visit Site
client-first-test-ijbd
These%20are%20my%20first%20three%20Client-First%20design%20system%20layouts.%20First%20and%20Second%20layouts%20are%20built%20during%20YouTube%20live-streams%20with%20Finsweet.%20The%20Third%20layout%20is%20rebuild%20of%20Microsofts%20Xbox%20complex%20NavBar%20and%20grid%20display%20selections.%0A%0AClient-First%20is%20the%20perfect%20system%20to%20optimize%20any%20website%20in%20Webflow.%20All%20layouts%20are%20for%20Desktop%20only%20I%27ve%20used%20the%20system%20on%20three%20client%20projects%20after%20these%20exercise%20sessions.%20Feel%20free%20to%20clone%20and%20share%20your%20thoughts.
Tags:
- clientfirst
- cssgrid
- finsweet
- designsystem
Visit Site
portfolio-responsive-grid
A%20responsive%20grid%20portfolio%20with%20hover%20effects.%20Style%20Guide%20include%20with%20layout%20so%20you%20can%20edit%20and%20fit%20your%20own%20brand.%20Color%20palette%20saved%20to%20document.
Tags:
- portfolio
- grid%20design
- responsive
Visit Site
initium-style-guide
A%20starter%20style%20guide%20for%20all%20your%20Webflow%20projects.%20Every%20layout%20needs%0Aa%20foundation%20and%20Initium%20can%20help%20you%20lay%20down%20the%20main%20bricks%20of%20your%20project%20for%20a%20smoother%20no-code%20development%20experience.%20Clone%20the%20project%20today%20with%20text%20styles%2C%20color%2C%20buttons%2C%20links%20and%20resources.%0A%0ATransfer%20your%20style%20guides%20from%20your%20designs%20in%20Figma%2C%20Sketch%2C%20Xd%20or%20any%20other%20UI%20design%20tool.%20Customize%20it%20for%20all%20your%20projects%20use%20what%20you%20need%20or%20add%20new%20items%20to%20help%20you%20develop%20quicker.
Tags:
- styleguide
- template
- responsive
Visit Site
fitness-app
A%20landing%20page%20for%20a%20fictional%20fitness%20program%20to%20track%20diets%20and%20exercise.%20I%20used%20Webflow%20NavBar%20and%20built%20a%20custom%20with%20interactions.%20CSS%20grids%20for%20features%2C%20benefits%20section%20a%20parallax%20and%20product%20download%20app%20links.%20Feel%20free%20to%20clone%20this%20project.
Tags:
- interactions
- cssgrid
- navbar
- responsive
Visit Site
css-responsive-grid
CSS%20Grid%20built%20in%20Webflow%20that%20is%20responsive%20for%20all%20breakpoints%20Desktop%2C%20Tablet%2C%20Mobile%20Landscape%20and%20Mobile%20Portrait.%20I%20was%20testing%20mosaic%20grid%20layouts%20and%20CSS%20Grid%20applications.%20Feel%20free%20to%20clone%20this%20project.
Tags:
- cssgrid
- responsive
- mosaic
- display%20gallery
Visit Site
world-tour-demo
A%20fictional%20touring%20bands%20website%20to%20sell%20their%20music.%20Is%20not%20complete%20but%20I%20wanted%20to%20share%20the%20complex%20interactions%20and%20hover%20effects.%20This%20is%20an%20ongoing%20project%20to%20test%20my%20interaction%20and%20problem%20solving%20skills%20using%20Webflow%27s%20infinite%20possibilities%20of%20building%20complex%20interactions.%0A%0AAlso%2C%20the%20NavBar%20is%20a%20custom%2C%20Symbol%20instance%2C%20and%20fixed%20quick-access%20tray%20and%20Classes%20are%20using%20BEM%20naming%20method.%20Feel%20free%20to%20use.
Tags:
- hover
- dynamicsymbols
- interaction
Visit Site