I'm new to frontend web coding and I wanted to make a mockup website to speed up my learning process. I wanted to make the sign-in part align in the middle of the page, i found some tutorial using flex-grow so it would scale with size, but this is what I got instead:
[https://i.stack.imgur.com/huHAg.png][1]
What did I do wrong?
(I only posted snippets of code I think would matter not to complicate things)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet"/>
<link href="index.css" rel="stylesheet"/>
<title>ELOHSSA</title>
<header class="secondary">
<section class="sign-in">
<h1 class="sign-in-text">
sign in.
<span class="miss-you">
We missed you already :(
</span>
</h1>
<form class="sign-in-form">
<div class="information">
<label> Username: </label>
<input type="text">
</div>
<div class="information">
<label> Password:</label>
<input type="password">
</div>
<div class="information">
<button type="submit" class="button">
Sign in.
</button>
</div>
</form>
</section>
</header>
.sign-in{
display:flex;
justify-content: space-between;
align-items: center;
flex-grow: 1; **<THE PART WHERE THE PROBLEM ARISES>**
}
.sign-in-text {
display:flex;
align-items: left;
flex-direction: column;
font-size: 3.5em;
font-weight: bold;
margin: 0;
padding: 0;
}
.not-sign-in-text {
font-size: 2rem;
padding: 0;
margin: 0;
}
.miss-you {
font-size: 1.5rem;
font-weight: 500;
}
.sign-in-form {
display:flex;
align-items: left;
flex-direction: column;
}
Thanks for helping!
![https://i.stack.imgur.com/huHAg.png][1]](https://i.stack.imgur.com/huHAg.png][1]){kind=link}
Aucun commentaire:
Enregistrer un commentaire