Building Revolut's Website in Bootstrap Studio
Vložit
- čas přidán 27. 07. 2024
- In this lesson we will build Revolut's website step by step in Bootstrap Studio (bootstrapstudio.io). You will learn how to use the Appearance panel, scroll animations and hover effects to build beautiful responsive pages.
Resources
Images used in the design: bootstrapstudio.io/resources/...
Complete BS Design: bootstrapstudio.io/resources/...
More on CSS Transitions: developer.mozilla.org/en-US/d...
Chapters
00:00 - Intro
01:01 - Navbar
04:06 - Hero
09:32 - Cards
22:10 - Footer
24:55 - Conclusion
Loving these tutorials. Can we get more of these? Maybe build an agency website, local business, portfolio websites... thanks!
Yes please. Local business site!
Agree! More tutorials please
I concur that they should do more tutorials, but they should REALLY include more templates in the app. Maybe like one new tutorial every 2 - 4 months, but a new template every 3-5 weeks.
Hi. I really appreciate the tutorial. I love BSS but have only began to scratch the surface of learning how to use the options and appearance panels. I have been doing things much harder than I needed to and this tutorial helped a lot!
Creating more tutorials and examples could not be better for the web building community of potential Bootstrap Studio users. Do more of these please!
These are so helpful. It helped me grasp the use of the Style Attribute dropdown for creating and selecting classes. Please make more. Perhaps to show how to make the pricing tier cards all the same height?
Subbed and Liked. More of these sort of videos pleeeeeease. They'll help existing users a ton and make recommending BSS easier and easier.
Really enjoyed this tutorial as it covers many nuances of creating great web pages.
more videos like these please. very helpful for best practices on designing with BSS!! The design with images between different screen sizes was great, more of this complicated design with BSS. thanks
TYSM ,really good tutorials,helped a lot
so cool, i have tried making this by following along! Thanks.
This is awesome! Extremely helpful, would be freaking amazing if you could somehow create similar tutorials such as this to cover all Bootstrap Studio features. Maybe sometimes covering design concepts which are outside the box but within Bootstrap Studio's capabilities. Thanks again! Looking forward for more videos such as this!!
I would like to see a site made to showcase the work of “video professionals/ directors / cinematographers” something fully responsive from mobile to desktop. Utilizing short high quality video “reels”. Some animation would be nice. Simple and elegant. Video Portfolio.
Excellent video and Bootstrap Studio is a fantastic software product! While HTML and CSS are not foreign to me (legacy sustainment and development), Responsive Design is very much so and Studio, along with the tutorial videos really aids in comprehension. I completed a couple of thorough Udemy courses regarding Bootstrap concepts and walk-throughs and while looking for templates, I found this software, reviewed the demo, and without hesitation, purchased the suite. What I like most is having a modern day WYSIWYG that provides a visual example and the underlying markup. Not only does this allow for rapid prototyping and design, it helps to "teach" by coupling visual representations with the markup and styles. Lastly, Studio has functionality far beyond my simple comments here and I highly recommend the product, videos, and guides.
Wow fantastic 👍.
excelente!
Спасибо!
Hi! Very good tutorial, thank you so much! I would like to ask about the padding resizing icon (when you click on component) - yours uses the bootstrap classes py and px but my Bootstrap Studio uses pixels instead: how do I change it? bootstrap classes just feel better for me. Thank you! Edit: Found it! Change the CSS Props to Utility Class when editing padding/margin.
Muy bueno...
Good!
wow thank you! i
Hello, how can I make animated text with writing effect? I love this program it's amazing!
I don't have the margin and padding option on screen at 2:26, Do I need to enable something?
I am also stuck on this. I can't find anything about "Utility class" in the menus either.
For me this comes up as "CSS Props". Click the arrow to switch to "Utility Class".
Hello, could you make video how to make a blog website in bootstrap studio. Thanks
Is there a video how to link the log in with Google or Email?
When adding an icon to the text in my button on the card, it will only go beneath or above the text, not next to it. Any solutions?
Show!
Hi. New content? When? Thanks!!!
Muito bom,
Mais tutorial seria bom
The media query you create at 9:20 just overwrites the height size value of 500 that was previously entered - it doesn't work
On first look reminds me of DreamWeaver
You guys should really provide a demo/trial so that people can play with it a little before buying.
The site has a demo right at the top of the main page.
webflow over this, anyday
eh, that depends.. if you need offline editor - this tool is great. It also gives you smart forms for pretty much anything you would need.
There's a big price difference lol