allgamerstalk

Unconfigured Ad Widget

Collapse

How to create a Landing Page in bootstrap?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to create a Landing Page in bootstrap?

    Hi please suggest How to create a Landing Page in bootstrap?
    Website Designer in Delhi | Website Developer in Delhi | Website Maker in Delhi | Website Designing in Delhi | Website Services in Delhi

  • #2
    Step 1

    Similarly to the previous tutorial, in the beginning, we'll create the basic structure of our project.

    Open the index.html file in your project folder (the folder where you have unzipped MDB package) and paste the following code below <body> tag.

    Step 2

    Now we'll create a navigation bar. Go to
    Navbar Docs and copy the code for Basic Navbar. Then paste it between opening <header>s tags.

    Remember to place .container inside your navbar in order to center the links.

    Step 3

    We have to make one significant change to the Navbar code.

    Add the class .fixed-top to the Navbar.

    Step 4

    Now it's time for something spectacular. Let's create a full page background intro for our landing page.

    Paste this code below the navbar and before the closing </header> tag:

    --
    Lewis




    Slack vs Skype | OneDrive vs Google Drive

    Comment


    • #3
      Create the Navigation Bar
      You can add a responsive menu to your landing page with just a few lines of HTML. Insert the following code into the <body> section of your HTML file:
      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Hello Consultancy</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> Compose the Hero section
      Add this code for that
      <header class="jumbotron jumbotron-fluid"> <div class="container-fluid text-center"> <h1 class="display-3">The Best Solution for Your Business</h1> <p class="lead pb-4">We help you maximize performance and build a healthy organization.</p> <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn More</a></p> </div> </header> CREATE A THREE-COLUMN SECTION TO SHOWCASE SERVICES

      To that add this
      <section id="services" class="container"> <h2 class="display-4 text-center mt-5 mb-3">Our Services</h2> <div class="row text-center"> <div class="col-md-4 mb-4"> <div class="card h-100"> <img class="card-img-top" src="design.jpg" alt="Design"> <div class="card-body"> <h4 class="card-title">Design</h4> <p class="card-text">Deliver the best user experience with our carefully designed responsive websites and applications!</p> </div> <div class="card-footer py-4"> <a href="#" class="btn btn-secondary">See portfolio &raquo;</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100"> <img class="card-img-top" src="development.jpg" alt="Development"> <div class="card-body"> <h4 class="card-title">Development</h4> <p class="card-text">You need software that works on every device. Leverage the latest technologies and the most powerful tools!</p> </div> <div class="card-footer py-4"> <a href="#" class="btn btn-secondary">See projects &raquo;</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100"> <img class="card-img-top" src="analytics.jpg" alt="Analytics"> <div class="card-body"> <h4 class="card-title">Analytics</h4> <p class="card-text">Consult our experts to set up proper goals and find the best stack for your next application!</p> </div> <div class="card-footer py-4"> <a href="#" class="btn btn-secondary">See testimonials &raquo;</a> </div> </div> </div> </div> </section> Peace.

      MS Teams | MS Dynamics 365

      Comment


      • #4
        Bootstrap is a free, open-source front-end library for designing websites and web applications. It contains HTML- and CSS-based design templates for everything from typography, forms, buttons, navigation and other interface components as well as JavaScript extensions. Unlike many other web frameworks, Bootstrap concerns itself with front-end development only.
        Flower to Australia | Christmas Gifts USA | Christmas Hampers Australia | Christmas Gift Ideas Australia

        Comment


        • #5
          Bootstrap is a free, and easily designing websites and web applications. You will learn some technique like:

          Creating a Full Page Intro, shadows, Contact Section, Google Maps, animations, Awesome toolkit

          Comment


          • #6
            Pick CMS Platform.

            Pick test format.

            Go to General tab.

            Arrangement design.

            Go to menu tab.

            Add slideshow to site.

            Change content in content territory.

            Make your Footer.
            Cartloot

            Comment

            Unconfigured Ad Widget

            Collapse

            Announcement

            Collapse
            1 of 2 < >

            FreeHostForum Rules and Guidelines

            Webmaster forum - Web Hosting Forum,Domain Name Forum, Web Design Forum, Travel Forum,World Forum, VPS Forum, Reseller Hosting Forum, Free Hosting Forum

            Signature

            Board-wide Policies:

            Do not post links (ads) in posts or threads in non advertising forums.

            Forum Rules
            Posts are to be made in the relevant forum. Users are asked to read the forum descriptions before posting.

            Members should post in a way that is respectful of other users. Flaming or abusing users in any way will not be tolerated and will lead to a warning or will be banned.

            Members are asked to respect the copyright of other users, sites, media, etc.

            Spam is not tolerated here in most circumstances. Users posting spam will be banned. The words and links will be censored.

            The moderating, support and other teams reserve the right to edit or remove any post at any time. The determination of what is construed as indecent, vulgar, spam, etc. as noted in these points is up to Team Members and not users.

            Any text links or images contain popups will be removed or changed.

            Signatures
            Signatures may contain up to four lines

            Text in signatures is subject to the same conditions as posts with respect decency, warez, emoticons, etc.

            Font sizes above 3 are not allowed

            Links are permitted in signatures. Such links may be made to non-Freehostforum material, commercial ventures, etc. Links are included within the text and image limits above. Links to offensive sites may be subject to removal.

            You are allowed ONLY ONE picture(banner) upto 120 pixels in width and 60 pixels in height with a maximum 30kB filesize.

            In combination with a banner/picture you can have ONLY ONE LINE text link.


            Advertising
            Webmaster related advertising is allowed in Webmaster Marketplace section only. Free of charge.

            Shopping related (tangible goods) advertising is allowed in Buy Sell Trade section only. Free of charge.

            No advertising allowed except paid stickies in other sections.

            Please make sure that your post is relevant.


            More to come soon....
            2 of 2 < >

            Advertise at FreeHostForum

            We offer competitive rates and a many kinds of advertising opportunities for both small and large scale campaigns.More and more webmasters find advertising at FreeHostForum.com is a useful way to promote their sites and services. That is why we now have many long-term advertisers.

            At here, we also want to thank you all for your support.

            For more details:
            http://www.freehostforum.com/threads...eHostForum-com

            More ad spots:
            http://www.freehostforum.com/forums/...-FreeHostForum
            See more
            See less
            Working...
            X