@eremitaito
Posted
Olá! Para facilitar algumas coisas, dentro do seu .css, no estilo.css, em vez de você criar um outro file para o reset, dentro do próprio estilo.css você faz isso
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
o * aplicará no código inteiro o reset!
para centralizar o card inteiro no centro da tela, coloque o "main", dentro de uma div (pode ser qualquer nome, eu vou usar "container")
<body>
<main class="content">
<!-- -->
<section class="content__s1 ">
<img src="images/illustration-hero.svg">
</section>
<!-- -->
<section class="content__s2 seccao">
<h1>Order Summary</h1>
<p>
You can now listen to millions of songs, audiobooks and podcasts
on any device anywhere you like!
</p>
</section>
<!-- -->
<section class="content__s3 seccao">
<article>
<img src="images/icon-music.svg">
<div>
<h2>Annual Plan</h2>
<p>$59,99/year</p>
</div>
</article>
<a href="#">Change</a>
</section>
<!-- -->
<section class="content__s4 seccao">
<button type="submit" >Procced to Payment</button>
<a href="#">Cancel order</a>
</section>
</main>
</body>
ficando desse jeito
<body>
<div class="container">
<main class="content">
<!-- -->
<section class="content__s1 ">
<img src="images/illustration-hero.svg">
</section>
<!-- -->
<section class="content__s2 seccao">
<h1>Order Summary</h1>
<p>
You can now listen to millions of songs, audiobooks and podcasts
on any device anywhere you like!
</p>
</section>
<!-- -->
<section class="content__s3 seccao">
<article>
<img src="images/icon-music.svg">
<div>
<h2>Annual Plan</h2>
<p>$59,99/year</p>
</div>
</article>
<a href="#">Change</a>
</section>
<!-- -->
<section class="content__s4 seccao">
<button type="submit" >Procced to Payment</button>
<a href="#">Cancel order</a>
</section>
</main>
</div>
</body>
assim, o css compreenderá que o "main" é um só, então no seu file "estilo.css", faça isso
.container {
max-width: 350px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
o responsável por centralizar, será o flex, align-items e justify-content.
espero que isso te ajude, se não funcionar, pode entrar em contato comigo que eu vou tentar te ajudar, qualquer coisa eu refaço o código parte por parte
Marked as helpful
@NgunzaFrancisco
Posted
@eremitaito Obrigado. Vou levar em conta daqui pra frente
