Я новичок и пытаюсь создать эту страницу, но под всем содержимым есть пустое место, и я не знаю почему. И моя боковая панель тоже не отображается. Что бы это могло быть? Мой браузер отображается точно так же, как pi c, и это не то, как я должен был проектировать страницу.
Первая часть
Последняя часть с пробел в конце
Вот код
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto';
}
html, body {
height: 100%;
}
.main {
display: flex;
flex-direction: row;
height: 100%;
}
.sidebar {
display: block;
background-color: #2c333a;
height: 100%;
width: 120px;
color: rgba(255, 255, 255, 0.5);
}
.sidebar-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sidebar-content a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
}
.sidebar-content ul li:first-child {
background-color: orange;
}
.sidebar-content ul {
width: 100%;
list-style: none;
justify-content: center;
}
.icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul li {
display: flex;
justify-content: center;
align-items: center;
padding: 17px 0;
}
.teste {
display: flex;
flex-direction: column;
height: 100%;
width: calc(100% - 120px);
}
.header {
background-color: #fff;
display: flex;
height: 82px;
justify-content: center;
align-items: center;
color: #495057;
font-weight: 300;
}
.header h1 {
font-weight: 700;
}
.header-content {
padding: 0 10px;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.header-right {
display: flex;
justify-content: center;
align-items: center;
}
.header-right p {
margin-right: 20px;
}
.header-right button {
font-size: 16px;
font-weight: 400;
background-color: #fff;
color: blue;
border: 1px solid blue;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.main-content {
background-color: #F0F2F7;
height: calc(100% - 82px);
width: 100%;
padding: 10px;
}
<!DOCTYPE html>
<html lang="ptBR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles/styles.css" />
<link rel="stylesheet" href="styles/icons/flaticon.css" />
<script src="https://kit.fontawesome.com/5c8fa193c0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="main">
<div class="sidebar">
<div class="sidebar-content">
<ul>
<li><a href="#"><i class="fas fa-mask fa-3x" style="color: white"></i></a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-superman"></i></div>
<p>Heróis</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-joker"></i></div>
<p>Vilões</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-marvel"></i></div>
<p>Marvel</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-dc"></i></div>
<p>DC Comics</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-r2d2"></i></div>
<p>Star Wars</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-question"></i></div>
<p>Dúvidas</p>
</a></li>
</ul>
</div>
</div>
<div class="teste">
<div class="header">
<div class="header-content">
<h1>Página Teste</h1>
<div class="header-right">
<p>New Post</p>
<p>Sign up</p>
<p><button>Login</button></p>
</div>
</div>
</div>
<div class="main-content">
<h1>Teste</h1>
</div>
</div>
</div>
</body>
</html>