Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    Submitted By:: Lab Task Subject: Web Engineering

    Uploaded by

    M Nabil
    The document is a lab task submission for a web engineering course. It includes the code for a basic website layout with a navbar, jumbotron, grid layout for content sections, and sidebar. The website code uses Bootstrap for layout and styling and includes common page elements like headings, paragraphs, buttons and a footer.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Submitted By:: Lab Task Subject: Web Engineering

    Uploaded by

    M Nabil
    8 views5 pages
    The document is a lab task submission for a web engineering course. It includes the code for a basic website layout with a navbar, jumbotron, grid layout for content sections, and sidebar. The website code uses Bootstrap for layout and styling and includes common page elements like headings, paragraphs, buttons and a footer.

    Original Description:

    Original Title

    1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document is a lab task submission for a web engineering course. It includes the code for a basic website layout with a navbar, jumbotron, grid layout for content sections, and sidebar. The website code uses Bootstrap for layout and styling and includes common page elements like headings, paragraphs, buttons and a footer.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    8 views5 pages

    Submitted By:: Lab Task Subject: Web Engineering

    Uploaded by

    M Nabil
    The document is a lab task submission for a web engineering course. It includes the code for a basic website layout with a navbar, jumbotron, grid layout for content sections, and sidebar. The website code uses Bootstrap for layout and styling and includes common page elements like headings, paragraphs, buttons and a footer.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    Lab Task

    Subject: Web Engineering

    Submitted By:

    Muhammad Nabil

    Roll # 70044104

    Section: S
    Code
    <html>

    <head>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"


    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-


    wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-


    6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

    <title>Home Page</title>

    <body>

    </head>

    <nav class="navbar navbar-expand-md navbar-light bg-light">

    <a class="navbar-brand" href="#">M Nabil</a>

    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">

    <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">

    <div class="navbar-nav">

    <a href="#" class="nav-item nav-link active">Home</a>

    <a href="#" class="nav-item nav-link">About</a>

    <a href="#" class="nav-item nav-link">Contact</a>

    </div>

    <div class="navbar-nav ml-auto">

    <li class="nav-item dropdown">

    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

    Dropdown link

    </a>
    <div class="dropdown-menu">

    <a class="dropdown-item" href="#">Link 1</a>

    <a class="dropdown-item" href="#">Link 2</a>

    <a class="dropdown-item" href="#">Link 3</a>

    </div>

    </li>

    </div>

    </div>

    </nav>

    <div class="container">

    <div class="jumbotron">

    <div class="container">

    <h1 class="display-3">Welcome to my Blog</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies luctus aliquet. Quisque quis blandit ante, et
    facilisis leo. Nulla tellus risus, posuere in scelerisque non, fringilla at enim.</p>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

    </div>

    </div>

    <div class="row row-offcanvas row-offcanvas-right">

    <div class="col-12 col-md-8">

    <div class="row">

    <div class="col-6 col-lg-12">

    <h2>Heading</h2>

    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
    sed odio dui. </p>
    <p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>

    </div><hr>

    <div class="col-6 col-lg-12">

    <h2>Heading</h2>

    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
    sed odio dui. </p>

    <p><a class="btn btn-primary" href="#" role="button">View details </a></p>

    </div>

    <hr class="mb-8">

    <div class="col-6 col-lg-12">

    <h2>Heading</h2>

    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
    sed odio dui. </p>

    <p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>

    </div><hr>

    </div>

    </div>

    <div class="col-6 col-md-4 sidebar-offcanvas" id="sidebar">

    <h2>Sidebar</h2>

    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
    sed odio dui. </p>

    <p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>

    </div>

    </div>

    </div>

    <hr>

    <footer class="text-center text-small">

    <p>All Rights Reserved &copy; 2020</p>

    </footer>

    </div>
    Screenshots

    You might also like