Eu estou criando um site para a venda de ebooks porem um erro me barrou
Os produtos estão ficando assim e não assim: (versão antiga do site)
Alguem pode me ajudar?
codigo atual com problema
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mika E-books</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icon.ico" type="image/x-icon">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn"><i class="fa fa-bars">☰</i></label>
<label class="logo">Mika E-Books</label>
<ul>
<li><a class="hr" href="#saude-mental">Saúde Mental</a></li>
<li><a class="kiwify" href="https://dashboard.kiwify.com.br/">Dashboard</a></li>
</ul>
</nav>
<main>
<h2>Saúde Mental</h2>
<section class="container">
<article class="category" id="saude-mental">
<div class="product"><a href="produtos/7passos.html">
<img src="produtos/imagens/FortaleçaSeuAutocontrole.png" alt="Livro de Saúde Mental"><h3>Fortaleça seu Autocontrole</h3><p>Preço: R$20,00</p>
</a></div>
<div class="product"><a href="produtos/7passos.html">
<img src="produtos/imagens/FortaleçaSeuAutocontrole.png" alt="Livro de Saúde Mental"><h3>Fortaleça seu Autocontrole</h3><p>Preço: R$20,00</p>
</a></div>
<div class="product"><a href="produtos/7passos.html">
<img src="produtos/imagens/FortaleçaSeuAutocontrole.png" alt="Livro de Saúde Mental"><h3>Fortaleça seu Autocontrole</h3><p>Preço: R$20,00</p>
</a></div>
<!-- Adicione mais produtos aqui -->
</article>
</section>
<footer>
<h3>Mika E-books © 2023</h3>
<h4>Contato: Email@gmail.com</h4>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>
:root {
/* Colores principales */
--color-background: #313030;
--color-text: #ffffff;
--color-accent: #ff6600;
/* Colores adicionales */
--color-primary-dark: #1e1e1e;
--color-secondary-dark: #2c2c2c;
--color-border: #444444;
/* Otros colores según sea necesario */
--color-link: #007bff;
--color-link-hover: #0056b3;
--color-error: #ff3333;
--color-success: #00cc66;
--cor-botao-kiwify: #07c026;
--cor-botao-kiwify-hover: #076e18;
}
body {
/* Estilos gerais do body */
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--color-background);
color: var(--color-text);
}
/* Estilos do footer */
footer {
background-color: var(--color-background);
color: #fff;
padding: 10px;
}
/* Estilos dos títulos h3 e h4 */
h3, h4 {
display: inline;
padding: 10px;
font-size: 12px;
}
h3 {
float: left;
}
h4 {
float: right;
}
/* Estilos da navegação */
nav {
background-color: var(--color-secondary-dark);
height: 80px;
width: 100%;
}
label.logo{
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 80px;
padding: 0 100px;
}
nav ul {
float: right;
margin-right: 20px;
padding: 0;
}
nav ul li {
display: inline-block;
line-height: 25px;
margin: 0 5px;
}
#check{
display: none;
}
.checkbtn{
font: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
@media (max-width: 952px){
label.log{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background-color: var(--color-secondary-dark);
top: 80px;
left: -100%;
transition: all 0.5s;
text-align: center;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
}
#check:checked ~ ul{
left: 0;
}
}
/* Estilos dos botões */
.button, .hr, .kiwify {
display: inline-block;
padding: 8px 16px;
text-decoration: none;
border-radius: 4px;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
cursor: pointer;
}
.hr {
background-color: #40444b;
color: #fff;
}
.hr:hover {
background-color: var(--cor-destaque);
}
.kiwify {
background-color: var(--cor-botao-kiwify);
color: #fff;
}
.kiwify:hover {
background-color: var(--cor-botao-kiwify-hover);
}
/* Estilos do container */
.container {
overflow-x: auto;
display: flex; /* Adiciona o display flex para que os produtos fiquem lado a lado */
flex-wrap: wrap; /* Permite que os produtos quebrem para a próxima linha quando necessário */
justify-content: space-between; /* Distribui os produtos com espaçamento igual entre eles */
}
.category a {
color: var(--color-text);
}
h2{
text-align: center;
margin-top: 20px;
}
.category {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 10px;
background-color: var(--color-primary-dark);
padding: 10px;
box-shadow: 0 2px 4px var(--cor-destaque);
}
.product {
flex: 0 0 calc(25% - 20px); /* Cada produto ocupará 25% da largura com um espaçamento de 20 pixels */
border-radius: 10px;
background-color: var(--color-secondary-dark);
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: left;
margin-bottom: 20px; /* Adiciona espaçamento entre as linhas */
}
@media (max-width: 500px) {
.product {
flex: 0 0 calc(50% - 20px); /* Quando a tela for menor, cada produto ocupará 50% da largura */
}
}
.product img,
.product h3,
.product p {
margin: 0;
}
.product:hover {
background-color: var(--color-secondary-dark);
transform: scale(1.1);
}
.product h3, .product p{
font-size: 100%;
}
.product img {
width: 200px;
height: 300px;
border: 1px solid #ccc;
}
/* Estilos da scrollbar */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #202225;
}
::-webkit-scrollbar-thumb {
background-color: #888;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* Estilos do texto */
.texting {
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-right: 10px;
text-align: center;
font-size: 22px;
}