@eremitaito
@Shunlexxi
Submitted
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?
@eremitaito
Posted
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
@Lea225
Submitted
@eremitaito
Posted
to center the container, you can use flex
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Marked as helpful
@NgunzaFrancisco
Submitted
Foi bom e desafiador este exercícios, embora parecendo facil para os mais experientes. Continuarei evoluindo
@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
@DiyorbekAkbarov
Submitted
not difficut
@eremitaito
Posted
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
@Esmatnajafi
Submitted
Feed back
@eremitaito
Posted
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
@junaid-147
Submitted
Please review the code, any feedback will be helpful
@eremitaito
Posted
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
Marked as helpful