I am a novice looking to delve into the world of programming. Currently, I am immersing myself in learning HTML and CSS while embarking on my inaugural project. The task at hand involves creating a simple homepage for a local game store with the objective of honing my foundational skills and applying everything I have learned thus far.
The current challenge I am encountering pertains to the positioning of the <h1>Trabalhamos com as seguintes plataformas:</h1> element on line 35 ABOVE the logos within my list, rather than alongside them. While aware that we typically utilize 'display: flex' for this purpose, the actual outcome puzzles me. In an earlier iteration of this same project sans the aforementioned <h1> title, the logos were actually displayed BELOW the lorem ipsum text. Despite attempts to apply 'display: block' specifically to this <h1>, desired results remain elusive. Even after experimenting with a standalone <div> governed by its own rules distinct from the '.container' class, the layout fails to align correctly. Further efforts involving 'flex-direction: column', based on online research, proved fruitless. Being a beginner, uncertainty looms regarding whether or not I am employing the appropriate properties essential for achieving my goal. Any assistance would be deeply appreciated - not just in terms of providing a solution but also offering guidance on how to reach it and highlighting potential mistakes made along the way.
Presented below is the existing HTML and CSS code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
padding: 8px 0;
background-color: black;
color: white;
background-image: url(./midia/banner-cobrinha-games.jpg);
background-repeat: no-repeat;
background-position: center;
}
header nav li {
display: inline;
margin-left: 16px;
font-size: 18px;
}
header nav li a {
color: white;
text-decoration: none;
}
.container {
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
header .container,
section .container {
display: flex;
align-items: center;
justify-content: space-between;
}
#logo {
width: 175px;
}
#fachada {
width: 60%;
margin-right: 24px;
}
.brands img {
height: 30px;
}
.brands li {
display: inline-block;
margin-right: 14px;
margin-bottom: 14px;
}
section .container {
align-items: flex-start;
}
section {
padding: 24px 0;
}
h1 {
display: block;
}<header>
<div class="container">
<img src="./midia/cobrinha-games-logo.png" alt="Logo Cobrinha Games" id="logo">
<nav>
<ul>
<li><a href="#">Sobre a Loja</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
</header>
<section id="sobre">
<div class="container">
<img src="./midia/foto-loja-cobrinha-games.png" alt="Foto da loja Cobrinha Games" id="fachada">
<article>
<h1>Sobre a Loja</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic debitis iusto eum eaque nostrum, possimus, qui pariatur a dolor, quo reiciendis? Aspernatur eveniet illum tenetur quasi vitae fugiat maiores animi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, laudantium iure ullam delectus quasi architecto cumque et corrupti? At voluptatum eligendi laborum sint voluptas molestiae fugiat esse doloribus obcaecati perferendis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti officia dolores repellendus. Sequi voluptates eum, magnam blanditiis, deserunt sunt dolorem cupiditate velit fugiat officia rem? Quia voluptate eum architecto vitae.</p>
</article>
</div>
</section>
<section id="plataformas">
<div class="container">
<h1>Trabalhamos com as seguintes plataformas:</h1>
<ul class="brands">
<li><img src="./midia/psx.svg" alt="Logo Playstation"></li>
<li><img src="./midia/ps2.svg" alt="Logo Playstation 2"></li>
<li><img src="./midia/ps3.svg" alt="Logo Playstation 3"></li>
<li><img src="./midia/ps4.svg" alt="Logo Playstation 4"></li>
<li><img src="./midia/ps5.svg" alt="Logo Playstation 5"></li>
<li><img src="./midia/xbox.svg" alt="Logo Xbox"></li>
<li><img src="./midia/x360.svg" alt="Logo Xbox 360"></li>
<li><img src="./midia/xone.svg" alt="Logo Xbox One"></li>
<li><img src="./midia/xseries.svg" alt="Logo Xbox Series X/S"></li>
<li><img src="./midia/n64.svg" alt="Logo Nintendo 64"></li>
<li><img src="./midia/gamecube.svg" alt="Logo GameCube"></li>
<li><img src="./midia/wii.svg" alt="Logo Nintendo Wii"></li>
<li><img src="./midia/wii-u.svg" alt="Logo Nintendo Wii U"></li>
<li><img src="./midia/switch.png" alt="Logo Nintendo Switch"></li>
<li><img src="./midia/psp.png" alt="Logo Playstation Portable"></li>
<li><img src="./midia/psvita.png" alt="Logo Playstation Vita"></li>
<li><img src="./midia/gba.svg" alt="Logo Game Boy Advance"></li>
<li><img src="./midia/nds.svg" alt="Logo Nintendo DS"></li>
<li><img src="./midia/3ds.svg" alt="Logo Nintendo 3DS"></li>
</ul>
</div>
</section>For access to the repository containing this particular project, kindly refer to the following link: https://github.com/rodriguesraph/curso_ebac_frontend/tree/projeto_1