HTML код :
<!DOCTYPE html>
<html lang="ru">
<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">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<div class="wraper">
<div class="content">
<div class="hi">
<div class="container">
<div class="hi__row">
<div class="hi__body">
<div class="hi__title">
Привет, друг!
</div>
<ul class="hi__list">
<li>У тебя все получится!</li>
<li> Никогда не сдавайся!</li>
<li>Сегодня ты уже знаешь больше чем вчера!</li>
<li>Спасибо тебе за поддержку!</li>
</ul>
<div class="hi__image">
<img src="/image/shape_9_345.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">Фрилансер по жизни 2019</footer>
</body>
</html>
SCSS код:
@import "nullstyle.scss";
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.wraper {
min-height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.content {
flex: 1 1 auto;
}
.container {
max-width: 1180px;
margin: 0 auto;
}
.hi {
background-color: #445162;
&__row {
display: flex;
flex-direction: row;
}
}
.footer {
height: 65px;
background-color: #f5f5f5;
color: #445162;
font-size: 12px;
line-height: 24px;
letter-spacing: 0.025em;
display: flex;
justify-content: center;
align-items: center;
}
CSS код:
* {
margin: 0;
padding: 0;
bottom: 0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus, :active {
outline: none;
}
a:focus, a:active {
outline: none;
}
nav, footer, header, aside {
display: block;
}
html, body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input, button, textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 400;
}
/*--------------------*/
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.wraper {
min-height: 100%;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.content {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.container {
max-width: 1180px;
margin: 0 auto;
}
.hi {
background-color: #445162;
}
.hi__row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.footer {
height: 65px;
background-color: #f5f5f5;
color: #445162;
font-size: 12px;
line-height: 24px;
letter-spacing: 0.025em;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
Простой
