-1
Friends, I need help. I’m taking a test for dev. And I need to put the form box fixed on top of Carousel but I’ve already researched everything and I couldn’t. I wonder if you could help me?
<!doctype html>
<title>Alex Gross</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
<!-- CSS externo -->
<link rel="stylesheet" href="logo.css">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"
<!-- favicom -->
<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel/car w.jpg" class="img-fluid d-block">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem dolor</h1>
<p>Lorem, ipsum dolor sit amet consectetur. <br>
quod ipsam nisi incidunt fugiat pariatur a cupiditate.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel/charles w.jpg" class="img-fluid d-block">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem fex dolor</h1>
<p>Lorem, ipsum dolor sit amet.<br>
quod ipsam nisi incidunt fugiat.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel/estrada w.jpg" class="img-fluid d-block">
<div class="carousel-caption d-none d-md-block">
<h1>Ipsum consectetur</h1>
<p>Lorem, ipsum dolor amet .<br>
quod ipsam nisi incidunt ur a cupiditate.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel/outubro w.jpg" class="img-fluid d-block">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem, Lorem sit amet</h1>
<p>Lorem, ipsum dolor adipisicing elit.<br>
quod ipsam nisi at pariatur a cupiditate.</p>
</div>
</div>
</div>
<!-- Controles Carousel -->
<a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev" >
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Avançar</span>
</a>
</div> <!--Fim carousel-->
<!--Formulario-->
<?php
if (isset($_SESSION ['msg'])){
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}
?>
<div class="float-right">
<body1 class="text-center">
<main class="form-signin">
<img class="mb-4" src="img/Logo Teste Dark.svg" alt="" width="132" height="57">
<h1 class="h3 mb-3 fw-normal">Cadastro</h1><br>
<form method="POST" action="processa.php">
<div class="form-floating mb-3">
<input type="text" name="nome" class="form-control"id="floatingInput" placeholder="Nome completo">
</div>
<div class="form-floating mb-3">
<input type="email" name="email" class="form-control" id="floatingInput" placeholder="[email protected]">
</div>
<div class="form-floating mb-3">
<input type="text" name="telefone" class="form-control" id="floatingInput" placeholder="xx-xxxxxxxxx">
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Mantenha conectado
</label>
</div>
<input class="w-100 btn btn-lg btn-primary" type="submit" value="ENVIAR">
</form>
</main>
</body1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
Important [Edit] to post and exchange the code and images for a [mcve] of the exact part of the doubt. To understand what kind of question serves the site and, consequently, avoid closures and negativities worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese.
– Bacco