Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/gabrielBehling/LojaMonstro
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabrielBehling
gabrielBehling committed Nov 13, 2024
2 parents 7ff5d7f + a245def commit 0d44fd6
Show file tree
Hide file tree
Showing 2 changed files with 345 additions and 0 deletions.
105 changes: 105 additions & 0 deletions css/more-posts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
.container {
display: flex;
flex-direction: column;
gap: 20px;
}

.hero {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}

.hero img {
width: 100%;
height: auto;
}

.posts {
display: flex;
gap: 20px;
}

.post {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.3s ease, opacity 0.3s ease; /* Adiciona transição */
}

.post:hover {
transform: scale(1.05); /* Aumenta a escala do post ao passar o mouse */
opacity: 0.9; /* Diminui a opacidade ao passar o mouse */
}

.image-section {
text-align: center;
transition: transform 0.3s ease, opacity 0.3s ease; /* Adiciona transição */
}

.image-section:hover {
transform: scale(1.05); /* Aumenta a escala da imagem ao passar o mouse */
opacity: 0.9; /* Diminui a opacidade ao passar o mouse */
}

.image-section img {
width: 100%;
height: auto;
}

.post-list {
list-style: none;
padding: 0;
}

.post-item {
display: flex;
gap: 10px;
margin-bottom: 20px;
transition: transform 0.3s ease, opacity 0.3s ease; /* Adiciona transição */
}

.post-item:hover {
transform: scale(
1.02
); /* Aumenta a escala do item da lista ao passar o mouse */
opacity: 0.9; /* Diminui a opacidade ao passar o mouse */
}

.post-item img {
width: 100px; /* Ajuste conforme necessário */
height: 100px; /* Ajuste conforme necessário */
}

.post-info {
display: flex;
flex-direction: column;
justify-content: center;
}

@media (max-width: 768px) {
.posts {
display: none; /* Esconde os posts laterais em telas menores */
}

.hero {
width: 100%; /* O post grande ocupa toda a largura */
}

.image-section {
display: flex;
flex-direction: column;
align-items: center;
}

.post-list {
display: flex;
flex-direction: column; /* Muda a lista para coluna */
}

.post-item {
flex-direction: row-reverse; /* Inverte a ordem da imagem e do texto */
}
}
240 changes: 240 additions & 0 deletions pages/more-posts.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monsters Antique | Postagens</title>
<meta name="description" content="Encontre nossas postagens mais recentes! Aprenda com a Ordem">
<link rel="stylesheet" href="../css/default-style.css" />
<link rel="stylesheet" href="../css/more-posts.css" />
<script type="module" src="../js/default-script.js" defer></script>
<link
rel="apple-touch-icon"
sizes="57x57"
href="../img/icon/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="../img/icon/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="../img/icon/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="../img/icon/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="../img/icon/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="../img/icon/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="../img/icon/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="../img/icon/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="../img/icon/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="../img/icon/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../img/icon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="../img/icon/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="../img/icon/favicon-16x16.png"
/>
<link rel="manifest" href="../manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="../img/icon/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<header class="page-header">
<header>
<a href="../index.html">
<img
src="../img/logo/logo-inverted-nobg.png"
alt="Logo da Monsters Antique"
/>
<h1 id="title">Monsters Antique</h1>
</a>
</header>
<aside class="profile__hamburger">
<a
href="./login.html"
target="_parent"
class="profile"
aria-label="Perfil"
>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIJzvwGX_2AoP6sVrqOl4h3CHNrLOGj6ExpjvxfYZnILimKkCckX6mBsa-cfFlRt47Mrs&usqp=CAU"
alt="Ícone do perfil"
class="profile-icon"
/>
</a>
<button class="hamburger-menu" id="hamburger-menu" aria-label="Menu">
<i class="bx bx-menu"></i>
</button>
</aside>
</header>

