Share My Creation [BANanoVuetifyAD3] Website / Landing Page Template

Hi there

Demo on Netlify

This amazing website template has 6 sections, these being:

• Home
• About Us
• Portfolio
• Project
• Gallery
• Contact Us

You can customize it how you need:

On Mobile

YouTube

Share your videos with friends, family, and the world

youtube.com

On Desktop

Home, About Us, Portfolio - check...

How the Portfolio Section works...

The Project Section

Gallery

Contact Us & Footer

**** UPDATE

So what you you get when you buy me coffee for $5? (Please top this with paypal charges)

You get the complete source code to build the website which will show you how the website template has been designed.

Thank you so much for your support.

Happy BANanoVuetifyAD3 Coding!

Pay SITHASO HOLDINGS (PTY) LTD using PayPal.Me

Go to paypal.me/anelembanga and type in the amount. Since it’s PayPal, it's easy and secure. Don’t have a PayPal account? No worries.

paypal.me

 

[Mashiane]

What is Special About this project?

1. We are NOT using the abstract designer. Off course everything done here can be done with the abstract designer.
2. We are using custom-components, this is like a normal page, but instead of calling .AddRoute, one uses .Import. for example, this is in pgIndex.

Sub Init                    'ignoreDeadCode
    'initialize the app
    vuetify.Initialize(Me, Main.AppName)
    'add the compulsory VApp parent element
    inspire = vuetify.CreateVApp("inspire")
    inspire.AddToParentDT(vuetify.Here)
    'we are not using a router
    vuetify.RouterViewName = ""
    '
    '**** import the component
    Dim ctheader As CHeader
    ctheader.Initialize(vuetify)
    '**** add the header custom tag
    ct_header = vuetify.CreateVCustomTag(ctheader.name, ctheader.name)
    ct_header.AddToParentDT(inspire.here)
    '
  blah blah blah..


    'render the ux
    vuetify.Serve
End Sub

Then on the component i.e class

Sub Initialize(v As VuetifyApp)
    'establish a reference to the app
    vuetify = v
    'initialize the component
    page.Initialize(Me, name)
    page.vuetify = vuetify
    'build the component
    appBar = page.CreateVAppBar("appbar")
    appBar.ColorDT = vuetify.COLOR_WHITE
    appBar.AppDT = True
    appBar.AddToParentDT(page.Here)
    'add styles after adding element to parent
    appBar.AddStyle("padding", "0px 90px")
    '
    blah blah blah
   
    'import the component to vuetify instance
    vuetify.Import(page)
End Sub

 

[sdleidel]

Like your work…
Transaktionscode
17035872JL874250N
?

 

[Mashiane]

Like your work…
Transaktionscode
17035872JL874250N
?

Please check your email for the invite to access the source code. Thank you so much.

 

[sdleidel]

How do you sent it ?
Filesharing Hoster?

 

[Mashiane]

How do you sent it ?
Filesharing Hoster?

Mega Sync, please check the DM i just sent.

 

[sdleidel]

On an IPhone, the Site dies Not Look good. How to fix it ?

 

[Mashiane]

Unfortunately, when Tushar designed this, he did not optimize it for mobile devices and was wearing the "desktop" hat only. That is not a problem anyway.

Will need to add "responsiveness" classes on the elements and add a few other things to support small devices. For example, the footer is very large to work for mobile devices, so we can use a "visibility" class to control whether that is shown / some portions of it shown on mobile devices.

The "Styles and Animations" - Display Helpers section talks about these classes.

1. The menu for example - on mobile devices this should be shown as a drawer and "hidden" on small devices on the toolbar. So we need to add a drawer on pgIndex for this, so that one can use the drawer to access the menu and hide the menu on small devices.

2. The footer - this is very large for mobile devices also. We can perhaps hide some sections in it on small devices or "move" these out of the footer to be shown on the page for small devices.

I will enhance the design to support mobile devices. Please expect an update next week.

 

[sdleidel]

Unfortunately, when Tushar designed this, he did not optimize it for mobile devices and was wearing the "desktop" hat only. That is not a problem anyway.

Will need to add "responsiveness" classes on the elements and add a few other things to support small devices. For example, the footer is very large to work for mobile devices, so we can use a "visibility" class to control whether that is shown / some portions of it shown on mobile devices.

The "Styles and Animations" - Display Helpers section talks about these classes.

1. The menu for example - on mobile devices this should be shown as a drawer and "hidden" on small devices on the toolbar. So we need to add a drawer on pgIndex for this, so that one can use the drawer to access the menu and hide the menu on small devices.

2. The footer - this is very large for mobile devices also. We can perhaps hide some sections in it on small devices or "move" these out of the footer to be shown on the page for small devices.

I will enhance the design to support mobile devices. Please expect an update next week.

Any News for the Update ?

 

[Mashiane]

The update has been done, will upload it to MEGA asap.

 

[Mashiane]

Update on Netlify

What we did..

We added media queries so that the text is shrunk when a mobile device is used. The end result is

We also added a directive for the footer to "not be on top", so that it only appears when you reach to it.

PS: Please also note that the AppBar will hide itself thus hiding the top menu on small devices.

Find the updated files on mega.