Scribd
Upload
30 views6 pages

Bootstrap

Uploaded by

LinkGameSX
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
30 views6 pages

Bootstrap

Uploaded by

LinkGameSX
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="box-shadow">

<title>Document</title>
</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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav" >
<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>
</div>
</nav>

<div class="container mt-5">


<div class="row" >
<div class="col-sm-4">
<h1>Diego Alberto Facio Franco</h1>
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg">banano.jpg</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>
</u1>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>MI Primera Pagina</h2>
<h5>hacer tu primer pagina en boostrap, Noviembre 21, 2024</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 inci
<h2 class="mt-5">TITLE HEADING</h2>
<h5>Title description, Sep 2, 2024</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text..</p>
</div>
</div>
</div>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor inci
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>Footer</p>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpCrYfOtY31HB6">
</script>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

<!-- Indicators/dots -->


<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0"
class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="5"></button>
</div>

<!-- The slideshow/carousel -->


<div class="carousel-inner">
<div class="carousel-item active">
<img src="ñiñiñi.jpg" alt="Imagen 1" class="d-block w-100" style="height:
500px; object-fit: cover;">
</div>
<div class="carousel-item">
<img src="peru.jpg" alt="Imagen 2" class="d-block w-100" style="height:
500px; object-fit: cover;">
</div>
<div class="carousel-item">
<img src="amlo homalnder.jpg" alt="Imagen 3" class="d-block w-100"
style="height: 500px; object-fit: cover;">
</div>
<div class="carousel-item">
<img src="nike.jpg" alt="Imagen 4" class="d-block w-100" style="height:
500px; object-fit: cover;">
</div>
<div class="carousel-item">
<img src="calla.jpg" alt="Imagen 5" class="d-block w-100" style="height:
500px; object-fit: cover;">
</div>
<div class="carousel-item">
<img src="nanana.jpg" alt="Imagen 6" class="d-block w-100" style="height:
500px; object-fit: cover;">
</div>
</div>

<!-- Left and right controls/icons -->


<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-
bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-
bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>

<!-- Footer -->


<footer class="text-center text-lg-start bg-body-tertiary text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4
border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->

<!-- Right -->


<div style="margin: 0 auto;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017
2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-
3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303
1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425
5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323
2.145H2.865l8.875 11.633Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
<path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0
1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0
7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-
3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-
3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928
4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-
1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.14
8-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-
1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.
33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-
1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0
0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394
2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058
1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-tiktok" viewBox="0 0 16 16">
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-
1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
</svg>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->

<!-- Section: Links -->


<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->

<!-- Grid column -->


<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->

<!-- Grid column -->


<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->

<!-- Grid column -->


<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
[email protected]
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->

<!-- Copyright -->


<div class="text-center text-white p-4" style="background-color: rgb(56, 56,
56);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">Bootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<!-- Font Awesome -->


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/
all.min.css" rel="stylesheet">

<!-- Bootstrap JavaScript (al final del body) -->


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">

<!-- Font Awesome -->


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.1/css/all.min.css">
<!-- Bootstrap JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpCrYfOtY31HB6kg8M6zFh1IPZ6rUhzGrRYyB6Qx8mX8K4UHx/4EnQqfKuhXgtj"
crossorigin="anonymous"></script>
</body>
</html>

You might also like