Can't believe I'm only just starting to use flexbox, seems cool but I'm stuck. I could be just be over thinking things but I understand flexbox is supposed to make things easier.
I want to display a full page hero image with a header, slogan and contact button, pretty simple right?
I have attached an image of what I want:
Basically, I want to centre the heading and slogan text in the centre for this I use:
justify-content:center;
Then I want the button to be in the center of the remaining 50%. I have added the green image on the side to help show the positions I want.
I tried using:
justify-space-around;
but that seems to push the heading text up.
Here's my current code:
* {
margin:0;
padding:0;
}
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.website-container {
display: grid;
grid-gap: 0rem;
grid-template-columns: repeat(1fr ) ;
}
.website-container > * {
display: flex;
height: 100vh;
}
h1 {
font-weight: 600;
font-size: 4vw;
}
.header {
display:flex;
justify-content: center;
align-items: center;
text-align:center;
flex-direction: column;
}
button {
--padding: 1.1em;
color: black;
font: inherit;
background: none;
padding: 1rem calc(1rem * 2);
border: 2px solid black;
border-radius: 2px;
}
button:hover {
color: black;
background: red;
}<div class="website-container">
<header class="header">
<div class="container-fluid">
<div class="space"></div>
<div class="title">
<h1>Heading text here</h1>
<h2>Slogan text here</h2>
</div>
<div class="calltoaction">
<button type="submit" style="--primary-button">button</button>
</div>
</div>
</header>
</div>If I've missed anything, please let me know and I'll add more to the post.