Share My Creation [Web][SithasoDaisy] A beautiful Landing Page with Multiple Page Navigation & No Drawer

Hi Fam

Demo

Features

• Transparent Navigation Bar
• Horizontal Menu on Navigation Bar
• Sticky Footer
• Background Image on Body of App
• Transparent Pages
• Navigation (Horizontal Menu & Footer)
• No Drawer
• Multiple Pages

Source Code Included.

Enjoy!

 

[cklester]

This is awesome, Mashy!

 

[MichalK73]

It looks professional, amazing. Thanks for all your help.

 

[MichalK73]

It looks nice for the demo version. But when I want to set 1 item each for the category footbar does not reach the bottom of the page. How to set it correctly?

Sub CreateFooter
    
    Dim c1 As SDUIDiv = appfooter.AddColumn("c1", "")
    c1.AddFooterTitle("ft1", "Services")
    c1.AddLink("ft1l1", "Branding", "#").Hover
'    c1.AddLink("ft1l2", "Design", "#").Hover
'    c1.AddLink("ft1l3", "Marketing", "#").Hover
'    c1.AddLink("ft1l4", "Advertisement", "#").Hover
    
    '
    Dim c2 As SDUIDiv = appfooter.AddColumn("c2", "")
    c2.AddFooterTitle("ft2", "Company")
'    c2.AddLink("ft2l1", "About Us", "#").Hover
    c2.AddLink("ft2l2", "Contact Us", "#").Hover
'    c2.AddLink("ft2l3", "Services", "#").Hover
'    c2.AddLink("ft2l4", "Press Kit", "#").Hover
    '
    Dim c3 As SDUIDiv = appfooter.AddColumn("c3", "")
    c3.AddFooterTitle("ft3", "Legal")
    c3.AddLink("ft3l1", "Terms of Use", "#").Hover
'    c3.AddLink("ft3l2", "Privacy Policy", "#").Hover
'    c3.AddLink("ft3l3", "Cookie Policy", "#").Hover
End Sub

 

[Mashiane]

In the baselayout, we have this design...

This pageview adjusts its height according to the navbar & footer heights as we cant use anchors for this. These are the settings on the pageview component.

You can use a tool like Dimensions to find the exact height of your footer (run your app first), if its px, convert it to rem and update 14rem to that value, it should work.

I will try and have this automatic next time, as soon as I figure it out.

 

[MichalK73]

Example settings for several cases
Title + 1 item - 6rem
Title + 2 items - 7.8rem
Title + 3 items - 9.5rem
1 item - 3.8rem
2 items - 5.5rem
3 items - 7.3rem
4 items - 9rem
Assuming
Margins and Paddings =0 for all