index.pug

//output:index.html
doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
        meta(http-equiv="x-ua-compatible" content="ie=edge")
        title Google

        //Bootstap 3
        link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous")

        //Link css
        link(rel="stylesheet" type="text/css" href="style.css")
    body
        //Navbar
        //- nav.navbar.navbar-default(role="navigation")
        //-     .container-fluid
        //-         ul.nav.navbar-nav.navbar-right
        nav.header
            .header-right
                .header-gmail
                    a.gmail(href="https://www.gmail.com") Gmail
                .header-images
                    a.images(href="http://www.images.google.com") Images
                .header-login
                    button.login(href="https://www.google.com") Sign In
        //Main
        .main
            .main-center
                img.logo(src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")
                .search-box
                .main-buttons
                    button(href="#") Google Search
                    button(href="#") I'm Feeling Lucky


        //Footer
        nav.footer
            .footer-left
                .footer-ads
                    a.ads(href="#") Advertising
                .footer-business
                    a.buisness(href="#") Business
                .footer-about
                    a.about(href="#") About
            .footer-right
                .footer-privacy
                    a.privacy(href="#") Privacy
                .footer-terms
                    a.terms(href="#") Terms
                .footer-settins
                    a.settings(href="#") Settings

        //jQuery first, then Tether, then Bootstrap JS
        //script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous")
        //script(src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous")
        script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous")