|
|
| Line 1: |
Line 1: |
| <head>
| | {| |
| <title>Bootstrap Example</title>
| | |- |
| <meta charset="utf-8">
| | | Example |
| <meta name="viewport" content="width=device-width, initial-scale=1">
| | |- |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
| | | Example |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
| | |- |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
| | | Example |
| <style>
| | |} |
| /* Remove the navbar's default margin-bottom and rounded borders */
| |
| .navbar {
| |
| margin-bottom: 0;
| |
| border-radius: 0;
| |
| }
| |
|
| |
| /* Add a gray background color and some padding to the footer */
| |
| footer {
| |
| background-color: #f2f2f2;
| |
| padding: 25px;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| | |
| <nav class="navbar navbar-inverse">
| |
| <div class="container-fluid">
| |
| <div class="navbar-header">
| |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
| |
| <span class="icon-bar"></span>
| |
| <span class="icon-bar"></span>
| |
| <span class="icon-bar"></span>
| |
| </button>
| |
| <a class="navbar-brand" href="#">Portfolio</a>
| |
| </div>
| |
| <div class="collapse navbar-collapse" id="myNavbar">
| |
| <ul class="nav navbar-nav">
| |
| <li class="active"><a href="#">Home</a></li>
| |
| <li><a href="#">About</a></li>
| |
| <li><a href="#">Gallery</a></li>
| |
| <li><a href="#">Contact</a></li>
| |
| </ul>
| |
| <ul class="nav navbar-nav navbar-right">
| |
| <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| </nav>
| |
| | |
| <div class="jumbotron">
| |
| <div class="container text-center">
| |
| <h1>My Portfolio</h1>
| |
| <p>Some text that represents "Me"...</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="container-fluid bg-3 text-center">
| |
| <h3>Some of my Work</h3><br>
| |
| <div class="row">
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| </div>
| |
| </div><br>
| |
| | |
| <div class="container-fluid bg-3 text-center">
| |
| <div class="row">
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| <div class="col-sm-3">
| |
| <p>Some text..</p>
| |
| <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
| |
| </div>
| |
| </div>
| |
| </div>
| |
