我在練習，設計一個頁面，一切都很順利，但是我不能把頁腳放在主頁下面。
.clearfix{
clear: both;
float: none;
}
#header {
height: auto;
}
.navbar {
height: 80px;
}
.navbar-brand {
width: 170px;
height: 57.2px;
margin-left: 1%;
margin-right: 3.1%;
padding-top: 0px;
padding-bottom: 0px;
line-height: 50.2px;
}
.nav-item {
font-size: 17px;
margin-right: 8%;
color: black;
}
.nav-link {
color: black;
}
.nav-link:hover {
color: black;
}
.d-flex {
width: 49%;
}
.btn {
margin-left: -1.6%;
line-height: 0.5;
color: gray;
border-top-left-radius: 0rem;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0rem;
padding-top: 0.375rem;
padding-right: 0.68rem;
padding-bottom: 0.375rem;
padding-left: 0.55rem;
border: 1px solid #dbdbdb;
border-left: none;
}
.btn:hover {
background: #f0efef;
border: 1px solid #dbdbdb;
border-left: none;
}
.form-control {
margin-right: -4%;
margin-left: 13%;
}
.botonesfuera {
margin-left: 24%;
}
.btn2,
.btn3 {
font-family: Helvetica;
font-size: 16px;
padding-top: 7px;
padding-right: 16px;
padding-bottom: 7px;
padding-left: 16px;
}
.btn2 {
background: white;
border-radius: 5px;
border: 1px solid #bbb;
}
.btn3 {
background: #FAC62D;
border-radius: 5px;
border: 1px solid #FAC62D;
margin-left: 8px;
}
/* CAROUSEL */
.carousel-caption {
width: 27%;
text-align: left;
margin-left: -8%;
border-top: 1px solid white;
border-bottom: 1px solid white;
margin-bottom: 40px;
padding-top: 30px;
padding-bottom: 30px;
}
.carousel-caption h5 {
font-family: Helvetica;
font-weight: 700;
font-size: 60px;
}
.carousel-caption p {
font-family: Helvetica;
font-weight: normal;
font-size: 18px;
}
.carousel-indicators {
width: 50px;
height: 30px;
margin-left: 19%;
}
.carousel-indicators button {
/* width: 30px;
height: 12px;*/
border-radius: 50%;
margin: 0 5px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
box-shadow: none;
}
.carousel-indicators button.active {
background-color: #fff;
}
.carousel-indicators [data-bs-target] {
width: 11px;
height: 11px;
}
#main{
width: 100%;
}
/* 3 TEXTOS */
#trestextos {
width: 95%;
height: 270px;
margin: 0px auto;
border-bottom: 1px solid gray;
}
.trestextos1{
display: block;
width: 27%;
float: left;
margin-left: 5%;
}
.trestextos1 h2 {
font-family: Helvetica;
font-size: 32px;
font-weight: 700;
margin-top: 60px;
margin-bottom: 15px;
}
.trestextos1 p {
font-family: Helvetica;
font-size: 18px;
line-height: 1.45;
font-family: Helvetica, Arial, sans-serif;
}
/* EXPLORE SECTION */
#exploreproducts{
width: 95%;
height: 500px;
margin: 0px auto;
}
.titlexplore{
height: 50px;
margin-left: 5%;
margin-top: 34px;
margin-bottom: 30px;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.titlexplore h2{
font-weight: 700;
}
.cajasexplore{
width: 100%;
text-align: center;
margin-bottom: 50px;
}
.cajasexplore h1{
font-family: inherit;
font-size: 18px;
font-weight: 700;
text-align: start;
margin-left: 5%;
}
.caja{
width: 16.92%;
height: 337px;
margin-right: 1%;
border: 1px solid gray;
overflow: hidden;
border-radius: 1%;
display: inline-flex;
flex-wrap: wrap;
}
.description{
font-family: Helvetica;
font-size: 14px;
font-weight: 700;
text-align: start;
padding: 3%;
}
.description span{
font-size: 13px;
font-family: Helvetica;
font-weight: 100;
color: #555;
}
/* FOOTER */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yours for the making - Instructables</title>
<link rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- BARRA DE NAVEGACIóN -->
<header id="header">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/instructables-logo-2023.svg" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-2 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Teachers</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control" type="search" placeholder="Search"
aria-label="Buscar"><!-- ESTOY AQUI CON EL MS-4 -->
<button class="btn" type="submit"><span class="material-symbols-outlined">
search
</span></button>
</form>
<div class="botonesfuera">
<button class="btn2" type="submit">Log In</button>
<button class="btn3" type="submit">Sign Up</button>
</div>
</div>
</div>
</nav>
</header>
<!-- CAROUSEL -->
<main id="main">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://placehold.co/1903x400" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Yours for the making</h5>
<p>Instructables is a community for people who like to make things. Come explore, share, and make your next
project with us!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://placehold.co/1903x400" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Yours for the making</h5>
<p>Instructables is a community for people who like to make things. Come explore, share, and make your next
project with us!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://placehold.co/1903x400" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Yours for the making</h5>
<p>Instructables is a community for people who like to make things. Come explore, share, and make your next
project with us!</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
</button>
</div>
<!-- 3 TEXTOS -->
<div id="trestextos">
<div class="trestextos1">
<h2>Step-by-step</h2>
<p>
We make it easy to learn how to make anything, one step at a time. From the stovetop to the workshop, you are
sure to be inspired by the awesome projects that are shared everyday.
</p>
</div>
<div class="trestextos1">
<h2>Made By You</h2>
<p>
Instructables are created by you. No matter who you are, we all have secret skills to share. Come join our
community of curious makers, innovators, teachers, and life long learners who love to share what they make.
</p>
</div>
<div class="trestextos1">
<h2>A Happy Place</h2>
<p>
Making things makes people happy. We can't prove it, but we know it to be true. Find your happy place, and
join
one of the friendliest online communities anywhere.
</p>
</div>
</div>
<!-- EXPLORE PRODUCTS -->
<div id="exploreproducts">
<div class="titlexplore">
<h2>Explore Projects</h2>
</div>
<div class="cajasexplore">
<h1>Circuits</h1>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
</div>
<div class="cajasexplore">
<h1>Workshop</h1>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
</div>
<div class="cajasexplore">
<h1>Craft</h1>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
</div>
<div class="cajasexplore">
<h1>Cooking</h1>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
</div>
<div class="cajasexplore">
<h1>Living</h1>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
</div>
<div class="cajasexplore">
<h1>Outside</h1>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
</div>
<div class="cajasexplore">
<h1>Teachers</h1>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
<div class="caja">
<img src="https://placehold.co/304x255" />
<div class="description">
Print, Paint, and Program a Guardian to Track Humans and Dogs Using a Pi, Camera, and Servo <span
class="notaby">by npentrel in Raspberry</span>
</div>
</div>
</div>
</div>
</main>
<!-- FOOTER -->
<footer id="footer">
<div class="footer1">
<img src="img/robot-category-sprite.png" />
<div class="cajafooter">
<h2>Categories</h2>
<ul>
<li><a href="#">Circuits</a></li>
<li><a href="#">Workshop</a></li>
<li><a href="#">Craft</a></li>
<li><a href="#">Cooking</a></li>
<li><a href="#">Living</a></li>
<li><a href="#">Outside</a></li>
<li><a href="#">Teachers</a></li>
</ul>
</div>
<div class="cajafooter1">
<h2>Abous us</h2>
<ul>
<li><a href="#">Circuits</a></li>
<li><a href="#">Workshop</a></li>
</ul>
</div>
<div class="cajafooter1">
<h2>Resources</h2>
<ul>
<li><a href="#">Circuits</a></li>
<li><a href="#">Workshop</a></li>
<li><a href="#">Workshop</a></li>
</ul>
</div>
<div class="cajafooter1">
<h2>Abous us</h2>
<ul>
<li><a href="#">Instagram</a></li>
<li><a href="#">TikTok</a></li>
</ul>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js"
integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
</body>
</html>