суббота, 26 января 2019 г.

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы.
Документация: https://materializecss.com/footer.html

Файл footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

<link rel="stylesheet" href="css/style.css">

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<meta charset="UTF-8">
<title>Document</title>

</head>

<body>
<!--
Документация: https://materializecss.com/sidenav.html
-->
<nav>
<div class="nav-wrapper">
<div class="container">
<a href="#" class="brand-logo">
<img src="img/logo.png" id="mylogo" alt="">
</a>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="active"><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
<li><a class="modal-trigger" href="#modal1">Модальное окно</a></li> <!-- Ссылка на модальное окно-->
</ul>
</div>
</div>
</nav>

<ul class="sidenav" id="slide-out">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
<li><a class="modal-trigger" href="#modal1">Модальное окно</a></li>
</ul>



<!-- Выводим 2 поста -->

<div class="container maincont">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, voluptatibus repellat praesentium velit explicabo fuga perferendis deleniti eveniet! Dolore, omnis ratione harum quia doloribus ipsum porro incidunt aliquam eligendi consequatur obcaecati aspernatur adipisci accusamus illum commodi nesciunt mollitia veritatis maxime possimus quas fugit cum est placeat sit quod. Aspernatur, quae!
</div>

<!-- Footer -->
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id explicabo maxime impedit natus quibusdam veritatis. Molestiae, necessitatibus vitae porro molestias blanditiis earum culpa sapiente commodi.
</p>
</div>

<div class="col l4 offset-12 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a href="#!" class="grey-text text-lighten-3">Link</a></li>
<li><a href="#!" class="grey-text text-lighten-3">Link</a></li>
<li><a href="#!" class="grey-text text-lighten-3">Link</a></li>
<li><a href="#!" class="grey-text text-lighten-3">Link</a></li>
</ul>
</div>
</div>
</div>

<div class="footer-copyright">
<div class="container">
&copy; 2018
<a href="#!" class="grey-text text-lighten-4 right">Link</a>
</div>
</div>
</footer>


<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
// Активируем адаптивное меню для мобильных устройств.
// Документация: https://materializecss.com/sidenav.html
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
</body>
</html>

style.css
/* Изменим цвет меню */
nav {
background: #803c42;
}

#mylogo {
width: 50px;
}


/* Делаем прижатый футер */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.maincont {
flex: 1 0 auto;
margin-top: 40px;
margin-bottom: 40px;
}
на

1 комментарий:

Подписаться на: Комментарии к сообщению (Atom)

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html