Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    Layout Web

    Uploaded by

    Farel 27

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Layout Web

    Uploaded by

    Farel 27
    3 views2 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3 views2 pages

    Layout Web

    Uploaded by

    Farel 27

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 2

    Buatlah folder baru dengan nama : projekweb

    Buatlah file dalam folder diatas dengan nama : index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap 5 Website Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet">
    <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
    "></script>
    <style>
    .fakeimg {
    height: 200px;
    background: #aaa;
    }
    </style>
    </head>
    <body>

    <div class="p-5 bg-primary text-white text-center">


    <h1>My First Bootstrap 5 Page</h1>
    <p>Resize this responsive page to see the effect!</p>
    </div>
    <div class="container-fluid p-0 bg-dark">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
    data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse"
    id="collapsibleNavbar" style="text-align:right">
    <ul class="navbar-nav">
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    </ul>
    </div>
    </div>
    </nav>
    </div>

    <div class="container mt-5">


    <div class="row">
    <div class="col-sm-4">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg">Fake Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3 class="mt-4">Some Links</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <ul class="nav nav-pills flex-column">
    <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    </ul>
    <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2020</h5>
    <div class="fakeimg">Fake Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

    <h2 class="mt-5">TITLE HEADING</h2>


    <h5>Title description, Sep 2, 2020</h5>
    <div class="fakeimg">Fake Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    </div>
    </div>

    <div class="mt-5 p-4 bg-dark text-white text-center">


    <p>Footer</p>
    </div>

    </body>
    </html>

    You might also like