<nav class="sub-navigation" aria-label="Navegação principal">
<ul>
<li class="profile-link__li">
<a
href="./login.html"
target="_parent"
class="profile-link"
aria-label="Perfil"
>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIJzvwGX_2AoP6sVrqOl4h3CHNrLOGj6ExpjvxfYZnILimKkCckX6mBsa-cfFlRt47Mrs&usqp=CAU"
alt="Ícone do perfil"
class="profile-link__icon"
/>
<span class="profile-link__span">Faça login!</span>
</a>
</li>
<li class="post-creation__link">
<a href="./post-creation.html" target="_parent">Criar postagem!</a>
</li>
<li><a href="../index.html" target="_parent">Produtos</a></li>
<li>
<a href="./about.html" class="in-page-link">Sobre Nós</a>
</li>
<li>
<a href="./charity.html" target="_parent">Caridade</a>
</li>
<li><a href="#" class="in-page-link">Postagens</a></li>
</ul>
</nav>

<div class="container">
<div class="hero">
<h1>Título do Post Grande</h1>
<p>Subtítulo do Post Grande</p>
<img src="imagem-grande.jpg" alt="Imagem do Post Grande" />
</div>
<div class="posts">
<div class="post">
<img src="imagem-pequena1.jpg" alt="Imagem do Post Pequeno 1" />
<h2>Título do Post Pequeno 1</h2>
<p>Subtítulo do Post Pequeno 1</p>
</div>
<div class="post">
<img src="imagem-pequena2.jpg" alt="Imagem do Post Pequeno 2" />
<h2>Título do Post Pequeno 2</h2>
<p>Subtítulo do Post Pequeno 2</p>
</div>
</div>
<div class="image-section">
<img src="imagem-quadrada.jpg" alt="Imagem Quadrada" />
<h2>Título da Imagem</h2>
<p>Subtítulo da Imagem</p>
</div>
<ul class="post-list">
<li class="post-item">
<img src="imagem-lista1.jpg" alt="Imagem da Lista 1" />
<div class="post-info">
<h3>Título da Lista 1</h3>
<p>Subtítulo da Lista 1</p>
<span>Horário: 12:00</span>
<span>Autor: Autor 1</span>
</div>
</li>
<li class="post-item">
<img src="imagem-lista2.jpg" alt="Imagem da Lista 2" />
<div class="post-info">
<h3>Título da Lista 2</h3>
<p>Subtítulo da Lista 2</p>
<span>Horário: 12:30</span>
<span>Autor: Autor 2</span>
</div>
</li>
<!-- Adicione mais itens conforme necessário -->
</ul>
</div>

<footer class="page-footer">
<header class="page-footer__header">
<h1 class="page-footer__title">Conheça nosso trabalho <3</h1>
<h3 class="page-footer__subtitle">Feito por:</h3>
</header>
<main class="page-footer__main">
<a
href="https://github.com/gabrielBehling"
aria-label="Perfil do GitHub de Gabriel Behling"
>
<img
src="https://avatars.githubusercontent.com/u/102189169?v=4"
alt="Avatar de Gabriel Behling"
class="github-icon"
/>
<div class="page-footer__data">
<p class="page-footer__link-title">Gabriel</p>
<p class="page-footer__link-description">Back-end</p>
</div>
</a>
<a
href="https://github.com/tyxiel"
aria-label="Perfil do GitHub de Tyxiel"
>
<img
src="https://avatars.githubusercontent.com/u/128870773?v=4"
alt="Avatar de Tyxiel"
class="github-icon"
/>
<div class="page__footer__data">
<p class="page-footer__link-title">Tyxiel</p>
<p class="page-footer__link-description">Front-end</p>
</div>
</a>
</main>
<aside class="page-footer__rights">
&copy; 2024 Monsters Antique. Todos os direitos reservados. Imagens
meramente ilustrativas.
</aside>
</footer>
</body>
</html>

0 comments on commit 0d44fd6

Please sign in to comment.