I'm practicing CSS/flexbox reproducing the login page of instagram but i'm facing a issue with horizontal alignment that i can't figure out what's wrong.
There's two major containers inside one big wrapper ("instagram-wraper" - each one get 50% of the width of that wraper).
- Container 1 (left): "cellphone-img" that contain only a cellphone img
- Container 2 (right): "account-info-container" that contain all the login inputs, subscribe, and so on.
The image on the left side work as intended, but what i'm trying to do is to align all the content in the account-info-container to the left with justify-content, essentially putting the image and the login containers side by side, but it doesn't work. What am i missing? (bet it's something simple...)
Thanks in advance.
PS: I didn't work on the responsiveness yet.
/* General settings */
* {
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto";
}
body {
width: 100%;
min-height: 100vh;
background-color: rgb(243, 243, 243);
font-size: 14px;
}
.flex-container {
display: flex;
/* max-width: 1200px; */
margin: auto;
width: 100%;
}
/* Wrapper img + wrapper login */
.instagram-wrapper {
align-items: center;
width: 60%;
height: 85vh;
}
/* Cellphone img container */
.cellphone-img {
display: flex;
align-items: center;
justify-content: flex-end;
width: 50%;
/* margin-left: 150px; */
}
.cellphone-img img {
height: 630px;
width: auto;
}
/* Login + subscribe + ap-downloads */
.account-info-container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-start;
width: 50%;
/* margin-right: 150px; */
}
/* Login wrapper */
.login-container {
flex-direction: column;
height: 420px;
width: 70%;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
background-color: #fff;
}
.insta-logo {
width: 100%;
display: flex;
justify-content: center;
padding-top: 55px;
padding-bottom: 35px;
}
/* Login inputs container */
.login {
align-items: center;
flex-direction: column;
}
.login input {
width: 85%;
height: 36px;
background-color: rgba(var(--b3f, 250, 250, 250), 1);
border: 1px solid rgba(var(--ca6, 219, 219, 219), 1);
border-radius: 3px;
font-size: 13px;
padding-left: 8px;
}
.input-login {
margin-bottom: 10px;
}
.input-password {
margin-bottom: 20px;
}
.login-btn {
width: 85%;
background-color: rgba(var(--d69, 0, 149, 246), 1);
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
font-size: 14px;
padding: 5px 9px;
cursor: pointer;
font-weight: 600;
box-sizing: border-box;
}
.or-ruler {
width: 85%;
color: rgba(var(--f52, 142, 142, 142), 1);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
margin-top: 20px;
}
.or-ruler::before {
content: "";
width: 120px;
height: 1px;
background-color: rgba(var(--ca6, 219, 219, 219), 1);
}
.or-ruler::after {
content: "";
width: 120px;
height: 1px;
background-color: rgba(var(--ca6, 219, 219, 219), 1);
}
.facebook-login-btn {
width: 85%;
color: #385185;
background-color: transparent;
border: none;
cursor: pointer;
margin: 30px auto;
display: flex;
justify-content: center;
}
.facebook-login-btn img {
width: 17px;
height: auto;
margin-right: 5px;
}
.forget-pass-link {
font-size: 12px;
cursor: pointer;
padding-bottom: 40px;
color: #00376b;
}
/* Subscribe container */
.subscribe {
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
background-color: #fff;
height: 70px;
width: 70%;
margin-top: 10px;
margin-bottom: 30px;
}
.subscribe p a {
font-weight: 600;
color: rgba(var(--d69, 0, 149, 246), 1);
}
/* Apps download wrapper */
.app-download {
align-items: center;
flex-direction: column;
width: 70%;
}
.app-imgs {
display: flex;
width: 100%;
justify-content: space-around;
}
.app-imgs img {
width: 170px;
height: auto;
padding-top: 30px;
}
/* Footer */
.footer-section {
max-width: 60%;
height: 100px;
margin: auto;
margin-bottom: 200px;
}
footer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
footer div {
margin: 8px auto;
}
footer a {
margin: auto 10px;
color: rgba(var(--f52, 142, 142, 142), 1);
text-decoration: none;
}<div class="instagram-wrapper flex-container">
<div class="cellphone-img">
<img src="./images/instagram-celular2.png" alt="instagram cellphone" />
</div>
<div class="account-info-container">
<div class="login-container flex-container">
<div class="insta-logo">
<img src="./images/instagram-logo.png" alt="instagram-logo" />
</div>
<div class="login flex-container">
<input class="input-login" type="text" placeholder="Telefone, nome do usuário ou email" />
<input class="input-password" type="text" placeholder="Senha" />
<button class="login-btn">Entrar</button>
<div class="or-ruler">
<span> OU <span>
</div>
<button class="facebook-login-btn">
<span><img src="./images/fb-icon.png" alt="" /></span>
<span>Entrar com o Facebook</span>
</button>
<a class="forget-pass-link" href="">Esqueceu a senha?</a>
</div>
</div>
<div class="subscribe flex-container">
<p>Não tem uma conta? <a href="">Cadastre-se</a></p>
</div>
<div class="app-download flex-container">
<p>Obtenha o aplicativo.</p>
<div class="app-imgs">
<a href="#"><img src="./images/apple-button.png" alt="appstore-img" /></a>
<a href="#"><img src="./images/googleplay-button.png" alt="googleplay-img" /></a>
</div>
</div>
</div>
</div>
<section class="footer-section">
<footer>
<div>
<a href="">Meta</a>
<a href="">About</a>
<a href="">Blog</a>
<a href="">Jobs</a>
<a href="">Help</a>
<a href="">API</a>
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Top Accounts</a>
<a href="">Hashtags</a>
<a href="">Locations</a>
<a href="">Instagram Lite</a>
<a href=""> Contact Uploading & Non-Users</a>
</div>
<div>
<a href="">Dance</a>
<a href="">Food & Drink</a>
<a href="">Home & Garden</a>
<a href="">Music</a>
<a href="">Visual Arts</a>
</div>
<div>
<a href="">English</a>
<a href="">© 2022 Instagram from Meta</a>
</div>
</footer>
</section>
