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

Hi Fam

Demo

sdlanding.jpg


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!
 

Attachments

  • SDLandingPage.zip
    37.1 KB · Views: 120
Last edited:

MichalK73

Well-Known Member
Licensed User
Longtime User
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?
B4X:
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

footbar.png
 

Mashiane

Expert
Licensed User
Longtime User
In the baselayout, we have this design...

1710620266809.png


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.

1710620558152.png


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

Well-Known Member
Licensed User
Longtime User
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
 
Top