What did you find difficult while building the project? That would be position the cards 😙
Do you have any questions about best practices? "Px" or "Rem" any advantage or disadvantage?
Does the codebase looks professional?
to center de container, use flexbox
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
i used min-height because the flex would recoginize as a box and center it
to center the container, you can use flex
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Foi bom e desafiador este exercícios, embora parecendo facil para os mais experientes. Continuarei evoluindo
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
not difficut
put everything inside a container on html, then on css
div.class {
max-width: 350px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
it will be centralized
Feed back
i saw your html code, so i'll try to help you organize the code
well, let's begin...
(based on my opinion) you should've created a div class that would include the container (qrcode and text), it's easier to centralize and set the size
<body>
<div class="container">
</div
</body>
then, create a class named "card", this is where the QRcode and text will stay
<body>
<div class="container">
<div class="card">
</div>
</div
</body>
set the image inside the div "card"
<body>
<div class="container">
<div class="card">
<img>
</div>
</div
</body>
still inside the "card" class, create another class, this class will be for the text, so you can work separately
<body>
<div class="container">
<div class="card">
<img>
<div class="text>
</div>
</div>
</div
</body>
add the text and add a class for the h2, so you can work separately
<body>
<div class="container">
<div class="card">
<img>
<div class="text">
<h2 class="Title">Improve your front-end skills by building projects</h2>
<p>Scan the QR code to visit Front Mentor and take your coding skills to the next level</p>
</div>
</div>
</div>
</body>
Separating some codes within containers can help you work better with specific things
Please review the code, any feedback will be helpful
you should try this on css to align youtr class "qrcode"
on css:
.qrcode {
max-width: 350px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
maybe it will help, I'm not 100% sure, you can try it