Sprawa wygląda tak https://codepen.io/Goszczu31/pen/KKdGavq, a chciałbym osiągnąć efekt bez przestrzeni pod stopką.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Logistyka mojego działania podczas zdalnego nauczania!</title>
<meta name="description" content="Logistyka mojego działania podczas zdalnego nauczania !">
<meta name="keywords" content="logistyka, zdalne nauczanie, logistyka zdalnego nauczania, Logistyka mojego działania podczas zdalnego nauczania">
<meta name="author" content="Michał Goszczyński">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" href="img/ico.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<!-- nawigacja -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center " id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="Rozwiń" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Efektywna nauka</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Cechy, które musimy poruszyć</a>
<a class="dropdown-item" href="#">Różnice</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="Rozwiń" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Harmonogram</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Potrzeby i obszary działania</a>
<a class="dropdown-item" href="#">Plan dnia</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="Rozwiń" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Analiza i Synteza</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Co lepsze / fajniejsze / trudniejsze / beznadziejne</a>
<a class="dropdown-item" href="#">Posiadane zasoby działania</a>
</div>
</li>
</ul>
</div>
</nav>
<div id="container">
<!-- slider -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/tlo slidera.jpg" alt="">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-left">
<h1>Jak efektywnie uczyć się w domu?</h1>
<p>#Logistyka mojego działania podczas zdalnego nauczania!</p>
<p><a class="btn btn-lg bg-info" href="#" role="button">Czytaj dalej</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="img/tlo slidera 2.jpg" alt="">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption">
<h1>Stwórz własny harmonogram nauki</h1>
<br/><br/>
<p><a class="btn btn-lg bg-info" href="#" role="button">Do dzieła</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="img/science.jpg" alt="">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-right">
<h1>Przeanalizuj swój plan</h1>
<p>Zrób analizę i syntezę danych</p>
<p><a class="btn btn-lg bg-info" href="#" role="button">Do dzieła</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--spis treści-->
<section class="spis">
<div class="">
<ol class="spis-tresci">
<li>Efektywna nauka</li>
<ul>
<li><a href="#">Cechy, które musimy poruszyć</a></li>
<li><a href="#">Różnice pomiędzy początkiem, kolejnym tygodniem nauki zdalnej</a></li>
</ul>
<li>Harmonogram/plan</li>
<ul>
<li><a href="#">Identyfikacja potrzeb i obszarów działania</a></li>
<li><a href="#">Plan dnia: praca, relaks i jego sposoby</a></li>
</ul>
<li>Analiza i synteza</li>
<ul>
<li><a href="#">Co jest łatwiejsze, fajniejsze, a co trudniejsze i beznadziejne przy zdalnej nauce</a></li>
<li><a href="#">posiadane zasoby do działania: ludzkie, informacyjne, finansowe i rzeczowe w odniesieniu do domu, rodzeństwa, pokoju pracy</a></li>
</ul>
</ol>
</div>
</section>
<main role="main">
<div class="linia"></div>
<!-- efektywna nauka -->
<div class="tematy">
<section id="temat 1">
<article><p>Aby efektywnie uczyć się w domu potrzebna jest samodyscyplina i zaangażowanie, mile widziane są też chęci do nauki, które nie występują u wszystkich, nie można odkładać prac na ostatnią chwilę, ale nie robić też wszystkiego na raz bez przerwy.</p></article>
<article><p>Na początku wszystko nie było dobrze zorganizowane i nie było dużo do zrobienia, ale z czasem dochodziły kolejne prace, i lekcje online, najpierw mieliśmy jedną w tygodniu (geografię), później dwie trzy tygodniowo. Teraz mamy od jednej do czterech e-lekcji dziennie.</p></article>
</section>
</div>
<div class="linia"></div>
<!-- harmonogram -->
<div class="tematy">
<section id="temat 2">
<article><h3>Jak sobie z tym wszystkim poradzić? Bardzo dużo czasu zajmują e-lekcje i prace domowe, a gdzie czas na odpoczynek? Do tego będzie nam potrzebny harmonogram i plan działania.</h3></article>
<article>
<h3>Podejdźmy do tego logistycznie</h3>
<p>Zidentyfikujmy potrzeby i obszary działania.
Więc czego potrzebujemy? Na pewno czasu - dobrze zaplanowanego, ma się w nim zmieścić nauka i relaks.</p>
<p>No dobra, potrzeby już mamy, teraz pytanie w jakich obszarach będziemy działać?
Na pewno będziemy odpowiedzialni za oddawanie prac w terminie i uczestnictwo w e-lekcjach, oraz za naukę do sprawdzianów i kartkówek</p>
</article>
<article>
<p>Skoro wiemy już czego nam potrzeba i w jakich obszarach będziemy działać, zaplanujmy dzień.</p>
<p>Zacznijmy od tego ile czasu damy sobie na spanie, zależy to od tego o której godzinie mamy pierwszą e-lekcję, każdego dnia jest inaczej, ja najwcześniej zaczynam o 9.00, więc dobrze by było wstać o 8.00 aby się przygotować. W inne dni pierwszą lekcję mam później, więc przed można zajrzeć do e-dziennika i odrobić prace domowe. Ostatnią lekcję mam około 14. Ciężko to wszystko w ten sposób rozpisać…. Lepiej zrobić to w tabeli.</p>
<!--wstawić tabelę-->
<p>Na zielono zaznaczyłem czas na naukę i odrabianie prac domowych, a na niebiesko e-lekcje</p>
</article>
</section>
</div>
<!-- analiza i synteza -->
<div class="linia"></div>
<div class="tematy">
<section id="temat 3">
<h3>Analiza i Synteza danych</h3>
<article></article>
<article></article>
</section>
</div>
</main>
</div>
<!-- stopka -->
<footer id="footer" class="page-footer font-small blue bg-info">
<div class="footer-copyright text-center py-3">
<p> Michał Goszczyński ⋅ Logistyka mojego działania podczas zdalnego nauczania! © 2020 ⋅ Wszelkie prawa zastrzeżone </p>
</div>
</footer>
<!-- skrypty javascript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
body, html
{
background-color: #cfffc9;
margin:0;
padding:0;
height:100%;
scroll-behavior: smooth;
font-family: 'Quicksand', sans-serif;
min-height: 100%;
position: relative;
}
h1
{
color: yellow;
}
h3
{
font-size: 25px;
}
.spis
{
background-color: #99FFCC;
}
.carousel
{
margin-bottom: 4rem;
}
.carousel-caption
{
bottom: 3rem;
z-index: 10;
}
.carousel-item
{
height: 32rem;
}
.carousel-item > img
{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
.spis
{
}
.tematy
{
font-size: 20px;
}
.tematy
{
padding 3em;
text-align: justify;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 60px;
margin-top: 1em;
}
#container
{
min-height:100%;
position:relative;
}
.linia
{
height: 30px;
margin: 0 !important;
background-color: coral;
}
#footer
{
height: 57px;
bottom: 0;
/* position: fixed; */
position: initial;
left: calc(50% - 100em);
right: calc(50% - 100em);
bottom: 0;
}
